building dynamically created Clickable Divs JQuery Ajax

Question

I need some jQuery ajax help. I currently have a main content div that is populated by an ajax call to a XML file. The XML file is generated from a db resultset. This is all working fine. The ajax call is fired by a button click but I wish to change that.

I have another div which I have populated with a list of titles. What I wish to happen is when a title is clicked the main content div should be updated with data related to that title. I was wondering what would be the best way to do this. Should I create a clickable div that makes an ajax call? and if so how do I distinguish which div has been clicked in the code for the main content div. I hope this makes sense...... here is my code for the populated list

$(document).ready(function() {
    $("#getData").click(function() {
        var $title = "";
        $.get("phpAjaxMovieListingTotal.php", function(theXML) {
            $('row',theXML).each(function(i) {
                $title = $(this).find("Title").text();
            });
            $("#movieListingContentDiv").html($title);
        });
    });
});

So are you trying to update the title, or get more information from the xml document? — Jess
– Jess, Commented Mar 27, 2011 at 18:39
Sorry mazzzz. Neither. I am currently calling the ajax function that populates the main content div by a button click (#getData.) I wish to change that to some clickable divs. My issue is how do I determine which div was clicked so that the proper call can be made to the db and subsequently used to populate the main content div. — RonanC
– RonanC, Commented Mar 27, 2011 at 18:48
So you want to be able to click a blank div, and get that information from an xml file? — Jess
– Jess, Commented Mar 27, 2011 at 18:55
I need to create clickable divs from the list of titles returned. I guess I should walk before I run...... — RonanC
– RonanC, Commented Mar 27, 2011 at 19:01

Jess · Accepted Answer · 2011-03-27 20:29:16Z

1

Alright, for a list of clickable divs, loaded from the xml, look at the demo. The Demo

Here is the code:

function movieTitle_Clicked (title)
{
    alert("Movie title '"+title+"' clicked");
}
function GetMovies ()
{
    $.post("THEXML.php", function(data){

        $('row title',data).each(function(i){
            var title = $(this).text();
            $('#container').append('<div onClick="javascript:movieTitle_Clicked(\''+title+'\')">'+title+'</div>');
        });
    }, 'xml');
}
$(document).ready(function() {
      GetMovies();
});

edited Mar 27, 2011 at 20:29

answered Mar 27, 2011 at 19:18

Jess

8,7306 gold badges51 silver badges68 bronze badges

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

2 Comments

RonanC Over a year ago

I will give it a lash during the day and let you know how it goes. Thanks again for all your help and more importantly your great level of patience.

RonanC Over a year ago

That was just perfect. Thanks for all your help, at the end of this hopefully I will be able to help someone in return. Legend and a half....

Collectives™ on Stack Overflow

building dynamically created Clickable Divs JQuery Ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related