رفتن به مطلب

لود نتایج جستوجو در همان صفحه بدون رفرش شدن صفحه


پست های پیشنهاد شده

سلام 

چطور میشه تو وردپرس کاری کرد که زمانی که کاربر می خواد سرچ کنه بعد از  اینکه عبارت خودش رو میزنه صفحه رفرش نشه و نتایج تو همون صفحه بارگزاری بشه.

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

ظاهرا این موضوع رو میشه با ajax یا jquery پیاده کرد.

ممنون میشم دوستانی که میتونن راهنمایی کنن 

 

لینک به ارسال

با سلام و احترام شما با جاوا اسکریپت و php کار کردید ؟ تسلط دارید ؟

 

لینک به ارسال

شما برای این کار احتیاج به یک input برای وارد کردن کلمه جستجو با اسم کلاس مثلا .search_input و یک دکمه که باید نوعش button باشه با اسم کلاس btn_search

در فایل functions.php
 

wp_enqueue_script( 'post-ajax-handle', get_template_directory_uri() . '/search.js', array( 'jquery' ) );

wp_localize_script( 'post-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );


add_action( 'wp_ajax_search', 'search' );
add_action( 'wp_ajax_nopriv_search', 'search' );
function search(){
 $search_key=$_POST['search_key'];
 query search 
نمایش خروجی
}

و در فایل search.js

jQuery(document).ready(function(){
  jQuery('.search_btn').click(function(){
		var search_key=jQuery('.search_input').val();
        jQuery.post(the_ajax_script.ajaxurl,{action:"search",search_key:search_key},function(response){var   	response=response.substr(0,response.length-1);
              jQuery(".result").html(response);
               
        
    });
  });
});

اسم کلاس result باید در صفحه ای باشد که خروجی سرج در آن نمایش داده میشود در اصل خروجی سرچ در این div قرار میگیرد

لینک به ارسال
در 58 دقیقه قبل، Fenix.ir گفته است :

با سلام و احترام شما با جاوا اسکریپت و php کار کردید ؟ تسلط دارید ؟

 

سلام مجدد 

تسلط کامل ندارم ولی میتونم کد ها رو تا حددی درک کنم و اکثر اوقات نتیجه ای که میخوام رو از روی سمپل ها میتونم بهش برسم.

لینک به ارسال
در ۱ ساعت قبل، Ebrahimzadeh گفته است :

شما برای این کار احتیاج به یک input برای وارد کردن کلمه جستجو با اسم کلاس مثلا .search_input و یک دکمه که باید نوعش button باشه با اسم کلاس btn_search

در فایل functions.php
 


wp_enqueue_script( 'post-ajax-handle', get_template_directory_uri() . '/search.js', array( 'jquery' ) );

wp_localize_script( 'post-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );


add_action( 'wp_ajax_search', 'search' );
add_action( 'wp_ajax_nopriv_search', 'search' );
function search(){
 $search_key=$_POST['search_key'];
 query search 
نمایش خروجی
}

و در فایل search.js


jQuery(document).ready(function(){
  jQuery('.search_btn').click(function(){
		var search_key=jQuery('.search_input').val();
        jQuery.post(the_ajax_script.ajaxurl,{action:"search",search_key:search_key},function(response){var   	response=response.substr(0,response.length-1);
              jQuery(".result").html(response);
               
        
    });
  });
});

اسم کلاس result باید در صفحه ای باشد که خروجی سرج در آن نمایش داده میشود در اصل خروجی سرچ در این div قرار میگیرد

ممنون بزرگوار

چند سوال:

۱- سمپلی چیزی تو این زمینه هست که بشه تست کرد؟ یا رفرنسی تخصصی برای این موضوع هست که بشه رفت دنبالش و یاد گرفت و درک کرد که دقیقا این نمونه کد ها چی هستن و چیکار میکنن؟

۲- این نمونه کد داره با استفاده از متد $_post کار خودشو میکنه درسته؟

۳- میشه همین رو با $_get انجام داد یا فقط باید پست باشه؟

۴- این واسه یه فرم جستوجوی تک فیلدی هست و اگه قرار باشه فرم جستوجوی ما چند فیلدی باشه چی ؟

 

 

لینک به ارسال

https://codex.wordpress.org/AJAX_in_Plugins

 

میتونید از چند فیلد بر اساس نیاز استفاده کنید فقط کوئری های که مینویسید متفاوت

لینک به ارسال
در در 7/26/2017 at 14:42، Ebrahimzadeh گفته است :

https://codex.wordpress.org/AJAX_in_Plugins

 

میتونید از چند فیلد بر اساس نیاز استفاده کنید فقط کوئری های که مینویسید متفاوت

رفرنس ویدئو و یا فارسی مد نظرم بود ولی به هر حال ممنون 

 

لینک به ارسال
  • 3 سال بعد...

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...