MysticalTautologist MysticalTautologist - 6 months ago 33
Javascript Question

Why does jQuery ajax post twice here?

The following works fine the first time I select "Add New" and add a new option. The second time (for a different element distinguished by class) it adds the new option to the selected element and the first one. Both elements are bound to addnew.

<script type="text/javascript">

$('#upload_form option[value="addnew"]').click(function(){

// Show modal window
$('#add-new').modal('show');

// Get the class

var Classofentry = $(this).attr("class");

$('#add-new-submit').on('click', function(){

// Get new option from text field
var value = $('#add-new-text').val();
console.log(value);

$.ajax({
type: "POST",
url: "<?php echo site_url(); ?>main/change_options",
data: {new_option: value, new_option_class: Classofentry},
dataType: "html",
error: errorHandler,
success: success
});

function success(data)
{

$('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>");
//alert(data);

//alert('Success!');

}

function errorHandler()
{
alert('Error with AJAX!');
}

$('#add-new').modal('toggle');

});
});

</script>


The weird thing is that it seems to loop through the ajax a post twice. I suppose it's finding all the "addnew" values (there are 2 so far, there will be more). How do I get it to just treat the element with the designated class? Hope this makes sense.

Answer

Thanks for you responses! I found a way to get it to work by leaving the clicks nested but unbinding the second one. I could not get the suggested solns (which unnest all the functions) to work. There seems to be no way to get the second click to work when they are not nested. I'm not sure why. It's also necessary to have the success and errorHandler functions inside the function calling ajax. Here's the code (identical the question above but with the unbind statement in the second nested click):

  <script type="text/javascript">

        var Classofentry = '';

        $('#upload_form option[value="addnew"]').click(function(){

          // Show modal window
          $('#add-new').modal('show');

          // Get the class
          var Classofentry = $(this).attr("class");
          console.log(Classofentry);Thanks            

        $('#add-new-submit').on('click', function(){                  

          // Get new option from text field
          var value = $('#add-new-text').val();
          console.log(value);

          $.ajax({
                type: "POST",
                url: "<?php echo site_url(); ?>main/change_options",
                data: {new_option: value, new_option_class: Classofentry},
                dataType: "html",
                error: errorHandler,
                success: success
              });

          $('#add-new-submit').unbind('click') // <-------------- The answer!!!!!
          $('#add-new').modal('toggle');


          function success(data)
          {

              //$('#animal_species').append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); 
              $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); 
              //alert(data);

              //alert('Success!');

          }

          function errorHandler()
          {
              alert('Error with AJAX!');
          } 
        });
        });

  </script>
Comments