1

I am trying to create a generic function using jQuery but for some reason its not getting invoked. When I added alerts as shown below, the first alert 'My plugin invoked' pops up but the second 'Submitting' doesn't pop up.

Any help is greatly appreciated. Thanks

$(document).ready(function() {

  jQuery.fn.ajaxFormSubmit = function(parameter1, parameter2) {
    alert('My plugin invoked...');
      this.submit(function(e) {
          alert('Submitting.......');
          $.ajax({ 
              url: "/Servletpath",
              dataType: "json",
              data: { //data
                    },

              success:  (function(data) {
                            alert('success');
                        }),  
              error:    (function() { 
                            alert('error');
                        })          
            });
          return false;
      });
  };

  $("#search").live("click", function() {
      var parameter1 = $("#id1").val();
      var parameter2 = $("#id2").val();
      $("#form_id").ajaxFormSubmit(parameter1, parameter2);
      return false;
  });
});
Narayana Nagireddi
  • 729
  • 1
  • 13
  • 33
  • Are you sure that `$('#form_id')` is matching elements (`alert($('#form_id').length);`)? Also make sure that you're not attaching the event *after* the `submit` has fired (always something to consider when your attaching events *within* event handlers). – Matt Nov 13 '12 at 16:15
  • 1
    [jQuery `.live()` has been deprecated in jQuery 1.7](http://api.jquery.com/live/). [Use `.on()` instead](http://api.jquery.com/on/). – Sparky Nov 13 '12 at 16:16
  • 2
    It may be that you expect that a click on `#search` submits the form, but you're merely assigning an submit handler on click when calling the plugin. What should calling the plugin do? – pimvdb Nov 13 '12 at 16:21
  • @Sparky672 : Strange .on() doesn't work both in Firefox and Chrome and I am using jquery 1.7.1 – Narayana Nagireddi Nov 13 '12 at 17:27
  • You must have some other problem. There's nothing wrong with `on()` in Firefox or Chrome. – Sparky Nov 13 '12 at 17:42
  • I moved it out of `document.ready`, checked in firebug, almost did everything, but no use. The moment I changed it to live it works! – Narayana Nagireddi Nov 13 '12 at 19:57

1 Answers1

1

this.submit(function() {...}) will not trigger the submit. It will wait for the form to submit and then invoke the callback. This would help

this.submit(function(e) {
    ...
}).trigger('submit');

or just

  jQuery.fn.ajaxFormSubmit = function(parameter1, parameter2) {
    alert('My plugin invoked...');
    alert('Submitting.......');
    $.ajax({ 
        url: "/Servletpath",
        dataType: "json",
        data: { //data
              },
        success:  function(data) {
                        alert('success');
                    },  
          error:    function() { 
                        alert('error');
                    }          
        });
  };
devnull69
  • 16,402
  • 8
  • 50
  • 61
  • This would bind *and* trigger. If it's just about executing code for each element, `this.each` would be the way to go. – pimvdb Nov 13 '12 at 16:27