1

Attempted to put a delete button that works in a table into a modal, with a table and it's like the click event is not firing at all. Hit's not back end code, no console.log(s), or js break points. Am I missing something?

Modal's Table

<table class="table table-hover table-md ">
  <thead>
    <tr>
      <td class="text-left TableHead">Role</td>
      <td class="text-right TableHead">Delete</td>
    </tr>
  </thead>

  @*--Table Body For Each to pull DB records--*@
  <tbody>
    @foreach (var role in Model.Roles)
    {
      <tr>
        <td>@role</td>
        <td>
          <button class="sqButton btnRed float-right zIndex" 
                  title="Delete" data-toggle="ajax-modal" data-target="#deleteRoleUser"
                  data-url="@Url.Action("Delete", "Administration",
                  new {Id = Model.Id , Type = "roleUser"})" >
            <i class="glyphicon glyphicon-remove"></i>
          </button>
        </td>
      </tr>
    }
  </tbody>
</table>

Controller that it's supposed to call

[HttpGet]
  public async Task<IActionResult> Delete(string id, string type)
  {         
    if (type == "user") {
      ViewBag.Type = "user";
      var user = await userManager.FindByIdAsync(id);
      if (user == null)
      {
        ViewBag.ErrorMessage = $"User with Id = {id} cannot be found";
        return View("NotFound");
      }
      var model = new EditUserViewModel
      {
        Id = user.Id,          
        UserName = user.UserName,           
      };
      ViewBag.UN = user.UserName;
      return PartialView("~/Views/Modals/_DeleteModalPartial.cshtml", model);
    }
    if (type == "roleUser")
    {
      ViewBag.Type = "roleUser";
      var role = await roleManager.FindByIdAsync(id);
      if (role == null)
      {
        ViewBag.ErrorMessage = $"Role with Id = {id} cannot be found";
        return View("NotFound");
      }
      var model = new EditRoleViewModel
      {
        Id = role.Id,
        RoleName = role.Name,
      };
      ViewBag.Role = role.Name;
      return PartialView("~/Views/Modals/_DeleteModalPartial.cshtml", model);
    }
    else
    {
      ViewBag.ErrorMessage = $"cannot be found";
      return View("NotFound");
    }       
  }

I am not sure why the click event on the button is not working at all. I have tried removing random code and literally nothing is making it go over to the controller at the least.

EDIT added javascript

$(function () {
    var placeholderElement = $('#modal-placeholder');

    $('[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            placeholderElement.html(data);
            placeholderElement.find('.modal').modal('show');
        });
    });
});

$('.sqButton').click( function (event) {  
    event.stopPropagation();
});
S. Kellar
  • 45
  • 7
  • You have javascript attaching an event to the button? Please share any related javascript. Also your parameters don't seem to match... you have `id` but are passing `Id` something for `type` and `Type` – zgood Oct 04 '19 at 21:03
  • @zgood , i know that seems weird but this same exact line of code works correctly on the parent table (outside modal). The only javascript is now added to the main post – S. Kellar Oct 04 '19 at 21:08
  • I would try changing this: `$('[data-toggle="ajax-modal"]').click(function (event) ...` to this: `$(document).on('click', '[data-toggle="ajax-modal"]', function (event) ...` to create an event delegate. Your event might not be attaching to the button because on page load the button doesn't exist yet – zgood Oct 04 '19 at 21:11
  • @zgood , good catch; however, in this situation -- no change, still doesn't work :( – S. Kellar Oct 04 '19 at 21:13
  • 1
    I wrote it wrong... just updated it... try the new code – zgood Oct 04 '19 at 21:14
  • That did it! @zgood thank you!! (if you post it as an answer i'd love to mark it and give you credit) – S. Kellar Oct 04 '19 at 21:16

3 Answers3

1

Since the button doesn't exist on page load you will have to create a event delegate to something that does exist on page load that will attach the event to the right element when it finally does appear in the DOM

In this case we will use the document (because it always exists on page load, some people use 'body') to delegate the event to the [data-toggle="ajax-modal"], like this:

    $(document).on('click', '[data-toggle="ajax-modal"]', function (event) {
       // code here
    });

This will attach the event to the [data-toggle="ajax-modal"] elements on page load AND after page load if the element gets added later.

zgood
  • 12,181
  • 2
  • 25
  • 26
  • PS: A better delegator is $('#modal-placeholder') – mplungjan Oct 05 '19 at 05:27
  • @zgood , back with another question comment regarding this. Changing this JS caused the parent table to misbehave and not show up when clicking the the red x, and caused the modal's table to work when it wants. If I put your script edit and my script edit together - it works fine? any comments on the weirdness? – S. Kellar Oct 08 '19 at 15:11
0

Try replacing your javascript code

$('.sqButton').click( function (event) {  
    event.stopPropagation();
});

With the following code

$('.sqButton').click(function(event) {
    var url = $(this).data('url');
    $.get(url).done(function (data) {
     placeholderElement.html(data);
     placeholderElement.find('.modal').modal('show');
   });
  });
Danoram
  • 8,132
  • 12
  • 51
  • 71
ABlue
  • 664
  • 6
  • 20
-1

if you manually force click, does it hit your controller?

    document.querySelector('.btnRed').click();

is there any other element(s) "hijacking" click event?

yob
  • 528
  • 4
  • 9