Forums › Forums › Search & Filter Pro › Update page title with AJAX

Tagged: ,

  • This topic has 10 replies, 3 voices, and was last updated 6 years ago by Ross.
Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • Anonymous
    (Private)  October 24, 2018 at 1:53 pm #191717

    Hey,
    I’m trying to change the search result page title on search submit without refreshing the whole page, using ajax. I was thinking to add a listener to ajaxComplete(), check if the ajax call is the s&f call, and then print the search term parameter (or the response). something like:

    $( document ).ajaxComplete(function( event, xhr, settings ) {
    if( THIS IS S&F CALL ){
        $('.main-header h2').text( settings.SEARCH_TERM );
    }
});

    my problem is first, I’m not professional enough with AJAX, and second – I’m not familiar with S&F code. I’d appreciate your guidance.

    Thanks,
    Itamar

    Trevor
    (Private)  October 24, 2018 at 3:27 pm #191737

    The code to run after our ajax is done would be like this:

    (function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.main-header h2').text( settings.SEARCH_TERM );
  });
}(jQuery));

    But what you have in that line with main-header in I cannot comment on (as to whether it would work I mean).

    Anonymous
    (Private)  October 24, 2018 at 3:59 pm #191743

    Thanks Trevor, this is very helpful!
    I’ve came up with the following solution, which works when I put it in the dev console, but somehow not when I add it to the theme’s js file.

    (function ( $ ) {
$svalue = $('input[name="_sf_search[]"]').val();
	if($svalue != ''){
		$svalue = 'תוצאות חיפוש עבור: ' + $svalue;
	}else{
		$svalue = "תוצאות חיפוש מתקדם";
	}
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		$('.main-header h2').text( $svalue );
	});
}(jQuery));
    Trevor
    (Private)  October 24, 2018 at 4:06 pm #191745

    What happens if you use this plugin to add it:

    https://wordpress.org/plugins/custom-css-js/

    Anonymous
    (Private)  October 24, 2018 at 7:11 pm #191780

    Using the plugin with the default settings (internal script in the header) returns undefined for the $sfvalue. If changed to footer, it doesnt work at all.
    Should I wrap it with document.ready() or not? something else?

    Itamar

    Trevor
    (Private)  October 24, 2018 at 7:20 pm #191783
    This reply has been marked as private.
    Anonymous
    (Private)  October 24, 2018 at 7:23 pm #191785

    I understand, thank you very much, and no rush.

    Anonymous
    (Private)  October 30, 2018 at 3:09 pm #192165

    Hey Trevor,
    It is starting to be urgent, I’d like to ask if it’s possible to get Ross’ advice now.

    Thanks,
    Itamar

    Ross Moderator
    (Private)  October 30, 2018 at 3:14 pm #192169

    Hi Itamar

    I’ve been off work due to sickness but getting back on top of things.

    While I do not know the correct place to add JS to your theme, I think the best position would be to load it in the footer, and then also wrap your statements in a $(document).ready just in case.

    That should allow S&F scripts etc to load first.

    That being said, you mention you need to update on Ajax?

    You need to use the sf:ajaxfinish event as per Trevors post, your following post with code sample does not contain this?

    Thanks

    Anonymous
    (Private)  October 30, 2018 at 6:08 pm #192216

    Thank you very much Ross for the very quick reply, I hope I didn’t urged you to much getting out of bed.
    anyhow, it’s now working! I’ve modified my recent code and wrapped it with document.ready, made sure it’s on the footer, and VOILA, it’s alive!

    here is a snippet for whoever want it:

    jQuery(document).ready(function($){
	/****
	** Advanced Search screen: Update document and page title based on search term with Ajax
	****/
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		$svalue = $('input[name="_sf_search[]"]').val();
		if($svalue != ''){
			$svalue = 'Search Results for: ' + $svalue;
		}else{
			$svalue = "Advanced Search Results";
		}
		$('TITLE-SELECTOR').text( $svalue ); 
		 document.title = $svalue + " - MY-WEBSITE";
	});
});
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 11 total)
1 2