Jquery function runs multiple times

JavaScript
1

If this search function is included in an include file with other functions it will run more than once if you click another function first, then come back to it to do another search.

$(document).ready(function() {
$("a#searchowner").click(function() {
var searchval=$("#p1").val(); 
  alert(searchval);   //test alert box
  $.post("findowner.php", {p1 : searchval}, function(data){
   if (data.length>0){ 
     $("#ownerIDdiv2").html(data); 
   } 
  }); 
 
});
}); //end

for example if I click the next page function, then decide to click for a new search it runs more than once:

Next page function:

$(document).ready(function() {
$('a#nextpage').click(function() {
var page = $(this).attr('page');
  var searchval = $(this).attr('schval');
  var maxpage = $(this).attr('maxpage');
$.post("findowner.php", {
    p1 : searchval,
    page : page	
	}, function(data){
   if (data.length>0){ 
     $("#ownerIDdiv2").html(data); 
   } 
  }); 
});
});  //end

However, if I put the first search function in a seperate include file all works perfect.
Can someone explain why it runs multiple times if it is grouped among other functions?

2

A test demo of a page that exhibits the problem will help us to advise you about this.

3

On this demo, by ownerid click find.
Next leave the search box blank and click [searchjq ] .
Next, click jqnext, then jqprev for paging.
Now, say you decide to enter a search string after all.
Next enter a j in the search box, hit [searchjq ], and you will see
the alert comes up 2 or more times.
Here’s the link:
http://labjim7.byethost4.com/demo/edit_lookup.php?petid=21&page=1&t1=#
The Search function is for the petowner.php file, and the paging functions go with findowner.php. Again if I put the search function in a seperate include file then there is no problem. But shouldn’t I be able to just have one include file?

4

A part of the problem is that the click event is not retuning false, to prevent the link from being followed.

There are also a large number of alerts scattered throughout your code, so you may want to note which ones are activating. For example:


alert('search owner: ' + searchval);
5

The alert(searchval); is there only as a test, wouldn’t be in a real application.
Again, if I take this search function:

$(document).ready(function() {
$("a#searchowner").click(function() {
var searchval=$("#p1").val(); 
  alert(searchval);   //test alert box
  $.post("findowner.php", {p1 : searchval}, function(data){
   if (data.length>0){ 
     $("#ownerIDdiv2").html(data); 
   } 
  }); 
 
});
}); //end

and put in in it’s own include file, then everything works right.
As far as the alert, it’s alerting the current search value entered into
$(“#p1”), i.e., var searchval=$(“#p1”).val();
I am just trying to figure out why the alert pops up 2 or more times if this function is included among the other functions in one include file.
Does Jquery require seperate include files? For example, do I need one include file for pownersearch.htm, and another include file for findowner.php?
I have never had to have seperate include files in javascript.

6

Did you know that the page is being reloaded for every search?

To repeat once again, place a return false statement at the end of the click event.

That will also make it easier to debug the rest of the code.

7

I placed a return false; same result.
I temp commented out this function,
and tryed the same function again but in it’s own
include file. I did it with and without the
return false; and it works fine either way if this
function is in it’s own include file seperate from the others.
Any help/hints on how to debug why this happens?
And I have tryed all the unbind techniques also.

Another kinda unrelated question:
Is it ok to use jquery like this:


function ajax_search()
{

$(document).ready(function() { 
 
 
 // $("#ownerIDdiv2").show(); 
  var searchval=$("#p1").val(); 
  alert(searchval);
  $.post("findowner.php", {p1 : searchval}, function(data){
   if (data.length>0){ 
     //$("#ownerIDdiv2").fadeIn(1000).html(data);
	 $("#ownerIDdiv2").html(data); 
   } 
  }) 
});  //end of doc rdy func
}

This does work and no errors, and no repeating. The jquery is inside
javascript. But is it ok to code like this?

And the on click for this code:

<a href="#" onclick="ajax_search();"> search </a>

Instead of the jquery way:

<a id="searchowner" href="#">  [searchjq ]  </a>
8

You can code like that, but the document ready part is a complete waste now and should be removed.

9

Are you saying the jquery stuff will still work?
Like:


var searchval=$("#p1").val(); 
$.post("findowner.php", {p1 : searchval}, function(data){
if (data.length>0){ 
$("#ownerIDdiv2").html(data);

These lines would still execute?
I am going to try. But would it be acceptable coding?

10

The only reason for the document ready part is to ensure that the body exists before any attempt to manipulate it occurs.

Because you’ve placed the statements inside a function, and that function is called from a part of the body, by definition the body must already exist, removing the need to check that the document is ready.

11

I commented out doc… ready and it worked with 0 errors, 0 repeats, this fixed it.
But please answer this:
Is it an acceptable way to use jquery?
Also is using a regular onclick acceptable with jquery?


function ajax_search()
{

//$(document).ready(function() { commented out
 
var searchval=$("#p1").val(); 
alert(searchval);
$.post("findowner.php", {p1 : searchval}, function(data){
   if (data.length>0){ 
     $("#ownerIDdiv2").fadeIn(1000).html(data);
	 $("#ownerIDdiv2").html(data); 
   } 
  }); 
//});  //end of doc rdy func     commented out
}
12

It is allowed to use this:


function ajax_search() {
    ...
}



<a href="#" onclick="ajax_search();"> search </a>

But it’s more acceptable to use this:


$(function () {
    $('#searchowner').click(function () {
        ...
        return false;
    });
});



<a id="searchowner" href="#">  [searchjq ]  </a>
13

I found an example of binding:


$(document).ready(function() {
$("a#searchowner").bind( 'click', ajax_search );
});

And ajax_search:


function ajax_search(){ 
  var searchval=$("#p1").val(); 
  alert(searchval);
  $.post("findowner.php", {p1 : searchval}, function(data){
   if (data.length>0){ 
     $("#ownerIDdiv2").html(data); 
   } 
  }); 
return false;
$("a#searchowner").unbind( 'click', ajax_search );
}

But it still runs multiple times.
I’m beginning to believe that in jquery each pages functions need
to have their own include file. As stated earlier in this post, all works
fine when $(“a#searchowner”) function is in an include file seperate from the
other functions.
Is there any logic or truth to seperating include files for each pages functions?

14

The unbind never ever gets to run. Do you know why?

Move the unbind line up above the return statement instead.

15

Thanks for the various replies. Even after that last try same result.
For now, I will just have that search function in a seperate include, after all it does work that way without the problem.