PDA

View Full Version : حرفه ای: از کار افتادن توابع javascript بعد از انجام عملیات ajaxای



helpsos
دوشنبه 10 آذر 1393, 23:42 عصر
سلام به همه
به یه مشکلی برخوردم و اون اینه که :
من لیست اخبار رو صفحه بندی کردم و با ajax.actionlink این لیست رو تغییر می دم و صفحه ها رو مرور می کنم تا اینجا همه چی خوبه.
حالا فرض کنید که یه دکمه هم داشته باشم که مثلا عملیات حذف را برام انجام میده البته بازم به صورت Ajaxای.
ولی نمیدونم چرا وقتی که از دکمه های صفحه بندی ajax ای استفاده می کنم دیگه عملیات حذف کار نمیده.

من کدهای ویو را میذارم اینجا امیدوارم که لااقل یه نفر یه جواب درست بهم بده. جلوجلو ممنون:لبخند:
یه پارشال دارم که لیست رو نشون میده و دکمه های صفحه بندی اینجان:


<table style="width: 100%;" class="table table-bordered table-striped table-responsive">
<tbody>
<tr>
<th>#</th>
<th>نویسنده</th>
<th>متن پیام</th>
<th>تاریخ و زمان دریافت</th>
<th>وضعیت</th>
<th style="text-align: center">عملیات</th>

</tr>
@{
var counter = ((currentPage - 1) * count) + 1;
}
@foreach (var item in Model)
{
<tr>
<td>@Html.ConvertToPersianString(counter)</td>
<td>@item.Writer</td>

@{var newmessage = item.Message.Replace("<img src=", "<img class=\"imglist\" src=");
}
<td>@Html.Raw(newmessage)</td>
<td>@item.CreateDate </td>
<td>
@if (item.IsRead)
{ <span class="imgIcon imgread"></span>}
else
{ <span class="imgIcon imgunread"></span> }
@if (item.IsShow)
{ <span id="showimg-@item.ContactId" class="imgIcon imgshow handcursor"></span> }
else
{ <span id="unshowimg-@item.ContactId" class="imgIcon imgunshow handcursor"></span> }

<td>
@Html.ActionLink(" ", MVC.Admin.ContactUs.Edit(id: item.ContactId), new { @title = "پاسخ", @class = "nodecoration glyphicon glyphicon-edit", @rel = "tooltip" })
<span rel="tooltip" id="Deleterow-@item.ContactId" title="حذف" class="glyphicon glyphicon-trash handcursor"></span>
@if (item.Description != null)
{
<span rel="tooltip" title="@item.Description" class="glyphicon glyphicon-comment"></span>
}
</td>

</tr>
++counter;
}
</tbody>
</table>
@* Page Navigation *@
<div style="text-align: center;">
<ul class="pagination">
@if (currentPage != 1)
{
<li>
@Ajax.ActionLink(" ", MVC.Admin.ContactUs.ActionNames.List, MVC.Admin.ContactUs.Name,
new
{
bywriter = ViewBag.bywriter,
bydate = ViewBag.bydate,
byisread = ViewBag.byisread,
byisshow = ViewBag.byisshow,
page = 0,
count = ViewBag.COUNT
},

new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "listdiv",
OnBegin = "showLoading",
OnComplete = "reversejq"
}, new { @class = "glyphicon glyphicon-forward nodecoration", @rel = "tooltip", @title = " صفحه اول" })
</li>
}

@for (int i = firstPage; i <= lastPage; i++)
{
if (i + 1 == currentPage)
{
<li class="active"><a href="#">@Html.ConvertToPersianString(i + 1)</a></li>
}
else
{
<li>
@Ajax.ActionLink(Html.ConvertToPersianString(i + 1).ToString(),
MVC.Admin.ContactUs.ActionNames.List, MVC.Admin.ContactUs.Name,
new
{
bywriter = ViewBag.bywriter,
bydate = ViewBag.bydate,
byisread = ViewBag.byisread,
byisshow = ViewBag.byisshow,
page = i,
count = ViewBag.COUNT
}, new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "listdiv",
OnBegin = "showLoading",
OnComplete = "reversejq"
}, new { @class = "nodecoration" })
</li>
}
}
@if (currentPage <= max)
{
<li>
@Ajax.ActionLink(" ", MVC.Admin.ContactUs.ActionNames.List, MVC.Admin.ContactUs.Name,
new
{
bywriter = ViewBag.bywriter,
bydate = ViewBag.bydate,
byisread = ViewBag.byisread,
byisshow = ViewBag.byisshow,
page = max,
count = ViewBag.COUNT
},
new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
OnBegin = "showLoading",
UpdateTargetId = "listdiv",
OnComplete = "reversejq"
},
new { @class = "glyphicon glyphicon-backward nodecoration", @rel = "tooltip", @title = "صفحه آخر" })
</li>
}
</ul>
</div>



و یه ویو هم دارم که شامل کدهای javascript ایی من است و به صورت زیر است:


