I have two buttons and one input. The input takes the value of the clicked button. Both buttons have the same class, have one click (Vue) for add active class, and second click. On click take the button's value and append it in the input.
The problem with which I am stuck is that the function for taking the value works after the second triggered click.
I've tried with dblclick and to delete the click for active class - but nothing changed. Can someone give a hand with this? Thank you.
Vue project (js function imported in methods)
<div class="col-md-12 buttons-wrapper" id="direction">
<button id="buy-button" value="1" name="Direction1" class="button btn buy" #click="selected = 1" :class="{active:selected == 1}" v-on:click.capture="buttonDirectionValue">Buy</button>
<button id="sell-button" value="2" name="Direction2" class="button btn sell" #click="selected = 2" :class="{active:selected == 2}" v-on:click.capture="buttonDirectionValue">Sell</button>
<input id="inputDirection" name="Direction" type="text" placeholder="" class="form-control input-md" style="display: block" readonly></input>
</div>
buttonDirectionValue() {
event.preventDefault();
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
buttonDirectionValue() {
event.preventDefault();
$("#direction button").trigger("click");
});
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
Above should be your code. Correction is to place the .click outside of buttonDirectionValue() function.
If you place the .click inside of buttonDirectionValue() function, the .click will only be registered when the button is clicked for the first time and triggered on the second click.
While placing it outside will bind the .click on page load and trigger the click on buttonDirectionValue() function call.
Hope this helps
The problem obviously is that you bind the click event after the button click
you can bind the click event right after page loads like that:
$(document).ready(function(){
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
}
});
//edit1
you can also remove the v-on:click.capture="buttonDirectionValue"
and use this code to bind click events for both buttons
$(document).ready(function(){
$('button.buy, button.sell').click(function() {
$("#inputDirection").val($(this).val());
}
});
Related
My goal is to replace a button with another button, but I am running into some issues. I am able to trigger the first button click and I am able to cause an alert with the second button click, but for some reason when I try to trigger the first button click in the click event handler of the second button, it doesn't work. What am I doing wrong? For some context, I'm doing this in Powerapps Portals by adding a Content Snippet.
$(window).load(function() {
//Code to Add Custom 'Register' Button (and Hide the original one- currently commented out)
$('#SubmitButton').after('<input type="submit" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
//$('#SubmitButton').hide(); *THIS WORKS*
//$("#SubmitButton").click(); *THIS ALSO WORKS*
$("#mySubmitButton").click(function()
{
//window.alert('yes!'); *THIS WORKS*
$("#SubmitButton").click(); // *THIS DOES NOT WORK*
});
});
You need to prevent the default action to stop the form from submitting when the button is clicked.
$("#mySubmitButton").click(function(e){
e.preventDefault();
$("#SubmitButton").click();
});
Alternatively, you can set the button's type to "button" so clicking it does not submit the form by default.
$('#SubmitButton').after('<input type="button" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
I am attempting to bind a click event after previously unbinding it and I cannot get it to work.
Here is my HTML:
<div class="input-group date">
<input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
<span class="input-group-addon" id="dp1Icon" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></span>
</div>
The input is actually a bootstrap datepicker component. The span contains a bootstrap glyph that triggers the datepicker to open. I have a radio button group that toggles disabling these like this:
$(".date-wrap input[type='radio']").on("click", function(e){
if ($(e.target).val() == "permanent"){
$("#dp1, #dp1Icon").prop("disabled", true);
$("#dp1Icon").unbind("click"); // Disabled attribute only works on form controls, not spans. So we have to unbind the event
$("#dp1").removeAttr("readonly", "readonly");
}else{
$("#dp1, #dp1Icon, #e3").prop("disabled", false);
$("#dp1Icon").bind("click");
$("#dp1").removeAttr("readonly");
}
});
So, if the value of the radio button they click is "permanent", everything becomes disabled; that works great. Otherwise, I attempt to turn them back on.
The only thing I can think of is that when I try to bind the click event to the glyphicon again, I must define the actual handler that opens the datepicker; like this:
$("#dp1Icon").bind("click", $("#dp1").datepicker('show'));
But all that does is open the datepicker as soon as I click the other radio button. I want it to open only when they click it.
What important piece am I missing here? Does anyone have an idea?
Thanks for any tips.
bind("click") does not magically re-add the event. You need to add it back the event.
$("#dp1Icon").on("click", function(){ $("#dp1").datepicker('show'); } );
You might be better off just setting a flag inside that function and not removing the event.
I have a situation where I have to replace all unauthorized controls in My UI from hidden state to disabled. Add a tooltip with un authorized text. Click the control to see unauthorized text.
I am able to update code but blocked at one point where I have to stop firing event on the control.
At the same time I have to show an alert on click of the event. How can I do this?
My trails are here in fiddle
Problem:
I have [clickdisabled = disable] click function which need to be called if control is disabled.
But at the same time on the control I have onclick="SearchDetails(); called which is throwing an error.
<input id="btnSearch" type="button" name="btnSearch" value="Search" onclick="SearchDetails();return false;" title="search" clickDisabled=disable />
//Add title to all disabled items in project
$('[clickdisabled=disable]').attr("title", "You are not authorized to perform this action.");
// Show unauthorized error on click of disabled control
$('[clickdisabled = disable]').click(function () {
alert($(this).attr("title"));
});
If you are expecting situations when the functions are not available, you could check if they exist before calling them:
<input id="btnSearch" type="button" name="btnSearch" value="Search"
onclick="if (typeof(SearchDetails) === typeof(Function)) SearchDetails();"
title="search" clickDisabled=disable />
Fiddle
What you need to do is keep track of both your normal onclick event handler and disabled onclick event handler. When you disable your button, remove the normal onclick event handler and add your disabled onclick event handler. When you re-enable the button, remove the disabled onclick event handler, and add the normal event handler back. You can do this with the jQuery .on() and .off() events (see the example below).
function onNormalClick(e){
alert('This is the default test button functionality.');
}
function onDisabledClick(e){
alert('This button is disabled.');
e.preventDefault();
e.stopPropagation();
}
function disableButtons(selector){
$(selector).css('color', '#888');
$(selector).off('click', onNormalClick);
$(selector).on('click', onDisabledClick);
}
function enableButtons(selector){
$(selector).css('color', '#000');
$(selector).off('click', onDisabledClick);
$(selector).on('click', onNormalClick);
}
$(document).ready(function(){
$('.test').on('click', onNormalClick);
$('#disabler').click(function(){
disableButtons('.test');
});
$('#enabler').click(function(){
enableButtons('.test');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='test'>Test</button>
<hr/>
<button id=disabler>Disable</button>
<button id=enabler>Enable</button>
You could prevent the default handling like this:
var button = $('#your_button_id');
button.click(function(e){
e.preventDefault();
alert("Your alert message for the user");
});
I am creating an application in which there is a button in a webpage.class = "button"
after clicking the button another button is created of same class.Now I want the same function is applied on the newly created button on click. But its not happening.
$('.button').click(function(){
var temp = '<input type="button" class="button" />'
$('#form').append(temp);
})
This function is working for the first button which is created on page load.But this is not working on the button which is created after clicking of the previous button.
How to fix this issue?
Please help
The problem is because events are attached on load of the DOM. Therefore any elements added after that point do not have the event. The fix is to use a delegated event handler, like this:
$('#form').on('click', '.button', function(){
var temp = '<input type="button" class="button" />'
$('#form').append(temp);
})
I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})