CODEWITHSUNDEEP
jqueryjqgrid
NewHistoricForm
NewHistoricForm

Reputation: 121

jqGrid How to Delete Multiple Selected rows after submitting to a Database?

I have this solution that submits multiple row data to a new database. But I want to append to the end of this action script to delete the selected rows. How to properly add this function at the end after data has been submitted? I added a script but it does nothing.

Old code for button:

            jQuery("#minibutton").click( function(){

    var selectedrows = $("#list").jqGrid('getGridParam','selarrrow');
if(selectedrows.length) {
for(var i=0;i<selectedrows.length; i++) {

var selecteddatais = $("#list").jqGrid('getRowData',selectedrows[i]);
        var rows=JSON.stringify(selecteddatais)
        var postArray = {json:rows};

    $.ajax({
      type: "POST",
      url: "jsonsend.php",
   data: postArray,       
   dataType: "json",
   success: function () { jQuery("#list").jqGrid('delGridRow', id, options );

    } }); } } });
     });

Edit: My current try at solution

  $(function(){ 
  $("#list").jqGrid({
    url:'request.php',
    editurl: 'jqGridCrud.php',
    datatype: 'xml',
    mtype: 'GET',
    multiselect:true,
    multiboxonly:true,
    height: 450,
    width: 850,

    colNames:['id','Project', 'Assigned To','Assign Date','Check Date','Due Date','Attachments'],
    colModel :[ 
      {name:'id', index:'id', width:25}, 
      {name:'name', index:'name', width:250, align:'left',editable:true, editoptions:{
            size:60} }, 
      {name:'id_continent', index:'id_continent', width:55, align:'right',editable:true,edittype:'select', 
      editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST'  }, 

      {name:'lastvisit', index:'lastvisit', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y',editable:true, edittype: 'text',mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,


      {name:'cdate', index:'cdate', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,

      {name:'ddate', index:'ddate', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y',date:'true',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} ,


      {name:'email', index:'email', width:70,align:'center',sortable:false,mtype:'POST' } 
    ],
    pager: '#pager',

    rowNum:20,
    rowList:[20,40,80],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Pending Assignments',


    ondblClickRow: function(rowid) {

    $(this).jqGrid('editGridRow', rowid,
                        {width:450,Height:400,recreateForm:true,closeAfterEdit:true,
                         closeOnEscape:true,reloadAfterSubmit:false, modal:true,mtype:'post'});}


            });



       $("#list").jqGrid("navGrid", { add: false, search: false }, {}, {}, {
    url: "jsonsend.php",
    onclickSubmit: function (options, ids) {
        var $self = $(this), selectedrows = ids.split(","), selectedData = [], i,
            l = selectedrows.length;

        for (i = 0; i < l; i++) {
            // fill array selectedData with the data from selected rows
            selectedData.push($self.jqGrid("getRowData", selectedrows[i]));
        }

        // the returned data will be combined with the default data
        // posted by delGridRow
        return {
            gridData: JSON.stringify(selectedData)
        }
    }
});


     });

jsonsend.PHP:

<?


    $database = "newhistoricform";
    $dbpassword = "pretty";
    $dbhost = "localhost";
    $dbuser = "root";


// connect to the MySQL database server
$con = mysql_connect($dbhost, $dbuser, $dbpassword);
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
@mysql_select_db($database,$con) or die("Error connecting to db.");




//First decode the array
$arr = $_POST["json"];
$decarr = json_decode($arr, true);
$count = count($decarr);


for ($x=0; $x < $count; $x++){
$newrec = $decarr; 
$id = $newrec['id']; 
$name = $newrec['name']; 
$id_continent = $newrec['id_continent']; 
$email = $newrec['email']; 
$lastvisit = $newrec['lastvisit']; 
$cdate = $newrec['cdate']; 
$ddate = $newrec['ddate']; 

}

// Create insert array
$values[] = "('".$id."', '".$name."', '".$id_continent."', '".$lastvisit."','".$cdate."','".$ddate."','".$email."' )";  





// Insert the records   

$sql = "INSERT INTO finish (id, name, id_continent, lastvisit,cdate,ddate, email)
VALUES ".implode(',', $values);

$result = mysql_query($sql, $con) or die(mysql_error());  


?>

Upvotes: 0

Views: 11813

Answers (1)

Oleg
Oleg

Reputation: 221997

Sorry, but I can't full follow you. First of all you fill grid with the data returned from the server (from url:'request.php'). The data are probably from the database. The id of the dataitems are filled too. If you correctly fill the grid then the contain of id attribute of every row (the rowid) and the content of id column will be the ids from the database.

To delete data in the database you need just have ids of rows which need be deleted. Instead of that you send all data from selected rows to the server. Why you do this? The server have already all the data? The only explanation would be that you need the information for concurrency control. OK, let us that the information is really needed be sent.

The main problem in your existing code seems to me the error in the logic: You get first ids of all selected rows. Then you make separate Ajax call for every id. Inside of success callback of the call (after one row was successfully deleted on the server side) you get all selected rows and remove all selected rows from grid. Because success will be called asynchronously you can remove some rows from the grid before you send the data to the server.

Moreover you use already editGridRow method for editing of the rows. There are exist delGridRow method which send the list of selected ids to the server (default URL is editurl: "sendyo.php") and delete the rows after successful conformation from the server side. You can use delData parameter (see the documentation) to send any additional information to the list of ids. In the simplest form the code (the handle of $("#minibutton").click handle) could be like

$("#list").jqGrid("delGridRow", $("#list").jqGrid("getGridParam", "selarrrow"));

or, if you need send full content of all selected rows, then something like

var $grid = $("#list"),
    selectedrows = $grid.jqGrid("getGridParam", "selarrrow"),
    i,
    selectedData = [];

if (selectedrows.length) {
    for (i = 0; i < selectedrows.length; i++) {
        // fill array selectedData with the data from selected rows
        selectedData.push($grid.jqGrid("getRowData", selectedrows[i]));
    }
    $grid.jqGrid("delGridRow", $grid.jqGrid("getGridParam", "selarrrow"), {
        delData: {
            gridData: JSON.stringify(selectedData)
        }
    });
}

The above code will send tree parameter to the server: oper with the value "del", id with comma separated list of selected (deleted) rowids and gridData with the array of content of deleted rows serialized in JSON format.

You use #minibutton button currently. If you would use navGrid instead then you can simplify your code. You can use Delete button which calls delGridRow for you. You can use onclickSubmit callback to extend the posted data. If you don't need for example Add and Search buttons in the navigator bar you can use the code about as the following

$("#list").jqGrid("navGrid", "#pager", { add: false, search: false }, {}, {}, {
    url: "jsonsend.php",
    onclickSubmit: function (options, ids) {
        var $self = $(this), selectedrows = ids.split(","), selectedData = [], i,
            l = selectedrows.length;

        for (i = 0; i < l; i++) {
            // fill array selectedData with the data from selected rows
            selectedData.push($self.jqGrid("getRowData", selectedrows[i]));
        }

        // the returned data will be combined with the default data
        // posted by delGridRow
        return {
            gridData: JSON.stringify(selectedData)
        }
    }
});

Upvotes: 3

Related Questions