I'm using this code:
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
/* Content is now loaded */
ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
});
});
});
along with this:
<li>HELP</li>
To load pages when the link is clicked.
I would like to know how do I add to the current script so that I can load a page the minute the page loads up, while keeping it working the way it already is? I'd like to load a page named "Homepage.html"
This should do it:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html');
});
</script>
Or if you still need that callback:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html', function() {
ThumbnailScroller('tsv_container','vertical',10,800,'easeOutCirc',0.4,500);
});
});
</script>
Related
On the woocommerce cart page I would like to add a notice if you use the quantity plus button and it is reaching the max stock. But I have an auto update on the cart, so I have to wait until the ajax load finishes to show the notice. What I realised using my script that the more you press the button after each ajax call the more times it is fired and the notice will be displayed more and more times. How to handle this? Thank you.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var inputval = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').val();
var inputmax = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').attr('max');
if(inputval==inputmax){
jQuery( document ).ajaxStop( function($) {
alert("TeSZT");
jQuery('.woocommerce-notices-wrapper').html('<div class="woocommerce-info"><div class="woocommerce-info-text">Sajnos ebből a termékből jelenleg nincs több raktáron</div><span class="close-message"></span></div>');
});
}
});
You can try to disable to element to prevent multiple clicks. Enable this once ajaxStop is triggered for future use.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var $this = $(this);
$this.prop( "disabled", true );
...
jQuery( document ).ajaxStop( function() {
$this.prop( "disabled", false );
});
...
})
i am working around an ajax loading powered website . Here i am trying to load different url on different link but there is a little bit problem i am facing . There is used 4 links and 4 pages to load each page is linked with another but on clicking a link 4 pages are loading .
my html is
<div class="col-md-12">
this is one
hello
hello
hello
<div class="ajaxshow"></div>
</div>
and my javascripts are
(function($){
'use strict';
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
})(jQuery);
though hete each function is not working it doesnot working.can anyone help?
A working example is here
http://orlandojoes.co.uk/website/ajaxTest.php
The problem is your ajaxUrl variable is within a different closure than the one you assume so by the time it is clicked, it is always the fourth link.
This is because first you do
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
Here, ajaxUrl is global to the 'each' closure. In order to fix this problem, remove the ajaxUrl declaration from outside the 'each' scope, and define it within
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
var ajaxUrl = $(this).attr('href');
$(this).click(function(event) {
.
.
.
Also change
$('.ajaxshow').append().load(ajaxUrl);
to
$('.ajaxshow').load(ajaxUrl);
There is no need for append as load will insert the HTML response within the ajaxshow div
user your code in document ready function like this:
$(document).ready(function () {
var ajaxcontent = $('[data-content="ajax"]'),
pathname = window.location.pathname,
url = window.location.href,
ajaxUrl;
ajaxcontent.each( function(index, el) {
$( this ).append('<span class="ajax-live"></span>');
});
$(document).off('click','[data-content="ajax"]');
$(document).on('click','[data-content="ajax"]',function(event) {
var ajaxUrl = $(this).attr('href');
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight"></span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
$('.ajaxshow').css('display', 'block');
});
$(document.body).off('click', '.ajax-close');
$(document.body).on('click', '.ajax-close', function( event ){
event.preventDefault();
$( '.ajax-live' ).removeClass('ajax-live-on');
$( this ).removeClass('ajax-close');
$( '.ajaxshow' ).fadeOut(600).slideUp();
});
});
I hope this code will work.
My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/
Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>
I have 2 php pages. The user submits a form (form.php) and the results are viewed on the next page (results.php). There can be a delay of a few seconds while the results are shown - I've added a standard spinning loader gif above where the results appear (it's showing 2 mini calendars of available dates). I would like to then hide this once the calendars have loaded.
Here's the script that gets the calendars:
$( document ).ready(function() {
$(document).on('click', '#calendar_1 .next, #calendar_2 .next', function(event){
event.preventDefault();
var href_link = $("#calendar_1 .next").attr("href");
$( "#cals" ).load( href_link );
});
$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){
event.preventDefault();
var href_link = $("#calendar_1 .prev").attr("href");
$( "#cals" ).load( href_link );
});
$( "#cals" ).load( "loadCalendar.php" );
});
I'm showing the loading gif and calendars in the html as follows:
<img id="loading_spinner" src="loading_spinner.gif">
<div id="cals"></div>
I gather I need to do something like:
$('#loading_spinner').hide();
to hide the gif image but I only want to do this once the calendars have actually loaded. I can't work out the correct context or how to do this or even if it's possible.
You can add a callback to your load() function and hide the spinner from there. This will hide it only when load() completes execution.
$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){
event.preventDefault();
var href_link = $("#calendar_1 .prev").attr("href");
$( "#cals" ).load( href_link, function() {
$('#loading_spinner').hide();
});
});
I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});
Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});
need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});