Save Local Data Array Back to Server via Ajax

Below is the code snippet to submit local array back to server through Ajax POST. jQuery Form plugin is required. Users must supply their own server-side save routine URL e.g. "save_local_array.php". The edit.php provided with phpGrid only works with database data source. 

    <script src="http://malsup.github.com/jquery.form.js"></script>
    <form id="admin_form">
        <div>
            <input type="submit" value="Submit Local Changes">
        </div>
    </form>

    <script>
        $(function() {
            // bind to the form's submit event
            $('#admin_form').submit(function(event) {
                $(this).ajaxSubmit({
                    type: 'post',
                    dataType:'json',
                    url:'save_local_array.php',
                    data:{
                        langArray:[] //leave as empty array here
                    },
                    beforeSubmit: function(arr, $form, options){
                        options.langArray = $('#data1').jqGrid('getRowData'); //current
                        console.log(JSON.stringify(options.langArray));
                        // return false; // here to prevent submit
                    },
                    success: function(){
                        // add routine here when success
                    }
                });

                // return false to prevent normal browser submit and page navigation
                return false;
            });
        });
    </script>

The data format posted back to the server is JSON format. 

Visit demo.phpcontrols.com and select "Local Array" demo, enable browser console, and the hit "Submit local changes" button, you should see a sample of the JSON data similar to the below posted back to the server.  

[{"id":"1","foo":"6ffcc0d3641930e3d8980ec43343ccc5","bar1":"bar1","bar2":"bar1","cost":"5","name":"Decker","quantity":"78","discontinued":"1","email":"grid_99@example.com","notes":""},{"id":"2","foo":"23e846638607adcbc730817a77581220","bar1":"bar2","bar2":"bar2","cost":"59","name":"Kocoboo","quantity":"90","discontinued":"1","email":"grid_1@example.com","notes":""},{"id":"3","foo":"f75dddd1e79826a219cb0bec217dc096","bar1":"bar3","bar2":"bar3","cost":"54","name":"Kocoboo","quantity":"45","discontinued":"0","email":"grid_33@example.com","notes":""}]



Datagrid Edit

  1. Constant value in create/edit form
  2. Display column in grid but hide when edit
  3. inline editing limited to single cell
  4. Get value from a specific cell from selected row
  5. phpGrid insert error - Need to hide primary key during edit
  6. Unable to edit
  7. Use arrow key to navigate a grid
  8. WYSIWYG doesn't work
  9. Editable Datagrid with Add Only Ability
  10. Change edit properties without modifying the source code
  11. Auto Increment (auto-increment) Field validation Due to Underscore Character in Primary Key
  12. CRUD (Create, Remove, Update, Delete) Not Working
  13. Dropdown Concatenation
  14. How to preserve a value of NULL as on update as it is being set to 0
  15. Cannot save or edit records. How to debug?
  16. Show a column as link based on value of another column
  17. Verify uniqueness of a new value entered when edited or added through phpGrid before saving
  18. Soft-delete record by flagging a value (Flag for delete)
  19. Must fill every fields to save, or nothing gets saved!
  20. Displaying TIMESTAMP Fields in an Editable Grid
  21. Datetime Format
  22. Create edit type "select" options manually from SQL query
  23. Access local array data source
  24. How to Obtain Entire Datagrid Data as an Array?
  25. Center Add/Edit Form
  26. Save stored value in PHP Session when inserting
  27. Save Local Data Array Back to Server via Ajax
  28. How to set the "select" col_edittype be readonly?
  29. Dynamic dropdown based on cell value in a row.
  30. How to Increase Size of Multiple Select in Edit Form
  31. Save Data in Calculated/Virtual Column to Database
  32. Sorting columns with Key-Value pairs when edit type is "select"
  33. Sorting columns with Key-Value pairs when edit type is "select"
  34. Week start on Monday
  35. How to grab the table rows in a grid
  36. How to view Sql generated during CRUD?
  37. How to show remaining characters in a field on the edit form?
  38. Use Inner Join
  39. Custom button in action column
  40. Edit Grid of a JOIN or a complex query
  41. How do I make lookup fields (id fields referencing to other table) make dropdown from other table?
  42. Capture time stamp on submit
  43. Sample code to save local array back to database with custom edit script
  44. How to Create a Confirm Dialog Box Before Submit a Change?

Feedback and Knowledge Base