user3163213
user3163213

Reputation: 701

dynamic click not working jquery MVC4

I have a list with paging integration.

This is how list is coming-

foreach(var item in Model)
{

 <tr id="[email protected]">
     <td>
        @Html.DisplayFor(modelItem => item.vendorName)
     </td>
     <td>
        @Html.DisplayFor(modelItem => item.vendor_Representative)
     </td>
     <td>
        @Html.DisplayFor(modelItem => item.fixed_Line)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.mobile_No)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.fax_No)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.emaiL)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.addresS)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.rep_Contact)
      </td>
      <td>
        <span class="dropdown settings">
         <a href="javascript:;" class="btn btn-default btn-mini dropdown-toggle options" 
           data-toggle="dropdown"><i class="fa fa-cogs"></i></a>
         <ul class="dropdown-menu arrow pull-right">
            <li>
              <a href="javascript:;"><i class="fa fa-pencil"></i>&nbsp;Edit</a>
            </li>
            <li>
              <a href="javascript:;" id="[email protected]"><i class="fa fa-lock"></i>
               &nbsp;Delete
              </a>
            </li>
          </ul>

         </span>
        </td>
       </tr>
  }

Now I wanted to Delete row from this list.

For the first page it works fine and retrieves me back with alert with an id of current row.

But as soon as I click on second page from paging below It deleting row doesn't trigger the row's id.

jQuery-

<script type="text/javascript">
    $(function () {
        $(document).on('click', 'a[id^="[email protected]"]', function () {
              var $this = $('a[id^="[email protected]"]');
              var id = $this.parent().parent().parent().parent().parent().attr('id');
              alert(id);
                $.ajax({
                    url: '/Vendors/DeactivateVendor/@item.Id',
                    type: 'POST',
                    success: function (data) {
                        if (data.success == true) {
                           $('#' + '[email protected]').remove();
                             }
                         else {
                           window.location.href = "/UserAccount/Login/";
                           }
                         }

                });
             });
           });


     </script>

Above jQuery only works for first page that is existed in document now.

How Do I create click function for dynamically coming list after document changes to next page.

On first page-

enter image description here

On second page-

enter image description here

Upvotes: 1

Views: 255

Answers (2)

krillgar
krillgar

Reputation: 12815

That's happening because the code where you're tying the event to the table rows only is running when the outer page loads, and not when the partial views get refreshed via ajax.

The easiest and best way to resolve this is with jQuery's on.

You'll need to have a static element on the page that you can use as your first selector, and then just wire it up inside of your jQuery. For the purposes of this example, I'll wrap your table in a <div id="tableWrapper"></div>, but you can use any other element that the table will be inside that is part of the main view. I would also add a class called "delItem" to your delete anchor tags.

$(document).ready(function () {
    // Other stuff you need done.
    $('#tableWrapper').on("click",".delItem",  function () {
        deleteItem(this);
    });
});

var deleteItem(elem) {
    var $this = $(elem);
    // Continue on with your code to delete the item.
};

EDIT WITH ADDITIONAL DESCRIPTIONS OF WHAT IS GOING ON

So what is happening is that your main view loads once. Presumably, your partial view is loaded the first time as part of the initial response to the client.

When that page is processed by the browser, it gets to your javascript where you have your $(document).ready(). It begins to process the javascript, and goes, "Ah! I do have all of these 'a[id^="[email protected]"]' elements, so I'll wire up this event to them.

But when you go to the next page, just the Partial View gets reloaded via AJAX, so the browser doesn't need to fire the $(document).ready() again, as the "document" didn't change.

That's where the jquery on() comes into play. With this syntax, you're telling jQuery to "anytime an element matching the selector I provide (in this case .delItem) is added to the DOM, give it this function on the event I tell it to." So jQuery is dynamically scanning the DOM every time there is an update to the content to search for any new elements that match the selector. That's why it now works when you reload part of the content via AJAX.

Upvotes: 2

Naveen Chandra Tiwari
Naveen Chandra Tiwari

Reputation: 5133

try this:

if (data.success == true) {

 $('#' + id).remove();

 }

Upvotes: 0

Related Questions