1

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?

Improve this question
10
  • 1
    you can try stackoverflow.com/a/446626/3385827
    – Mohamed-Yousef
    Commented Dec 27, 2018 at 14:18
  • 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
    Commented Dec 27, 2018 at 14:21
  • How is this a "php" question? There's no code for it; relevance?
    – Funk Forty Niner
    Commented Dec 27, 2018 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
    Commented Dec 27, 2018 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
    Commented Dec 27, 2018 at 14:36

2 Answers 2

Reset to default
2

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);
            }
        }
    });
}
Improve this answer
-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.

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.