Question

The jQuery code below works such that on clicking a link (class address), it slides down a box, and prints all text from the details.php file in the #msg div. However, I want to display only one div (#address), present in the details.php. How can this be done? thanks.

$(document).ready(function() {
        $('a.address').click(function() {
            $('#box).slideDown("slow");               
            $.ajax({
            type: "POST",
              url: "details.php",
              success: function(html){
                $("#msg").html(html);
                } 
            });

        });
    });

Answer 1

Create a jQuery object out of the returned data and apply a selector to it:

$(document).ready(function() {
        $('a.address').click(function() {
            $('#box').slideDown("slow");               
            $.ajax({
            type: "POST",
              url: "details.php",
              success: function(html){
                $("#msg").html($(html).find('#address').html());
                } 
            });

        });
    });

Also, note that this would probably be a good candidate to use .one('click', function() {}) since you probably don’t want to load the address every time it is clicked, but rather just the first time.