在每个Ajax调用上重新加载调用页面

Question

I need a page called via ajax to fully reload everytime I request it. Currently, when requested for the first time it loads the page correctly, but when requested the second time it loads with the previous result and then after 2 or 3 second loads the new result.

I want it to show a loading image while it reloads the page into my div.

See code I'm using below:

$io('#load_order_preview').on('click', function(){

            var portfolioName       = $io("#portfolioName").val();
            var instrumentType      = $io("#instrumentType").val();
            var securityName        = $io("#securityName").val();
            var orderType           = $io("#orderType").val();
            var priceType           = $io("#priceType").val();
            var quantityRequested   = $io("#quantityRequested").val();
            var orderTermName       = $io("#orderTermName").val();
            var limitPrice          = $io("#limitPrice").val();
            var stockPrice          = $io("#stockPrice").val();
            var stopPrice           = $io("#stopPrice").val();

            var dataString = 'portfolioName='+ portfolioName + '&instrumentType=' + instrumentType + '&securityName=' + securityName + '&orderType=' + orderType + '&priceType=' + priceType + '&quantityRequested=' + quantityRequested + '&orderTermName=' + orderTermName + '&limitPrice=' + limitPrice + '&stopPrice=' + stopPrice;

             $io('#load_popup_modal_orderpreview').load(
                 'load-preview.php?' + dataString
             }).modal({
             backdrop: 'static',
             keyboard: false
             }).show();

        });

I'd really like some help to solve this problem.

Thanks in advance.

Answer 1

try this, not sure it will work for regular javascript,

     $io('#load_order_preview').on('click', function(){

var dataString = 'portfolioName='+ portfolioName + '&instrumentType=' + instrumentType + '&securityName=' + securityName
                    + '&orderType=' + orderType + '&priceType=' + priceType + '&quantityRequested=' + quantityRequested
                    + '&orderTermName=' + orderTermName + '&limitPrice=' + limitPrice + '&stopPrice=' + stopPrice;

                 $io('#load_popup_modal_orderpreview').load(
                     'load-preview.php?' + dataString
                 }).modal({
                 backdrop: 'static',
                 keyboard: false,
cache: false
                 }).show();

});

basically your problem is of cache, when you reload the page, it took values from cache and when you reload 2-3 times it fetch forcefully from server.

Edit ==

If cache is not your prob, and since it took 2-3 sec to reflect new images, it is prob with async behavior of browser. When you make request, browser will not wait for your response and move ahead, when it will receive response it will act on it.

Solution,

try to make ajax call and on success response do your activity

or

(last option and not good practice) Make your call async false,

 $io('#load_order_preview').on('click', function(){

var dataString = 'portfolioName='+ portfolioName + '&instrumentType=' + instrumentType + '&securityName=' + securityName
                    + '&orderType=' + orderType + '&priceType=' + priceType + '&quantityRequested=' + quantityRequested
                    + '&orderTermName=' + orderTermName + '&limitPrice=' + limitPrice + '&stopPrice=' + stopPrice;

                 $io('#load_popup_modal_orderpreview').load(
                     'load-preview.php?' + dataString
                 }).modal({
                 backdrop: 'static',
                 keyboard: false,
cache: false,
async: false
                 }).show();

});

note this will make your browser wait till your server respond to your call.