How to append a along with other data returned from another page when using Jquery ajax?

Question

I'm loading a reCaptcha using ajax. One of the lines in there from what gets returned from the other pages is the line below, and that line wont get loaded into my div when I use $(.cap).html(callBack);

This is the line

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>

Is this something that jQuery disallows? Or am I doing something wrong? How can I solve this? How can I get jquery returned from another page, into my <div>?

What I'm testing with, is simple:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Tile</title>

<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script>

<style type="text/css">
.user {
    cursor: pointer;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    //$(".user").live("click",function() {
    $(".user").click(function() {

        data = "id=Hello"

        $.ajax({
              type:"GET",
               url:"demo.php",
              data:data,
          dataType:"html",

        beforeSend:function(html){

        },

        success: function(callBack){
            $(".cap").html(callBack);

            console.log(callBack);
        },

        error: function(page_data){

        },

        });

    });
});
</script>
</head>
<body>

<div id="container">

<div class="cap">Hello</div>

<span class="user">Add User</span>
</div>

</body>
</html>

This is the line returned from the other page that wont get loaded into the div.

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>

The entire data returned

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n"></script>

    <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n" height="300" width="500" frameborder="0"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>

@Riturajratan Even with that the line I mentioned above does not append. — Norman, Nov 22 '13 at 07:03
This is not possible the way you are trying.. There is a possible solution however, check out this previous post: http://stackoverflow.com/questions/610995/cant-append-script-element — Tsasken, Nov 22 '13 at 07:33
@Tsasken Have you any idea how to add a and other content after using the solution on this page? The entire thing is in the edit in my question. — Norman, Nov 22 '13 at 07:54

score 5 · Accepted Answer · answered Nov 22 '13 at 08:57

It is not possible to return "script" tags, even in a string format. This is because of the way javascript works. You could however let your demo.php script return json. You should look that up yourself, but I don't believe there is another way to do this easily. (well, worse practice, you could just return a string and parse the values out of it but ...). Anyway, if you assume you return a json object in the following format, you could just copy paste the rest in your success function and alter the object name to 'callback' ...

var json = {
    type: "text/javascript",
    scriptSrc: "http://www.google.com/recaptcha/api/challenge?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n",
    id: "theFrame",
    iframeSrc: 'http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n'
};

var script = document.createElement('script');
script.type = json.type;
script.src = json.scriptSrc;

$('<iframe>', {
   src: json.iframeSrc,
   id:  json.id,
   frameborder: 0,
    height: 300,
    width: 500
   }).appendTo('.cap');

jsFiddle: http://jsfiddle.net/vT3Ug/1/

score 1 · Answer 2 · answered Nov 29 '13 at 18:40

It actually is possible to render javascript tags. e.g. html5 boilertemplate uses it to see if it should load jQuery local or from CDN.

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

As you can see if you inject script tags you need to escape the closing script tag <\/script>.

On the other hand, you can't do this

<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcXq-oSAAAAAOgwSIew_xq6xkv1QUxrZbRcMz6n" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>

simply because you do not own the iframe source, your iframe won't get rendered.

But you could do something like this:

callBack = callBack.replace('</script','<\/script')
                   .replace('<noscript>','')
                   .replace('</noscript>','');

$('body').append(callback);

How to append a along with other data returned from another page when using Jquery ajax?

2 Answers2