CODEWITHSUNDEEP
javascriptjqueryajax
Muresan Andrei
Muresan Andrei

Reputation: 95

Jquery $(this).closest('form'); not working after button click

I have the following js code:

$("#add_station").on('click', function () {

   $(this).closest('form').submit(function () {
      alert("working!");
      $.ajax({
         url: advoke.base_url + "/new-vendor-user/station/ajax",
         method: 'post',
         processData: false,
         contentType: false,
         cache: false,
         dataType: 'json',
         data: new FormData(this),
         beforeSend: function () {

            $('.info').hide().find('ul').empty();

            $('.success_message').hide().find('ul').empty();

            $('.db_error').hide().find('ul').empty();
         },
         success: function (data) {

            if (!data.success) {

               $.each(data.error, function (index, val) {

                  $('.info').find('ul').append('<li>' + val + '</li>');

               });

               $('.info').slideDown();
               setTimeout(function () {
                  $(".info").hide();
               }, 5000);

            } else {
               $('.success_message').slideDown();
               $('#add_station').remove();
               $("#station").append(data.new_station);
               setTimeout(function () {
                  $(".success_message").hide();
               }, 5000);

            } //success

         },
         error: function () {

            //db error
            $('.db_error').append('<li>Something went wrong, please try again!</li>');
            $('.db_error').slideDown();
            //Hide error message after 5 seconds
            setTimeout(function () {
               $(".db_error").hide();
            }, 5000);

         } //error
      });
   });
   return false;
});

When I click the button with the id add_station it alerts on click function after $($this).closest('form').submit(function(){...) it doesn't work as you can see I've put an alert 'works' after submit function.I get no errors on the console and I can't figure what the problem is. Also, the button that is clicked is inside a form.

I need to use $($this).closest('form').submit(function(){...) inside because after ajax success a new form will be generated with add station button that will use this code.

Upvotes: 0

Views: 3309

Answers (3)

shaN
shaN

Reputation: 828

add a separately submit handler

$("#add_station").on('click', function () {
   $(this).closest('form').submit();
});

$("form").on("submit", function (e) {
   e.preventDefault();

   alert("working!");
   $.ajax({
      url: advoke.base_url + "/new-vendor-user/station/ajax",
      method: 'post',
      processData: false,
      contentType: false,
      cache: false,
      dataType: 'json',
      data: new FormData(this),
      beforeSend: function () {

         $('.info').hide().find('ul').empty();

         $('.success_message').hide().find('ul').empty();

         $('.db_error').hide().find('ul').empty();
      },
      success: function (data) {

         if (!data.success) {

            $.each(data.error, function (index, val) {

               $('.info').find('ul').append('<li>' + val + '</li>');

            });

            $('.info').slideDown();
            setTimeout(function () {
               $(".info").hide();
            }, 5000);

         } else {
            $('.success_message').slideDown();
            $('#add_station').remove();
            $("#station").append(data.new_station);
            setTimeout(function () {
               $(".success_message").hide();
            }, 5000);

         } //success

      },
      error: function () {

         //db error
         $('.db_error').append('<li>Something went wrong, please try again!</li>');
         $('.db_error').slideDown();
         //Hide error message after 5 seconds
         setTimeout(function () {
            $(".db_error").hide();
         }, 5000);

      } //error
   });

});

Upvotes: 0

balzafin
balzafin

Reputation: 1426

after ajax success a new form will be generated with add station button that will use this code

If you generate a new button you have to bind the click again after it is placed to the dom.

Upvotes: 0

semir worku
semir worku

Reputation: 120

You should block the default submit trigger by using

e.preventDefault();

$(this).closest('form').submit(function (e) {

e.preventDefault();

<!--rest of the code-->

})

Upvotes: 1

Related Questions