StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to break out of a hanging ajax call and load another page
text
Body
copied!<p>I'm developing a invoice app. Currently i'm using OO php to build invoice-objects. The objects themselves contain objects for customer, products, invoice details, firm.</p> <p>Now i'm working on a page to make an overview. The problem that occurred was, when i had too many invoices (tested with only 1500 dummy invoices, which in time could be a lot more) the building of the php objects took around 7 seconds. I feel this is way too long since this is only for one request. Also since php runs serverside, the page didn't load anything before the objects were all built. I was staring at an empty screen for 7 seconds and then got everything in an instant (all on localhost, so online it should be worse).</p> <p>Since there needs to be more functionality to the page then just being an overview (i.e: creating new invoices, using filters to narrow invoices shown) and I don't want the user to need to wait for the invoices to be built before they can use the other functionality, i changed the way the page works.</p> <p>Now I first load my basic html structure and only then start getting my invoice data using an $.ajax() call. I built an ajax_loader to notify the user that something is happening. When the call is done the data is shown, but I still have the issue that a user can't do anything. He can click a link/button or whatsoever but it doesn't 'act' until my ajax calls are complete. Once the calls are complete, everything works. Clicking on a link while there is an active call does get the 'click' event registered, but the trigger only happens when ajax is done.</p> <p>The problem has nothing to do with my ajax calls being synced or not. If anyone has any suggestions on how to overcome this problem, i would much appreciate them. My first thoughts would be canceling ajaxcalls but from what I've read up until now I suspect the abort() function won't get the job done.</p> <p><strong>edit:</strong> Doing some more tryouts, I've noticed that everything works while the ajaxcalls are still running,except for loading a page from my own website (domain, server or however I should call it) or doing any other ajaxcall that involves the same server i.e:</p> <pre><code>$("#dummyButton").click(function(){ window.location='http://www.google.com' //works window.location='index.php' //doesn't work alert("test"); //works console.log("test"); //works }) a href='http://www.google.com' //works a href='index.php' //doesnt work </code></pre> <p>So my guess is the server is busy building my invoice objects, hence it won't accept a new request. The following adds to this conclusion:</p> <pre><code> console.log("start slow call"); slow = $.ajax({ a very slow/heavy call success:function(){ console.log('end slow call'); } }); console.log('start fast call'); quick = $.ajax({ a very quick/lightweight call success: function(){ console.log('end fast call'); } }); </code></pre> <p>When I do these 2 calls at the same time, the quick call won't finish until the slow one is complete:</p> <p>console prints: </p> <pre><code>start slow call start fast call end slow call end fast call </code></pre> <p>doing both at the same time makes the quick call take 5 seconds(according to firebug), when doing only the quick call it completes in 150ms </p> <p>I'd have guessed, before all this, that multiple ajaxcalls would be completed in a parallel way instead of serial.</p> <pre><code>abort() function: (having my 2 ajaxcalls as globals so i can abort them); $("a[href]").click(function(){ slow.abort(); quick.abort(); window.location = "index.php"; return false; }) </code></pre> <p>makes the ajaxcalls to be aborted, but <em>still the server keeps executing</em> the code from both calls, hence it will not accept my request to go to index.php until the serversidecode from the ajaxcalls is complete.<br> after about 5 seconds (counting in the head) my index.php will start loading</p> <p>Therefore the following question comes to mind:</p> <p>Is there any manageable way to cancel all processes the server is running for that specific client?</p> <p><em>Other thoughts that didn't end up as the root cause:</em></p> <p>I've already adjusted my invoice constructor, passing it a boolean to determine if the object needs all the info, or only the basic one. This made my ajaxcall(or better the serverside process behind the specific ajaxcall) about 3 seconds shorter (on the 1500 dummy invoices). I could adjust the database and therefore a lot of other stuff on already developed stuff. Or, because building all the invoice objects is the timeconsuming part, i could just do it the non-OO way?</p> <p>Which makes me kind of sad: this was my first real OOP project, its easy to work with, but apparently there's a lot of trouble on calculation time when dealing with a decent amount of objects.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload