How to execute jquery/javascript code inside a .html() of jquery

Question

Inside jQuery.html(), I want to execute the following script.

$("#row1").html("<td id="cellId"><script>if (selectedStr) {var elem = $(\"#cellId\");       
$(elem).bind(\"onRefresh\", function() {loadColor(selectedStr); storeStr(selectedStr);});$(elem).trigger(\"onRefresh\");) }</script><td>")

Requirement:

I had a testPage.jsp which contains table with cells. When a particular cell is selected and "submit" button is clicked, a popup opens. In the popup page, some data is changed and is processed through ajax. The resultant ajax response has to be dynamically set to the parent row. The ajax response builds the whole content that is to be set.This is where I fail. The Ajax response will be something like this. <td>.....<td> <td>.....<td> <td>content<script>...</script></td> <td>.....<td> <td>content<script>...</script></td> ... Moreover the "selectedStr" is a javascript global variable in testPage.jsp.

Problems: 1. "selectedStr is undefined" is the browser error msg. I couldn't get reference to the global variable. 2. The element binding is not happening.

I tried to make use of jQuery.getScript(), jQuery.globalEval, jQuery.eval. I couldn't understand the {{html}} of JQuery.

Thanks!

i think you should take the if out the sentence, make all the procedures you need and finaly fill #row1 with the desired html code — Toni Michel Caubet
– Toni Michel Caubet, Commented Jan 10, 2012 at 15:58
The quotes in your HTML are escaped incorrectly...."cellId" — Dave L.
– Dave L., Commented Jan 10, 2012 at 16:04

Rory McCrossan · Accepted Answer · 2012-01-10 16:05:49Z

3

Rather than put everything into a script, build your element in memory, then add the event handlers to it before adding to the DOM.

$td = $("<td></td>").attr("id", "cellId")
    .bind("onRefresh", function() {
        if (selectedStr) {
            loadColor(selectedStr);
            storeStr(selectedStr);
        }
    })
    .trigger("onRefresh");

$("#row1").html($td);

Also, be wary of adding multiple td elements with the same Id.

answered Jan 10, 2012 at 16:05

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

chinni Over a year ago

I am building the element data as part of ajax response. After that I am adding it to DOM. So the whole content you see in .html() is build dynamically.

Rory McCrossan Over a year ago

That's fine, just add the code above to your success handler.

kaz · Accepted Answer · 2012-01-10 16:05:24Z

0

You should build html in that way:

var newRow = $('<tr/>').bind('onRefresh',function(){

{code}

});

$("#row1").append(newRow);

or

$("#row1").html(newRow);

but i really don't understand how exactly it should work on your page

answered Jan 10, 2012 at 16:05

kaz

1,9431 gold badge13 silver badges19 bronze badges

1 Comment

chinni Over a year ago

Actually I am binding the event to <td>. so for every <td> I need to bind the event. Based on the "selectedStr" I will decide whether to bind the event or not.

kwelch · Accepted Answer · 2012-01-10 16:06:16Z

0

If you are looking to fill the html based on javascript output you should use a function as the parameter to your jQuery.html(). See below.

$("#row1").html(function (index, oldHTML){
var elem = $(this);
//This is where you could run your if and other functions
//formulate the new html 
//then just return it to set the html
return newHTML;
});

Also, for more examples read the jQuery.html() api

answered Jan 10, 2012 at 16:06

kwelch

2,48923 silver badges23 bronze badges

Comments

Matt H · Accepted Answer · 2012-01-11 01:52:48Z

-1

What I do when I need this is to define a hidden div in the dynamic content:

<div id="afterAjax" style="display:hidden">
if (selectedStr) {
  var elem = ... etc...
</div>

Note that I don't have a <script> tag.

Then, after ajax (or after you've otherwise inserted it into your HTML:

eval($('#afterAjax').html());

Update

Here's a fiddle that shows it working - dunno why someone marked my answer down. :( I use exactly this when I need to do it.

Code in the fiddle is just:

$('body').append('<div id="test">test</div><div id="afterAjax" style="display:none">alert("works");</div>');

eval($("#afterAjax").html());

http://jsfiddle.net/mhart/y22r5/3/

edited Jan 11, 2012 at 1:52

answered Jan 10, 2012 at 15:59

Matt H

6,5502 gold badges32 silver badges34 bronze badges

2 Comments

chinni Over a year ago

Thanks for your reply. But eval() is not working once the ajax response content is added to DOM. Should eval() be used inside <script>? $("#row1").html(ajaxRespContent); eval($("#afterAjax").html()); This is not working

Matt H Over a year ago

Just tried it in a fiddle, works fine. Yes, eval() must be in your script after your load the response. jsfiddle.net/mhart/y22r5/3

Collectives™ on Stack Overflow

How to execute jquery/javascript code inside a .html() of jquery

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related