Question

Bit by bit I’ve been converting a PHP web app I’m working on to Jquery AJAX form submits.

The current one I’m working on is for removing table rows. I think it’s a problem with my javascript, because it keeps doing a page refresh even with return false;. This was the problem with my form which creates an object, but thanks to some help from this site, I got that sorted and it now works fully.

Here’s my javascript:

$("form#table_customer").submit(function() {
        var query_string = 'page=customer&rows=';

        $(":checked").each(function() {
            query_string += this.value + "-";
        });

        $.ajax({
            url: "inc/deletesql.php",
            type: "POST",
            data: query_string,
            cache: false,
            success: function(data){
                $('#maincontent').load('inc/showObjects.php?o=customer');
            }
        });
        return false;
    });

The PHP file (deletesql.php) works with normal POST submits. But I just can’t seem to get it working posting the data through ajax.

You can see it in context at http://www.sfyfe.com/studioadmin/index.php?i=customer

Answer 1

    $('#maincontent').load('inc/showObjects.php?o=customer');
    ...
    // at this point form#table_customer doesn't exist yet in the DOM
    // so this binding a handler will give no effect
    $("form#table_customer").submit(function() {
           ....
    });

Try this instead:

 // make the load reusable

 function addDeleteHandler() {
     // handle the load event
     // attach the event handler everytime the content is loaded, 
     // and the form#table_customer is added to the dom
     $('#maincontent').load('inc/showObjects.php?o=customer', function() {
         $("form#table_customer").submit(function() {

             var query_string = 'page=customer&rows=';

             $('input[name="checkbox"]:checked').each(function() {
                query_string += this.value + "-";
             });

             $.ajax({
                 url: "inc/deletesql.php",
                 type: "POST",
                 data: query_string,
                 cache: false,
                 success: function(data){
                   addDeleteHandler();
                 }
             });

             return false;
          });
      });
  }

  addDeleteHandler();