menu

مشکل تگ اسکریپت در ایجکس

مشکل تگ اسکریپت در ایجکس

چهارشنبه 19 آذر 1393

سلام

یکی از قابلیت های ویژه ای که جی کوئری داره، API های اون در زمینه ی ای جکس هست.

اما ای جکس چیست؟

به نقل از این سایت (!) ای جکس یه تکنولوژی وب بر مبنای جاوا اسکریپت است که یکی از کاربرد های اصلی اون، انتقال داده ها و اتفاقات به سرور و پردازش اون و بازگرداندن پاسخ سرور به کاربر هست، بدون این که کاربر متوجه چیزی بشه.

یعنی دقیقا همون چیزی که توی همین بلاگ هست.

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

به این میگند ای جکس (!)

همانطور که گفتیم، یکی از ویژگی های بارز جی کوئری، API ها و کتابخونه ی مربوط به ای جکس اون هست.

شما اگه بخواهید از اون استفاده کنید، میتونید به روش های مختلف از ای جکس استفاده کنید. توابع زیادی مانند

$.ajax
$.post
$.get
$.getscript
load

توی اون وجود دارد که شما میتونید با استفاده از اون ها، به صورت get یک محتوا را بگیرید یا بفرستید یا به صورت post یک محتوا را بگیرید و بفرستید و یا حتی یک فایل script را لود کنید که هر کدام از این ها، قابلیت های بسیار زیادی دارد.

برای مثال، ساده ترین آنها را که load هست را در زیر میبینید:

$( "#feeds" ).load( "feeds.html" );

اما کد بالا چه کاری را انجام میدهد؟

کد بالا، یک آدرس مانند feeds.html را لود میکند و محتوای آن را در تگی با آی دی feeds قرار میدهد.

مزیت این کار بر یک لود معمولی این است که در این حالت، مرورگر شما بارگزاری مجدد نمیشود و بدون بارگزاری شدن صفحه، محتوا تغییر میکند.

اما اصلا هدف از این مطلب چه بود؟

چرا این مقدمه چینی ها گفته شد؟

در کد بالا، یک مشکل اساسی وجود دارد

مشکل کد بالا این است که به صورت خودکار، اگر در صفحه ای که قرار است لود شود (در این مثال feeds.html) تگ script وجود داشته باشد، تگ اسکریپت حذف میشود. یعنی اگر شما اسکریپتی نوشته باشید، اون اسکریپت اثر داده نمیشود.

این یکی از مشکلاتی بود که تا همین چند وقت اخیر، توی بلاگ خود من هم بود و خود من متوجه این نکته نشده بودم. با کمی تحقیق، متوجه شدم که این مربوط به خود ساختار ajax توی جی کوئری است و روش حل آن هم خیلی ساده است.

برای حل این مسئله، ما ابتدا از خود تاب load استفاده میکنیم.

اگر به این صفجه مراجعه کنید متوجه میشوید که برای تابع load ما میتوانیم از یک تابع به عنوان callback نیز اجرا کنیم. این تابع در حین اجرای دستور load اجرا میشود.

برای مثال، ما میتوانیم تابعی مثل زیر داشته باشیم:

$( "#feeds" ).load("feeds.html",function(data){
    
});

در کد بالا، به عنوان دومین ورودی تابع load ما یک تابع به عنوان callback را وارد کرده ایم. این تابع همزمان با اجرای load اجرا خواهد شد. اولین آرگومان(ورودی) تابع callback ما نیز یک متغیر است. موقع اجرای تابع callback ما، تمامی محتوای صفحه ی feeds.html به صورت کد html در این متغیر ذخیره خواهد شد. برای مشاهده ی تمامی ورودی های ممکن برای این تابع callback میتونید به اینجا مراجعه کنید.

حالا ما تمام صفحه را در یک متغیر ذخیره کرده ایم. فقط کافیه که تگ های script اون را جدا کنیم و بعد از اون، با استفاده از append اون را به المنت feeds توی صفحه ی خود متصل کنیم.

برای این کار کد زیر را میزنیم

$( "#feeds" ).load("feeds.html",function(data){
    $(data).find('script').appendTo('#feeds');
});

به همین سادگی

به همین خوشمزگی!

میدونم که نسبت به اون حرفی که میخواستم بزنم، یکم زیادی توضیح دادم و برخی جاها حرف هام یکم گنگ بود.

اما اگه روزی شما هم مثل من به این مشکل برخورد کردید، احتمالا این مطلب به کارتون میاد!

 


    ارسال نظر
    خوانا نیست؟تعویض کد