CODEWITHSUNDEEP
jqueryhtml
Raj Mehta
Raj Mehta

Reputation: 311

How to avoid duplicate html load using jQuery

I have jQuery to call html and load into div. I am using keyup event. I am seeing that html data appending into div but multiple time(duplicate). how I can avoid multiple request and load HTML just once.

Here is code

  $('input').keyup(function(){
     $('div').load('my.html');
     return false;
  });

return false; not working

Upvotes: 1

Views: 1440

Answers (3)

The Alpha
The Alpha

Reputation: 146269

You have to use id for targeted div otherwise all divs will be affected at once. Instead of using $('div') use a specific div with id. $('div').load(...) will apply the same operation on every div on the page because no div has class 'loaded' initially.

$('input').keyup(function(e){
   e.stopPropagation(); // to stop event bubling
   e.preventDefault(); // to stop it from being submitted if it's in the form 
   var my_div=$('#some_div');
   if(!my_div.hasClass('loaded'))
   {
      my_div.load('my.html', function() {
      my_div.addClass('loaded');
   }  
});

Upvotes: 1

Joe Schrag
Joe Schrag

Reputation: 865

Use Firebug to see if your event handler is getting called more than once. It is possible you are attaching multiple anonymous event handlers.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114437

poor-man's version:

var loaded=0
$('button').click(function(){
  if(loaded==0) {
    $('div').load('my.html');
  }
  loaded = 1
});

Edit:

$('button').click(function(){
    if(!$('div').hasClass('loaded')) {
        $('div').load('my.html');
        $('div').addClass('loaded')
    }               
});

Upvotes: 1

Related Questions