please how do i change the display value of a button when i click on it.
Say "hello" was being displayed on the button, then when i click it changes to "hi" in Reactjs
export default function Change () {
return (
<div>
<button>hello</button> (this displays 'hello')
</div>
//the above changes when clicked on
<div>
<button>hi</button> (displays 'hi' when clicked on)
</div>
)
}
Related
For accessibility, you can use the keyboard to tab through interactive elements on a page and hit enter to "click" the selected element. In this case, enter fires onClick. Great.
But is there any way to separate these? We would like to disable the focus outline when a button is clicked -- once the button is selected, it turns blue, but the focus outline messes up the look we're going for.
We're using styled-components, and we've tried:
outline: 2px solid ${p => (!p.selected ? white : "transparent")};
But if a button has been selected (There are many many buttons on the page) and the user is using their keyboard to tab through the buttons, we want a selected button to be outlined when it's focused as part of this tabbing through.
So instead I've set the click handler to blur the button after it's clicked.
const PropButton = ({ onClick, ...props }) => {
const ref = useRef();
return (
<S.PropsOfferOption
{...props}
ref={ref}
onClick={() => {
onClick();
ref.current?.blur();
}}
/>
);
};
This works great. You can tab through the buttons with the keyboard and they have the outline.
The one caveat is that if you click the button by hitting enter, there is no outline. Indeed this is the point of what we wanted to do in the first place, but we were thinking about mouse clicks.
If there were an onClick that truly was only for clicking and not for enter, we could blur here and not in the onEnter version. Is this possible?
I have used the below script to open a popup window of woocommerce product.
I am looking forward to close this window automatically as I will click on "Add to Cart" Button.
Can someone help me to achieve this task, please?
<script>// <![CDATA[
function pop1(){
window.open(
'https://www.veggietiffin.co.uk/product/flextiffin-plan'
,'popwin'
,'width=640
, height=480'
);
}
// ]]></script>
<p>
Flex Tiffin Day 1
</p>
Here is a code just change the button class to the class on your site have fun
<script>
function pop1() {
//wrapping the popup inside a variable
var popup = window.open('https://www.veggietiffin.co.uk/product/flextiffin-plan', 'popwin', 'width=640, height=480');
//add event listner to add to cart button
document.getElementsByClassName('your class here').addEventListener("click", function() {
window.close(popup);
});
}
</script>
I currently have a button that when pushed, opens up a text box. I want to do it so that the focus is automatically on this text box when the button is pushed.
I have the following HTML to render the button and input, and toggle between the button/input
{{#if modeIs 'edit' }}
<input class="col-xs-9" placeholder="Enter your new task and press enter" id="insertTask" type="text"/>
{{else}}
<button id="btnNewTask" class="btn btn-success btn-lg" role="button">New Task</button>
{{/if}}
Helper function to check the mode.
Template.insertNewTask.helpers({
modeIs: function (modeToCheck) {
return Session.equals('mode', modeToCheck);
}
});
This is the code I would like to use when the button is clicked to change the mode and focus on the input.
'click #btnNewTask': function (event, template) {
Session.set('mode', 'edit');
var input = $(template.find('#insertTask'));
if(input){
input.focus();
}
},
The bit to change the 'mode' works and the button changes to a text box when I click on it.
My problem is this query $(template.find('#insertTask')); returns nothing because although I've set the mode, it hasn't re-rendered the HTML yet and the text box doesn't actually exist yet.
Is there a way that when I set the mode to 'edit', to tell Meteor to just immediately re-render the HTML before proceeding with the rest of the function? Is there a better way to structure my code so that I can reference HTML components that don't exist until after Meteor re-renders the HTML?
Use the rendered hook:
Template.insertNewTask.rendered = function() {
var $input = $("#insertTask");
if (Session.equals('mode', 'edit')) $input.focus()
}
You could set another flag somewhere to indicate when you want to focus the input (eg. if you don't always want to focus it after rendering the edit view, just after clicking the button).
I have a bootstrap page that lists items in a table. Each item has its own delete link that launches the modal.
<a href="#modalDel" data-idtodelete="<?php echo $value->id; ?>" class="deletelink">
Delete this item
</a>
...
jQuery("a.deletelink").click(function(event){
var id2del = $(this).data('idtodelete');
jQuery("#myModalLabel").html("Delete item: "+id2del); //works great
jQuery('#modalDel').modal('show');
});
I can pass data to the modal easily, but now I have to make the main button in modal to reflect the dynamic url and call to it (only) when this button is clicked
Any ideas? Thanks
PS: cannot use the hidden event for this, because modal can also be hidden with the cancel button. Also, modal should be closed after/before calling the dyn. delete url of main button
I'll hazard a guess at this. Haven't tested because I'm not really sure about the setup.
var $ = jQuery; // using as a shortcut
$('#modalDel').on('show',
function() {
// Composes delete URL with arguments
var dynUrl = composeUrl(args);
// assuming the modal button is an anchor element
$('#modalButton').attr('href', dynUrl);
// Also closes the modal box after being clicked
$('#modalButton').on('click',
function(e) {
$('#modalDel').modal('hide');
});
});
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.