Problem with ajax results missing audio player

Adrian Jefferies

#14438

Hi Ross,

I’ve got an issue that I need some help with please. I am using Search and Filter Pro to filter bible talks in a number of ways. When all the talks are listed using a template file, the audio player displays under each talk, as expected.

If I then go to filter the talks by say “preacher”, then the list updates fine, showing only talks by that speaker, but the audio player does not show. It loads onto the page, but does not display on screen.

Furthermore, if I refresh the page, the audio players load in, but the title of the page changes to Blog.

The issue is seen here:
http://kfc.definingdesign.co.uk/sermons/ – choose some way of filtering using the “sermon sorter” on the right, then refresh the page.

Any help very gratefully received.

Add New Note to this Reply

Ross Moderator

#14444

Hi Adrian

What is happening is, when the page loads, your theme is doing all kinds of stuff like loading the scripts for your audio player and attaching them to the page.

Then, once you use ajax, these audio player are removed, and new results are brought in. However this scenario is different because your theme doesn’t run the scripts it needs to setup those audio players.

Take a look at the first question here:
http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

Basically you need to run the same scripts (for setting up audio players) that your theme runs when ajax has finished loading – your theme developer may know of some functions that could do this.

Thanks

Add New Note to this Reply

Adrian Jefferies

#14457

Hi Ross,

Thanks for the quick reply. The FAQ helped a lot, and I just added the following into my .js file and it works great:

$(“.searchandfilter”).on(“sf:ajaxfinish”,function(){
$(‘video,audio’).mediaelementplayer();
});

Users should not need to refresh the page, but if they do, the title of the page still changes to “Blog | Site Title”

Any further suggestions?

Add New Note to this Reply

Ross Moderator

#14462

check out this thread 😉

https://support.searchandfilter.com/forums/topic/change-page-title-for-search-results/

Add New Note to this Reply

Adrian Jefferies

#14464

Thanks Ross – spot on. You are a patient man.

Here is the code I used in functions.php:

add_filter('wpseo_title','search_meta_title');
function search_meta_title($data){
	global $sf_form_data;
	if($sf_form_data->form_id()==1272)
	{
	return 'Sermons';
	}
	else
	{
	return $data;
	}
}

Add New Note to this Reply

Ross Moderator

#14475

No problem 🙂

Add New Note to this Reply

Fischer Emmanuel

#127088

Hello, I have the same problem with my audio player that changes shape and color once the rescheerche display. I see you say you have to put in the js:
$ ( “Searchandfilter.”) One (“sf: ajaxfinish.”, Function () {
$ (‘Video, audio’) mediaelementplayer ().
});
But where exactly? This is serach-filter-build.js?
cordially

Add New Note to this Reply

Adrian Jefferies

#127103

I put it in a separate .js file that is registered using wp_register_script and queued using wp_enqueue_script within functions.php in the usual way.

Note your code is wrong in a number of ways. It should be:

$(".searchandfilter").on("sf:ajaxfinish",function(){
  $('video,audio').mediaelementplayer();
});

Add New Note to this Reply

Fischer Emmanuel

#127108

Hello, thank you for your answer. But since I am a beginner, I did not understand the manipulation … Thank you for your patience.

Add New Note to this Reply

Trevor Moderator

#127111

If you are placing that code inline on the page, it would become like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    $('video,audio').mediaelementplayer();
  });
}(jQuery));</script>

Add New Note to this Reply

[Author]

Posts