Newit Newit - 1 year ago 121
Ajax Question

Ajax call only working on first page of webgrid

Hi all,

I have a webgrid that has pagination. One of the column displays an icon that can be clicked and will trigger an ajax call. The ajax call works fine on the first page of the webgrid but it doesn't seem to be working on the next pages. I don't think it's even hitting the ajax call, the display would also jump on the top of the page. Can someone tell me what I'm doing wrong or how I can make it work on the other pages of the webgrid as well?

var Grid = new WebGrid(canPage: true, canSort: false, rowsPerPage: 25, ajaxUpdateContainerId: "gridContent");
Grid.Bind(Model.DataList);
Grid.Pager(WebGridPagerModes.NextPrevious);

var gridColumns = new List<WebGridColumn>();

gridColumns.Add(PaymentGrid.Column(columnName: "WavFile", header: " ", format:@<text>
@if (item.WavFile != null && item.WavFile != "")
{ <a href="#" id="audiobtn" class="audiobtn"><img src="~/Content/audio.png"
title="Download" alt="@item.WavFile" /></a> }
else
{ @Html.Raw("<img src=\"/Content/audiooff.png\" />") }</text>));
gridColumns.Add(Grid.Column(columnName: "EmployeeID", header: "EmpID"));
gridColumns.Add(Grid.Column(columnName: "LastName", header: "Last", canSort:
true));
gridColumns.Add(Grid.Column(columnName: "FirstName", header: "First", canSort: true));

<div id="gridContent">
@Grid.GetHtml(
tableStyle: "table table-striped table-hover",
headerStyle: "",
footerStyle: "",
alternatingRowStyle: "",
rowStyle: "",
mode: WebGridPagerModes.All,
columns: Grid.Columns(gridColumns.ToArray())
)
</div>

<script type="text/javascript">
$(document).ready(function () {

$(".audiobtn").click(function (e) {

$.ajax({
type: "POST",
url: "/EmployeeInfo/VoiceAuthorization",
data: { audio: $(this).find('img').attr('alt') },
async: false,
cache: false,
success: function (response) {

if (e.button == 0) {
$("#ContextMenu").css('left', e.pageX + 5);
$("#ContextMenu").css('top', e.pageY + 5);
$("#ContextMenu").fadeIn(100);
}
},
error: function (error) {
alert('Invalid wav file');
console.log(error);
}
});

return false;
});

$("#ContextMenu").click(function () {
$("#ContextMenu").fadeOut(80);
});

$(document).click(function (e) {
if (e.target.id != 'audiobtn' && !$('#audiobtn').find(e.target).length) {
$("#ContextMenu").hide();
}
});

return false;
});
});


Thank you

Answer Source

It not work due the pages next to the first are generated dynamically.

Replace the code $(".audiobtn").click(function (e) { ... }); with $("body").on("click", ".audiobtn", function () { .. }); and should work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download