Changing dynamically created div contents using jQuery

Question

I'm getting pretty frustrated here.

I have a table of records. Next to each record will be a button. On clicking the button next to that record, a jquery AJAX call should be executed.

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
    $("#myDiv").html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#myDiv").html(data).show();
    });
}
//-->
</script>

The associated HTML:

<div id="myDiv" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('do_stuff');"><img src='images/icon.png' border='0'></a></div>

When I click on the HTML link, the contents of the div "myDiv" are changed out for the output of the ajax call to process.php. This is all well and good, but I will have dozens of these divs, and I need to be able to call the swapContent function with not only the parameter cv, but also pass in a parameter for which div should have its contents altered.

I believe my error is just based on an ignorance of JS syntax. For instance, I've done this:

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(thediv,cv) {
    $(thediv).html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(thediv).html(data).show();
    });
}
//-->
</script>

but I'm not sure if that is then treating the variable thediv as a string when it should be an object or what might be the problem.

I would appreciate any help you might give!

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div1','do_stuff');"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div2','do_stuff');"><img src='images/icon.png' border='0'></a></div>

Imdad · Accepted Answer · 2012-05-14 06:09:52Z

3

As you are passing the id of the div to the function so, in place of $(thediv) -> $("#"+thediv) will work

answered May 14, 2012 at 6:09

Imdad

6,0424 gold badges37 silver badges53 bronze badges

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

3 Comments

Bruce the Hoon Over a year ago

"arrrrrrrrrrgh" Don't you hate it when it's a silly syntax error? I've had a really tough time debugging this. I've just been using the Firefox Webdeveloper toolbar's Error Console. Is there a better way? For instance, I wasn't given a "div not found" error or somesuch to point me in the right direction. Anyhow, thanks!!

nnnnnn Over a year ago

@Bruce - The way jQuery works, the $(someselector) function will return a jQuery object containing the zero or more elements that matched someselector, so there isn't really an applicable concept of a "div not found" error. (Though you can test how many elements matched, because the resulting object has a .length property.)

Imdad Over a year ago

@Bruce, Install FireBug plugin in FF and then FireQuery plugin. It is a better way to debug jQuery code. I can't say about particular this case but its definitely better tool.

Rakesh Juyal · Accepted Answer · 2012-05-14 06:34:44Z

2

You have already done most of the work :) . Now use this object. http://jsbin.com/evirun/2/edit#source ( create one example to show how can you find out the correct calling div element )

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

Now your script:

<script language="JavaScript" type="text/javascript">
<!--
function swapContent(obj,cv) {
    $(obj).parent().html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(obj).parent().html(data).show();
    });
}
//-->
</script>

this will actually pass the DOM element which is calling the method. Then in your script you are using this element.

EDIT

I missed that anchor tag is inside div . Changed the script to use parent.

edited May 14, 2012 at 6:34

answered May 14, 2012 at 6:16

Rakesh Juyal

37k74 gold badges179 silver badges218 bronze badges

1 Comment

Rakesh Juyal Over a year ago

I would appreciate if you put a comment when going for downvote. That can help me understand the reason of downvoting.

nnnnnn · Accepted Answer · 2012-05-14 06:29:28Z

Don't put the onclick and onmousedown handlers inline. I'd suggest you use (html5) data- attributes to store the value that you're currently putting in the cv parameter:

<div id="div1" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>

...and then bind the clicks with jQuery something like this:

$("a[data-cv]").click(function() {
   var thediv = $(this).parent(),
       cv = $(this).attr("data-cv");

   thediv.html('<div align="center"><img src="images/loader.gif"/></div>');

   var url = "process.php";
   $.post(url, {contentVar: cv} ,function(data) {
      thediv.html(data);
   });

   return false;
});

This code uses the has attribute selector to get all anchor elements that have a data-cv attribute and binds a click handler to those elements. Within the handler, this will be the particular anchor clicked, so given in your markup the associated div element is actually the parent of the anchor you can just use $(this).parent() to get a reference to the right div (for other html structures you could use other DOM traversal methods such as .prev(), or .closest(), etc.).

The return false; at the end of the click handler stops the default anchor click behaviour.

Note also that for your code as currently shown you don't need the .show() method since the divs are already showing.

Ankur Verma · Accepted Answer · 2012-05-14 06:08:14Z

-1

clear the html of your div as before adding new div the like :

$('#myDiv').html('');

answered May 14, 2012 at 6:08

Ankur Verma

5,93316 gold badges62 silver badges95 bronze badges

Collectives™ on Stack Overflow

Changing dynamically created div contents using jQuery

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related