Below is the simple code that should display Ajax loading animation when form is submitted:
var init = function() {
$("form").bind('ajax:beforeSend', function() {
$("#comments_loading").show();
});
$("form").bind('ajax:complete', function() {
$("#comments_loading").hide();
});
};
$(document).load(init);
It's purpose is to display the loading animation on Ajax request. It works perfectly, but... only for the first form submit!!! Any suggestions why/how can this be addressed can be much appreciated.
Thanks a lot.
Use jquery .on instead. Same syntax, different method name:
$("form").on('ajax:complete', function() {
$("#comments_loading").hide();
});
Because I am assuming that your ajax loaded form is not the exact same element as your original form
Related
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.
I think the solution might be obvious, but I cant seem to find it...
this.$modal.on("show.bs.modal", function () {
$("#authModalContent").load("/login/",function(){
$("form").on("submit", function(e){
e.preventDefault();
var data = $("form").serializeArray();
$.post("/login_check",data,function(data){
$("#authModalContent").html(data);
});
});
});
});
data is basically the html content of /login/ route. How to nest this function without creating an infinite loop?
Context: Login page loaded, click submit, backend redirects to /login/ with POST and then that html is transferred to the modal.
FOSUserBundle + symfony2 used
Well, I am gonna answer my own question. You need to find something in your dom that will always stay there and tell him to look up for specific other dynamic elements.
this.$modal.on("show.bs.modal", function () {
$("#authModalContent").load("/login/");
$("#authModalContent").on("submit", "form", function(e){
e.preventDefault();
var data = $("form").serializeArray();
$("#authModalContent").load("/login_check",data);
});
});
Basically my #auModalContentwill always be there and form will be dynamically loaded each time
I have the following jquery affecting cancelled bookings in a Drupal view, which works great.
jQuery(document).ready(function(){
jQuery(".bookingstatus:contains('Cancelled')").css("color","red");
});
But, the drupal view uses a autosubmit checkbox to load bookings based on a chosen year, in an ajax display, when a user submits a change and ajax loads the new form, the jquery isn't used again. That makes sense though, as the (document).ready will only fire once when the user enters the page, and not on every ajax request.
Updated:
This is what I am currently using, no more errors, and the colours show on the first page load like they did before, but the colours still aren't being changed after an ajax click.
(function ($) {
$.post("/", $("#views-exposed-form-bookings-block").serialize(), function() {
$(".bookingstatus:contains('Cancelled')").css("color","red");
$(".bookingstatus:contains('Full Amount Paid')").css("color","green");
$(".bookingstatus:contains('Deposit Paid')").css("color","blue");
});
})(jQuery);
.delegate and .on only help with binding events; you aren't trying to bind any events. You should instead be using the ajax-submit success or complete callbacks.
$.post("act.php", $(theform).serialize(), function() {
$(".bookingstatus:contains('Cancelled')").css("color","red");
});
Thanks to #Kevin B for your help, but the problem was with Drupal & views Ajax behaviours.
Sticking the jquery into a behaviour fixed it.
(function($) {
Drupal.behaviors.myBehavior = {
attach: function (context, settings) {
$(".bookingstatus:contains('Cancelled')").css("color","red");
$(".bookingstatus:contains('Full Amount Paid')").css("color","green");
$(".bookingstatus:contains('Deposit Paid')").css("color","blue");
}
};
})(jQuery);
I have a page that display some data. It is loaded from a database using php and mysql, I use zend framework to handle all this.
On this page I have two things that use jquery. one is a paginator and the other is a thumps up function.
the paginator works fine. It receives the data as json and applys it to the view. all the functions that I need to handle this are located in one js file. In this file I listen for clicks...
$(document).ready(function() {
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
});
Now I have a problem with the thumps up function. It is located in another js file. Everytime the thumbs up button is clicked the script should just alert "click". actually when you click before you use the paginator a "click" appears, but when you do it after nothing happens. but the html in the dom inspector appears to be the same.
in my thumpsup.js I just have
$(document).ready(function() {
$("a.tp").click(thumpsUp);
});
function thumpsUp() {
alert("click");
}
I do not know where the problem is. maybe the js files are interferring each other!?
function thumpsUp() {
var url = window.location.hostname + '/programme/thumpsup/id/'
+ $(this).attr('page');
$.post(url, {
"format" : "json"
}, function(data) {
alert(data);
}, 'html');
return false;
}
I'm guessing the paginator is rewriting your elements and they are losing their click event binding. Try using live() for event binding instead:
$(document).ready(function() {
$("a.tp").live('click',thumpsUp);
});
function thumpsUp() {
alert("click");
}
You might have the Script files (which are included in your mark up) the wrong way round. That's the only solution I can think of...
I'm pretty sure you can get away with two $(document).ready()'s (even if it is frowned upon).
Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance
I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.
Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback