I'm getting a partial via ajax in asp.net mvc, it work fine for first time and second time but after that, it redirect to page instad of getting page via ajax.
this is my partial page code :
<script>
var jqgd = jQuery.noConflict();
jqgd(function () {
jqgd('#getdata-@ViewBag.term').on('click', 'a', function () {
if (this.href == "") { return; }
jqgd.ajax({
url: this.href,
type: 'GET',
cache: false,
success: function (result) {
alert(result);
jqgd('#retrieve-@ViewBag.term').html(result);
}
});
return false;
});
});
</script>
<script type='text/javascript'> // Added
jQuery(function ($) {
$("div, p, a, b, strong, bold, font, span, td")
.filter(function () {
return $(this).children(":not(.word)").length == 0
})
.each(function () {
this.innerHTML = $(this).text().replace(/\S+/g, function (word) {
return "<span class='word'>" + word + "</span>";
});
$(".word", this).filter(isEnglish).addClass('english');
$(".word", this).filter(isPersian).addClass('persian');
});
function isEnglish() {
return $(this).text().charCodeAt(0) < 255;
}
function isPersian() {
return $(this).text().charCodeAt(0) > 255;
}
});
</script>
<div id="retrieve-@ViewBag.term">
<div style="float:right;">
<div class="searchtitles" style="float: right;">@ViewBag.term</div>
<table class="jjt" cellpadding="0" cellspacing="0">
<tr class="j2t">
<td class="j13t">field</td>
<td class="j13t">field</td>
<td class="j13t">field</td>
<td class="j13t">field</td>
<td class="j13t">field</td>
<td class="j13t">field</td>
<td class="j13t">field</td>
</tr>
@foreach (var item in ViewBag.Terms)
{
Mydata
}
</table>
<div id="getdata-@ViewBag.term" style="float:left; direction:ltr; margin-left:-20px; margin-top:-15px;">@Html.PagedListPager((IPagedList)ViewBag.Tours, page => Url.Action("results", new { page }))</div>
</div>
</div>
i'm using pagedlist and when i change page after second time it seems all jquery commends terminated, what is problem? can anyone help me ?
EDIT : this part of code doesn't work too after second call.
<script type='text/javascript'> // Added
jQuery(function ($) {
$("div, p, a, b, strong, bold, font, span, td")
.filter(function () {
return $(this).children(":not(.word)").length == 0
})
.each(function () {
this.innerHTML = $(this).text().replace(/\S+/g, function (word) {
return "<span class='word'>" + word + "</span>";
});
$(".word", this).filter(isEnglish).addClass('english');
$(".word", this).filter(isPersian).addClass('persian');
});
function isEnglish() {
return $(this).text().charCodeAt(0) < 255;
}
function isPersian() {
return $(this).text().charCodeAt(0) > 255;
}
});
</script>
Your #getdata-@ViewBag.term
is within the #retrieve-@ViewBag.term
element but that gets replaced after the first call. You need to use event delegation.
Try this instead:
jqgd('#retrieve-@ViewBag.term').on('click', '#getdata-@ViewBag.term a', function () {
...
}
This is just a shot in the dark:
Get e from your click handler then try e.preventDefault(); before the return false.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.