Drop Down Menu is only Working for top most row

Question

I am fetching data from server and printing in to a table. I have taken a drop down menu with two options (approve and disapprove). I want calling a function to update the value only for that row where it got selected. My code is:

 <script type="text/javascript">
/**
 * This code declares your class and saves an object "blogentry" to the table on StackMob.
 * StackMob will create the table for you automatically based on your JSON.
 */
 $(document).ready(function() {
            result();
            function result() {

            var device = StackMob.Model.extend({ schemaName: 'device' });
            var mydevice = new device({ });
                    var q = new StackMob.Collection.Query();
                    q.equals('device_org', 1);
                    q.setRange(0,9).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 ++;
                                     }
                                 }
                                                                //  $("#ui").append("<tr><td>"+array[i].device_IMEI+"</td><td>"+array[i].device_model+"</td><td>"+array[i].device_permission+"<select id='abc' ><option value='true'>Approve</option><option value='false'>DisApprove</option></select></td> <td>"+ new Date(array[i].lastmoddate)+"</td><tr>");

                                 //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);
                                    //$('#device_id').attr('value',disapprov);
                                    //alert(val);
                                    $("#ui").append("<tr><td>"+array[i].device_IMEI+"</td><td>"+array[i].device_model+"</td><td>"+array[i].device_permission+"<select id='abc' ><option value='true'>Approve</option><option value='false'>DisApprove</option></select></td> <td>"+ new Date(array[i].lastmoddate)+"</td><tr>");

                $(document).on('change', 'select#abc', function(){
 // do something
 //alert("Updated");
var value=$("#abc").val(); 
alert(value);

 //exit;
});

                                 //end if condition
                            } // end for loop




                        } //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++)
                            {

                                if(counter<50)
                                {

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

                                    //------------------------------------------- end device schema code
                                                                        $("#ui").append("<tr><td>"+array[i].device_IMEI+"</td><td>"+array[i].device_model+"</td><td>"+array[i].device_permission+"<select id='myList'><option value='true'>Approve</option><option value='false'>DisApprove</option></select></td> <td>"+ new Date(array[i].lastmoddate)+"</td><tr>");


                                    counter++;

                                }
                                else
                                exit();
                            }
                        }
                        }
                     });
                     } // end check_newentry 
                     });

        </script>

The snap is:

enter image description here

What is Problem with this code and how it will work for all rows. I want to pick the IMEI number corresponding to that row. How can I do that? Please help me.

score 1 · Answer 1 · answered May 11 '13 at 19:52

1

try outside the loop to attach the event to any select with id abc

$(document).on('change', 'select#abc', function(){
 // do something
});

I believe when you try to get the element by id abc it just grabs the first one. You can either just change that code and use jquery instead of using

document.getElementById('abc')

Use

$('select#abc').change(function(){
 //do something
});

So it grabs all the selects with id abc

answered May 11 '13 at 19:52

sergioadh

1,461
1
16
24

I am fetching data from stackmob server.WIthin success of Query I am using loop to print it.WHen i tried your code its working but inside the loop only .So selecting only one option the function is being called the no of time as the row(ex. if there is 5 row its being called 5 time ).I want calling the function only one time. i think some problem with the scope of id='abc' thats why its not working outside the loop.so what should i do to solve this issue??? – Alpesh May 12 '13 at 15:28
for solving this issue i used exit so it called the function only ones. Now I want to get the device-IMEi number based on the same row where i selected the the option approve or disapprove. I mean I want to update the value of dropdown menu against that IMEI. so how can i get that pirticular IMEI? – Alpesh May 12 '13 at 16:19
i got success..i gave the class name to the Device-IMEI and then used var id = $(this).parent().siblings('.ids').text(); I got the value of corresponding Device IMEI of that particular row. thanks – Alpesh May 12 '13 at 17:20

Drop Down Menu is only Working for top most row

1 Answers1