having searched I have found similar issues but none directly relating to my problem or a solution that works for me. My jQuery Knowledge isn't too strong so it could be something nice and simple.
Here Goes...
• I have a WooCommerce website and have installed the Ajax Layered Navigation Plugin to filter down categories.
• To add specific styling to these I have the following jQuery function to add a class to each li
$('.checkboxes li').each(function(){
$(this).addClass("filter_" + $(this).text());
});
• This works great up until a filter is selected.
• Once the page is reloaded the above classes get removed.
• I have looked to combine a number of different options around ajaxSuccess and ajaxComplete however cannot get the function to re-fire.
What I need to know is how to re-trigger the event above so that each time the page reloads / filters via ajax the appropriate class gets added to that li.
This is the code before Ajax takes place, all li's have the right class
This image shows the Li's after the filter has been clicked
$( document ).ajaxComplete(function( event,request, settings ) {
$( "#products" ).append( "<li>Request Complete.</li>" );
});
$( document ).ajaxSuccess(function() {
$('.checkboxes li').each(function(){
$(this).addClass("filter_" + $(this).text());
});
});
$(document).ajaxSuccess(function(){
alert("AJAX request successfully completed");
});
Many Thanks in advance for any Help!
Have you tried setting a timeout after ajax complete?
$( document ).ajaxComplete(function() {
setTimeout(function(){
alert("Ajax done");
$('.checkboxes li').each(function(){
$(this).addClass("filter_" + $(this).text());
});
}, 500);
});
Related
I am trying to set the name and ID of an element when a radio button is clicked on. To avoid duplicating the selector, I attempted to set it up like this:
$( "#selectOther" ).click(function() {
$( "[field=primaryInput]" ).attr('id', "modifiedId", function() {
$(this).attr('name', "modifiedName");
if ($(this).attr('visible') == "False") {
$(this).slideDown('fast');
$(this).attr("visible", "True");
}
});
});
However, it isn't working. It seems that the ID is changed, but the Name is not, nor is the rest of the function executed. Could someone help me understand how to express this correctly?
Here's a JFiddle.
EDIT: In my final case I will have a couple of buttons that reveal the field if it is hidden, and others that will hide it if it is visible. That is why I am not using .slideToggle()
See this fiddle:
$('input[type="radio"]').click(function() {
$('input[data="primaryInput"]')
.prop('id', this.id)
.prop('name', this.name)
.val(this.value)
.css('display', 'inline-block');
});
Number of points:
You didn't set an external resource (namely jQuery) in your fiddle - so you wouldn't ever get jQuery functions to execute
Use the data attribute for custom attributes. You can access them the way I have done or by selecting the $(element).data('field')
This example might help you understand how chaining works. One other piece of advise is that chaining only works if the method invoked next receives the same element the previous method returns. If it ever changes, you can use end() to get the previous state.
Current site I am fixing: --> http://newmind.se/lagerbolag-2/
I want to make forms fieldsets generated by the Visual Form Builder separated in to a wizard or paged.
Where you can click your way through without leaving the page (there is a paged feature it seems but I want to learn jQuery: https://www.youtube.com/watch?v=o5wjRDnEg8s) but I want to trigger this on click of a button like a next button would make a certain div style.display:'block' and I figured the easiest way is was adding this functionality was through jQuery but jQuery seems turned off. Call to undefined variable from this piece of code I just added there to test if jQuery worked in the proper section in the Divi theme:
//changing color on the headline on the page
$( ".bengt" ).on( "click", function() {
$( this ).css( "color", "red" );
});
//just putting a message in the console
A $( document ).ready() block.
$jQuery( document ).ready(function() {
console.log( "ready!" );
});
Neither of these triggered within the divitheme even though jQuery library is included in the theme. Instead I got an error message Uncaught ReferenceError. Seems like the Divi-theme doesn't want me as a user to tamper with the jQuery..
Remove $ sign from $jQuery and try this code, your Jquery library is loaded you are not calling it properly
//just putting a message in the console
jQuery( document ).ready(function() {
console.log( "ready!" );
});
This situation have been post a lot in there but I didn't find the best way to solve my problem. Please help me this.
enter code here
Link
I want to make the button to open/hide the table content. I used slideToggle() in JQuery and next() to cacth the table content.In jsfiddle you can see. My code is worked.
But it just on the Click to SHOW/HIDE (worked) the Click to SHOW/HIDE (not work) is the MAIN button which I want to make (BECAUSE THE DESIGN). But when I put the button in there, it didn't work anymore. How can I solve this. Please help !
check this demo, if you are expecting the same thing
DEMO
$( "#clickme" ).click(function() {
$( "#toggleMe" ).toggle( "slow", function() {
// Animation complete.
});
});
I have a sprite image than when mouseenter/mouseleave occurs over it, the background position changes.This is working so far although there is probably a more efficient way of doing it. However I have several images I need to do this with and am trying to find a way to feed the id of the image into the jQuery rather than duplicate code.
The HTML:
<div class='featSmallBox' id='featSmallImg2'>
</div>
The image source is placed using CSS.
This is what I have so far for the jQuery.
$("#featSmallImg2").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("#featSmallImg2").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Ideally I need to feed in the id of what is being mouseentered dynamically, but everything I've tried doesn't seem to work.
Apologies if this makes little to no sense. I'm new to both jQuery and this site.
If the jQuery code is the same for all divs containing the sprites, try changing $("#featSmallImg2") in your jQuery to $(".featSmallBox"). This way, all your divs with the class .featSmallBox will have this feature.
Check with event.target
$( "body" ).mouseenter(function( event ) {
console.log( "mouseentered id: " + event.target.id);
});
$("div[id^='featSmallImg']").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("div[id^='featSmallImg']").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Try this code. Event will be called for all div's whose id starts with 'featSmallImg'
I have a set of jQuery UI AJAX tabs that load individual .php pages when they are clicked. All of my styling, etc. conveys, because the pages that hold the tabs widget provide the already linked CSS, and scripts. When it comes to the actual pages that load when clicking on the tabs however, I can't seen to get preventDefault() to work with .on() on these newly created DOM elements.
I'm using jQuery BBQ with my tabs so I can't have "#"s being appended to the URL. This is caused when links within the tab panels are clicked.
I've been able to successfully use preventDefault() on DOM elements that are initially loaded, but not ones that are being fetched into the tabs widget via AJAX.
My function for a content toggler is...
$(function(){
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
I'd like to combine the preventDefault() from this function into it.
// prevents default link behavior on BBQ history stated tab panels with "showMoreOrLess" links
$(".showMoreOrLess").click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
I've tried several ways using .on("click", function(work)), etc. I've used .on() in a separate function and also tried to combine it in the first function above. Does anyone know what I'm doing wrong? The code works on tab content that is static, just not content loaded via AJAX. Any help would be greatly appreciated. Can't seem to figure this out. Thanks in advance.
the part $(".showMoreOrLess").click just applies to already accessable links on your page
try to use event delegation (here the clicks are captured on an every time existing element and you just pass the selector it is watching for... as a nice side effect you save listeners
$(document).on("click", ".showMoreOrLess", function(event) {
event.preventDefault();
//here you can also do all sort of things
});
rather than document use a certain id from your page $("#myContainerId") (EDIT: of course the elements you are clicking on need to be inside of the element with the id)
$("body").on('click', ".showMoreOrLess", function(event) {
event.preventDefault();
var self = $(this);
if (self.hasClass('clicked')) {
self.html("Read More" + "<span class='moreUiIcon'></span>").removeClass('clicked').prev().slideUp(500);
}else {
self.html("See Less" + "<span class='lessUiIcon'></span>").addClass('clicked').prev().slideDown(500);
}
});