Getting the Value from an editable row

Question

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.

Snapshot of the editable table column

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 alpesh 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 Device-nickname for the correspondence IMEI .

For printing and growing the list I used:

for(var i=0; i<=count; i++)
{                   
    $("#ui").append("<tr><td>"+array[i].device_IMEI+"</td>  <td>"+array[i].device_model+"</td><td><div contenteditable >"+array[i].device_nickname+"</div></td><tr>");                              
}

Now My question is:

How can I call a function to update the values when the editing is done for each row. and How can I get the IMEI of that in which editing got done and i want to get also the value after editing of Device-nickname

thanks in advance !!!

full code is

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dashboard</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.8.0-bundled-min.js"></script>


 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
 <link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<!-- <link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/redmond/jquery-ui.css" />-->
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
 <script type="text/javascript" src="style/js/bootstrap.js"></script>
 <script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>
<link type="text/css" rel="stylesheet" href="style/css/bootstrap.css"></link>
<script type="text/javascript">
      /* <![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
    });
      /* ]]> */
</script> 

    <script type="text/javascript">

      /* <![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<=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("<tr><td>"+array[i].device_IMEI+"</td>  <td>"+array[i].device_model+"</td><td ><div class="device-name" contenteditable>"+array[i].device_nickname+"</div></td><td>"+array[i].device_org+"</td><td>"+ new Date(array[i].lastmoddate)+"</td><tr>");
                                //alert("save");        
                                //$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td>  <td>"+array[i].device_model+"</td><td><div class='divEditable' contenteditable='true' data-orig='"+array[i].device_nickname+"' >"+array[i].device_nickname+"</div></td><tr>");                              
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 < 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<=count; i++)
                            {




                                    $("#ui").append("<tr><td>"+array[i].device_IMEI+"</td>  <td>"+array[i].device_model+"</td><td>"+array[i].device_nickname+"</td><td>"+array[i].device_org+"</td><td>"+new Date(array[i].lastmoddate)+"</td><tr>");

                                    //------------------------------------------- end device schema code
                                    counter++;




                                exit();
                            }
                        }
                        }
                        });
                        }
                     });

                     </script>


</head>

<body>

    <div class="modal-body" style=''>
<table  class="data  table-bordered table table-striped"  id="ui" >
<tr style="background-color:blue;color:white;"><td width="25%">Device-imei</td><td>Device-Model</td><td>device-nickname</td><td>Device-org</td><td>Time</td></tr>  

    </table>
</div>

<!--<div id="last_mod_date" value=""></div>
<div id="latlng" value=""></div> -->



</script>
</body>
</html>

@Rohan Kumar.. thanks for editing. – Alpesh May 01 '13 at 07:41 — Alpesh, May 01 '13 at 07:41

Yauhen Vasileusky · Answer 1 · 2013-05-01T08:07:12.717

1

$('.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());
})

See http://jsfiddle.net/Jke9J/3/

To get other data you can assign classes for each column, get closest tr after data was changed, and find data by these classes inside found tr

Edit:

See http://jsfiddle.net/Jke9J/7/

edited May 01 '13 at 08:07

answered May 01 '13 at 07:50

Yauhen Vasileusky

655
5
11

Thanks Yauhen Vasileusky..Really very live example..let me check it. – Alpesh May 01 '13 at 08:13
Hey !! it doesn't work dude..i tried the both but not also getting the alert message.. – Alpesh May 01 '13 at 11:28
Well, maybe i've missunderstood somethig, but i can't find neither .imei, .model classes(my variant) not data-orig attribute(Rohans') varint. Moreover i don't any see subscribtion on blur/change/whatever events. – Yauhen Vasileusky May 01 '13 at 12:10
Axly i tried it on my system and did not post it because it was not working.. If you say .. I will post with the changes also. – Alpesh May 01 '13 at 12:17
Waiting for your reply sir.. Do i need to post the changed code.? – Alpesh May 01 '13 at 12:26
I did it.. now the data from the stackmob which gets display is not displaying... – Alpesh May 01 '13 at 12:35
What errors do you get in console? And what version of jQuery do you use? – Yauhen Vasileusky May 01 '13 at 12:38
1)It seems to me that your row string is incorrect. You should put 'device-name' in single quotes as this string is placed inside double quotes. 2)Add .imei and .model classes to corresponding td elements (in single quotes also) – Yauhen Vasileusky May 01 '13 at 13:18
`for(var i=0; i<=count; i++) { $("#ui").append(""+array[i].device_IMEI+" "+array[i].device_model+"
"+array[i].device_nickname+"
"+array[i].device_org+""+ new Date(array[i].lastmoddate)+""); //alert("save"); $('.device-name').on('blur', function(event){ alert(event.target.textContent); //alert($(event.target).closest('tr').find('.device_IMEI').text()); // alert($(event.target).closest('tr').find('.Device-Model').text()); });` This is working but – Alpesh May 02 '13 at 07:46
But problem is this is under loop, i want to get the changed value out of loop because i dont want repetation. i inserted the same code under loop but the ('.device-name').on('blur', function(event) thing is not working there – Alpesh May 02 '13 at 07:48

score 1 · Answer 2 · edited May 23 '17 at 12:28

1

SCRIPT:

var editable = document.querySelectorAll('div[contentEditable]');

for (var i=0, len = editable.length; i<len; i++){
    editable[i].setAttribute('data-orig',editable[i].innerHTML);

    editable[i].onblur = function(){
        if (this.innerHTML == this.getAttribute('data-orig')) {
            // no change
        }
        else {
            // change has happened, store new value
            this.setAttribute('data-orig',this.innerHTML);
        }
    };
}

Copied from onChange event with contenteditable

You can simplify the above code like

for(var i=0; i<=count; i++)
{                   
    $("#ui").append("<tr><td>"+array[i].device_IMEI+"</td>  <td>"+array[i].device_model+"</td><td><div class='divEditable' contenteditable='true' data-orig='"+array[i].device_nickname+"' >"+array[i].device_nickname+"</div></td><tr>");                              
} 

$(document).on('blur','.divEditable',function(){
    if($(this).html()!=$(this).data('orig'))
    // innnerHTML is changed then reassign the data-orig attr
    {
        $(this).data('orig',$(this).html());
            // code to get closest imei for that row
            imei=$(this).closest('tr').find('td:first-child').html();
            console.log(imei);// to test
    }
});

edited May 23 '17 at 12:28

Community

1
1

answered May 01 '13 at 08:00

Rohan Kumar

40,431
11
76
106

Which code not works the first or the second one? And where you get the problem. – Rohan Kumar May 01 '13 at 11:31
I have edited the code base now. Please see the issue and reply – Alpesh May 01 '13 at 11:49
Rohan..Please see the the last comment . we are about to solution – Alpesh May 02 '13 at 07:55
If you aplly class as I have shown like `
– Rohan Kumar May 02 '13 at 08:05
Its working but when i am putting it within the for loop then only.. out of loop its not working. and I don't want the value of changed column repeatable.. – Alpesh May 02 '13 at 08:45

Getting the Value from an editable row

2 Answers2