GeekyNuns GeekyNuns - 3 months ago 15
ASP.NET (C#) Question

Scripts stop working after paging WebGrid

So i have modal with partial view, where is nested WebGrid (where is list of options user can choose) and BeginForm (where chosen values are set and post is made). I had an issue that my modal window was closing after paging, so on SO i was told to write my code this way ->

PartailView (modal):

@model BTGHRM.Models.HarmingFactorsModel

@{
var db = new HRMEntities();
WebGrid grid = new WebGrid(db.CatalogHarmingFactors, canPage: true, canSort: false, rowsPerPage: 5, ajaxUpdateContainerId: "deploymentsGrid1");
}


<div id="deploymentsGrid1">
@if (db.CatalogHarmingFactors.Any())
{
@grid.GetHtml(
tableStyle: "table",
headerStyle: "table_HeaderStyle",
footerStyle: "table_PagerStyle",
rowStyle: "table_RowStyle",
alternatingRowStyle: "table_AlternatingRowStyle",
selectedRowStyle: "table_SelectedRowStyle",
columns: grid.Columns(

grid.Column("Nr", @Resources.Localization.nr, format: @<text>
@item.Nr
</text>, style: "p20"),

grid.Column("Description", @Resources.Localization.description, format: @<text>
@item.Description
</text>, style: "p70"),


grid.Column("", "", format: @<text>
<input id="select_bttnn" class="select_bttn" style="width:78px" type="button" value=@Resources.Localization.select data-nr="@item.Nr" data-description="@item.Description" />
</text>)
)
)
}
</div>

<br />

<div class="container">

@using (Html.BeginForm("AddHarmingFactorToList", "Health", FormMethod.Post))
{
@Html.HiddenFor(m => m.EmployeeId)

@Html.TextBoxFor(m => m.Nr, Model.Nr, new { style = "width:20%", id = "Number1" })
@Html.TextBoxFor(m => m.Description, Model.Description, new { style = "width:70%", id = "Desc1" })
<br />
<br />
@Html.LabelFor(m => m.Start_date)
@Html.TextBoxFor(m => m.Start_date, new { id = "datepicker", style = "width:25%" })
@Html.LabelFor(m => m.End_date)
@Html.TextBoxFor(m => m.End_date, new { id = "datepicker2", style = "width:25%" })

<br /><br />
<input type="submit" value="@Resources.Localization.save" style="width:78px" />
}
<button id="closer">@Resources.Localization.back</button>
</div>


and Method :

public PartialViewResult _GetHarmingFactorPartial()
{
int userId = GetUserId("s");
BTGHRM.Models.HarmingFactorsModel newHarmingFactor = new BTGHRM.Models.HarmingFactorsModel();
newHarmingFactor.EmployeeId = userId;
return PartialView("Partial/_HarmingFactorPopUp", newHarmingFactor);
}


which is called in main view like that:

@Html.Action("_GetHarmingFactorPartial", "Health")


Now paging does not close the whole modal, and user clicking the button sets values to beginForm fields, just as planned. But on pageing script, which is nested in my main view, stops working, and sellect_button does not do anything, because on paging i get new html inside my modal. I tried to put my script in every single place, but it does not start working whether it is in my partial view in section scripts, or in the beginning of the page.

So here is the script:

<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
height: 400,
width: 600,
scrollable: false,
show: {
effect: "blind",
duration: 1000
}
});
});

$(function () {
$(".select_bttn").click(function () {
var nr = $(this).data('nr');
var description = $(this).data('description');

$("#Number").val(nr);
$("#Desc").val(description);
});
});
</script>


How could I fix that issue?

Answer

Replace the click event logic for your button with the code below:

  $("body").on('click', '.select_bttn', function () {
    alert("Click fired");
    var nr = $(this).data('nr');
    var description = $(this).data('description');

    $("#Number").val(nr);
    $("#Desc").val(description);
});
Comments