javascript - Disabling click event of Controls in Table Data -
i have list of controls in table data enclosed in div tag parent tag , want disable click events on power on , power off button . presently if click buttons request sent website iot . want disable click event on these 2 items .
here code looks :
<table class="pure-table pure-table-horizontal" style="width: 90%;"> <thead> <tr> <th>#</th> <th>device name</th> <th>status</th> <th>temperature (° c)</th> <th align="left">action</th> </tr> </thead> <tbody> <% devices.foreach(function(device, i){ %> <tr> <td><%= (i + 1) %></td> <td> <%= device.name || device.macaddress %> </td> <td id="text_<%= device.id %>"> <% if (device.updateinprogress) { %> <i class="fa fa-spinner fa-spin"></i> <% } else if (device.powerstate == false) { %> <%= "powered off" %> <% } else if (device.startstate == true) { %> <%= "running" %> <% } else { %> <%= "not running" %> <% } %> </td> <td> <% if (device.updateinprogress){ %> n/a <% } else if (device.powerstate) { %> <div class="pure-g"> <div class="pure-u-1-4"> <%= device.temperature %> </div> <!--i tried commenting remove temperature edit icon single device--> <!--<div class="pure-u-1-4">--> <!--<i class="fa fa-pencil-square-o" id="set_temp" data-value="<%= device.id %>"></i>--> <!--</div>--> </div> <% } else { %> n/a <% } %> </td> <td align="left"> <a href='/user/startoff/<%= device.id %>?boxid=<%= id %>' class="pure-button button-green <%= device.updateinprogress == true ? 'hidden' : device.powerstate == false ? 'hidden' : device.startstate == false ? 'hidden' : '' %>" type="button">start off</a> <a href='/user/starton/<%= device.id %>?boxid=<%= id %>' class="pure-button button-green <%= device.updateinprogress == true ? 'hidden' : device.powerstate == false ? 'hidden' : device.startstate == true ? 'hidden' : '' %>" type="button">start on</a> <a href='/user/poweroff/<%= device.id %>?boxid=<%= id %>' class="pure-button button-warning <%= device.updateinprogress == true ? 'hidden' : device.powerstate == true ? '' : 'hidden' %>" type="button">power off</a> <a href="/user/poweron/<%= device.id %>?boxid=<%= id %>" class="pure-button <%= device.updateinprogress == true ? 'hidden' : device.powerstate == true ? 'hidden' : '' %>" type="button">power on</a> <a href="/user/deletedevice/<%= device.id %>?boxid=<%= id %>" class="pure-button button-error pull-right <%= device.updateinprogress == true ? 'hidden' : '' %>" type="button "> <i class="fa fa-times"></i> </a> </td> </tr> <% }) %> </tbody> </table>
this running on node.js website .
also ideally how screen looks current code :
i want display same except click events on "power on" , "power off " should nothing .
what thought remove " " know making link or url active . not able fit code without .
please .
you can add class disabled
on link. using either css or javascript disable links class:
<a href="/user/poweron/<%= device.id %>?boxid=<%= id %>" class="disabled pure-button <%= device.updateinprogress == true ? 'hidden' :device.powerstate == true ? 'hidden' : '' %>" type="button">power on</a> <script> $('body').on('click','a.disabled', function(e){ e.preventdefault(); }) </script> <!-- or --> <style> a.disabled{ cursor: not-allowed; pointer-events: none; } </style>
bear in mind browser compatibility css solution.
Comments
Post a Comment