jQuery reload page not refreshing content

Question

User-78754308 posted

Hi!  I'm using jQuery to post a form to a handler script using AJAX.  Upon completion, I'm refreshing the page - however, the content doesn't actually refresh unless I do a Shift-F5 refresh on the page.  

Here's what I've tried so far:

• I've tried doing location.href = location.href.
• I've tried doing location.reload(true);
• I've tried appending random variables to the end of the page to force it to load a new one.
• I've tried putting in my Page_Load of my usercontrol to look for these variables, and if they exist, rebind the data
• I've tried doing the same as above, except in the parent page for this usercontrol.
• I've tried disabling page chaching for this page.  
• I've tried disabling viewstate for the control (A Literal control, which is displaying an assembled HTML table and form on the backend)

At this point I'm at a loss for what's going on.  I've confirmed there are no errors in my ASP.NET code, and no jQuery errors in the browser console.

Here's my jQuery function:

$(".saveButton").click(function () {
                $(".timeEntry").each(function () {
                    var dayCount = $(this).attr('data-day');
                    var chargecode = $(this).attr('data-chargecodeid');
                    var chargetype = $(this).attr('data-chargetypeid');

                    $.ajax({
                        type: "GET",
                        url: "_PostTime.aspx",
                        data: {
                            "UserID": "<%: HttpContext.Current.User.Identity.GetUserId() %>",
                            "Hours": $(this).val(),
                            "DayCount": dayCount.replace("Day", ""),
                            "ChargeCodeID": chargecode,
                            "ChargeTypeID": chargetype
                        },
                        datatype: "text",
                        success: function () {
                            //Do nothing
                        }                        
                    });                                                                                          
                });
    
                location.reload();
            });

Thanks very much for any help you might offer. 

Answer 1

User665608656 posted

Hi Piornet,

According to your description, I suggest you to put the statement of refreshing the page at the end of the Ajax success method to ensure that your Ajax request is completed and successful before refreshing the page.

Because the button click event  is a post request, which refreshes the entire page, but you have used Ajax to prevent the whole refresh in the button click event.

You could refer to: https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

For more details,you could refer to the revised code below.

$(".saveButton").click(function () {
                $(".timeEntry").each(function () {
                    var dayCount = $(this).attr('data-day');
                    var chargecode = $(this).attr('data-chargecodeid');
                    var chargetype = $(this).attr('data-chargetypeid');

                    $.ajax({
                        type: "GET",
                        url: "_PostTime.aspx",
                        data: {
                            "UserID": "<%: HttpContext.Current.User.Identity.GetUserId() %>",
                            "Hours": $(this).val(),
                            "DayCount": dayCount.replace("Day", ""),
                            "ChargeCodeID": chargecode,
                            "ChargeTypeID": chargetype
                        },
                        datatype: "text",
                        success: function () {
                            //Do nothing
                            location.reload();
                        }                        
                    });                                                                                          
                });
               
            });

Best Regards,

YongQing.

Answer 2

User-78754308 posted

No. That would start the reload process just after the very first success.  Note that this is in a foreach loop, the reload can't be there.  Nor does that address the underlying problem - the page *does* reload, it just doesn't refresh

Besides, I had already tried this before posting.  

Thank you for response, however this is the wrong direction.

Answer 3

User475983607 posted

Needing to press ctrl-F5 indicates your browser has cached _PostTime.aspx GET requests.  Disable caching for the _PostTime.aspx page using the page directive.

<%@ OutputCache Location="None" VaryByParam="None" %>

https://support.microsoft.com/en-us/help/323290/how-to-cache-in-asp-net-by-using-visual-c-net

You'll need to press ctrl-F5 one more time though.

Answer 4

User-474980206 posted

you need to wait for all ajax's to complete. just create an array promises, and wait on the array.

$(".saveButton").click(function () {
    var promises = [];
    $(".timeEntry").each(function () {
       var dayCount = $(this).attr('data-day');
       var chargecode = $(this).attr('data-chargecodeid');
       var chargetype = $(this).attr('data-chargetypeid');

       promises.push($.ajax({
           type: "GET",
           url: "_PostTime.aspx",
           data: {
               "UserID": "<%: HttpContext.Current.User.Identity.GetUserId() %>",
               "Hours": $(this).val(),
               "DayCount": dayCount.replace("Day", ""),
               "ChargeCodeID": chargecode,
               "ChargeTypeID": chargetype
           },
           datatype: "text"                                                                                       
        }));
    });

    $.when.apply($, promises).done(function() {
        location.reload();
    });
});

Answer 5

User-78754308 posted

Man, thank you so much - I've been fighting with this for days.  Let me buy you a pizza.