MrEnergy MrEnergy - 4 months ago 9
SQL Question

HTML Selectable table with edit/delete/view options

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>

Answer

There are two ways you could go with this.

  1. Disable the edit button when no rows are selected.
  2. 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 a 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");
  }
});
Comments