I'm using the fantastic Stellar.js (http://markdalgleish.com/projects/stellar.js/) for parallax on a recent project, but I've run into a challenge:
Stellar isn't noticing when I change content via AJAX (in this case loading in new div's from an html file and using jQuery's replaceWith method). So, my new elements have no parallax, even though they have stellar data attributes.
I've tried calling the .stellar function on my window again after the AJAX is complete, but it doesn't do anything.
How can I get Stellar to correctly apply parallax to the new AJAX'd in elements?
I know this question was posted a long time ago has been accepted, but for me the solution above did not work, so I just wanted to share this which worked for me.
After you AJAX call has been successful you can call Stellar's refresh function like so:
$.stellar('refresh');
Here is the full code:
$.ajax({
type: 'GET',
url: ajaxUrl
}).done(function(data) {
$(targetElement).html(data);
$.stellar('refresh');
}).fail(function() {
// Do something else
});
I found that I can run this code in my jQuery AJAX callback and Stellar will then correctly apply parallax to my new AJAX'd in elements:
$(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();
I know that the topic is old but I want to share the solution that I found, hoping that it will be useful for people who are still searching.
First create the function:
function init () {
$(window).data('plugin_stellar').refresh();
}
jQuery(document).ready(function () {
// Initialise the plugin when the DOM is ready to be acted upon
init();
});
Second insert this line in your Ajax call:
// Reinitialise plugins:
init();
Related
I know this question has been asked several times. And I have read all the threads without coming to a solution. I use Wordpress, together with a plugin, this plugin lets me add events to it. I use the "shortcode"/[slug] on a Wordpress page. This displays the events I have added. If I add or remove an event I need to manually refresh the page to see this.
My goal is to be able to see the new events (and removed) without refreshing the whole page.
If I check the page with chrome together with the source I find that a div id="vs" is what contains all the events.
I have made an addition to the plugin where I've created a javascript.
jQuery(document).ready( function($) {
var auto_refresh = setInterval(
function() {
$.ajax({
url: "https://example.com",
success: function( data ) {
$("#vs").html( $(data).find('div').html());
}
})
}, 5000); // refreshing after every 5000 milliseconds
})
What happens is that it is refreshed automatically. But it displays a lot of elements, and it is a duplicate of the content that was already there. And everything is offset too.
I really don't know what to try?
And also, the page which this is displayed on is a slider, both displaying the same slug, but it only "works" on the first slider.
Any ideas?
So it's a little hard to answer without seeing what all the dom looks like but it sounds like you are not replacing the content but rather just adding to it over and over again. As a result, slowly the width content is getting smaller and smaller which is why you get the indenting affect. My guess is you're using .html when you want to be using .replaceWith
http://api.jquery.com/replacewith/
var auto_refresh = setInterval(
function() {
$.ajax({
url: "https://example.com",
success: function( data ) {
$("#vs").replaceWith( $(data).find('div').html());
}
})
}, 5000); // refreshing after every 5000 milliseconds
If this doesn't work I think we need to see what your dom looks like.
I am loading a html page with script section(render the JQuery UI) via AJAX. This html page contains more number widgets. In success function of Ajax, I am accessing the UI controls by its JQuery UI class names, but none of the class names are added i.e., script is not executed. If I access the same after 100ms using setTimeOut its working.
Please refer the below code:
var self = this;
$.ajax({
url: url,
dataType: "html",
cache: true,
success: function (str,sta,xhr) {
$("#samplefile").html(str);
setTimeout(function() {
self.reg($("#samplefile .ui-widgetui"));
},100);
}
});
Its working fine but I want to access this without settime out. Can anyone please suggest on this?
It sounds perhaps that you are trying to access the DOM before everything is initialized. Have you tried wrapping the initialization of you ajax request in a jQuery $(document).ready() call? This makes sure that your DOM is in a initialized state before getting triggered.
https://learn.jquery.com/using-jquery-core/document-ready/
I am currently trying to implement the WordPress Contact Form 7 Plugin into a WordPress-site I created. The theme uses jQuery to overwrite the default link behaviour and AJAX to load the requested page without actually reloading the whole page.
The problem is: The contact form works perfectly when the page where it is used on is loaded directly. However, if the page is loaded via AJAX, there are two strange behaviours: The Google reCAPTCHA widget is not showing up and after submit, instead of showing the div with the success-message, I am redirected to the themes "404" page. The mail gets sent successfully though. I use the plugin/contact-form in AJAX mode - so it makes an AJAX call itself to submit the data and handle the response without page refresh.
I am a bit overwhelmed where to start to solve this problem. Just for testing, I tried to hardcode all scripts from the direct pageload to the theme, so that they are also there when the contact-page is loaded via AJAX. Unfortunately, this didn't have any effect at all. I also tried to call the wpcf7InitForm() function of the plugin, as it was suggested in another question here - also with no success.
This is my ajaxload-script:
jQuery(document).ready(function($) {
// Targeting all internal links
$(document).on('click', 'a[href^="http://' + top.location.host.toString() + '"]:not([href*="wp-admin"])', function(event) {
event.preventDefault();
var url = $(this).attr('href');
$.ajax(url, {
beforeSend: function() {
if ($('#ajax-loader').length == 0) { $('body').append('<div id="ajax-loader"></div>'); }
$('#ajax-loader').fadeIn();
// Dimming static elements during loading
$('#mainbar').animate( { opacity: '0.5' } );
},
success: function(data) {
var data = $('<div />').html(data);
window.history.pushState('...', '...', url);
document.title = $(data).find('title').text();
$('#mainbar').html($(data).find('#mainbar > *'));
// Undoing design modifications to static elements
$('#mainbar').animate( { opacity: '1' }, 150 );
$('body').triggerHandler('reflow');
},
});
});
});
Help on this topic would be really appreciated and thanks in advance!
Couple ideas after reading through some stuff:
Might be a bug with the recaptcha - looks like the latest version specifically fixes recaptcha problems (not sure if they are yours though): http://contactform7.com/2015/11/23/contact-form-7-431/#more-16357
The div not showing up should be easy to debug by using absolute paths. In Wordpress, I usually use the bloginfo(); function. Try putting something like this in your form submit success callback to test path visibility between the AJAX and non-AJAX pages:
<?php
$pathCheck = bloginfo('template_directory');
echo $pathCheck;
?>
The problem with the div not showing up could also be how you are structuring the callback. From this question, it appears that the plugin has specific callback hooks you have to use that aren't in the documentation:
$(".your-form-class").on('wpcf7:mailsent', function(event){
// Show success div code would go in here
});
Great question btw. You used proper english and clearly explained your problem, pretty rare on S.O. Hope some of this gets you going.
is there a way to alter .load behavior so that it load a spiner inside any div that is loading data ?
example
<div class='content lside'></div>
<script>
$(document).ajaxStart(function() {
$('body').append('<div class="notice" style="position:fixed;top:40%;left:30%;z-index:99999;"id="loadingspin">loading</div>'); });
$(document).ajaxStop(function() {
$('#loadingspin').fadeOut().remove();
});
$('.content').load("<?=base_url();?>booking/<?=$day?>");
</script>
i use above script.
but what i actually want is that when ever ajaxstart the content of $('.content') is replaced with spinner until it finish loading the new content.
so is there a way i can extend .load to do that by it self and replace the ajaxstart,
so where ever $(div).load() is called a $(div).html('spiner'); is fired.
if not, is there a way .ajaxstart can reference the div that the content will be loaded into ?
please note: im currently using .ajaxstart and .ajaxstop in my header script in all my webpage to handle showing the spinners in general, but i want to replace it/extend it with div specific solution that would still work on any page without further editing into each and every ajax request.
thanks
probably something like this should do the trick. Override jQuery's prototype and save the old function.
(function(){
var oldLoad = jQuery.fn.load;
jQuery.fn.load = function( url, data, complete ){
/*
* do your stuff
*/
oldLoad.call( jQuery, url, data, complete );
}
})();
That changes the globally available jQuery.load() method for the whole page so »your stuff« should be executed even if other scripts call that method, a least after your re-definition of that function is parsed.
I'm developing an ajax heavy web app, and would like to have textarea's (with class="ui-richtext") automatically initialize TinyMCE.
This is easy for textarea's that are loaded normally, but how about for content that is loaded AFTER the fact using ajax?
I was thinking something along these lines: (i'm using jquery)
$("textarea.ui-richtext").live("ajaxComplete", function()
{
$(this).tinymce({...});
});
Unfortunately this doesn't seem to work. Any ideas?
This is my first post, let me know if I need to add more info
Live is limited to a small number of events.
You can do something like this though:
$.ajax({
url: 'url/here',
success: function(data){
var $data = $(data).("textarea.ui-richtext").tinymce();
$('#mydiv').append($data);
}
});