what's wrong with this jQuery code?

Question

My following code works fine.

$(document).ready(function() {
        $('a.address').click(function() {
            $('#box').slideDown("slow");

            $.ajax({
            type: "POST",
              url: "details.php",
              success: function(html){              
                 $("#msg").html(html);
                } 
            });

        });
    });

However the following does not (only 1 line is changed inside the success:), it loads nothing.. only slidesdown the #box, and #msg inside, however does not load #address.

$(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());
                } 
            });

        });
    });

The details.php is:


<div id="info">some text.</div>
    <div id="address">The address</div>

SLaks · Accepted Answer · 2011-01-28 17:07:09Z

8

When you write $(html), you're creating a jQuery object which holds two <div> elements.

Calling .find(...) on this object searches the descendants of the <div> elements.
Since neither element has any child elements, i will never find anything.

Instead, you can call .filter(), which searches the elements in the set (but not their descendants).

Alternatively, you can wrap the returned HTML in a new <div> tag, then call .find(). Since your elements would then be children of the wrapper <div>, they'll be found by .find().
Unlike .filter(), this will still work if the server is changed to return the <div> you're looking for as a child.

edited Jan 28, 2011 at 17:07

answered Jan 28, 2011 at 17:01

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

jAndy · Accepted Answer · 2011-01-28 17:08:10Z

1

jQuerys .load()^help method allows you to load & insert Page Fragments:

$('a.address').click(function() {
    $('#box').slideDown("slow"); 

    $('#msg').load('details.php #address');
});

That is probably what you want to achieve here.

answered Jan 28, 2011 at 17:08

jAndy

237k57 gold badges313 silver badges363 bronze badges

Collectives™ on Stack Overflow

what's wrong with this jQuery code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related