PDA

View Full Version : لود بخشی از صفحه در صفحه جاری توسط jQuery.load



Javad583
دوشنبه 12 بهمن 1388, 14:11 عصر
سلام دوستان ...

فرض کنيد الآن برنامه ای داریم که صفحات آن بصورت عادی بارگذاری میشود، مثلا ...



index.php?task=home
index.php?task=inbox
index.php?task=inbox&action=view&id=2


صفحات توسط یه template engine ساخته و نمایش داده میشن، یعنی به این صورت نیست که صفحه اول قالب کامل داشته باشه و صفحات داخلی بدون قالب باشن که نهایتا فقط از طریق قالب اصلی load بشن.

حالا من میخوام تحت jQuery.load و مشابه پروژه ajaxify کاری کنم که زمانی که لینکی کلیک شد بیاد و محتویات div صفحه مقصد رو استخراج کنه و بجای اطلاعات div صفحه فعلی نشون بده. این وسط برخی از element های صفحه هم مثل عنوان صفحه يا بررسی سطوح دسترسی باید بروز رسانی بشن که با اونها مشکلی ندارم. چکار باید انجام بدم؟ من تا اینجا رو میدونم که بشه خروجی صفحه مقصد رو در div پیاده کرد اما اینکار کل محتویات رو بر میگردونه و من فقط اطلاعات یه div خاص مد نظرمه.

علت اینکه سراغ ajaxify نمیرم هم اینه که اون صفحات رو به عناون تنها نام فایل میبینه و پارامتر قبول نمیکنه و کلی مشکل بزرگ و کوچک دیگه ...

mehdi.mousavi
دوشنبه 12 بهمن 1388, 16:08 عصر
حالا من میخوام تحت jQuery.load و مشابه پروژه ajaxify کاری کنم که زمانی که لینکی کلیک شد بیاد و محتویات div صفحه مقصد رو استخراج کنه و بجای اطلاعات div صفحه فعلی نشون بده. این وسط برخی از element های صفحه هم مثل عنوان صفحه یا بررسی سطوح دسترسی باید بروز رسانی بشن که با اونها مشکلی ندارم. چکار باید انجام بدم؟ من تا اینجا رو میدونم که بشه خروجی صفحه مقصد رو در div پیاده کرد اما اینکار کل محتویات رو بر میگردونه و من فقط اطلاعات یه div خاص مد نظرمه.

سلام.
شما برای این منظور میتونید از متود load استفاده کنید، بدین ترتیب که صفحه ای که میخواهید دریافت کنید رو با استفاده از URL و پارامترهای مورد نیازتون توسط متود load، دریافت کنید و سپس بازهم با استفاده از متود load (با همون فراخوانی اول)، div مورد نظر در پاسخ دریافتی رو جایگزین div موجود روی صفحه کنید. برای استفاده از متود load می تونید به این شکل عمل کنید:

$('div.current').load('/mydestpage.php div.destination', {'param1': 'param1value'});

این متود یعنی اینکه، برو صفحه mydestpage.php رو دریافت کن، در حالیکه داری بهش پارامتر param1 با مقدار param1value رو POST می کنی و وقتی جواب رو گرفتی، div ای رو که class اش destination هست رو انتخاب کن از تو اون HTML دریافتی، و اونو، جایگزین div.current کن!
دقت کنید که اگر نمیخواهید پارامتر به صفحه php ای خودتون ارسال کنید، اونوقت متود load صفحه مزبور رو GET میکنه، نه POST.

روش دیگه، درست کردن وب سرویسی برای دریافت اطلاعاتی هستش که بهش نیاز دارید. مثلا اگر قراره فقط چهار تا عدد و مبلغ رو بگیرید، بهتره اونها رو از طریق وب سرویسی دریافت کنید (بصورت JSON یا XML) و سپس توسط jQuery مقادیر مورد نظر رو در DOM Document خودتون جاگذاری کنید.

موفق باشید.

