fire a plugin in a post or page load with ajax WordPress
- SOLVED
I have two sites and I want use ajax. The problem is when I load a page with ajax , the plugin ( one slider with orbit and one with royalslider) this slide is not show..
First site totally ajaxify :
jQuery(document).ready(function($) {
var $mainContent = $("#wrapper"),
var $slider = $("#sliderr"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
url = url + " #content";
$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
$mainContent.animate({opacity: "1"});
$slider.orbit();
});
});
$(window).trigger('hashchange');
});
The slider in this site is orbit slider and the script is:
$(window).live(function() {
$('#slider').orbit();
});
The second site ajax is only for some post:
jQuery('#menu-profilo > li > a').click(function(event){
//This keeps the href from reloading the page
event.preventDefault();
//grab the page link
var page = jQuery(this).attr('href');
jQuery('#slideshow').html ('<div id="loading"><p>loading</p></div>')
//use the grabbed link in the load function
.load(page+' .post_content').fadeIn(2000)
});
The post is loaded fine but the shortcode inside the post not, is loaded but doesn't appear in the post , generally even when I load a post with ajax call all plugins doesn't appear
I post some images.
Answers (5)
Christianto answers:
Hi Rumbella,
Do you load a post contain a slider html code and start the slide after the content loaded with ajax on different place?
if the post loaded contain the slide, you need to select the slide target again as a callback,
I only see you put the slider as target at beginning of the code, which happen before the slide loaded and added to the $mainContent
jQuery(document).ready(function($) {
var $mainContent = $("#wrapper"),
<strong> var $slider = $("#sliderr"),</strong>
siteUrl = "http://" + top.location.host.toString(),
url = '';
You can re-select the slide inside ajax callback, by changing $slider var to $("#sliderr")
$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
$mainContent.animate({opacity: "1"});
$("#sliderr").orbit();
});
Christianto comments:
If you already change the ajax callback, also please check the slider selector $("#sliderr"),
I think it should be "royalSlider" class $(".royalSlider")
rumbella comments:
this is the full code.
jQuery(document).ready(function($) {
var $mainContent = $("#wrapper"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$("#searchform").submit(function(e) {
location.hash = '?s=' + $("#s").val();
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
url = url + " #content";
$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
$mainContent.animate({opacity: "1"});
});
});
$(window).trigger('hashchange');
});
your suggestion full code
jQuery(document).ready(function($) {
var $mainContent = $("#wrapper"),
var $slider = $("#slider"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$("#searchform").submit(function(e) {
location.hash = '?s=' + $("#s").val();
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
url = url + " #content";
$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
$mainContent.animate({opacity: "1"});
$("#slider").orbit();
});
});
$(window).trigger('hashchange');
});
but doesn't works yet....
Christianto comments:
Please check the id of the slider html,
I check on your screenshot: http://wpquestions.com/uploads/rumbella_phpgsu3q0.jpeg
that the slider id isn't #slider, but #royalslider-3 or class ".royalSlider"
so it should be
$(".royalSlider").orbit();
if you fire $(".royalSlider").orbit(); directly on your web browser console, is it works?
John Cotton answers:
Hi Rumbella
Your explanation is not entirely clear to me, but it seems to come down to "I'm loading a post via ajax but the shortcodes haven't been processed". Is that correct?
It's not clear from the code you've posted how you are loading the post - directly from the post url? If you, surely you end up with all the <head> content from that page which can't be desirable.
Or are you calling a function that restrieves post_content? If so, that might be where the problem is since you have to apply a filter to get teh shortcodes exectued:
$html = apply_filters( 'the_content', $post->post_content);
Does that make sense?
rumbella comments:
mmm I don't understand what you mean exactly:
So, simply I load the different post ( link at the post url in links menu) in the same page. The post in the page is loaded but the slide -as you can see by the screenshot- is not showing.... I think the real problem is fire jquery in as ajax call
John Cotton comments:
Can you us a URL to see it?
It could be that the slider isn't appearing because you don't have the correct javascript or css loaded...
