راهنمای قدم به قدم

توی دو پست قبلی توضیح دادم که چطوری میشه بدون اینکه نیازی باشه کد 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
	);

ادامه مطلب