CODEWITHSUNDEEP
jqueryajax
chris3spice
chris3spice

Reputation: 183

jquery ajax load specific div

I've got one issue I haven't been able to figure out I've tried a couple different things to attempt to alleviate the problem that I found on stackoverflow, but they are not working for me.

This is my ajax code right now

$.ajax({
        type: 'POST',
        url: 'php/getreviews.php',
        data: {},
           success: function(data) {
               alert(data);
               $('#renow').val( $(data).find('#now').val() );
               $('#rehour').val( $(data).find('#hour').val() );
               $('#reday').val( $(data).find('#day').val() );
           }
    });

the getreviews.php page has 3 divs that it returns.. I would just load all three but they are in seperate parts of the page so I'm needing to load a single div from the return to a specific div's

I have also tried these ways

$('#renow').val( $(data).html().find('#now').val() );
$('#renow').html( $(data).find('#now').val() );

I do get the divs printed in the alert so I know it's returning correctly...

UPDATE: If I use $('#renow').html( $(data).html() ); I get the first div element inserted

Upvotes: 1

Views: 3365

Answers (4)

Andrew Webb
Andrew Webb

Reputation: 132

Try changing the .val after the .find() to .html().

Otherwise, from the initial comments, data is containing HTML, but is being treated like a string. You'll need to parse the string into HTML nodes first. This can be done with var nodes = $.parseHTML(data)

http://api.jquery.com/jquery.parsehtml/

EDIT:

Would make your code like this:

success = function(data) {
           var nodes = $.parseHTML("<div>"+data+"</div>");

           $('#renow').html( $(nodes).find('#now').html() );
           $('#rehour').html( $(nodes).find('#hour').html() );
           $('#reday').html( $(nodes).find('#day').html() );
       }

http://jsfiddle.net/ZLmPV/

The problem was that your HTML isn't wrapped in anything, you can only use .find() on a parent node, of which there is none. Thus the "<div>"+data+"</div>" is necessary.

It should also be mentioned that this is a really bad way of passing data from PHP to the client.. you should use JSON. (I made this mistake too when I was just getting started)

Upvotes: 0

ndpu
ndpu

Reputation: 22561

Change find to filter (to query within a dynamically created element) and val to html here: $('#renow').val( $(data).find('#now').val() );:

           $('#renow').html( $(data).filter('#now').html() );
           $('#rehour').html( $(data).filter('#hour').html() );
           $('#reday').html( $(data).filter('#day').html() );

if you want to get whole div with html try this:

           $('#renow').html( $(data).filter('#now').get(0).outerHTML );
           $('#rehour').html( $(data).filter('#hour').get(0).outerHTML );
           $('#reday').html( $(data).filter('#day').get(0).outerHTML );

Upvotes: 2

Axel Amthor
Axel Amthor

Reputation: 11096

If the divs marked with i.e. #renow are <div> tags and not inputs use html() instead of val()

$('#renow').html( $(data).find('#now').html() );

Upvotes: 0

Praveen
Praveen

Reputation: 56509

Since you mentioned, data contains <div>8</div>

$(data).find('#now').val()  // will not work

You can't use val() for div elements, instead use .text()

$(data).find('#now').text()

Updates:

Based on the new data value 

<div id="now">8</div> <div id="hour">0</div> <div id="day">0</div>

Try my below code

$('#renow').html( $($(data)[0]).text() ) );
$('#rehour').html( $($(data)[1]).text() ) );
$('#reday').html( $($(data)[2]).text() ) );

Reason: I suspect that the data is holding the html elements in string data type something like

data = '<div id="now">8</div> <div id="hour">0</div> <div id="day">0</div>';

Upvotes: 0

Related Questions