HTML Selectable table with edit/delete/view options

Question

I have table, where you can select table rows, and it passes the information to modal window. But there is problem, I want the popup window to show error if there is no row selected

Button to edit row

<a class="icon icon-pencil js-popup js-tooltip" href="#edit" title="Edit selected row"></a>

JavaScript Code

 $(document).on('click', '#table_contactgroups tbody tr', function(e) {
    $(this).addClass('selected').siblings().removeClass('selected');

    var name = $(this).find('td:first').html();
    var id = $(this).attr('id');

    $('#edit input[name="name"]').val(name)
    $('#edit input[name="id"]').val(id)

    $("#name").text(name);
    $('#delete input[name="id"]').val(id)
});

Modal

<div id="edit">
    <h2 class="text-center ls-large">Edit contact group</h2>
      <form class="js-ajax-form" data-ajax-form="edit=a.logged-in;editFrom=
               <?php echo URL_BASE; ?>template/header.php"
                      name="contacts-form" method="post"
                      action="<?php echo URL_BASE; ?>contactgroups/contactgroup_manager.php?a=edit">
               <fieldset>
                        <!-- <input type="text" name="name" placeholder="Name">-->
                 <div class="input-wrap">
                    <input type="text" name="name" maxlength="45" value="" placeholder="Name">
                 </div>
                 <input type="hidden" name="id" value="">
              </fieldset>
             <div class="controls multiple">
                 <button class="btn btn-default btn-small" type="submit" name="Edit" value="Edit">Submit</button>
                  <a class="btn btn-unimportant btn-small js-popup-close" href="#">Cancel</a>
             </div>
     </form>
</div>

if there are no rows, why allow the popup to even be shown? The code which triggers the popup/modal is not shown, but given that you already have a function that relies on the user clicking on a row, you could trigger showing the modal within that function. That way, if there are no rows, the user cannot click on a row, therefore the modal cannot be shown. Then you don't need an error message. — ADyson, Jul 11 '16 at 08:05
But if there are rows, how to show when you click on edit button that row is not selected? — MrEnergy, Jul 11 '16 at 08:15
don't have an edit button. Show the popup directly when the row is clicked. It's one less click for the user. They don't have to select a row and then click edit. They just click the row. — ADyson, Jul 11 '16 at 08:36
But I have view and delete buttons too, I want to show the errors there too. http://i.imgur.com/Q7TGzFK.png http://i.imgur.com/CHkSIkH.png http://i.imgur.com/RFVpeHr.png — MrEnergy, Jul 11 '16 at 08:48

score 1 · Accepted Answer · edited May 23 '17 at 11:51

There are two ways you could go with this.

Disable the edit button when no rows are selected.
Display an error when the edit button is pressed with no rows selected.

Arguably the first one is more user-friendly since it stops them making an unnecessary click.

In either case, you need to ensure a row is selected. So if you disable your edit button at page load like this using the disabled attribute:

<button type="button" id="EditButton" disabled>Edit</button>

Then in your existing function which runs when the user clicks on a row, you can enable it, since you now have a selected row:

$(document).on('click', '#table_contactgroups tbody tr', function(e) {
  //...
  $("#EditButton").prop('disabled', false);
});

That way, if there are no rows, the button never gets enabled.

N.B. I notice your Edit "button" is actually a hyperlink. If you want to continue using that, this answer may be helpful in determining how to enable/disable it : Disable link using css. Otherwise you might be better to replace it with a button, or hide it instead. It's more difficult to make hyperlinks unclickable.

If you want to go down route 2, and display an error message when no row is selected, you'll have to handle the click event of the hyperlink. First, give it an id.

<a id="EditLink" class="icon icon-pencil js-popup js-tooltip" href="#edit" title="Edit selected row"></a>

Then handle the click, and check for selected rows. Since you're using the ".selected" class to denote a selected row, this is fairly easy to test for.

$("#EditLink").click(function(event) {
  if ($(".selected").length == 0)
  {
    event.preventDefault(); //stops the normal click behaviour from occurring
    alert("Please select a row to edit");
  }
});

I used the second method for now, will see if I can improve it later with showing message in modal box. — MrEnergy, Jul 11 '16 at 09:40

HTML Selectable table with edit/delete/view options

1 Answers1