Not possible to change button text via jQuery - javascript

Probaby a very simple question for you jQuery wizards, but I don't manage to change the innerHTML of a button via jQuery. I have the following Squarespace page: https://hethuisvandelingerie.squarespace.com/badmode/BM001 .
What I want to do is to change the text in the "Add to cart" button from English to Dutch. The button has the following HTML structure:
<div class="sqs-add-to-cart-button-wrapper" id="yui_3_17_2_1_1487777852612_138" style="visibility: visible;">
<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button " data-collection-id="5890a2ff2e69cf43f9dad6c5" data-item-id="589f1443c0302664f13c7656" data-original-label="Add To Cart" id="yui_3_17_2_1_1487777852612_146">
<div class="sqs-add-to-cart-button-inner">Add To Cart</div>
</div>
</div>
I use the following jQuery script to change the text in the button. I added the first part of code to see if my jQuery (of which I've injected the link to the API elsewhere) works. A "Yeah" alert is given, so this is not the issue. However, the button text does not seem to change :(.
<script>
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
$(window).load(function() {
$(".sqs-add-to-cart-button-inner").text("Voeg toe aan mandje");
});
</script>
jQuery guru's, help me out please!
Kr,
BarrieO

Use $(document).ready() in jQuery.
$(document).ready(function() {
$(".sqs-add-to-cart-button-inner").text("Voeg toe aan mandje");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sqs-add-to-cart-button-wrapper" id="yui_3_17_2_1_1487777852612_138" style="visibility: visible;">
<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button " data-collection-id="5890a2ff2e69cf43f9dad6c5" data-item-id="589f1443c0302664f13c7656" data-original-label="Add To Cart" id="yui_3_17_2_1_1487777852612_146">
<div class="sqs-add-to-cart-button-inner">Add To Cart</div>
</div>
</div>

Related

Javascript removeAttribute style not working properly

I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>

Hide div and show another divs

I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});

How do I add a fadeIn effect in this javascript code?

I got the following javascript code:
function myProfileIn() {
var showme = document.getElementById("myProfileTop").fadeIn(2000);
showme.style.display = "inline";
var showme = document.getElementById("myProfileMain").fadeIn(2000);
showme.style.display = "inline";
}
This code works on my buttons as "onclick="myProfileIn();" so they get to be visible but i also want to include a fadein effect when the button is clicked.
That is why i included ".fadeIn(1000)" but this is not working.
Here is the button which activates the function:
<div id="profileButtonArea"><div id="profileButtonBox"><img onclick="myProfileIn();" id="profileButtonImg" src="<?php echo $userPath; ?>" /></div></div>
And here are the two elements(divs) which are blended in:
<div id="myProfileTop" style="display:none;"></div>
<div id="myProfileMain" style="display:none;"></div>
The issue you have is that fadeIn() is a jQuery method. It's not available on a standard HTMLElement object. Also note that if you want to toggle the element's visibility on successive clicks use fadeToggle().
You should also use unobtrusive Javascript to attach your event handlers as on* event attributes are now considered outdated. As you've tagged the question with jQuery. Here's a working example for all of the above:
$(function() {
$('#profileButtonBox img').click(function() {
$("#myProfileTop, #myProfileMain").stop(true).fadeToggle(2000);
});
});
#myProfileTop,
#myProfileMain {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profileButtonArea">
<div id="profileButtonBox">
<img id="profileButtonImg" src="yourimage.jpg" title="click me" />
</div>
</div>
<div id="myProfileTop">myProfileTop</div>
<div id="myProfileMain">myPropfileMain</div>

Javascript not firing in Wordpress 4.6.1

The code below is working in a jfiddle, but once on my WordPress site it's not firing. I am updated to 4.6.1. I can't seem to find any errors in the console, either. Any ideas?
CSS:
<style>.bluebg { background: cyan; }</style>
HTML:
<nf-field>
<div class="nf-field-container textbox-container label-left ">
<div class="nf-before-field"><nf-section></nf-section></nf-section></div>
<div class="nf-field"><div id="nf-field-8-wrap" class="field-wrap textbox-wrap nf-pass" data-field-id="8">
<div class="nf-field-label">
<label for="nf-field-8" class="">Full Name <span class="ninja-forms-req-symbol">*</span></label></div>
<div class="nf-field-element">
<input id="nf-field-8" name="nf-field-8" class="ninja-forms-field nf-element" value="" type="text">
</div>
</div>
</div>
<div class="nf-after-field"><nf-section><div class="nf-input-limit"></div><div class="nf-error-wrap nf-error"></div></nf-section>
</div>
</div>
</nf-field>
JAVASCRIPT:
<script>
$('input.nf-element').bind('focus blur', function () {
$(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
});
</script>
UPDATE
It looks like the problem is in the plugin that is generating the HTML, not the javascript I'm using. If I paste the same HTML in manually, that input field does change the parent class, but none of the fields that the form plugin generates (NinjaForms) will change.
I'm not sure if that's out of scope for assistance here, but if anyone has any ideas why that would be, I'd be appreciative!
Simply replace "$" with "jQuery".
To account for wordpress likely using jQuery.noConflict() try changing to:
(function($) {
$(function() {
$('input.nf-element').on('focus blur', function() {
$(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
});
});
})(jQuery);

jquery - replace text after modal has fired

I am trying to replace text via jquery in a modal. My ".replace" piece works great in my console, when the modal is already visible and open, and the text "Change me" is displayed on the screen. But, I can't get it to work without the text already being visible. I believe we're using 'reveal'. Any ideas?
The modal fires via a button click, if that helps. A Timeout isn't ideal.
$("*").each(function () {
if ($(this).children().length == 0) {
$(this).text($(this).text().replace("Change me", "I have been changed"));
}
});
}
<div id="myModal" class="reveal-modal" style="visibility: visible">
<div class="my-modal-content">
<div class="myText">Change me</div>
</div>
</div>
Check out the docs for foundations inclusion of the reveal.js modal plugin here
From that page
Previous versions of the reveal plugin emitted un-namespaced open, opened, close and closed events, however, these have been replaced by the namespaced open.fndtn.reveal, opened.fndtn.reveal, close.fndtn.reveal and closed.fndtn.reveal events. The un-namespaced events will be fully deprecated when Foundation 5.4 is released.
So depending on which version of reveal.js you're using, it looks like there are events you can hook into.
From that page, here's the snippet for hooking into the opened event:
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var newText = $('.myText').text().replace("Change me", "I have been changed");
$('.myText').text(newText );
});
Edited to add--for older versions, i believe this is the way to hook into the event:
$('#myModal').bind('reveal:open', function () {
var newText = $('.myText').text().replace("Change me", "I have been changed");
$('.myText').text(newText );
});
"Change me" would be text node children of .myText ? , or false at if ($(this).children().length == 0) ? Additionally , $("*") would select html and body elements , changing both html and body at call to .text() ?
Try
$("body *").each(function () {
if ($(this).children(":contains('Change me')")) {
$(this).text($(this).text().replace("Change me", "I have been changed"));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myModal" class="reveal-modal" style="visibility: visible">
<div class="my-modal-content">
<div class="myText">Change me</div>
<div class="myText">Do not change me</div>
</div>
</div>

Categories

Resources