یادداشتهای بیت نیمسوز

توی دو پست قبلی توضیح دادم که چطوری میشه بدون اینکه نیازی باشه کد html اصلی رو تغییر داد فقط با اضافه کردن جاوا اسکریپت به صفحه و با کمک jQuery میشه یه صفحه رو بدون اینکه قابلیت کار معمولی خودشو از دست بده (مثل خیلی صفحه ها که میبینید اگه جاوااسکرپت نباشه کار نمیکنن) به یه صفحه کاملا آژاکسی تبدیل کرد. البته تو این نوشته همون صفحه واقعا Full Ajax میشه :)‌ توی قسمت قبلی مونده بود قسمت ویرایش که بگی نگی یه کم سنگینتره و نیازمند دقت بیشتر.
اول از همه یه کم نیازمند تغییر کد هستیم دلیلشم اینه که من زیاد دقت نکرده بودم وقتی کد اولیه رو ایجاد کردم. (خوب اصولا من آدم بی دقتی هستم، یا به قول دوستم که معتقده هیچ وقت نگو بی! بگو کم! کم دقتم)‌. به هر صورت بنا به دلایلی برای ویرایش دو تا درخواست آژاکس انجام میشه. اولی اطلاعات فیلد مورد نظر رو درخواست میکنه و دومی هم واقعا درخواست ویرایش رو به سرور میفرسته. خیلی وقتها میشه اولین درخواست رو از بین برد،‌یعنی به یه نحوی اطلاعات مورد نظر رو از فیلدهای html گرفت، مثلا اطلاعات رو از داخل عنصر td (تو این مثال)‌بگیریم که لازمه اون، افزودن یه id به اون فیلده که بعد بشه محتواشو به راحتی گرفت. به هر صورت،‌اینجا درخواست اول حاوی id اون اطلاعات مورد نظره که نیازی نیست اصلا نگرانش باشیم،‌چرا که از قبل لینک حاوی این اطلاعات هست. یعنی هر لینک مقصدی داره که کاملا مشخصه و اطلاعات مربوط به همون id رو داره. اما برای راحتی،‌ id ردیف جدول که بعدا باید محتواش عوض بشه تو خصیصه rel مربوط به لینک ویرایش ذخیره کردم واسه روز مبادا (امروز).
اما اولین درخواست :

	//3-1 we can use stored data to create new form, but I want to
	//use the get request to get the data :)
	//So get the target of this link
	var target=$(this).attr('href');
	//3-2 Send request to server and get the current data
	$.get(
		target,// Target of this link
		{},//No data needed at all, all required is
		function(data){//Call
				//3-3 :Just show message
				$("#msg").removeClass('message')  //Remove any old class, just in case
					 .removeClass('errmessage')
					 .addClass(data.class) //Add new
					 .html(data.msg);	//change message(innerHTML)
				//3-4 :	If done show the edit form (or in this case simply alter
					// Edit form.
				if (data.affected>-1) {
					//Simply change the add form to edit form.
					//Change the oper field to edit
					$('#addform input[name=oper]').attr('value','edit');
					//Add a hidden field contain id of field,first remove it if any :)
					$('#addform input[name=id]').remove();
					$('<input type="hidden" name="id" value="'+data.affected+'" />').appendTo('#addform');
					//ID of form is not important :) let it be add form :)
					//Change the label of data field
					$('#addform label[for=data]').html('Edit this data :');
					//Set the data in text box(we add a new part to result json)
					$('#addform input[name=data]').attr('value',data.data);
					$('#addform input[name=submit]').attr('value','Edit');
					//Remove cancel btn if any
					$('#addform input[name=cancel]').remove();
					$('<input type="submit" value="Cancel" name="cancel" />').appendTo('#addform')
						.click(resetFunction);
				}
			},
		"json"	//Data type, see add function
	);

خواندن ادامه این مطلب »