<div id="listdiv">
@{Html.RenderAction(MVC.Admin.ContactUs.ActionName s.List, MVC.Admin.ContactUs.Name);}
</div>

@section javascripts{
@* برای حذف اطلاعات استفاده می شود *@
<script type="text/javascript">
$(function () {

function addToken(data) {
data.__RequestVerificationToken = $("input[name=__RequestVerificationToken]").val();
return data;
}

function del() {
//حذف دانشجو
$('span[id^="Deleterow"]').on('click', function () {
var span = $(this);
var id = span.attr('id').replace('Deleterow-', '');


$.bootstrapModalConfirm({
caption: 'تایید حذف سطر',
body: 'آیا می خواهید پیام را حذف نمایید؟',
onConfirm: function () {
var tableRow = span.parent().parent();
$.ajax({
type: "POST",
url: '@Url.Action(MVC.Admin.ContactUs.ActionNames.Delet e, MVC.Admin.ContactUs.Name)',
data: addToken({ Id: id }), //مهم
dataType: "html", //مهم
complete: function (xhr, status) {
var data = xhr.responseText;
if (xhr.status == 403) {
window.location = "/login";
} else if (status == 'error' || !data || data == "nok") {
noty({ text: "متاسفانه خطایی رخ داده است", layout: 'center', type: 'warning', timeout: 5000 });
} else {
$(tableRow).fadeTo(600, 0, function () {
$(tableRow).remove();
});
}
}
});
},
confirmText: 'تایید',
closeText: 'انصراف'
});
});
}

function reversejq() {
tooltips();
del();
}

reversejq();

@* برای ویرایش اطلاعات استفاده می شود *@

$('.Edit').on('click', function (e) {
e.preventDefault(); //مي‌خواهيم لينك به صورت معمول عمل نكند
var id = $(this).attr('data-id');
$.bootstrapModalAjaxForm({
postUrl: '@Url.Action("Edit",MVC.Admin.ContactUs.Name)',
renderModalPartialViewUrl: '@Url.Action("Edit",MVC.Admin.ContactUs.Name)',
renderModalPartialViewData: JSON.stringify({ id: id }),
loginUrl: '/login',
contentType: "application/json; charset=utf-8",
dataType: "json",
// controller is returning a simple text, not json
complete: function (xhr, status) {
var data = xhr.responseText;
if (status === 'error' || !data) {
//handleError
}
else {
$('#dialogdiv').css("display", "none");
$('.modal-backdrop').removeClass();
//toastr.success("اطلاعات جدید با موفقیت ثبت گردید");
}
}
});
});

@* برای تغییر وضعیت نمایش استفاده می شود *@

$('span[id^="unshowimg"]').on('click', function () {
var span = $(this);
var Id = span.attr('id').replace('unshowimg-', '');

alert(Id);
$.ajax({
type: "POST",
url: '@Url.Action(MVC.Admin.ContactUs.ActionNames.EditS howState, MVC.Admin.ContactUs.Name)',
data: addToken({ Id: Id, showstate: true }),
dataType: "json",
error: function () { alert("اطلاعات ثبت نشد"); },
success: function () {
span.removeClass('imgunshow');
span.addClass('imgshow');

},
});
});

$('span[id^="showimg"]').on('click', function () {
var span2 = $(this);
var Id = span2.attr('id').replace('showimg-', '');

$.ajax({
type: "POST",
url: '@Url.Action(MVC.Admin.ContactUs.ActionNames.EditS howState, MVC.Admin.ContactUs.Name)',
data: addToken({ Id: Id, showstate: false }),
dataType: "json",
error: function () { alert("اطلاعات ثبت نشد"); },
success: function () {
span2.removeClass('imgshow');
span2.addClass('imgunshow');
//showimg.attr('title','عدم نمایش در سایت');
//alert("اطلاعات جدید با موفقیت ثبت گردید");
},
});
});
});
</script>
}



حالا به نظرتون باید چیکار کنیم؟:متعجب:

helpsos
چهارشنبه 12 آذر 1393, 11:48 صبح
دوستان یعنی هیشکی نیست یه راه نمایی بکنه که چرا وقتی با ajax بخشی از صفحه را update می کنیم دیگه کد های جاوا اسکریپت کار نمی کنند؟

البته یه راهنمایی که شدم این بوده که در قسمت OnComplete = "reversejq" بخش Ajax.actionlink اگه نام تابع مورد نظر را بنویسی دوباره اون تابع کار میده ولی مشکل اینه که فقط مثل اینکه یه نام میشه اونجا نوشت. حالا با توجه به این موضوع کسی راه حلی نداره؟ که مثلا چطوری میشه نام دو تابع را جلوی OnComplete = "" نوشت؟
یا اینکه چرا وقتی من 2 تا تابعم را که در داخل یه تابع گذاشتم به اسم reversejq در زمان اجرا firebug بهم این خطا رو میده:
ReferenceError: reversejq is not defined




null


به نظرتون جای تعریفش اشتباهه یا .....
ممنون میشم اگه کمک کنید.

با تشکر