I have buttons with labels that change depending on the topic that gets loaded. When clicked, the button loads new data to a chart. This works well on span elements but it doesn't work when I wrap the span in a button.
Example:
<button type = "button" class = "btn btn-default"><span id="cat1"></span></button>
Labels are set with :
click: function (e) {
document.getElementById('cat1').innerHTML = 'something'
};
Data is bound on click with:
$("#cat1").click(function() {
// do stuff
});
something gets lost when I add the button for the span. I have tried to replace span with an anchor but it doesn't work either.
Did you try?
<button type="button" class="btn btn-default" id="cat1"></button>
How you are using jQuery, you can try a more simple form.
Try it:
$('#cat1').click(function () {
$(this).html('something');
});
Or if the set value is out of the event, you cant try it:
$('#cat1').html('something');
You can update the text in span when button is clicked using following code
$('#btnClick #cat1').text("something");
In the above I gave a id for button as btnClick.
You can achieve the functionality without using span as well. For that you need to specify button as
<button id="btnClick">Button</button>
To change text of button, the code which need to be in click event will be
$('#btnClick').text("change")
When a span is nested inside a button, every time you click on it, the button click is fired. but the span click is not fired
based on your html, it looks like you are using bootstrap, you can do something like the following
<div class="btn btn-default">
<span id="cat1"></span>
</div>
I have a working example in the fiddle.
http://jsfiddle.net/pparas/dv3amy7k/1/
Related
There are two buttons on a webpage called "Place Order". The first button html code looks like this :
<button class="mod-ncss-btn ncss-btn-accent fs14-sm ncss-brand pt3-sm prl5-sm pb3-sm pt2-lg pb2-lg d-sm-b d-md-ib u-uppercase u-rounded mod-button-width">Place Order</button>
The second button html code looks like this:
<button class="d-lg-ib d-sm-h fs14-sm ncss-brand ncss-btn-accent pb2-lg pb3-sm prl5-sm pt2-lg pt3-sm u-uppercase">Place Order</button>
I am using Playwright on Javascript to try to click on the second button but can not get it to succeed so far. Both the buttons have dynamically changing classes so I am using this line to find the button and click on it:
await page.click('//button[contains(text(),"Place Order")]);
The problem I am having is that since both of these buttons are present on the webpage at the same time, I am clicking the first "Place Order" button. I am trying to click on the second "Place Order" button but have not succeeded since my code clicks on the first. Can someone show me how I can click on the second "Place Order" button instead of clicking the first? I am still new to Playwright and constantly learning everyday. Thanks in advance
The main idea here is that you can use multiple selectors to select elements on your page. I decided to assign ids to the buttons for the most uniqueness, because the classes you provided were too many and most of them aren't unique
const buttonOne = document.querySelector('[data-button=one]');
const buttonTwo = document.querySelector('[data-button=two]');
buttonOne.addEventListener('click', e => alert(e.target.innerText));
buttonTwo.addEventListener('click', e => alert(e.target.innerText));
buttonOne.click();
buttonTwo.click();
<button data-button="one">Button One</button>
<button data-button="two">Button Two</button>
I am trying to use JS to change an add to cart button to be disabled if our inventory level (displayed on the front end in a <span>) is "out of stock". This JS is already set up on our site for changing button behaviour for variants (code at the bottom of the post) and so if I can integrate an additional conditional rule using our inventory <span> that would be amazing.
Here's the HTML for when the out of stock message appears:
<span class="LocationNoStock">Currently Sold Out</span>
I honestly have almost zero experience with JS so all I know is that I can look for elements by class name:
(document.getElementsByClassName("LocationNoStock")
Basically I want to add logic that dictates:
if class 'LocationNoStock' exists then disable 'add-to-cart' button
Any help that can be offered would be much appreciated! If it helps, our current JS for modifying the add-to-cart button is as follows - if an additional rule to search for the <span> could be inserted and mimic the behaviour that would be amazing!
updateCartButton: function(evt) {
var variant = evt.variant;
if (variant) {
if (variant.available) {
// Available, enable the submit button and change text
$(selectors.addToCart, this.$container).removeClass(classes.disabled).prop('disabled', false);
$(selectors.addToCartText, this.$container).html(theme.strings.addToCart);
} else {
// Sold out, disable the submit button and change text
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.soldOut);
}
} else {
// The variant doesn't exist, disable submit button
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.unavailable);
}
},
Your using jquery $(...) so you could do the following, look for .LocationNoStock if it's found then disable the .add-to-cart button.
if ($('.LocationNoStock').length) $('.add-to-cart').attr('disabled', 'disabled')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="LocationNoStock">Currently Sold Out</span>
<button type="button" class="add-to-cart">Add to Cart</button>
To disable buttonin javascript on load, can be done by setting attribute of the element
Example :
setAttribute("style","color:red")
In your case you are fetching element using class "add-to-cart" which gives htmlcollection so using index you can access the button element and then using setAttribute function of javascript, can set particular properties.
Try this:
$(document).ready(function(){
if (document.getElementsByClassName("LocationNoStock") != null){
var element = document.getElementsByClassName("add-to-cart");
element[0].setAttribute("disabled", "");
}
});
How do I open this data drawer when I assigned it to another button on click event? I've tried to change the attribute but it's not working. Check the jsfiddle please.
$("#new_button").attr("aria-expanded","true");
JSFiddle : https://jsfiddle.net/mhasan09/9mrbq7g0/2/
You'll need to add the following attributes to your new button, like so:
<button data-drawer-trigger aria-controls="drawer-name" >
Another Button
</button>
If you want to set in the JavaScript you can just use:
let button = document.getElementById("new_button");
button.setAttribute("data-drawer-trigger", true);
button.setAttribute("aria-controls", "drawer-name");
and give an id to the button, like so:
<button id="new_button" >
Another Button
</button>
I'm making a little app in meteor to store car inspection registries, it uses an "autoform" form to insert the values that i need then i present those values somewhere else, one of my templates presents all items stored in the collection and i managed to make a "details" button that shows a modal that should have more details.
App screenshot
Modal Screenshot
Currently i have a hidden field with the id from the item in the collection, i send that id with a session and the template with the modal gets that session.
<form>
<button type="submit" class="btn btn-md btn-warning" ><i class="fa fa-list"></i> Detalles</button> //submit button
<input type="hidden" name="idp" value={{_id}} size="1"> //Hidden field with item id
</form>
It's working just fine, the problem is that i need the other buttons in the panel to act differently, yet all of them need the id from the item in the collection. The only way i know how to catch the contents from an element in a template is through event.target."elementName".value and this only works with the submit event i think, i tried document.getElementById with the click event but that only showed the first item in the collection, even if i clicked on the "details" button of another item.
The event code:
Template.Inspeccion.events({
'submit form'(events){
event.preventDefault();
var id= event.target.idp.value;
Session.set('id-carro', id);
Modal.show('Detalles');
},
The modal code:
Template.Detalles.helpers({
carro: ()=> {
var id= Session.get('id-carro');
return Inspeccion.findOne({_id:id});
},
});
Is there anyway to listen to different submit buttons or is there any other way to extract the contents from the template and use a different event that will work per button?
I'm pretty sure i'm missing something obvious but i can't find a solution online.
Thanks in advance and Happy Holidays.
You can define click events on buttons and refer to the current data context with this in your javascript. Ex:
html:
<button id="foo">click me</button>
js:
Template.Inspeccion.events({
'click #foo'(){
console.log(this._id); // "this" will be the data context that was clicked on
}
});
I am attempting to target the previous input field of a form element that is in an accordion. I have tried several ways to target the .image-url field but I am having trouble with targeting just this one field within the accordion. This may be a simple task but I cannot get this thing to work. Any help would be greatly appreciated.
HTML
<form>
<input class="image-url" type="text" />
<input class="button" type="button" />
</form>
JS
$('form .button').click(function() {
// do stuff
uploader.on('select', function() {
$(this).prev().val('text to put');
}
}
This is what I have right now and I cannot get it to work.
this within the uploader.on callback probably isn't the button. Remember the button and then use it in the callback:
$('form .button').click(function() {
var btn = $(this);
// do stuff
uploader.on('select', function() {
btn.prev().val('text to put');
}
});
Side note: Whenever I see an event handler hooked up from within another event handler, it raises a flag for me. If the button is clicked twice, you'll end up with two handlers on uploader for the select event. You might want to check whether that's really what you want...
Side note 2: CSS selectors can do more than just ids and classes, you may not need that class="button" on the button. You can select it via form input[type=button] (in your CSS for styling, and in a jQuery $() call and similar to locate it).