تو قسمت قبلی یه توضیح مختصر درباره اصل برنامه دادم،‌خیلی خیلی مختصر، و بعد یه قسمت اونو، که همون قسمت اضافه کردن بود،‌با آژاکس دوباره نوشتم. شرطم هم که این بود، بدون آژاکس و جاوا اسکریپت هم، کل برنامه کار میکرد، بدون کم و کاست. ایندفعه، میخوام یه قابلیت دیگه رو هم آژاکسی!!! کنم. قابلیت حذف از لیست. البته باز هم شروط قبلی بر جا هستند.
گام اول ایجاد تابعی هست که با کلیک بر روی لینک های حذف،‌این تابع فراخوانی بشه. میشه این تابع رو مستقیم نوشت یعنی اینجوری :‌

$('.dellink').click(function(){
  //code here ....
});

ولی یه مشکلی هست، اونم وقتی که یه ردیف جدید اضافه میشه،‌لینک حذف اون هم باید اینطوری تنظیم بشه، یه کم دردسر داره، یعنی کد باید دوباره اونجا هم نوشته بشه. به جای اینکار یه متغیر ایجاد میکنیم و تابع رو توی اون متغیر مینویسیم، بعد هر جا لازم شد اونو به لینکها اضافه میکنیم.

var delLinkFunc=function(){
  //code here
};
//then use this :
$('.dellink').click(delLinkFunc);

اینجوری هر جا که بخوایم میتونیم کدو نسبت بدیم به رویدادی که داریم.
خواندن ادامه این مطلب »

یه چند وقتی هست میخوام یه مطلبی درباره آژاکس بنویسم البته با کمک jQuery . قبل از اینکه اینکارو انجام بدم، چند تا مساله هست که میخوام توضیح بدم قبل از شروع.

اول اینکه تو این مطلب میخوام از خود هسته jQuery استفاده کنم نه از افزونه ها
دوم اینکه میخوام طوری این کد رو بنویسم که حتی اگه شخصی جاوا اسکریپت رو هم غیر فعال کرد بدون مشکل کار کنه، و فقط دیگه آژاکس نباشه.

دلیل اولی معلومه، نمیخوام کد بیخودی شلوغ بشه، ولی در حالت عادی افزونه ها خیلی مفیدن. اما دومی وسواس منه. اینکه بدون آژاکس همه چی درست باشه. اما چرا؟ علتش اینه که مهمترین مشتری های یک سایت! معمولا روباتهای موتورهای جستجوگر هستن، و اونا کاری با جاوا اسکریپت ندارن. اگه راستشو بخواید این راهنمای کوچک که من تو این پست و دو سه تا پست بعدی مینویسم، بیشتر از اینکه در مورد آژاکس باشه درباره اینه که چطور میشه همزمان یه صفحه با آژاکس و بی آژاکس کار کنه. البته این مثال به خصوص هیچ نیازی نداره به این قابلیت ولی میتونه راهنمای خوبی باشه برای افرادی که دوست دارن این رو امتحان کنن.

0- پیشنیازها!

آشنایی با jQuery و سیستم انتخاب عناصر اون ( Selector ) و اصولا آشنایی با روش زنجیری فراخوانی توابع، آشنایی با مدیریت رویدادها با jQuery

آشنایی با PHP در حدی که بتونید کد رو دنبال کنید.

1- هدف

اول از همه هدف چی هست؟ یعنی قصد دارم چه کاری انجام بدم؟ خیلی ساده! میخوام یه جدول داشته باشم، اطلاعات رو از تو دیتابیس (و در این مثال خاص دیتابیسی که با کمک جلسات شبیه سازی شده) بخونم نمایش بدم، اضافه کنم، حذف کنم و ویرایش کنم. مثالی که خیلی وقتها برای کسایی که تو کلاسای PHP من هستن میزنم، فقط ایندفعه بنابه دلایلی نمیخوام از دیتابیس استفاده کنم؛ میخوام از یه شبیه ساز ساده استفاده کنم. اینکه برنامه چه کاری انجام میده رو اینجا ببینید، سورس هم که آخر این پست هست. دانلود کنید.

تا اینجا مشکلی نیست، فقط کافیه که سورس رو ببینید، ولی از این جا به بعد میخوام قابلیت آژاکس رو هم بهش اضافه کنم. البته چون نه من الان حوصله دارم، و نه میخوام یه پست بیش از حد طولانی بشه فعلا فقط قسمت افزودن اطلاعات رو به صورت آژاکس دربیارم تا بعد، تو پستهای بعدی تکمیل ترش کنم.
خواندن ادامه این مطلب »