Trying to find a good way to disable this save/submit button after it has been clicked once. Here is the code i currently have :
<button data-bind="enable: !$root.isSaving(), click: $root.addNewCard.bind($data, $root)" class="primary button" role="button" data-size="sm" onclick="this.disabled = true;" UseSubmitBehavior="false">Save</button>
The previous method i had above worked out well!
Related
when I type 'ala' it displays 2 states in suggestions 'alabama' and 'alaska'. Now what I need is as soon as I click on 'alaska'/'alabama' any item in list it should call my method
methodAbc(){
//Some complex logic
alert("Method called.");
}
Sample code link click here
I tried blur, focus, etc events on text box they didnt work way I need. Click do not triggers on item selection it triggers when I click inside text box.
You just need to use the selectItem event from ng-bootstrap's ngbTypeAhead API
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model"
[ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter"
(selectItem)="methodABC($event)" />
See updated sample code
Scenario :
I have a Simple Hyperlink on Sidebar of a Dashboard.
<a href="/client/workspace">
<i class="fa fa-laptop"></i> <span>Workspace</span>
</a>
Problem:
The hyperlink must be click-enabled only when CONDITION is true, else it must be disabled.
Any suggestions? Thanks in Advance.
NOTE : Using Meteor + blaze only
If you insist on having an for the link, remove the href attribute and make it act like a button like this:
<a class="myLink" role="button" link="/client/workspace">
<i class="fa fa-laptop"></i> <span>Workspace</span>
</a>
Define its behavior like this:
Template.yourTemplate.events({
'.myLink': function (event) {
event.preventDefault();
if (CONDITION) {
// your code to redirect to event.target.link
}
}
})
Ideally a <button> can really be disabled (simply set the disabled attribute value to the result of your condition).
An <a> link can always be clicked, so depending on what UI you exactly you want, we could imagine:
Hiding the link behind a transparent (possibly with some opacity) <div>, so that it can no longer be clicked. The positioning of the <div> must be done carefully, while its presence / absence can be easily set (e.g. using a class that has display: none style).
Listening to the "click" event on the link and preventing the default behaviour (i.e. event.preventDefault(), where event is the first argument of the listener) depending on the result of your condition.
I want to create some link buttons that change each others css styling upon being clicked. I found some tutorials on how to do this, which halfway works as shown in this fiddle;
http://jsfiddle.net/6m3rb/23/
<a id="btn1" class="btn" href="#" onclick="btn2.style.background='#007eff'; this.style.background='#9a3e01';">Button 1</a>
<br /><br />
<a id="btn2" class="btn" href="#" onclick="btn1.style.background='#007eff'; this.style.background='#9a3e01';">Button 2</a>
The only problem is that when the link is clicked and the page is loaded, the css-styling of the link resets back to normal, but I want it to keep the styling until the other link is pressed.
As fare as I can imagine, I need to use some javascript to handle this effect, however, javascript isn't the area where I am strongest when it comes to the internet.
Kind regards
Neros
What you will want to try is using jQuery, it is a already predifned library of actions. For this situation you will want something in the .css() section here. http://api.jquery.com/css/
Your code would look something like this
$('#btn1').on('click', function(e){
e.preventDefault(); // In this case I am preventing the link from firing you do not need this if you want to trigger the link, also remove e from your function parameters
$('#btn2').css('background-color': 'red');
});
You can use JavaScript with JQuery (which is easier to use than pure JavaScript). Then you can call a function with the onclick event.
HTML:
<a id="btn1" class="btn" href="#" onclick="changebtn2()">change color of the second button </a>
<a id="btn2" class="btn2" href="#">will change color if you click on the first button </a>
and make sure you also declare the JQuery library in the HTML.
JavaScript:
function changebtn2(){
$("#btn2").removeClass("btn2"); //remove the old class
$("#btn2").addClass("btn2change"); //add the new class with a different color
}
CSS:
.btn2{
color: red;
}
.btn2change{
color: green;
}
Just replace the href="#" with void
Button 1
this void function will stop the browser from passing any query as a request.
I've solved this problem myself.. I already had the same function on a unordered list, so I simply added the buttons within this list.
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).
How can the cursor be focus on a specific input box on page load?
The button is "Add new appointment" the script is:
<input type="button" onclick="open_win()" value="add new appointment"/>
WebElement ek = driver.findElement(By.xpath("//input[#value='add new appointment']"));
jse.executeScript("arguments[0].click();", ek);
This opens a pop up window. Now I need to focus on the window.
Ajax is used to retrieve information from this pop up.
I tried every aspect to focus on the new pop up. The input txt fields are hidden, The code that I've tried is:
jse.executeScript("window.focus();");
driver.switchTo().defaultContent();
driver.switchTo().activeElement().findElement(By.xpath("//*[#id='barge:bargeId:txtInput']"));
driver.switchTo().alert();
I thought to focus on the text field with the following code:
jse.executeScript("document.getElementById('barge:bargeId:txtInput')[0].setAttribute('type', 'text');");
driver.findElement(By.xpath("//*[#id='barge:bargeId:txtInput']")).sendKeys("suxs");
This also haven't worked.
Even jse.executeScript("document.title") has not worked.
the code for text field
<span id="barge:bargeId:input">
<input id="barge:bargeId:txtInput" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all inputbox doubleInputbox ui-state-hover" type="text" tabindex="" maxlength="17" accesskey="" name="barge:bargeId:txtInput" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"/>
</span>
to click on the button you can simple do this: driver.findElement(By.xpath("//input[#value='add new appointment']")).click();
By saying "This opens a pop up window" do you mean an actual new window, new tab or dialog like this or like this?
I think it opens up the dialog, and in this case usually it's just another element on the page. And in this case this should work:
driver.findElement(By.xpath("//*[#id='barge:bargeId:txtInput']")).sendKeys("suxs");
UPDATE:
Since it's a new window, there ways to switch to the new window described here:
driver.switchTo().window("windowName");
Also, it would be helpful to check the code of open_win() javascript function.