امیـرحسین
دوشنبه 12 بهمن 1388, 16:09 عصر
منظورتون اینه که نمی خواید اطلاعات آژاکس رو بصورت یک تیکه یه جا نمایش بدید و میخواید اطلاعات رو چند جای صفحه استفاده کنید؟
اگه درست متوجه شدم. شما باید اطلاعات آژاکس رو بجای اینکه مستقیم به خروجی بفرستید، باید به XML یا JSON تبدیل کنید و در jQuery استفاده کنید. مثلا از طریق JSON در PHP شبیه این:
jQuery.ajax({
data: 'ajax=1&task=home',
type: 'POST',
url: 'index.php'
cache: false,
dataType: 'json',
success: function(response) {
document.title = response.title;
$('#‎‎content').html(response.content);
},
error: function(xhr) {
alert(xhr.responseText);
}
});
// index.php
if(isset($_POST['ajax'])) {
$output = array();
$title = 'Some page title';
$content = '<p>Some content<br />Some break lines</p>';

return '{"title":"'.$title.'", "content":"'.$content.'"}';
}


راه دیگه که تا حالا امتحان نکردم اینه که با همون load اطلاعات رو توی یک div مخفی لود کنید و حالا توسط selectorهای خود jQuery بیاید اطلاعات اون div ومخفی رو تیکه تیکه کنید و هر بلایی میخواید سرش بیارید...

امیـرحسین
دوشنبه 12 بهمن 1388, 16:49 عصر
من نمی دونستم که متد load بعد از آدرس، selector هم قبول می کنه.
این فکر کنم همون چیزی باشه که شما احتیاج دارید...

Javad583
سه شنبه 13 بهمن 1388, 09:52 صبح
از هر دو دوست عزیزم ممنون، اما ...

1) من میخوام تمام پارامتر ها بصورت GET ارسال بشن، فرض کنیم جایی کاربر استفاده از جاوااسکرپیت رو غیر فعال کرده باشه، اونجا حداقل میشه صفحات رو بصورت عادی بارگذاری کرد اما بروش POST نه! برای ارسال تحت متد GET چکار کنم؟

2) من تعداد متغیر هام معلوم نیست، مثلا در يک صفحه اصلا متغيری وجود نداره و در صفحه ديگه نزديک به 15 متغير هست. در jQuery.ajax میشه اون نوع متغیر ها رو بصورت سریال ریخت داخل data و عملیات رو انجام داد. نمیشه در متد load هم همین کار رو کرد؟

3) برای داشتن اون عبارت "لطفا منتظر بمانيد ..." چه بايد کرد؟

mehdi.mousavi
سه شنبه 13 بهمن 1388, 17:10 عصر
از هر دو دوست عزیزم ممنون، اما ...

1) من میخوام تمام پارامتر ها بصورت GET ارسال بشن، فرض کنیم جایی کاربر استفاده از جاوااسکرپیت رو غیر فعال کرده باشه، اونجا حداقل میشه صفحات رو بصورت عادی بارگذاری کرد اما بروش POST نه! برای ارسال تحت متد GET چکار کنم؟

2) من تعداد متغیر هام معلوم نیست، مثلا در یک صفحه اصلا متغیری وجود نداره و در صفحه دیگه نزدیک به 15 متغیر هست. در jQuery.ajax میشه اون نوع متغیر ها رو بصورت سریال ریخت داخل data و عملیات رو انجام داد. نمیشه در متد load هم همین کار رو کرد؟

3) برای داشتن اون عبارت "لطفا منتظر بمانید ..." چه باید کرد؟

سلام.

1. اگر JavaScript رو disable کرده باشه که دیگه jQuery هم اجرا نمیشه... در نتیجه دیگه GET ای هم در کار نخواهد بود. (اما اگر بدلائل دیگه میخواهید هنوز از GET استفاده کنید، باید از متود ajax استفاده کنید و پارامتر type رو برابر get بذارید).

2. متوجه نمیشم.... بیشتر توضیح بدید.

3. قبل از اینکه load یا ajax رو call کنید، ابتدا عبارت "لطفا منتظر بمانید" رو به div مورد نظر اضافه می کنید، بعد load یا ajax رو call میکنید. پارامتر سوم load که در پاسخ قبلی بهش اشاره نکردم میتونه تابعی باشه که بعد از اتمام عمل load فراخوانی میشه. در نتیجه، میتونید توی این تابع، عبارت مزبور رو از روی صفحه بردارید. دقت کنید که بهتره عبارت فوق رو با یک ID مارک کنید تا هنگام برداشتن اون از روی صفحه، بتونید با # selector اونو پیدا کرده، و remove کنید. اگر از متود ajax استفاده میکنید، میتونید در فاز complete اون element رو از روی صفحه remove کنید.

موفق باشید.