Click handler for Bootstrap 4 pagination only fires once

Question

Using ASPNET MVC, bootstrap 4. I've tried Chrome and Firefox I'm trying to manually submit my ajax request instead of using a submit button. Each time a new pagination link is click, a javascript is supposed to fire to grab the page clicked, and post to the controller. However, this javascript click handler only engages once (breakpoint on first line only gets hit once), and only on this first time will it post to server. subsequent clicks are not handled.

Controller code which handles request .....

int itemsperpage = 12;
            int totalitems = items.Count();
            int totalimagescurrentpage = 0;
            if (formcollection["paging"] != null)
            {
                try
                {
                    paging = System.Convert.ToInt32(formcollection["paging"]);
                }
                catch (Exception e)
                {
                    loggerwrapper.PickAndExecuteLogging("cannot convert pagingvaluefromform to integer");

                }
            }

            if ((itemsperpage * paging) > totalitems)
            {
                totalimagescurrentpage = totalitems;
            }
            else
            {
                totalimagescurrentpage = itemsperpage;
            }
            int skip = (paging - 1) * itemsperpage;


            items = items.OrderBy(item => item.CreationDate).Skip(skip).Take(totalimagescurrentpage);

            //------------------------- 
            //items needed to render _PostCards
            ViewBag.itemsperpage = itemsperpage;
            ViewBag.totalitems = totalitems;
            ViewBag.paging = paging;
            //--------------------------

            ViewBag.detailsview = true;
            ViewBag.BrowsingUserId = (string)System.Web.HttpContext.Current.Session["UserId"];

            if (Request.IsAjaxRequest()) 
            {
                return PartialView("_PostCards", await items.ToListAsync());
            }
            else
                return View(await items.ToListAsync());

javascript that only fires once

$(document).ready(function () {
    $(".page-link").click(function (event) {
        var pageid = event.target.id;
        var lastChar = pageid.substr(pageid.length - 1);
        $("#paging").val(lastChar);
        $("#pagingform").trigger('submit');
    });
}); (jQuery);

HTML rendered by the view

.....
<div id="grid">
<div aria-label="Page navigation example">
<ul class="pagination justify-content-center">


        <li class="page-item active"><a id="page1" class="page-link" href="#">1</a></li>
        <li class="page-item "><a id="page2" class="page-link" href="#">2</a></li>
        <li class="page-item "><a id="page3" class="page-link" href="#">3</a></li>
                <li class="page-item"><a id="n2" class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
<form action="/Items/Canada/BC/cityindex/Victoria?posttypefilter=downtown"          data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#grid" id="pagingform" method="post">
<input type="submit" class="ajaxformsubmit">
    <input type="hidden" name="paging" id="paging" />
</form>

What is your POST method and what does it return? What is your element with `id="grid"` and are your elements with `class="page-link" within that element? (in which case its because you are not using event delegation). You need to show the relevant code — , Sep 11 '18 at 22:16
You need to use [event delegation](https://learn.jquery.com/events/event-delegation/) to handle events on dynamically added elements (the elements you initially bound to no long exist because you replaced them in the ajax call) - use `$('#grid).on('click', '.page-link', function (event) {` — , Sep 11 '18 at 23:28
@StephenMuecke.event delegation resolved the situation perfectly. — arod, Sep 12 '18 at 14:59

score 0 · Answer 1 · edited Sep 11 '18 at 19:41

0

It seems that you are after an async call to get the data to update (new page) but not refresh back to the top of the page.

At first glance the error that you are running into is that you have not supplied a proper ID to the Ajax.BeginForm property UpdateTargetId.

   @using (Ajax.BeginForm("yourMethod", "yourController",
                            new AjaxOptions
                            {
                                HttpMethod = "POST",
                                InsertionMode = InsertionMode.Replace,
                                UpdateTargetId = "element_to_replace",
                            }))

Then your html would need to have the corresponding id.

<div id="element_to_replace">
your list/paging here
</div>

Hopefully this points you in the direction needed.

Check out some MSDN help here

edited Sep 11 '18 at 19:41

feedMe

3,431
2
36
61

answered Sep 11 '18 at 19:27

Adam Becker

1
1

that's not the case. I did not post the full html. In fact there is an div with id grid. It is outside the form. Like i said the whole flow works perfect the first click to a pagination link. The data is updated. It's the subsequent clicks. The javascript handler never gets called. I should mention this is in debug mode in visual studio. – arod Sep 11 '18 at 19:35
Check out this answer already on [Stack Overflow](https://stackoverflow.com/questions/11219817/mvc3-asynchronous-pagenation) You're headed in the right direction. Detailed in link. – Adam Becker Sep 11 '18 at 19:43
that link doesnt help. like i said this is a client-side issue, and all im looking for is to try to figure why my click handler stops firing after after one request – arod Sep 11 '18 at 21:51

Click handler for Bootstrap 4 pagination only fires once

1 Answers1