ajax - JavaScript to get user input from editable table cell and send to server via json -
i created table 5 columns dynamically. 2 (the second , third column) of 5 columns should editable on fly. each time when user click on 1 editable table cell, javascript should catch user input , send data server in json format. have problem catch user input , send server. please help. sample code -
<!doctype html> <html> <head> <title>editable table</title> <style type="text/css" title="currentstyle"> @import "css/table.css"; </style> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> </head> <body id="dt_example"> <div id="container"> <div class="full_width big"> data table<br /> </div> <div class="editab"> <table border="1"> <thead> <tr> <th>contract number</th> <th>current status</th> <th>sale balance amount</th> <th>interest rate</th> <th>discount</th> </tr> </thead> <tbody> <tr> <td>00123</td> <td onclick="edittablecell(this)">a30</td> <td onclick="edittablecell(this)">$1,500.00</td> <td>3.99 %</td> <td>140</td> </tr> <tr> <td>00234</td> <td onclick="edittablecell(this)">b20</td> <td onclick="edittablecell(this)">$2,500.00</td> <td>3.99 %</td> <td>160</td> </tr> <tr> <td>00345</td> <td onclick="edittablecell(this)">c40</td> <td onclick="edittablecell(this)">$3,500.00</td> <td>3.99 %</td> <td>180</td> </tr> <tr> <td>00456</td> <td onclick="edittablecell(this)">a20</td> <td onclick="edittablecell(this)">$4,500.00</td> <td>3.99 %</td> <td>200</td> </tr> <tr> <td>00567</td> <td onclick="edittablecell(this)">b30</td> <td onclick="edittablecell(this)">$5,500.00</td> <td>3.99 %</td> <td>225</td> </tr> <tr> <td>00678</td> <td onclick="edittablecell(this)">c10</td> <td onclick="edittablecell(this)">$6,500.00</td> <td>3.99 %</td> <td>250</td> </tr> <tr> <td>00789</td> <td onclick="edittablecell(this)">a30</td> <td onclick="edittablecell(this)">$7,500.00</td> <td>3.99 %</td> <td>300</td> </tr> </tbody> </table> </div> </div> <script type="text/javascript"> var selectstate = false; var selectedelement = null; var textinput = null; var celltext = null; var txt = "test"; var idcount = 0; function edittablecell( e ){ if ( selectstate == false ){ selectedelement = e; celltext = e.innerhtml; e.innerhtml = ""; var objinput = document.createelement("input"); objinput.type = 'text'; objinput.value = celltext; objinput.id = "txt" + idcount++; objinput.onkeypress = edittextbox; objinput.size = 15; textinput = objinput; e.appendchild(objinput); selectstate = true; } else if (e != selectedelement) { selectedelement.innerhtml = celltext; selectstate = false; } } function edittextbox( e ){ if (navigator.appname == "microsoft internet explorer"){ e = window.event; key = e.keycode; } else if (navigator.appname == "netscape"){ key = e.which; } if ( key == 13 ){ selectedelement.innerhtml = textinput.value; selectstate = false; } else if ( key == 27 ){ selectedelement.innerhtml = celltext; selectstate = false; } } /* var attrname = "": var attrvalue = ""; if ($('#test1') { attrname= "editfield01"; attrvalue = $(#test1).val(); } if ($('#test2') { attrname= "editfield02"; attrvalue = $(#test2).val(); } if ($('#test3') { attrname= "editfield03"; attrvalue = $(#test3).val(); } var values = '{"' + attrname + '":' + attrvalue + '}'; $.ajax({ url: serverurl + "/abc/contract/" + poolid, async: false, type: "put", data: json.stringify(values), datatype: 'json', processdata: false, contenttype: 'application/json', success: showresponse(json) { // todo: info returned in data structure? showresponse; }, error: function(err) { alert("failed update attribute"); htmlerrordialog(err.responsetext); } });*/ function showresponse(json) { if(json.success){ // handle successful response here alert("user input column sent successfully!"); } else { // handle unsuccessful response here alert("user input fail send. please try again"); } } </script> </body> </html>
you're not passing json data showresponse:
success: showresponse(json) { // todo: info returned in data structure? showresponse; }, pass along so, , make sure json actual object , don't need parse first:
success: function(json) { // check json actual object via alert // alert(json); showresponse(json); }, edit: okay after lot of working around, have simple test case making fields editable. please note uses jquery, , comments inline:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <!-- date: 2011-05-10 --> </head> <body> <form> <table border="1"> <thead> <tr> <th>contract number</th> <th>current status</th> <th>sale balance amount</th> <th>interest rate</th> <th>discount</th> </tr> </thead> <tbody> <tr> <!-- "identifier" class makes have id pass our ajax script know change --> <td class="identifier">00123</td> <td class="editable">a30</td> <td class="editable">$1,500.00</td> <td>3.99 %</td> <td>140</td> </tr> </tbody> </table> </form> <script type="text/javascript"> // bind our event handler td elements class editable $('td.editable').bind('click', function() { // create editable input if 1 doesn't exist if(!$(this).has('input').length) { // text cell containing value var value = $(this).html(); // create new input element value of cell text var input = $('<input/>', { 'type':'text', 'value':value, // give onchange handler when data changed // ajax call change: function() { var new_value = $(this).val(); // finds sibling td element class identifier have // id pass ajax call var cell = $(this).parent(); // position of td cell... var cell_index = $(this).parent().parent().children().index(cell); // .. find corresponding header var identifier = $('thead th:eq('+cell_index+')').html(); //ajax post id , new value $(this).replacewith(new_value); } }); // empty out cell contents... $(this).empty(); // ... , replace input field has value populated $(this).append(input); } }); </script> </body>
Comments
Post a Comment