How to append javascript block in a string into html?

Question

I have an ajax call which returns me following response:

<div class="content">
    <script language="JavaScript">  
        function validate(){
            alert('validate is working');
        }
    </script>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

Now, i want to convert the response into html and append it to the page, which made the ajax call.

$.get('test.php', function(data) {
    $('#someTarget').append($(data).find('.content').html());
});

I have tried above code, but it seems this only append container div. Is there a way to append javascript code block into my existing page?

What you have should work given the correct selector, you missed the . in .find('.content'). How are you confirming that the script isn't being executed? — user400654
– user400654, Commented Nov 14, 2012 at 15:05
hey @KevinB, i've just misspelled .content here - i fixed it. I assume script is not executed as i can't see validate function in DOM - and there is no alert when i click 'my button'. — halilb
– halilb, Commented Nov 14, 2012 at 18:26

metadings · Accepted Answer · 2012-11-14 15:59:18Z

1

In your code are two problems:

$('#someTarget').append($(data).find('content').html());

$(data) does parse and execute your script, before you inserted it into DOM
assuming you meant $(data).find('.content').html() the html() returns the innerHTML of content, you only need $(data).

Try this:

<div class="content">
    <style type="text/javascript">  
        function validate(){
            alert('validate is working');
        }
    </style>
    <div class="container">
        <a href="#" onclick="javascript:validate();">my button</a>
    </div>
</div>

Now there is a trick: I'm using <style> to wrap scripts, that should be executed after interpreting and inserting into DOM.

$.get('test.php', function(data) {

    // parse HTML to DOM
    var $data = $(data);

    // take the scripts out
    var $inlineScripts = $('style[type="text/javascript"]', $data).remove();

    // Now append the DOM
    $('#someTarget').append($data);

    // And globalEval the scripts
    $inlineScripts.each(function () {
        $.globalEval(this.innerText);
    });
});

Okay for your simple validate function that gets called by a click handler, you currently don't need my trick for inline scripts, however you will need it, when you have active scripts, that should be executed after the HTML is parsed and inserted.

Update: If you don't want the '.content' to be inserted, don't use html() - because it returns a string, so you do parse the html twice. Use instead .append( $(".container", $(data)) ) or .append( $(data).find(".container") ).

edited Nov 14, 2012 at 15:59

answered Nov 14, 2012 at 15:41

metadings

3,8482 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

halilb Over a year ago

Thanks for your answer. I'll try your suggestions - globalEval might be the thing i'm looking for. I'll let you know.

metadings Over a year ago

beware that $(data) parses and evaluates inline scripts. that is why i'm wrapping it into style and then do globalEval.

Collectives™ on Stack Overflow

How to append javascript block in a string into html?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related