Why does this ajax post get called twice?

Question

After checking other SO posts, I did not find an answer to my question -- but apparently this type of problem happens to others, just not exactly my problem. But an ajax .post function is being called twice, though I cannot possibly see why.

This is jQuery 1.8.0, using the Firefox (Iceweasel) browser.

Here is my jquery code that attaches functions to four buttons, Edit, Save, New, Cancel. There is also a function that populates a select list:

  var is_new = 0;

  $(document).ready(function()
  {
    // Attach event handlers to buttons
    $('#editbtn').on('click',pop_studyname);
    $('#newbtn').on('click',new_studyname);
    $('#savebtn').on('click',save_studyname);
    // disable the Save button until we have something to save
    $('#savebtn').attr('disabled',true);
    // disable the Cancel button until we have something to cancel
    $('#cancelbtn').attr('disabled',true);

  });

  function pop_studyname()
  {
    // pop the selected studyname into edit box.
    $('#edit_field').val($('#studylist :selected').text());
    // disable the New Study button
    $('#newbtn').attr('disabled',true);
    // enable the Cancel button
    $('#cancelbtn').attr('disabled',false);
    // and bind it to a function
    $('#cancelbtn').on('click',cancel_studyname);    
    // enable the Save button
    $('#savebtn').attr('disabled',false);
    // and bind it to a function
    $('#savebtn').on('click',save_studyname);
  }

  function new_studyname()
  {
    // clear edit box.
    $('#edit_field').val('');
    /**************************/
    /* set flag for New Study */
    is_new = 1;
    /**************************/

    // Enable the Cancel button
    $('#cancelbtn').attr('disabled',false);
    // and bind it to a function.
    $('#cancelbtn').on('click',cancel_studyname);
    // Disable the Edit button.
    $('#editbtn').attr('disabled',true);
    // Enable the Save button
    $('#savebtn').attr('disabled',false);
    // and bind it to a function.
    $('#savebtn').on('click',save_studyname);
    // put the cursor in the edit box
    $('#edit_field').focus();
  }

  function cancel_studyname()
  {
    // clear edit box.
    $('#edit_field').val('');
    // disable cancel button.
    $('#cancelbtn').attr('disabled',true);
    // disable Save button.
    $('#savebtn').attr('disabled',true);
    // Enable the Edit button.
    $('#editbtn').attr('disabled',false);
    // And the New Study button.
    $('#newbtn').attr('disabled',false);
    // Reset new study trigger variable. 
    is_new = 0;
  }

  function save_studyname()
  {
    // Are we saving a new or existing Study?
    if (is_new == 1) {
        $.post("saveStudyName.php",
        {'type': 'new', 'studyname': $('#edit_field').val()},
            function(resultmsg) {
              alert(resultmsg);
            }
        );
    // reset the trigger flag
    is_new = 0;

    } else {
      // Update an existing Study.
        // Get the record index and edited study name.
        var styndx = $('#studylist option:selected').val();
        var studyname = $('#edit_field').val();

    // Use ajax post call to update database.
        $.post("saveStudyName.php",
      {'type': 'update', 'studyname':studyname, 'styndx':styndx}, 
      function(resultmsg) {
              alert(resultmsg);
      });
    }
    // clear the edit field
    $('#edit_field').val('');
    // disable the Save button
    $('#savebtn').attr('disabled',true);
    // Enable the Edit button.
    $('#editbtn').attr('disabled',false);
    // Enable the New Study button.
    $('#newbtn').attr('disabled',false);
    // Finally, refresh the studyname picklist.
    refresh_studynames();
  }

  function refresh_studynames()
  {
    // repopulate studylist with update from database...
    // - form the query.
    // - send to database, get the result.
    // - use the result to repopulate the Study name select list.
    $.ajax({                                      
      url: 'getStudyNames.php',        //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format
      error: function() {
        alert('Refresh of study names failed.');
      },
      success: function(data) 
      {
    var $studylist = $('#studylist').empty();
    $.each(data, function(i, record) {
       $studylist.append($("<option/>", {
        value: record.studyindex,
        text: record.studyname
        }));
    });
      } 
    });
  }

Looking at the web console and the debugger, I can see that two POSTs (to saveStudyName.php) and two GETs (from getStudyNames.php) are happening, within just a few milliseconds of each other. The first call is the correct one; but the second one should not happen. Because of the logic involved, the parameters in the second call as incorrect and it fails.

For completeness, here is the HTML code:

<body >
<div id="container">
  <div id="header">
    <h1>Admin Module</h1>
  </div>
  <div id="navigation">
    <ul>
    <li><a href="AdminMenu.php">Admin Menu</a></li>
    <li><a href="../DNAPortal/DNA_Portal_Menu.php">DNA Portal</a></li>
    <li><a href='../DNAPortal/logout.php'>Logout</a></li>>
    </ul>
  </div>
  <div id="content">
    <h2>IBG Study Maintenance</h2>
    <p>
    <form name="StudySelection" action="process_StudyMaint.php" method="POST" onsubmit="return false" >
    <input type=hidden name=studyindex>
    <div id=content-container2>
      <fieldset>
      <LEGEND><b>Select Study &/or action</b></LEGEND>
    <p>
    <P CLASS=select_header>List of Studies<br>
    <SELECT multiple size=15 NAME="studylist" ID="studylist" STYLE="width: 150px">
    <?php
        $i=0;
        while ($i < $numstudies) {
            $styarr = pg_fetch_row($studyresult);
            echo "<option value=$styarr[0]>$styarr[1]\n";
            $i++;           
        }
      ?>
    </select>
    </p>                
      </fieldset>
    </div>
    <div  >

    </div>
    <div class="lower_block">
      Study name:<br>
      <input id="edit_field" type="text" size=30>
      <input type="button" name="editbtn" id="editbtn" value="Edit" sclass="btn">
      <input type="button" name="savebtn" id="savebtn" value="Save" sclass="btn">
      <input type="button" name="newbtn" id="newbtn" value="New Study" sclass="btn">
      <input type="button" name="cancelbtn" id="cancelbtn" value="Cancel" sclass="btn" disabled=TRUE >
    </div>
  </div>
</div>
</form>
</body>

Is there some way to stop the second call from happening? I cannot see any reason why this happen.

Any help much appreciated! SO rocks!

--rixter

Answer 1

Please try this, It worked for me...

$(this).unbind();

Answer 2

If your are hitting Edit or New before Saving then it's being called twice because you told it so.

When the page is loaded you call: $('#savebtn').on('click',save_studyname);

And the callback functions pop_studyname() and new_studyname() on the Edit and New buttons contains the same line.

If you do multiple .on() for the same event you will get multiple calls. You need to make sure its called only once.