Ajax affecting jQuery document load on ajax form - javascript

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);

Related

WordPress Contact Form 7 Plugin behaves strange when it is part of AJAX-loaded content

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.

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

Executing javascript code after non-jquery ajax call updates part of the page

I have a page I want to show/hide a field based on a value selected from a drop down field. This works fine when page loads. But when an ajax call updates part of the page, of course my jquery document.ready does not fire. I tried many solutions about this issue but no luck. I can not edit that ajax call to add a call back, I have no access to that.
Here is my simple Jquery code: (The legacy product has jquery1.3 but I can upgrade this version)
$(document).ready(function(){
//my code to hide/show a field
$('#mySelect').change(function(){
//show or hide
});
});
This works when the page loads, but when the following ajax call executes, my jquery doesn't work any more: (Note: I can not edit this code)
function sendCommand(a,c,e,f,g,j,l,m){
if(AJAX._engineReady&&(a=document.getElementById(a))){
var o=a.selectedIndex;
if(!(o<0)){
a=a.options[o].value;
c=upsertURLParam(c,"OCTYPE",a);
o=document.getElementById(m);
m=null;if(o)m=o.value;
o=document.getElementById(j);
storeUserValues(o);
o=new AJAXRequest;
o.setCtxtParams(c);
o.setTimeout(6E4);
/*
* lots of parameter setting omitted here
*/
AJAX.send(o);
AJAX._engineReady=!1
}
}
}
I tried different methods such as jquery .on(), .live(), .delegate(), etc I have not found a way to fix. Also, the jquery .ajaxComplete() seems to be used only when we are making jquery-ajax calls which is not the case here. Any help would appreciated.

JQuery Ajax Binding

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

jQuery Basic problem

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).

Categories