jquery ajax load specific div

Question

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

<div id="now">8</div> <div id="hour">0</div> <div id="day">0</div> — chris3spice
– chris3spice, Commented Feb 1, 2014 at 20:26

ndpu · Accepted Answer · 2014-02-01 20:57:49Z

2

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 );

edited Feb 1, 2014 at 20:57

answered Feb 1, 2014 at 20:28

ndpu

22.6k6 gold badges61 silver badges72 bronze badges

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

2 Comments

ndpu Over a year ago

@chris3spice hm, should work.. according to html that you posted in comment

chris3spice Over a year ago

That did it! Thank you, I was starting to mess around with more .find and others so you saved me a lot of headache with trial and error!

Praveen · Accepted Answer · 2014-02-01 20:37:36Z

0

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>';

edited Feb 1, 2014 at 20:37

answered Feb 1, 2014 at 20:27

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

5 Comments

Praveen Over a year ago

@chris3spice can you share the what is the dataType of data. Then what does #renow, #rehour, #reday elements are?

Praveen Over a year ago

@chris3spice press f12 and check console for errors?

chris3spice Over a year ago

No errors are seen and it should return be returning a plain object or string after looking it up

Praveen Over a year ago

@chris3spice hen what does #renow, #rehour, #reday elements are?

chris3spice Over a year ago

They are div elements <div class="renow" id="renow"></div>

Axel Amthor · Accepted Answer · 2014-02-01 20:40:00Z

0

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

edited Feb 1, 2014 at 20:40

answered Feb 1, 2014 at 20:28

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

1 Comment

Axel Amthor Over a year ago

console log your data and post this over here.

Andrew Webb · Accepted Answer · 2014-02-01 21:07:56Z

0

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)

edited Feb 1, 2014 at 21:07

answered Feb 1, 2014 at 20:30

Andrew Webb

1325 bronze badges

2 Comments

chris3spice Over a year ago

Not sure how the whole nodes thing worked...I tried var nodes = $.parseHTML(data); then put "nodes" in where I had data, and it wouldn't work, not sure that is correct though.

chris3spice Over a year ago

Thanks I'm going to play around with it now!

Collectives™ on Stack Overflow

jquery ajax load specific div

4 Answers 4

2 Comments

Updates:

5 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Updates:

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related