0

My ajax success/failure event is not firing. I am using jquery validation and inside that i am using ajax for form submit. My forms are getting submitted but return value(JSON data) is not showing as described in AJAX.

I tried to use alert() but it is also not firing.

<script type="text/javascript">
$('document').ready(function()
{

    $("#alert-form").validate({
          ignore: '',
          messages: {
            select2Start: {
              required: "Please select your starting point.",

            }
          },

        //});
        submitHandler: function(form) {

                e.preventDefault;
                var btn = $('#publish');
                btn.button('loading');
                alert('valid form submission');

                $.ajax({
                    type: 'post',
                    url:$('form#alert-form').attr('action'),
                    cache: false,
                    dataType: 'json',
                    data: $('form#alert-form').serialize(),
                    beforeSend: function() { 
                        $("#validation-errors_alert").hide().empty(); 
                    },
                    success: function(data) {
                        if(data.success == false)
                            {
                                var arr = data.errors;
                                $.each(arr, function(index, value)
                                {
                                    if (value.length != 0)
                                    {
                                        $("#validation-errors_alert").append('<div class="alert alert-danger"><strong>'+ value +'</strong><div>');
                                    }
                                });
                                $("#validation-errors_alert").show();   
                                btn.button('reset');                            
                            }else{
                            //  alert("Job Alert Configured successfully.");
                                 $("#job_success_alert").append('<div class="alert alert-success"><strong>Alert Configured successfully.</strong><div>');
                            }
                    },
                    error: function(xhr, textStatus, thrownError) {
                    alert('Something went to wrong.Please Try again later...');
                        alert(thrownError);
                        btn.button('reset');

                    }
                });             
                return false;
        }
            });

        });

    </script>
Roxx
  • 3,738
  • 20
  • 92
  • 155
  • 1
    `e.preventDefault` won't work for two reasons: 1) there's no variable `e`, 2) to call a function you have to put parentheses after it. You also don't need it, because the validation plugin does that automatically. – Barmar Apr 05 '16 at 20:09
  • 1
    The `success:` function doesn't display the JSON data anywhere. It just displays the message "Alert Configured successfully" – Barmar Apr 05 '16 at 20:12
  • 1
    Are you seeing the "valid form submission" alert? – Barmar Apr 05 '16 at 20:12
  • 1
    Are there any errors in the Javascript console? – Barmar Apr 05 '16 at 20:13
  • 1
    Please edit your OP to answer the questions Barmer posted in his comments above. Your `.ajax()` is in the right place, and other than telling you the `e.preventDefault()` line is unneeded, there is not much we can do for you. In other words, you'll have to examine your console log and troubleshoot this, because we do not have access to your server or your server-side code. – Sparky Apr 06 '16 at 00:08
  • Thanks all for your comment. After removing e.preventDefault. my code is working fine. – Roxx Apr 06 '16 at 02:14

1 Answers1

1

As pointed out by Barmer in his first comment, there are several issues with this code...

 submitHandler: function(form) {
     e.preventDefault;
     ....

  1. Variable e does not exist within this submitHandler function.

  2. You've failed to include the parenthesis in .preventDefault().

  3. You don't need .preventDefault() in this context since the plugin is already blocking the default submit. Remove this line entirely.

NOTES:

For good readability, don't mix Allman with 1TBS style code formatting... just be consistent throughout. Additionally, it might be best to avoid using Allman in JavaScript altogether.

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285