Avoid waiting for other process to complete in ajax

Question

In my application, I've a left menu with some links :

<div>
<a onclick="menuclick('user')">User(100)</a>
<a onclick="menuclick('messages')">Messages(1000)</a>
<a onclick="menuclick('contact')">Contact Us</a>
</div>

On click of each links, I'm calling an ajax which will call a file and queries table and display content accordingly.

function menuclick(type) {
$.ajax({
    url: 'test.php',
    type: 'POST',
    data: {
        type: type
    },
    dataType: 'html',
    success: function(data) {
        $("#contentdiv").html(data);
    }
});
}

Now the issue is, if the user/message count in database is a greater number, then its taking some time to load the content/processing test.php file. If I click some other links in this time, it will not display suddenly. On click of each links, how can I show the content immediately without waiting for other links ajax processing to complete.

Can anyone help me to find a solution?

If they all share the same output div, cancelling the previous requests is indeed the solution, so only the last clicked request will continue and render. So save the requests returned by $.ajax() in an array and call abort() on all of them before starting the next request. Sidenote: if the message count is so high that it delays the rendering, only select and render the visible messages aka pagination. — Shilly, Dec 27 '18 at 14:21
How is this a "php" question? There's no code for it; *relevance?* — Funk Forty Niner, Dec 27 '18 at 14:28
Ever thought also that it might be because of your database probably not being properly indexed? The question is unclear for me. Does Mohamed's link solve this? If so, it should be flagged as a possible duplicate. — Funk Forty Niner, Dec 27 '18 at 14:33
@FunkFortyNiner. Database is indexed. The ajax response contains some js scripts also. Requirement is once we click the menu link, it should load the content without waiting for other ajax requests to complete. — Jenz, Dec 27 '18 at 14:36
@Jenz The only reason why I saw your comment to me, is because I'm still here (for now). Please ping correctly. — Funk Forty Niner, Dec 27 '18 at 14:37
@Jenz The link in the first comment; does *that* solve this? — Funk Forty Niner, Dec 27 '18 at 14:38
@FunkFortyNiner. The link in the first comment solved my requirement. — Jenz, Dec 27 '18 at 15:00

score 2 · Answer 1 · answered Dec 27 '18 at 15:02

I think that you should fix your test.php or provide some loading stuff, but in during that time, here is a tricky solution for you:

function menuclick(type) {
    var $el=$("#contentdiv");
    $el.data('type',type);
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: {type: type},
        dataType: 'html',
        success: function(data) {
            if ($el.data('type')==type){ // basically it checks if is the last type clicked
                $el.html(data);
            }
        }
    });
}

score -1 · Answer 2 · edited Oct 06 '22 at 12:41

-1

You could generate the divs when you load the page, and make the clicks display them, resulting into giving the page some extra loading time.

But that means that you will display the content instantly as you want.

edited Oct 06 '22 at 12:41

David Ansermot

6,052
8
47
82

answered Dec 27 '18 at 14:17

Admirus

9
6

Avoid waiting for other process to complete in ajax

2 Answers2