Updating input fields after Ajax post

Question

I'm doing my first web app (not new to programing) and I have a little problem that I know why I have it but I need a way to sort it out.

I make an ajax post on a page, that ajax post uses two hidden fields to retrieve some data, send it to the Action and get some json to show up. Perfect.

The thing is that I'm changing the content of the page with that ajax post. Its just a calendar and I have a link to move between months. I use 2 hidden fields to keep track of month and year (I use that 2 values to pass to the action and change the month).

My problem is that when I click the link, the month changes (my code is OK with that) but the DOM is still the old one.

The problem is that I use 2 hidden fields to keep track of actual month / year because I need that values on jQuery (it seems that if I need to use my Model data with jQuery I have to save it on hidden values and retrieve it later). When I change the month via ajax I expect the 2 hidden fields to update their value...

<input id="curMon" type="hidden" value="<%: Model.Month %>" />
<input id="curYear" type="hidden" value="<%: Model.Year %>" />

...With the new month data.

I know that when you do an ajax post, the DOM is still the old one. I tried with livequery:

$("#forward").live("click", function () {                

            $.post($(this).attr("href"), function (response) {
                $("#calendar").replaceWith($(response).filter("div#calendar"));
                loadDays(currentMonth);
            });
            return false;
        });

forward is the link. Calendar is the div containing the calendar and the two hidden fields. loadDays just get some json to change things on the calendar.

currentMonth is:

        var month = $("#curMon").val();
        var year = $("#curYear").val();

        var currentMonth = { Month: month, Year: year };

Well, I need that when I change the month via ajax, I can get the new values from the hidden field instead the old one.

Is there a way to do it or I'm doing this the hard way?

Answer 1

It looks like you're not updating the value of your month and year variables, try just assigning the selectors to the variables so you can update currentMonth.

    var month = $("#curMon");
    var year = $("#curYear");

    var currentMonth = { Month: month.val(), Year: year.val() };

Current month needs to be re-assigned in the live portion of the code, or you can just do this

    $("#forward").live("click", function () {                

        $.post($(this).attr("href"), function (response) {
            $("#calendar").replaceWith($(response).filter("div#calendar"));
            loadDays({Month: $("#curMon").val(), Year: $("#curYear").val() });
        });
        return false;
    });