اجرا نشدن jquery هنگام لود صفحه با ajax

[xoogle.ir]

سلام دوستان
من تازه jquery رو شروع کردم. به کمک jquery الان دارم صفحه های سایتم رو به صورت Ajax لود میکنم.
اینجاش مشکلی نداره اما مشکل از جایی به وجود میاد که وقتی صفحه ای رو به صورت Ajax لود میکنم دیگه توابعی که برای اون صفحه نوشتم کار نمیکنه.

فرض کنید من 2 تا صفحه دارم توی صفحه b اومدم یه button گذاشتم که وقتی روش کلیک میشه یه div رو نمایش میدم و دوباره مخفی میکنه (toggle) وقتی توی صفحه b هستم همه چیز خوبه اما وقتی مثلا توی صفحه a هستم و صفحه b رو با Ajax باز میکنم دیگه اون کد کار نمیکنه.

این رو هم عرض کنم که من همه کد های jQuery رو توی یه فایل خارجی گذاشتم که به تمام صفحات سایت لینک شده.

مرسی

[mehdi.mousavi]

سلام دوستان من تازه jquery رو شروع کردم. به کمک jquery الان دارم صفحه های سایتم رو به صورت Ajax لود میکنم. اینجاش مشکلی نداره اما مشکل از جایی به وجود میاد که وقتی صفحه ای رو به صورت Ajax لود میکنم دیگه توابعی که برای اون صفحه نوشتم کار نمیکنه. فرض کنید من 2 تا صفحه دارم توی صفحه b اومدم یه button گذاشتم که وقتی روش کلیک میشه یه div رو نمایش میدم و دوباره مخفی میکنه (toggle) وقتی توی صفحه b هستم همه چیز خوبه اما وقتی مثلا توی صفحه a هستم و صفحه b رو با Ajax باز میکنم دیگه اون کد کار نمیکنه. این رو هم عرض کنم که من همه کد های jQuery رو توی یه فایل خارجی گذاشتم که به تمام صفحات سایت لینک شده. مرسی ببخشید ، من این سوال رو توی بخش jQuery هم پرسیده بودم اما ظاهرا اونجا متروکه است.

سلام.
صفحه b کار میکنه، چون وقتی b رو بصورت مجزا آدرس میکنید، Ready Handler اش داره فراخوانی میشه و در نتیجه کد مزبور که داخل Ready Handler نوشته شده، اجرا میشه. این کد Click Handler ای به Button شما Assign میکنه، در نتیجه Click کردن روی اون دکمه باعث مخفی شدن دکمه، یا نمایش دوباره اون دکمه میشه.

اما وقتی صفحه b رو با استفاده از load (بطور نمونه) لودش میکنید و محتویات صفحه b رو در Element ای از صفحه a قرار میدید، دیگه JavaScript Engine شما هیچ ایده ای نداره که باید Ready Handler موجود در صفحه b رو اجرا کنه. در نتیجه، زدن دکمه مورد نظر منجر به تغییر وضعیت نمایشی اون div نمیشه.

شما چند راه برای حل این مشکل دارید:


