sajad

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

7 پست در این موضوع قرار دارد

سلام 

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

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

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

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

 

0

به اشتراک گذاری این پست


لینک به پست

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

 

0

به اشتراک گذاری این پست


لینک به پست

شما برای این کار احتیاج به یک 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 قرار میگیرد

2

به اشتراک گذاری این پست


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

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

 

سلام مجدد 

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

0

به اشتراک گذاری این پست


لینک به پست
در ۱ ساعت قبل، 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 انجام داد یا فقط باید پست باشه؟

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

 

 

0

به اشتراک گذاری این پست


لینک به پست

https://codex.wordpress.org/AJAX_in_Plugins

 

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

1

به اشتراک گذاری این پست


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

https://codex.wordpress.org/AJAX_in_Plugins

 

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

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

 

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری