Update div with jQuery ajax response html Not Posting Back to Page

Question

I've been struggling with this for a few days now and can't figure out why this won't work. I need to update a link on a page with a new file. The post request and new file show in the Google Chrome development network, but the actual page won't update. I have checked other posts and can't figure this out. My understanding is that my code should be updating the div "mapData" with the new link, image, etc. The page response in the development window has the correct html page and I need to take the div portion from it, change it in the html page displayed, and have that page update. Should be simple!

function updatePieFact(){
        var scenario = $("#scenario").val();
        var year_run = $("#year_run").val();
        var actType = $("input:radio[name=actType]:checked").val();
        var znType = $("input:radio[name=znType]:checked").val();
        var data = {'pieFact': pieFact, 'csrfmiddlewaretoken':'f89lua2QMAt7oz6057PVcahr3EUsSTyI', 'scenario':scenario, 'year_run':year_run, 'actType':actType, 'znType':znType};
        $.post(URL, data, function(data){
            var result = $('<div />').append(data).find('#mapData').html();
            $("#mapData").html(result);
        });
    }
    var pieFact = 1;
    $(document).ready(function(){
        $('#bttnMinus').click(function(){
            pieFact*=0.75;
            updatePieFact();
        });
        $('#bttnPlus').click(function(){
            pieFact*=1.25;
            updatePieFact();
        });
    });

Open up Chrome Developer Tools and put a breakpoint on the line: var result = $('
').append(data).find('#mapData').html(); In the Console, type "$('
')" and press enter. This will give you the div you're trying to append the data to, and is a good place to start. — Josh Noe, Jun 19 '14 at 16:41

Josh Noe · Accepted Answer · 2014-06-19T19:51:48.927

1

Did you mean to do this?

$.post(URL, data, function(result){
    var mapDataHtml = $(result).find("#mapData").html();
    $("#mapData").html(mapDataHtml);
});

If your buttons are inside of the mapData element, their bindings will be removed when you reload the html. You'll want to use jQuery.on instead of click.

$(document).on('click', '#bttnMinus', function(){
    pieFact*=0.75;
    updatePieFact();
});

edited Jun 19 '14 at 19:51

answered Jun 19 '14 at 16:43

Josh Noe

2,664
2
35
37

This almost works. I just need to filter "result" so it doesn't include the entire html. – Jason Hawkins Jun 19 '14 at 17:13
I can get it filtered and working, but it only works once. My guess is that the response data in subsequent requests is incomplete. – Jason Hawkins Jun 19 '14 at 17:24
Does your result include an element with id "mapData" that you want to update your page's "mapdData" element with? If so, see my edit. – Josh Noe Jun 19 '14 at 17:28
It does. The above works once, but something is missing in the response and it doesn't update again. – Jason Hawkins Jun 19 '14 at 17:49
Are your bttnMinus and bttnPlus buttons located inside your mapData element? If so, they'll lose their bindings each time mapData's html is reloaded. You'll want to use .on instead of .click, see update. – Josh Noe Jun 19 '14 at 18:04
Step through your code in Chrome debugger to see why this is only working once. It may be that updatePieFact isn't even reached, or the response from the server is different, etc. – Josh Noe Jun 19 '14 at 18:05
1

Thanks. Jquery was running different code because it read it as a second request and passes an error. It's an issue with event delegation. Changing $('#bttnMinus').on('click', function() to $(document).on('click', '#bttnMinus', function() works. http://learn.jquery.com/events/event-delegation/ – Jason Hawkins Jun 19 '14 at 19:44

score 1 · Answer 2 · answered Jun 19 '14 at 16:46

1

You can use http://api.jquery.com/load/ to simplify it slightly. Your issue might be in how you are setting the html.

$('#mapData').load(URL, data);

answered Jun 19 '14 at 16:46

Jack

8,851
3
21
26

Update div with jQuery ajax response html Not Posting Back to Page

2 Answers2