Issue with multiple calls using the jQuery Ajax load() method

Question

I am using the jQuery load() method to load content into a page depending on the value added into an input field. For some reason I am getting multiple ajax calls at once so the content I am calling is appearing twice in the page rather than just once.

Hope that makes sence!

Here is the code I am working on:

function Acun () { var firstChar = $('#accountnumber').val().charAt(0); if(firstChar != 'x' && firstChar != 'X'){ $('#examplepagecontent').html('<div id="invoice-loader"></div>'); $("#examplepagecontent" ).load( "/product/pay-an-invoice #content"); } else { $('#examplepagecontent').html('<div id="invoice-loader"></div>'); $("#examplepagecontent").load("/product/pay-an-invoice-with-account-z #content"); } }

HTML:

<input type="text" name="Account Number" value=""  
  id="accountnumber" name="accountnumber" onKeyUp="Acun();" maxlength="7"/>

How are you calling the function Acun? do you have multiple times invoking this function by any chance? — Helmut Granda
– Helmut Granda, Commented Apr 1, 2015 at 19:03

nexusgx · Accepted Answer · 2015-04-01 19:11:12Z

1

You are calling the function every keyUp. This means every time a character is entered with, when the button is lifted, the function will run.

You would want to try something like this

var timer;    //important to have variable outside the function
function Acun () {
    window.clearTimeout(timer);
    timer = window.setTimeout(function(){
        var firstChar = $('#accountnumber').val().charAt(0);
        if(firstChar != 'x' && firstChar != 'X'){
             $('#examplepagecontent').html('<div id="invoice-loader"></div>');
             $("#examplepagecontent" ).load( "/product/pay-an-invoice #content");
        }
        else {
            $('#examplepagecontent').html('<div id="invoice-loader"></div>');
            $("#examplepagecontent").load("/product/pay-an-invoice-with-account-z #content");
        }
    },500); //run after a half second of no activity
}

answered Apr 1, 2015 at 19:11

nexusgx

512 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Future Webs Over a year ago

Thanks for your suggestion, I have tried your code but the content is still appearing twice. I tried removing onKeyUp="Acun();" from the input field and instead used the following button: <button name="button" type="button" class="button" onclick="Acun();">Check</button> but the issue still remains?

nexusgx Over a year ago

Maybe instead of using the html onclick attribute, try adding to your script outside of the Acun function somewhere $('button[name="button"]').on('click',Acun); If that doesn't work, is it possible that the click event is being applied twice somewhere?

VMAtm · Accepted Answer · 2015-04-01 19:11:15Z

1

You are calling the Acun() function on onKeyUp="Acun();" event. This event happen each time the user presses the button.

You should check the other requests are pending, and do not request the new one, or you can check the length of textbox input, and make a request with largest one.

answered Apr 1, 2015 at 19:11

VMAtm

28.4k17 gold badges85 silver badges133 bronze badges

Collectives™ on Stack Overflow

Issue with multiple calls using the jQuery Ajax load() method

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related