Update two divs on one ajax request

Question

I want to update two divs with one ajax request only. However following code clears out both the divisions without updating the data. Please have a look at my code:

AJAX Request File

<div class='subtotal_<?php echo $row['productid']; ?>'>
    <p>Subtotal: <?php echo $subtotal; ?></p>
</div>
<div id='totalamount'>
    <p>Totalamount: <?php echo round($total); ?></p>
</div>

var productid = $(this).attr('class');
$.ajax
    ({
        type: "POST",
        url: "ajax_changequantity.php",
        data: {type:type,quantity:quantity,productid:productid},
        success: function(option)
        {
            var html = $(option);
            $('#totalamount').empty();
            $('.subtotal_'+productid).replaceWith(("#subtotal",html));
            $('#totalamount').replaceWith(("#totalamount",html));
        }
    });

Ajax File

<div id='subtotal'>
    <p>Subtotal: <?php echo $subtotal; ?></p>
</div>
<div id='totalamount'>
    <p>Total Amount: <?php echo $totalamount; ?></p>
</div>

Both the divs after successful ajax request get blank. No data coming in. Can anyone help finding the mistake here?

you should probably use `.html()` and not `.replaceWith()`. And also, your current `replaceWith` has wrong syntax usage. — Shaunak D, Jun 22 '14 at 09:46
I've Ajax File code in my question, it's not the same as in my current code, but yes that's how it looks like, php & html code, if you want to have a look at same exact content, I could paste the whole file here — Guy in the chair, Jun 22 '14 at 09:47
Okayh, so can you tell me what's right? Because I got the reference from another source. — Guy in the chair, Jun 22 '14 at 09:49
Try just using `$('#totalamount').html(option);` And see what happens in the div. — Shaunak D, Jun 22 '14 at 09:50
One more thing, I have totally working code with my one div update. So `$('#totalamount').html(html)` with no `
` in ajax like works perfectly, I'm having difficulty only updating two divs in one ajax request. — Guy in the chair, Jun 22 '14 at 09:53
You can have a look, not whole code has been pasted, but pasted what was required, mainly to see that `divs` exist. — Guy in the chair, Jun 22 '14 at 10:00
use `alert` and see whether you are getting `productid`, nd also verify if your code in wrapped in Document ready — Shaunak D, Jun 22 '14 at 10:16
Yup everything is working perfectly fine, I checked that already, then I put the question here, and it's a live file, project is almost completed except this. — Guy in the chair, Jun 22 '14 at 10:20

score 0 · Answer 1 · answered Jun 22 '14 at 10:14

0

I created a sample snippet to make GET requests and update multiple elements at once. You can modify the same to make POST requests. Hope this helps.

$.when(
    $.ajax({
            type: "GET",
            url: "http://graph.facebook.com/?id=http://stackoverflow.com/",
            success: function(option){
                //do stuff
            }
        })).then(function( option ) {
        //update html
        $('.div1').html('URL: ' + option.id);
        $('.div2').html('Shares: ' + option.shares);
});

JS Fiddle

answered Jun 22 '14 at 10:14

Rajender Joshi

4,155
1
23
39

What is id & shares in `option.id` & `option.shares`, divs? – Guy in the chair Jun 22 '14 at 10:22
It's just sample data I used to demonstrate. – Rajender Joshi Jun 22 '14 at 10:29
Yeah but `shares` in nowhere in your data, where is it coming from? – Guy in the chair Jun 22 '14 at 10:32
Can it be like this `option.div id='xyz'` ? I've no idea about this syntax, can you help putting a div? – Guy in the chair Jun 22 '14 at 10:33
This(http://graph.facebook.com/?id=http://stackoverflow.com/) url returns a JSON. So, both .id and .shares came from that JSON. Update like:
div 1
$('#div1').html(somedata); And, http://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it – Rajender Joshi Jun 22 '14 at 10:34
That SOMEDATA is not working in my code, I used this to replace my one div `replaceWith(("#subtotal",html));` & for another second such request. – Guy in the chair Jun 22 '14 at 10:37
Sorry man! I can't spoonfeed. Learn Javascript basics before. – Rajender Joshi Jun 22 '14 at 10:38
Thanks anyway & it's not about basics, it's about the mistake that I'm not getting at. Above code is valid FYI – Guy in the chair Jun 22 '14 at 10:42

Update two divs on one ajax request

1 Answers1