title: Datatables Plugin Add Row PHP
body: <p>The add row request that should be made by <em>datatables</em> doesn't seem to send a request to the .php page. when i click Confirm on the <em>AddNewRow</em> form, it only adds a row to the datatable on the webpage, and doesnt alert me any output from the php page 'AddData.php' like Delete and Edit, the only code in it is an echo 'test', to see if it works.</p>
  
  <p>I am using the <a href="http://code.google.com/p/jquery-datatables-editable/" rel="nofollow">Editable plugin for Datatables</a>.</p>
  
  <p>The form that is required in the HTML for the makeEditable AddNewRow plugin to work, works fine, the form displays with correct buttons and fields.</p>
  
  <p><strong>How can i test if its sending the AJAX request?, what functions or properties can i use to check the data being sent and change what data must be sent?</strong></p>
  
  <p>Here is the code to create my datatables:</p>
  
  <pre><code>$('#tmTabs').tabs( {
      "show": function(event, ui) {
          //make datatable columns resize to adjust to changing tabs
  
      }
  } );
  
  $('.dataTable').each(function(){ 
      //get ID of current table;
      tblID = $(this).attr("id");
      var pattern = "[0-9]+";
      $tblIDNum = tblID.match(pattern);
  
      //transform this table into a data table
      $(this).dataTable({ 
          "bProcessing":true,
          "sScrollY": "600px",
          "sScrollX": "100%",
          "bScrollCollapse": true,
          "bPaginate": false,
          "bJQueryUI": true
  
          }) 
  
      .makeEditable({
              //ajax requests for server-side processing
  
              sUpdateURL: "UpdateData.php",
  
  
  
              sAddURL: 'AddData.php',
              sDeleteURL: "DeleteData.php",
              sReadOnlyCellClass: "read_only",
  
              //Button Customization
              oAddNewRowButtonOptions: { 
              label: "Add...",
                              icons: { primary: 'ui-icon-plus' }
                          },
                          oDeleteRowButtonOptions: {
              label: "Remove",
                              icons: { primary: 'ui-icon-trash' }
                          },
                          oAddNewRowOkButtonOptions: {
              label: "Confirm",
                              icons: { primary: 'ui-icon-check' },
                              name: "action",
                              value: "add-new"
                          },
                          oAddNewRowCancelButtonOptions: { 
              label: "Close",
                              class: "back-class",
                              name: "action",
                              value: "cancel-add",
                              icons: { primary: 'ui-icon-close' }
                          },
              oAddNewRowFormOptions: {
                  title: 'Add New Row',
                  show: "blind",
                  hide: "explode"
                  },
  
              //Link button ids
              sAddDeleteToolbarSelector: ".dataTables_length",
              sAddNewRowFormId: "formAddNewRow"+$tblIDNum,
              sAddNewRowButtonId: "btnAddNewRow"+$tblIDNum,
              sAddNewRowOkButtonId: "btnAddNewRowOk"+$tblIDNum,
              sAddNewRowCancelButtonId: "btnAddNewRowCancel"+$tblIDNum,
              sDeleteRowButtonId: "btnDeleteRow"+$tblIDNum                                
              });
  enter code here
  
  });
  </code></pre>