Databases
StackOverflow2013
Postsdbo
POGetting the Value from an editable row
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting the Value from an editable row
    text
    copied!<p>I am working on an application where I need to update the the table cell value So I make that table column editable as below.</p> <p><img src="https://i.stack.imgur.com/3xYT4.png" alt="Snapshot of the editable table column"></p> <p>I am getting these values from the stackMob database(cloud) .Now I want to Update this Device-nickname(editable table column) from the front-end as from the picture. You can see I am getting the Device-nickname as Undefined. So i want to put the name as I want (as I put <strong>alpesh</strong> for 352700051252111) .Now when editing is done I means when I complete the editing for first row then I want to call a function which will update the <strong>Device-nickname</strong> for the correspondence <strong>IMEI</strong> . </p> <p>For printing and growing the list I used:</p> <pre><code>for(var i=0; i&lt;=count; i++) { $("#ui").append("&lt;tr&gt;&lt;td&gt;"+array[i].device_IMEI+"&lt;/td&gt; &lt;td&gt;"+array[i].device_model+"&lt;/td&gt;&lt;td&gt;&lt;div contenteditable &gt;"+array[i].device_nickname+"&lt;/div&gt;&lt;/td&gt;&lt;tr&gt;"); } </code></pre> <p>Now My question is:</p> <p>How can I call a function to update the values when the editing is done for each row. and How can I get the <strong>IMEI</strong> of that in which editing got done and i want to get also the value after editing of <strong>Device-nickname</strong></p> <p>thanks in advance !!!</p> <p>full code is</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; &lt;title&gt;Dashboard&lt;/title&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.8.0-bundled-min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt; &lt;link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" /&gt; &lt;!-- &lt;link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/redmond/jquery-ui.css" /&gt;--&gt; &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="style/js/bootstrap.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path_to/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path_to/jquery.simplePagination.js"&gt;&lt;/script&gt; &lt;link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/&gt; &lt;link type="text/css" rel="stylesheet" href="style/css/bootstrap.css"&gt;&lt;/link&gt; &lt;script type="text/javascript"&gt; /* &lt;![CDATA[ */ // Initialize StackMob object // Copy your init data from here: https://dashboard.stackmob.com/sdks/js/config // Your other app information is here: https://dashboard.stackmob.com/settings StackMob.init({ appName: "swara_sangam", clientSubdomain: ".........", publicKey: "....", apiVersion: 0 }); /* ]]&gt; */ &lt;/script&gt; &lt;script type="text/javascript"&gt; /* &lt;![CDATA[ */ $(document).ready(function() { result(); function result() { var device = StackMob.Model.extend({ schemaName: 'device' }); var mydevice = new device({organization_id:'1' }); var q = new StackMob.Collection.Query(); //q.lt('age', 50)..orderAsc('username'); q.setRange(0,15).orderDesc('lastmoddate'); mydevice.query(q, { success: function(modal) { //After StackMob returns "Bill Watterson", print out the result var array = modal.toJSON(); // console.debug(array); //$('#data').html(array[0].user_name); var val = array[0].lastmoddate; $('#last_mod_date').attr('value', val); var key; var count = 0; for(key in array) { if(array.hasOwnProperty(key)) { count ++; } } //alert(count); for(var i=0; i&lt;=count; i++) { // if(array[i].org_img == localStorage.getItem("stackmob.oauth2.user")) //alert(array[i].org_img); //$('#last_mod_date').html(array[0].lastmoddate); //alert(val); $("#ui").append("&lt;tr&gt;&lt;td&gt;"+array[i].device_IMEI+"&lt;/td&gt; &lt;td&gt;"+array[i].device_model+"&lt;/td&gt;&lt;td &gt;&lt;div class="device-name" contenteditable&gt;"+array[i].device_nickname+"&lt;/div&gt;&lt;/td&gt;&lt;td&gt;"+array[i].device_org+"&lt;/td&gt;&lt;td&gt;"+ new Date(array[i].lastmoddate)+"&lt;/td&gt;&lt;tr&gt;"); //alert("save"); //$("#ui").append("&lt;tr&gt;&lt;td&gt;"+array[i].device_IMEI+"&lt;/td&gt; &lt;td&gt;"+array[i].device_model+"&lt;/td&gt;&lt;td&gt;&lt;div class='divEditable' contenteditable='true' data-orig='"+array[i].device_nickname+"' &gt;"+array[i].device_nickname+"&lt;/div&gt;&lt;/td&gt;&lt;tr&gt;"); alert("save"); //end if condition } // end for loop $('.device-name').on('blur', function(event){ alert(event.target.textContent); alert($(event.target).closest('tr').find('.imei').text()); alert($(event.target).closest('tr').find('.model').text()); }) } //end success }); // end imagesearch schema query } // end result function setInterval(check_newentry,1000); function check_newentry() { var device = StackMob.Model.extend({ schemaName: 'device' }); var mydevice = new device({ }); var q = new StackMob.Collection.Query(); q.orderDesc('lastmoddate'); mydevice.query(q, { success: function(modal) { //After StackMob returns "Bill Watterson", print out the result var array = modal.toJSON(); // console.debug(array); //$('#data').html(array[0].user_name); // alert(lastmod_date_old +"..."+ lastmod_date); if(lastmod_date_old &lt; lastmod_date) { var val = array[0].lastmoddate; $('#last_mod_date').attr('value', val); var key; var count = 0; var counter=0; for(key in array) { if(array.hasOwnProperty(key)) { count ++; } } //alert(count); for(var i=0; i&lt;=count; i++) { $("#ui").append("&lt;tr&gt;&lt;td&gt;"+array[i].device_IMEI+"&lt;/td&gt; &lt;td&gt;"+array[i].device_model+"&lt;/td&gt;&lt;td&gt;"+array[i].device_nickname+"&lt;/td&gt;&lt;td&gt;"+array[i].device_org+"&lt;/td&gt;&lt;td&gt;"+new Date(array[i].lastmoddate)+"&lt;/td&gt;&lt;tr&gt;"); //------------------------------------------- end device schema code counter++; exit(); } } } }); } }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="modal-body" style=''&gt; &lt;table class="data table-bordered table table-striped" id="ui" &gt; &lt;tr style="background-color:blue;color:white;"&gt;&lt;td width="25%"&gt;Device-imei&lt;/td&gt;&lt;td&gt;Device-Model&lt;/td&gt;&lt;td&gt;device-nickname&lt;/td&gt;&lt;td&gt;Device-org&lt;/td&gt;&lt;td&gt;Time&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;!--&lt;div id="last_mod_date" value=""&gt;&lt;/div&gt; &lt;div id="latlng" value=""&gt;&lt;/div&gt; --&gt; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload