Post datas to PHP from jQuery table with Handsontable Spreadsheet -
i want post data's handsontable ([handsontable.com][1]) spreadsheet them on php $_request.
my page intended allow input of information , validate them button. tried <form> $ a. ajax or $. post wasn't able wanted.
here code :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script data-jsfiddle='common' src='add/jquery.handsontable.full.js'></script> <link data-jsfiddle='common' rel='stylesheet' media='screen' href='add/jquery.handsontable.full.css'> <script data-jsfiddle='common' src='add/jquery.handsontable.removerow.js'></script> <script data-jsfiddle='common' src='add/numeral.de-de.js'></script> <link data-jsfiddle='common' rel='stylesheet' media='screen' href='add/jquery.handsontable.removerow.css'> <!-- below needed datecell (uses jquery ui datepicker) --> <script data-jsfiddle='common' src='add/jquery-ui.custom.min.js'></script> <link data-jsfiddle='common' rel='stylesheet' media='screen' href='add/jquery-ui.custom.css'> <script type="text/javascript"> $(document).ready(function(){ $("#spreadsheet").submit( function () { $.post( 'index.php', $(this).serialize(), function(data){ alert(data);// alert data server } ); return false; }); }); </script> <body> <div id="container"> <div class="columnlayout"> <div class="rowlayout"> <div class="desclayout"> <div class="pad" data-jsfiddle="tablecompt"> <h2>compta</h2> <div id="tablecompt"></div> </div> </div> <div class="codelayout"> <div class="pad"> <form name='spreadsheet' class='formulaire' id='spreadsheet' method='post'> <style data-jsfiddle="common"> .handsontable .currentrow { background-color: #e7e8ef; } .handsontable .currentcol { background-color: #f9f9fb; } </style> <script data-jsfiddle="tablecompt"> var container = $("#tablecompt"); var people = [ {ctopextract: false} ]; var email_validator_fn = function (value, callback) { settimeout(function(){ if (/.+@.+/.test(value)) { callback(true); } else { callback(false); } }, 1000); }; container.handsontable({ columnsorting: true, manualcolumnresize: true, manualcolumnmove: true, currentrowclassname: 'currentrow', currentcolclassname: 'currentcol', removerowplugin: true, rowheaders: true, data: people, minsparerows: 10, fixedrowstop: 1, contextmenu: true, beforechange: function (changes, source) { }, afterchange: function (changes, source) { if (source !== 'loaddata') { $("#tablecomptconsole").text(json.stringify(changes)); } }, colheaders: ['société', 'tetab', 'tnumint', 'tdocu', 'ctopextract', 'date comptable', 'journal', 'tiers', 'compte', 'libellé', 'débit (€)', 'crédit (€)', 'nature', 'tci', 'tci1', 'tci2', 'tci3', 'tci4'], columns: [ {data: 'societe'}, {data: 'tetab'}, {data: 'tnumint', type: 'numeric'}, {data: 'tdocu'}, {data: 'ctopextract', type: 'checkbox'}, {data: 'date', type: 'date'}, {data: 'tjournal', type: 'dropdown', source: ["8a", "8b", "8e", "8f", "8m"]}, {data: 'ttiers'}, {data: 'tcptg'}, {data: 'tlibecr'}, {data: 'debit', type: 'numeric', format: '0,0.00 $', language: 'de-de'}, {data: 'credit', type: 'numeric', format: '0,0.00 $', language: 'de-de'}, {data: 'nature'}, {data: 'tci'}, {data: 'tci1'}, {data: 'tci2'}, {data: 'tci3'}, {data: 'tci4'} ] }); </script> <button class='formulaire' type='submit' class='action' name='action' id="action" value='m'>mise à jour</button> <button class='formulaire' onclick=\"javascript:document.location.href='index.php'\" />annuler</button> </form> </div> </div> </div> </div> </div> </body> could me sending jquery spreadsheet button php page (which same page).
i'm new in domain , haven't been able find information. found examples ajax doesn't interest me.
thank in advance help.
-- sweet
i found solution. using form not necessary. here code:
var handsontable = $container.data('handsontable'); $parent.find('button[name=save]').click(function () { $.ajax({ url: "link.php", data: {"data": handsontable.getdata()}, //returns cells' data type: 'post', success: function (data) { alert(data); }, error: function () { $console.text('erreur de sauvegarde.'); } }); });
Comments
Post a Comment