صفحه b رو در iframe ای از صفحه a بارگذاری کنید. بدین ترتیب، Ready Handler صفحه b اجرا خواهد شد و کد شما بدرستی کار خواهد کرد.
Script های موجود در صفحه b رو، بطور مجزا، توسط getScript (http://www.jqapi.com/#p=jQuery.getScript) دریافت و اجرا کنید. وقتی از این متود برای Load اون Script استفاده کنید، Script پس از دریافت شدن، اجرا نیز میشه.
شما میتونید HTML و JS موجود در صفحه رو در قالب JSON به Client ارسال کنید. بخش HTML اش که نمایش داده میشه و بخش Script اش رو باید eval کنید تا اجرا بشه.

در کل به این مساله نیز دقت کنید که وقتی صفحه b در صفحه a ادغام میشه، selector هایی که در صفحه b استفاده میکردید ممکنه در صفحه a مشکل ساز بشه و درست جواب نده. احتمالا روشهای دیگه ای (علاوه بر روشهای فوق) نیز برای رفع مشکل وجود داره، اما الان چیزی به ذهنم نمیرسه.

موفق باشید.

پاورقی: این بخش متروکه نیست. بذارید جوهر نوشته اتون خشک بشه، بعدا این حرف رو بزنید. اما در هر حال، (فارغ از متروکه بودن یا نبودن یک بخش) شما نباید بر اساس قوانین سایت، یک سوال رو در دو بخش مطرح کنید.

[xoogle.ir]

ببخشید حق با شماست، من عجله کردم :خجالت:

ممنون که جواب دادید راستش از iframe که نمیخام استفاده کنم راه سوم یعنی استفاده از json رو هم بلد نیستم.

میمونه همون راه دوم. لینکی که داده بودید رو الان مطالعه کردم مثل اینکه برای استفاده از این متد باید کدهای مربوط به هر صفحه رو توی یک فایل جداگانه ذخیره کنم.

اگه اشتباه میکنم بفرمایید.
این مورد رو هم تست میکنم اگر مشکل داشت دوباره مزاحمتون میشم.

[xoogle.ir]

راستش من به این نتیجه رسیدم که نمیتونم برای هر صفحه یه فایل مجزا بسازم چون تعداد صفحاتی که میخام با Ajax لود کنم خیلی زیاد هست و در این صورت نمیتونم تشخیص بدم که با متد getScript کدوم فایل رو باید بگیرم.
بنا بر این تصمیم گرفتم که توابعی که مربوط به محتوی صفحات میشه رو توی یک فایل ذخیره کنم. و همیشه همون فایل رو فراخونی کنم.
(لطفا بفرمایید که این کار ایرادی نداره ؟)

این کار رو انجام دادم ولی باز هم اون دکمه هیچ کاری انجام نمیده البته در مورد لود شدن و اجرا شدن فایل تقریبا مطمئنم چون alert داد و جواب داد و از یه طریق دیگه هم اجرا شدنش رو چک کردم. اما نمیدونم چرا کار نمیکنه ؟؟؟

شاید به قول شما selector مشکل داشته باشه. در حالت معمولی یه div با آیدی main-content دارم در صفحات اما وقتی از Ajax استفاده میکنم تعداد این div میشه 2 تا داخل هم.

مشکل میتونه از این باشه ؟؟
این کدی هست که باهاش صفحات رو به صورت Ajax لود میکنم لطفا اگر اشتباهی داخلش هست راهنماییم کنید پروژه ام متوقف شده به خاطر این مشکل ...





$(document).ready(function() {

$('#body-tb .tab li a').click(function(){

var toLoad = $(this).attr('href')+' #main-content';

$('#body-tb .tab li').removeClass('selected');
$(this).parent().attr('class', 'selected');

var docWidth = $('#main-content').width();
var docHeight = $('#main-content').height();

$(function() {
$('#main-content').load(toLoad,'',showNewContent());
});
function showNewContent() {
$('#main-content').show(5);
}
$.getScript('/js/jquery/bkmks.js');
$(function() {

$("#main-content").append("<div id='overlay'><img src='/img/loader.gif' /></div>");

$("#overlay")
.css({
'opacity' : 0.4,
'position': 'absolute',
'top' : '-5px',
'min-height' : '130px',
'background-color': 'black',
'width': docWidth,
'z-index': 5000
})
.height(docHeight-40);
});
return false;

});

});

[ahmadbadpey]

به جای متد load از متد live (http://api.jquery.com/live/)استفاده کنید .

[xoogle.ir]

با استفاده از تابعی که شما گفتید کد رو تغییر دادم فعلا که داره درست کار میکنه مگر اینکه راه استانداردی نباشه و بعدا توی شرایط خاص کار نکنه.

البته به تغییر دادن تابع لود احتیاجی نشد. به افزودن اسکریپت با تابع getScript هم همین طور !!
فقط کدی که کار نمیکرد رو این جوری تغییر دادم.




$('.bkshow').live('click', function(){

$(this).parent().nextAll('.bkmks').toggle(200);
return false;

});

قبلا این جوری بود :



$('.bkshow').click(function(){

$(this).parent().nextAll('.bkmks').toggle(200);
return false;

});


آیا راه درستی هست ؟ بعدا مشکل خاصی رو ایجاد نمیکنه ؟؟ و اینکه آیا تمام توابع رو میشه این کار رو باهاش انجام داد محدودیتی چیزی نداره ؟
خیلی ممنون