50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت 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 برگشت می دهد.

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

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

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

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

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

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

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۷)

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

  1. امید ۲۲ مرداد ۱۳۹۸

    بسم الله الرحمن الرحیم
    سلام حسن جان عزیزم
    بابت تمام زحماتی که می کشی و آموزشهای مفید و کاربردی تشکر.
    من یک مودال ساختم و منوی آکاردونی را درون آن قرار دادم می خواهم وقتی که روی آخرین زیر مجموعه کلیک می شود مودال بسته شود و آن منو select شود و درون جدول قرار بگیرد.
    چطور می توانم این کار را انجام دهم؟

    پاسخ
    1. حسن شفیعی ۲۲ مرداد ۱۳۹۸

      سلام. خوشحالیم که مفید واقع شده.
      از متد last() و داخل آن از متد click برای تشخیص کلیک روی آخرین أیتم استفاده کنید که با کلیک شما می تونیدکل مودال رو با متد css مقدار display : none بزارید
      https://api.jquery.com/last
      داخل این متدها نیز شما باید محتوای آیتم رو با متد html() دریافت و داخل جدول مورد نظر که مثلا تگ table دارد بصورت یک سطر اضافه کنید (با متد append)
      تماما کار با jquery است که متدهای مورد نیاز معرفی شد و میتونید پیاده کنید.
      موفق باشید.

      پاسخ
      1. امید ۲۲ مرداد ۱۳۹۸

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

        پاسخ
      2. حسن شفیعی ۲۲ مرداد ۱۳۹۸

        جزییات خدمت شما ایمیل شد.

        پاسخ
      3. امید ۲۲ مرداد ۱۳۹۸

        بسم الله الرحمن الرحیم
        بسیار عالی بفرمائید من در خدمت شما هستم.

        پاسخ
  2. محمد مهدی ۳۰ تیر ۱۳۹۸

    خیلی مردی دمت گرم

    پاسخ
    1. حسن شفیعی ۳۰ تیر ۱۳۹۸

      خوشحالیم که مفید واقع شده.
      موفق باشید.

      پاسخ
دوره های آموزشی