SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery function runs multiple times

    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.
    Code:
    $(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:
    Code:
    $(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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    A test demo of a page that exhibits the problem will help us to advise you about this.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/ed...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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code javascript:
    alert('search owner: ' + searchval);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The alert(searchval); is there only as a test, wouldn't be in a real application.
    Again, if I take this search function:
    Code:
    $(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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jim9 View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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:
    Code:
    <a href="#" onclick="ajax_search();"> search </a>
    Instead of the jquery way:
    Code:
    <a id="searchowner" href="#">  [searchjq ]  </a>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You can code like that, but the document ready part is a complete waste now and should be removed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you saying the jquery stuff will still work?
    Like:
    Code:
    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. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jim9 View Post
    These lines would still execute?
    I am going to try. But would it be acceptable coding?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code:
    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. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jim9 View Post
    s it an acceptable way to use jquery?
    Also is using a regular onclick acceptable with jquery?
    It is allowed to use this:

    Code javascript:
    function ajax_search() {
        ...
    }

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

    But it's more acceptable to use this:

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

    Code html4strict:
    <a id="searchowner" href="#">  [searchjq ]  </a>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found an example of binding:
    Code:
    $(document).ready(function() {
    $("a#searchowner").bind( 'click', ajax_search );
    });
    And ajax_search:
    Code:
    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. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jim9 View Post
    Code:
    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.
    The unbind never ever gets to run. Do you know why?

    Move the unbind line up above the return statement instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •