Ajax, jQuery, PHP

چگونه : محتوای select ها را با jQuery و PHP به صورت Ajax تغییر دهیم ؟!

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

سلام

در این مبحث می خواهیم روی یک سری از تگ های select که به صورت آنی تغییر محتوا داده میشوند ، صحبت کنیم.به زبان ساده تر یک سری select داریم که انتخاب یک گزینه (option) در یکی از آنها ، باعث تغییر یافتن محتوای یک select دیگر می شود.

مثلا select اولی نام کشور باشد ، با انتخاب آن ، یک select دیگر نمایان شده که شامل استانهای آن است .سپس با انتخابیکی از استان ها ، یک select دیگر که شامل شهر های آن است ، نمایان می شود و … . می بینید که از این امکان در موارد زیادی می شود استفاده کرد.

خوب این کارها را با jQuery انجام خواهیم داد ولی در سمت سرور هم از زبان php استفاده کرده ایم بنابراین استفاده از پایگاه داده نیز به راحتی ممکن خواهد بود.

 

کد HTML

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

 

هنگامی که لازم باشد سوالات بیشتری اضافه شوند ، LI های اضافی توسط جی کوئری ایجاد خواهند شد که همه آنها نیز داخل یک لیست نا مرتب ul یا Unordered List با آی دی questions# قرار دارند.

عنوان و گزینه ها نیز به صورت JSON بدست خواهند آمد که در بخش PHP آموزش خواهیم دید.در اینجا کدهای لازم برای ایجاد یک li کامل را مشاهده می کنید:

احتمالا در صفحه پیش نمایش متوجه شده اید که کنترل های select مورد استفاده ما ، با نوع پیش فرض مرورگرها فرق دارد.علت آن این است که ما از پلاگین chosen جی کوئری برای ایجاد select هایی زیباتر و کاربردی تر استفاده کرده ایم.

برای استفاده از آن نیز فقط تابع ()chosen را در select فراخوانی می کنیم.

 

کد jQuery

کاری که جی کوئری برای شما انجام می دهد ، این است که ابتدا اطلاعات جعبه های انتخاب (select boxes) را به صورت JSON از سرور می گیرد ،سپس کدهای html آنها را ایجاد می کند و در انتها ،رویدادهایی مربوط به تغییر گزینه هاش را می سازد.

اگر یکی از گزینه های جعبه انتخاب تغییر کند ؛ این پروسه برای جعبه انتخاب جدید نیز تکرار می شود.

در کد به وسیله دو تابع جاوااسکریپت ، این اتفاق رخ می دهد :

  • refreshSelects پلاگین chosen را اعمال می کند و نیز هر گاه آیتم جدیدی به صفحه اضافه شود ، رویدادها را رندر می کند
  • fetchSelect یک درخواست از نوع JSON به سرور می فرستد و پاسخ برگشتی را به صورت کدهای html در می آورد

می توانید اینها را پایین ببینید

خیلی خوب ! حالا تولید فید JSON باقی مانده است . توجه کنید که تابع fetchSelect یک آرگومان رشته ای دریافت می کند.این کلیدی است که ما به php پاس می دهیم و می تواند مجموعه ای از آیتم ها نیز باشد.

اینجا یک نمونه از پیامی را که اسکریپت php می فرستید می بینید :

fetchSelect یک حلقه بین عناصر items ایجاد کرده و از کلید های آن به عنوان متن گزینه ها و از مقادیر هم برای اتصال فی ما بین استفاده می کند.مثلا Phones و Notebooks موجب خواهند شد اسکریپت selectbox های جدیدی ایجاد کند ولی Tablets نه.

کد PHP

حالا باید دنبال مکانی برای ذخیره اطلاعات جعبه های انتخاب باشیم.با استفاده از دیتابیس و انتخاب چند ردیف از آن می توان این کار را انجام داد.اما اینجا ما این اطلاعات را به صورت ایستا در یک شی php ذخیره کردیم.به این منظور یک کلاس ساده php تعریف کرده و اطلاعات را داخل آن ذخیره می کنیم :

حالا ما باید یک شی از این کلاس برای هر جعبه انتخاب ایجاد کنیم و تابع ()addItem را برای افزودن گزینه ها به آن فراخوانی کنیم.این متد یک پارامتر اختیاری بنام connection$ نیز دارد که شامل اسم جعبه انتخاب مربوطه است.

ajax.php / 2

کد بالا تعدادی select ایجاد کرده و در متغیر select$ قرار می دهد.هنگامی که این اسکریپت یک درخواست AJAX دریافت می کند, داخل این متغیر را نگاه کرده و جواب متناسب را بر می گرداند.

با فراخوانی تابع ()toJSON که قبلا تعریف کرده ایم , می توانیم خروجی اطلاعات مربوط به select ها را به صورت JSON بر گردانیم تا توسط jQuery قابل استفاده باشد.

تبریک ,حالا کار تغییر محتوای قدم به قدم select هایمان توسط php و jquery تمام شد !

منبع

11 Comments

  1. درود. افزونه وردپرسی هست که اینکار را راحت برای ما که کد نویسی بلد نیستسم انجام بده؟
    من میخوام نام استان و انتخاب کنم و برپایه آن نام شهرستان های ان استان دیده بشه
    سپاس

  2. ای کاش به جای کپی کردن کد از سایت دیگر اونو خودتون می نوشتین تا کاربرای آماتور قابلیت درک کد رو داشته باشن وگر این جور کدها تو سایت های زیادی هست

  3. علی جان اگر بشه یک config.php هم بنویسی که به دیتابیس متصل کنیش عالی میشه . یک دیتابیس با ۸ جدول بسازی هم کار رو انجام میده … خیلی کار زیبایی میشه .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید