CODEWITHSUNDEEP
jqueryruby-on-rails
User1983
User1983

Reputation: 87

Dynamically increment td id using JQuery

How to give dynamic id values in serial order for td id="Selected_Device" in below code using jQuery?

I need to append each device status is on line or offline. I am getting different status values for each td but it is overridden because it has same id.I have included my ajax call.It will take mac length and check mac is online or offline and append result in respective column.Current code only overriding last status in each td cell.Because td id is same for all device.

    <td class="Selected_Device" id="Selected_Device">

HTML

<tbody class="parameter_table">
  <% @my_devices.all.each do |parameter| %>
  <tr id="tr_device_<%=parameter.id %>">
    <td >
      <input  type="checkbox" class="checkBox" name="checkBox_m[]" >
    </td>
    <td class="macaddres" style="word-break:break-all;">
      <%= parameter.mac_address%> 
    </td>
    <td class="Selected_Device" id="Selected_Device">
    </td>
  </tr>
  <% end %>
</tbody>

JS File

function getDeviceType() {

   var selected_Device_Mac ;

 var selected_device_id = '';

         if ($('#PA').is(":visible")) {
         console.log("before")
         selected_Device_Mac = document.querySelectorAll(".macAddr");
         var k=selected_Device_Mac.length;
          selected_device_id = document.querySelectorAll(".Selected_Device");

  for (var i=0;i<k;i++){
 $.ajax({

         method: "GET",
         dataType: "text",
         url: "getDeviceStatus",
         data: {
             mac : selected_Device_Mac[i].innerText,
         },

         success: function(result) {
             if(result!==""){

                 if(result.includes("On-line")){
                    //$(selected_device_id).html("");
                    $(selected_device_id).append(result+"&nbsp;&nbsp;&#9989;");

                 }else if(result.includes("Off-line")){
                    // $(selected_device_id).html("");
                     $(selected_device_id).append(result+"&nbsp;&nbsp;&#10071;");


                 }


             }
        }

     }

 );

}

Upvotes: 0

Views: 319

Answers (2)

johan
johan

Reputation: 721

I would do something like this:

#in your view 
<td class="Selected_Device" id="Selected_Device_<%= parameter.id %>">

#in your js.erb
selected_device_id = document.getElementById("#Selected_Device_<%= parameter.id %>");

Upvotes: 1

barbsan
barbsan

Reputation: 3458

I'd completely rewrite your js code in following way:

function getDeviceType() {

  if (!$('#PA').is(":visible")) {
    return;
  }

  $(".macAddr").each(function(index, macAddrEl) {
        $.ajax({

          method: "GET",
          dataType: "text",
          url: "getDeviceStatus",
          data: {
            mac: $(macAddrEl).text().trim(),
          },

          success: function(result) {
            if (result !== "") {
              var nextColumnCell = $(macAddrEl).parent("tr").find(".Selected_Device")

              if (result.includes("On-line")) {
                nextColumnCell.append(result + "&nbsp;&nbsp;&#9989;")
              } else if (result.includes("Off-line")) {
                nextColumnCell.append(result + "&nbsp;&nbsp;&#10071;");
              }
            }
          }
        })

It gets list of elements with class macAddr (BTW. in template you have macaddres class) and for each element it gets its content $(macAddrEl).text().trim() and then it searches for element with class Selected_Device which has the same parent tr as current mac element $(macAddrEl).parent("tr").find(".Selected_Device")

You can see working demo (omited ajax part, it just reads content of cells with macaddres class and fills cells with class Selected_Device with index)

PS. Since id has to be unique, you have to do 

<td class="Selected_Device" id="Selected_Device_<%= parameter.id %>">

or (if you don't use it) you can remove id.

Upvotes: 0

Related Questions