MVC Webgrid, javascript stops working after sort and paging

Question

I have a problem with my webgrid, in one of my columns I have an actionlinks that has a JavaScript with a click function, everything works fine. But after I have sorted any column or paging the grid my JavaScript stops working. I have removed the ajaxupdatecontainerID property and my JavaScript works after paging but I can´t sort my columns anymore and after paging the browser scrolls to top of the page. check my code below:

<div id="grider">
    @{ var grid3 = new WebGrid(Model.webgridlastlopp.ToList(), rowsPerPage: 10, defaultSort: "Status", canPage: true, ajaxUpdateContainerId: "grider");}
    @grid3.GetHtml(tableStyle: "webgrid",
                        headerStyle: "webgrid-header",
                        footerStyle: "webgrid-footer",
                        alternatingRowStyle: "webgrid-alternating-row",
                        selectedRowStyle: "webgrid-selected-row",
                        rowStyle: "webgrid-row-style",
                        grid3.Column("Startstation", "Start station/kombiterminal"),
                                              grid3.Column("Slutstation", "Slut station/kombiterminal"),
                                              grid3.Column("Upphämtningsdatum", "Startdatum", format: @<text>@item.Upphämtningsdatum.ToString("yyyy/MM/dd")</text>),
                                              grid3.Column("Leveransdatum", "Leveransdatum", format: @<text>@item.Leveransdatum.ToString("yyyy/MM/dd")</text>),
                                              grid3.Column(format: (item) => Html.ActionLink("Visa detaljer", "OrderDetails", "Home", new { id = item.Ordernummer }, new { @class = "modal", @Style = "color:Gray;" }))
                                              ))
  </div>
  <script type="text/javascript">
        $(function () {
            $('.modal').click(function () {
                alert("hello");
        });
  </script>

@DanielA.White, looks like the standard one that comes with ASP.NET MVC: System.Web.Helpers.WebGrid. — Darin Dimitrov
– Darin Dimitrov, Commented Mar 13, 2012 at 16:10

Martin · Accepted Answer · 2012-03-13 16:15:16Z

1

As you page, new HTML is being loaded into the page. Because of this, you need to use the jQuery live method:

<script type="text/javascript">
        $(function () {
            $('.modal').live('click', function () {
                alert("hello");
        });
  </script>

jQuery live

answered Mar 13, 2012 at 16:15

Martin

11.1k8 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Rogers Over a year ago

Note that .live() is deprecated in favor of .on(). See api.jquery.com/on

Martin Over a year ago

@BrianRogers - I did not know that ... been using 1.5 and 1.6, haven't made it to 1.7 yet. Thanks

ashveli · Accepted Answer · 2017-09-12 12:51:25Z

1

In your code add reference to the js function for attribute

     @{ 
var grid3 = new WebGrid(
   Model.webgridlastlopp.ToList(), 
rowsPerPage: 10, 
    defaultSort: "Status", 
canPage: true, 
    ajaxUpdateContainerId: "grider",
ajaxUpdateCallback: "GridUpdate");
}

js function

function GridUpdate(data) {
        applyGridChanges();
    }

answered Sep 12, 2017 at 12:51

ashveli

2888 silver badges29 bronze badges

Collectives™ on Stack Overflow

MVC Webgrid, javascript stops working after sort and paging

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related