طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت Modal با محتوای داینامیک توسط AJAX در jQuery


ساخت Modal با محتوای داینامیک توسط AJAX در jQuery

در این آموزش, قصد داریم نحوه لود کردن محتوای داینامیک برای مودال توسط یک درخواست AJAX به شما نشان بدیم.یک مثال برای لود محتوای داینامیک توسط درخواست به فایل PHP بصورت AJAX اضافه کردیم.

در این فایل PHP , یک محتوای آرایه ای شامل داده های داینامیک داریم. از کتابخانه jQuery UI برای نمایش یک المنت DIV به عنوان یک مودال (Modal) بهره بردیم.

در آموزش jQuery قبلی, نحوه مقداردهی اولیه و ساخت یک Modal را با محتوای استاتیک دیدیم.

 

ما از تابع load() در جی کوئری برای پاس دادن آدرس فایل PHP برای دریافت محتوای داینامیک استفاده کردیم. این تایع بعد از اجرای موفقیت آمیز درخواست AJAX , محتوای داینامیک دریافتی را در تگ DIV قرار می دهد. بعد از آن, تگ DIV موردنظر با استفاده از dialog به عنوان یک مودال نمایش داده می شود.

در این مثال ساخت Modal با محتوای داینامیک توسط AJAX در jQuery , من مقدار آپشن modal را true و همچنین height و width را برای پنجره modal ست کردم.

المنت HTML برای مدیریت مودال

کد HTML زیر به شما دکمه هایی برا برای نمایش باکس Modal نشان می دهد. این کد یک تگ DIV برای نمایش داده داینامیک و بازشدن آن بصورت پنجره modal توسط تابع dialog() دارد.

اسکریپت jQuery برای ساخت Modal با محتوای داینامیک

این تابع جی کوئری کلید موردنظر برای درخواست محتوای داینامیک از فایل PHP را, دریافت می کند. فایل PHP این کلید را دریافت و محتوای مشخص شده برای این کلید را به عنوان پاسخ AJAX برگشت می دهد.

حتما بخوانید  ساخت نطرسنجی با php و jquery ajax

تابع load() در jQuery محتوای داینامیک را در تگ DIV مورد نظر فراخوانی می کند. بعد از مقداردهی مودال, آن را به کاربر نمایش می دیم.

خروجی : ساخت Modal با محتوای داینامیک

ساخت Modal با محتوای داینامیک توسط AJAX در jQuery

این کد PHP شامل آرایه محتوای داینامیک است که توسط درخواست AJAX اجرا می شود.

امیدوارم از آموزش ساخت Modal با محتوای داینامیک نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

حتما بخوانید  افزودن و حذف تصویر با AJAX در جی کوئری

موفق و پیروز باشید

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما

logo-samandehi

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه