ورود

View Full Version : مشکل با livequery و jQuery


sepehrmm
جمعه 10 مهر 1388, 18:48 عصر
سلام
آشنایی برای اونایی که نمیدونن livequery چیه :
همونطوری که میدونید اگر در صفحه یک عنصر رو بصورت دینامیک بسازیم ( یا بوسیله JS یا بوسیله لود شدن با AJAX) دیگه نمیتونیم از کدی مثل زیر استفاده کنیم :

$("#someelement").click(function(){});
چون کد بالا فقط روی عناصر اولیه جواب میده نه اونایی که بعدا در صفحه ایجاد میشوند
پس مجبوریم یا از پلاگین livequery استفاده کنیم یا از live خود jQuery .

مشکل من :
یه پروزه دارم که توش از livequery استفاده کردم ولی مشکل اینجاست که درست کار نمیکنه ، البته این کدی که اینجا آوردم ساده شده ی اون پروژه هست برای راحتی کار :
در صفحه اول یک دکمه داریم که وقتی کلیک میشه صفحه دوم رو در یک عنصر همین صفحه اولی لود میکنه ، توی صفحه دوم هم یک لینک داریم که صفحه اول رو دوباره باز میکنه (با AJAX) . تا اینجا همه چیز خوب پیش میره حالا اگه یکبار دیگه با دکمه صفحه اول صفحه دو را باز کنیم دیگه لینکی که در صفحه دو ما رو به صفحه یک میبرد کار نمیکنه !
بعبارت دیگر وقتی این لینک برای بار دوم ایجاد میشه کد jquery از کار می افته .
ممنون میشم کمک کنید ، درضمن من حتما باید از livequery استفاده کنم چون live
نمیتونه با رویداد change که من در پروژه ام بهش نیاز دارم کار کنه .
ممنون میشم کمکم کنید :لبخندساده:
livequery رو از اینجا (http://github.com/brandonaaron/livequery) گرفتم که آخرین نسخشه توی سایت jquery قدیمیشو داره ، ورژن jquery هم 1.3.2 هست .
تمامی فایل ها رو ضمیمه کردم .
صفحه 1.html :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.livequery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#ahome").livequery("click",function(){
$("body").load("new.html");
});
$("#buajax").livequery("click",function(){
$("#ajaxwrapper").load("2.html");
});
});
</script>
</head>
<body>
<input id="buajax" type="button" value="Ajax!" />
<div id="ajaxwrapper">Ajax HERE</div>
</body>
</html>

صفحه 2.html :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<a href="#" id="ahome">Homepage</a></div>
</body>
</html>
sepehrmm
شنبه 11 مهر 1388, 16:54 عصر
لطفا یکی جواب بده من لنگه اینم :ناراحت:
sepehrmm
دوشنبه 13 مهر 1388, 09:21 صبح
یعنی هیچکی اینجا با livequery کار نکرده ؟!
Rahman.hi
دوشنبه 13 مهر 1388, 10:02 صبح
سلام. مشکلت اینه که وقتی دوباره برمیگردی به صفحه اول، فایل های جاوا اسکریپتت دوباره لود میشن
و این باعث میشه که همه چیز دوباره پیاده سازی بشه و کلی قاطی میشه!
میتونی با firebug ببینی دقیقن چه مشکلی پیش میاد!

برای اینکه مشکلت حل بشه این کد رو بذار که چک کنه اگه درخواست Ajaxی هست، جاوا اسکریپ هارو لود نکنه.




<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<?php if(!isAjaxRequest()){ ?>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.livequery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#ahome").livequery("click",function(){
$("body").load("1.php");
});
$("#buajax").livequery("click",function(){
$("#ajaxwrapper").load("2.php");
});
});
</script><?php } ?>
</head>
<body>
<input id="buajax" type="button" value="Ajax!" />
<div id="ajaxwrapper">Ajax HERE</div>
</body>
</html>
<?php
function isAjaxRequest() {
return (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
}?>
sepehrmm
دوشنبه 13 مهر 1388, 23:44 عصر
ممنون از جوابتون دیگه داشتم نا امید میشدم :قلب:
کدتون رو تست کردم عالی جواب داد .
این 'HTTP_X_REQUESTED_WITH' کجا بود که ما ازش خبر نداشتیم ؟!
جدا نه توی document های php ازش خبری هست نه توی apache . جلل خالق :گیج:
ولی یه سوالاتی برام پیش اومده :
اینکه میگید اسکریپت های صفحه اول دوباره لود میشه ظاهرا غلطه چون توی document خود jquery نوشته شده که تابع load بصورت پیش فرض میاد عناصری از صفحه مبدا که شامل سلکتور "body>*" میشن رو تزریق میکنه (اینجا رو ببین (http://docs.jquery.com/Ajax/load)) به صفحه پس نباید اسکریپت ها غاطی پاتی شن .
از طرفی از روی کد شما میشه فهمید که اینطور نیست و بودن اسکریپت ها کار رو خراب میکنه
باز از یه طرفه دیگه ! اگه وقتی صفحه دوم لود شد بیایم توی اسکریپت صفحه اول یه تغییر ایجاد کنیم (مثلا توی خط 10 1.html رو بکنیم 100.html) و ذخیره کنیم و بیایم صفحه اول رو از صفحه دوم برای بار دوم لود کنیم و از firebug ببینم متوجه میشیم که توی متن اسکریپت تغییر ما ایجاد نشده و این یعنی که اصلا به اسکرپیت صفحه اول کار نداشته !
میدونید مساله اصلی اینه که چرا این کد رو وقتی با تابع live که برای خود jquery هست تست میکنیم این مشکل پیش نمیاد؟ تنها چیزی که به فکرم میرسه اینه که Livequery باگ داشته باشه .

بی صبرانه منتظر نظرتون هستم :چشمک:
Rahman.hi
سه شنبه 14 مهر 1388, 16:06 عصر
خواهش میکنم. :)
در مورد HTTP_X_REQUESTED_WITH که منم اتفاقی از کدهای سایت snippler باهاش برخورد کردم و خب خیلی جالب بود برام. البته توجه کن که اگر دستی (بدون jquery) درخواست Ajax بدی، این توسط هدر ها ارسال نمیشه و خودت باید ارسالش کنی ولی اگه همیشه با jquery درخواست بدی دیگه خیالت راحته. این از این!

در مورد لود هم من نکته ای رو که گفتی دقت نکرده بودم (اینکه body>* رو میاره! واقعن نمیدونم.)

در مورد تبدیل 1 به 100 در خط ده هم یه چیزایی متوجه شدم ولی اگر درست متوجه نشدم ببخشید. اون چیزی که میگی رو بذار تا متوجه بشم.
ببین وقتی صفحه اول رو باز میکنی، دیگه توی سورسش هر تغییری که بدی تا موقعی که رفرش نکردی که تغییر نمیکنه!!! میخوام بگم من اصلا" شرط گذاشتم که اگه درخواست ajax بود این کد هارو نیاره! یعنی اگه میخوای اسکریپتت اجرا بشه شرط رو فقط روی دوتا فایل ضمیمه بذار.

اینطوری:

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<?php if(!isAjaxRequest()){ ?>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.livequery.js" type="text/javascript" charset="utf-8"></script><?php } ?>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#ahome").livequery("click",function(){
$("body").load("1.php");
});
$("#buajax").livequery("click",function(){
$("#ajaxwrapper").load("200.php");
});
});
</script>
</head>

حالا وقتی درخواست Ajaxمیاد، کدها هم میاد و اعمال میشن. و هر تغییر در آن واحد بدی اعمال میشه
موفق باشی
sepehrmm
پنج شنبه 16 مهر 1388, 13:25 عصر
فکر میکنم سوالم رو درست متوجه نشدی:
ببین کدی که گذاشتی (چه اولی چه دومی) نشون میده که لود دوباره اسکریپ ها از صفحه اول برای بار دوم کار رو خراب میکنه و مشکلی که من باهاش مواجه بودم رو موجب میشه ،
ولی همونطوری که گفتم تابع load فقط از تگ body به بعد رو از صفحه مقصد تزریق میکنه نه قسمت head که اسکریپت ما توشه ، با اون مثال 1 به 100 هم خواستم همین رو نشون بدم .
حالا تناقض پیش اومد ! من برای اینکه مطمئن بشم که load فقط body>* رو تزریق میکنه اومدم وقتی روی دکمه صفحه اول کلیک کردم و اولین درخواست ajax رو فرستادم رفتم یه جای اسکریپت صفحه اول رو تغییر دادم ( برای نمونه همون 1 به 100 ،شما هرجای اسکریپت رو خواستی عوض کن یا اصلا اسکریپت ها رو بردار) بعد روی لینک کلیک کردم که اومد صفحه اول رو که حالا یه جاهایی از اسکریپتشو ما دستی تغییر دادیم لود میکنه و اگر الان با فایر باگ ببینم میبینمیم که تغییراتی که دادیم اعمال نشده و این یعنی که واقعا اومده همون body>* رو تزریق کرده !!!!
پس اگه فقط body>* رو تزریق میکنه نباید اصلا مشکلی پیش بیاد که میاد!! و مجبوریم از راه حل شما استفاده کنیم .
امیدوارم خوب توضیح داده باشم .