I like to have this button.
When you click on it the button text should change to "Updating...".
Then two seconds later it should change to "Updated!" and the button shouldn't be clickable after that.
Current Html Button script:
<a class="btn-primary-md" id="buyButton" onclick="text = 'Updated!'">Update</a>
So to sum up, you have a button/link and onclick you'll want:
The text of that element to change.
The element to be disabled.
After two seconds the value to change again to another
value.
You can do this by extracting the JavaScript from the HTML for readability and maintainability like this:
var button = document.getElementById("btn");
button.addEventListener("click", function () {
button.disabled = true;
button.innerHTML = "Waiting...";
setTimeout(function () {
button.innerHTML = "Thank you!";
button.disabled = false;
}, 2000);
});
<button id="btn" type="button">
Click me
</button>
<input onclick="change()" type="button" value="Updated" id="buyButton" />
Javascript:
function changeBtnTxt()
{
document.getElementById("buyButton").value="Update";
}
Maybe...
<input onclick="changeBtnTxt()" type="button" value="Update" id="buyButton" />
function changeBtnTxt()
{
document.getElementById("buyButton").value="Updated";
}
This is the correct one! Sorry!
Related
I have been doing some searching and most of what I find relates to the html <input type="submit"> buttons or connecting to a button by the ID tag. What I am trying to do is attach to every html5 <button> based off the NAME tag.
I have tried the following but when the button is clicked it submits and I don't get any alerts before it does.
$("button[name=Submit]").click(function ()
{
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;
});
Also tried
$("input[name=Submit]").click(function ()
{
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;
});
Here is the HTML for one of the submit buttons:
<button formnovalidate="formnovalidate" type="submit" name="Submit" value="Add Time">Add Time</button>
So how am I supposed to attach to all my html5 buttons?
Note: The JS in in an external file with about a dozen other functions which all work so I do know the JS file is being loaded properly and working. And all the code is in a $(document).ready(function ()
You need to prevent the default behaviour:
$("button[name=Submit]").click(function(event) {
event.preventDefault();
// other code
});
You must put the id in the button like below
<button formnovalidate="formnovalidate" id="id1" type="submit" name="Submit" value="Add Time">Add Time</button>
And also you jquery code sometime like this (call via button id)
$( "#id1" ).click(function() {
var error;
alert("test1");
if ($("#SelectedProjectCodes").val() == "") { alert("test"); }
return false;});
Hope it helps you...
i need a Back Button that disappears, looked at ngdisabled from AngularJS but quite the beginner.
<button onClick="history.go(-1);" >Go back</button>
Already got the back button, and i want to disable it after its been clicked?
Use
<button onClick="history.go(-1);this.disabled=true;" >Go back</button>
Assuming your button is contained by an Angular-Controller, a more Angular-approach to this problem would be something like this:
<div ng-controller="controller as ctrl">
<button ng-click="ctrl.GoBackInHistory()"
ng-disabled="ctrl.isBackButtonDisabled">
Go back
</button>
</div>
<script>
angular.module('app', [])
.controller('controller', controller);
controller.$inject = ['$window'];
function controller($window) {
var vm = this;
vm.isBackButtonDisabled = false;
vm.GoBackInHistory = GoBackInHistory;
function GoBackInHistory() {
$window.history.back(); //or $window.history.go(-1);
vm.isBackButtonDisabled = true;
}
}
</script>
Please try this.
<button ng-click="goBack" ng-disabled="backDisabled">Go back</button>
click function:
$scope.goBack = function(){
$window.history.back();
$scope.backDisabled = true; // use $rootScope to access everywhere of app.
}
I have two buttons Start and Stop,when I click the Start button I want the Stop button to show and the Start button to be hidden vice versa when I click the Stop button I want the Start button to be shown and the Stop button to be hidden.Only one button must be shown at any one time.Here is what I tried but it doesn't seem to work.Where am I going wrong?
<span ng-hide="Model.StartEvent == true">
<button ng-click="Model.StartEvent()" id="btnEventStart">Start</button>
</span>
<span ng-show="Model.StopEvent == false">
<button ng-click="Model.StopEvent()" id="btnStopEvent" class="tooltip">Stop</button>
</span>
You could do even less
<button ng-click="goEvent();" ng-hide="going">Start</button>
<button ng-click="goEvent();" ng-show="going">Stop</button>
...
$scope.going = false;
$scope.goEvent = function(){
$scope.going = !$scope.going;
if($scope.going){
$scope.go();
}else{
$scope.stop();
}
}
you should use same variable for both...
<button ng-click="Model.toggleShow(); Model.StartEvent()" ng-show="Model.showStartEvent">Start</button>
<button ng-click="Model.toggleShow(); Model.StopEvent()" ng-show="!Model.showStartEvent">Stop</button>
Modal.toggleShow = function(){
Model.showStartEvent = !Model.showStartEvent;
}
also you can call toggle right inside the startevent/stopevent rather than having two function calls on ng-click
Html:
<div ng-controller="YourController">
<span ng-hide="EventRunning"><button ng-click="StartEvent($event)"id="btnEventStart">Start</button></span>
<span ng-show="EventRunning"><button ng-click="StopEvent($event)" id="btnStopEvent">Stop</button></span>
</div>
Use single semaphore for hide and show EventRunning
Controller:
{ ...
$scope.EventRunning = false;
$scope.StartEvent = function (event) {
event.preventDefault();
$scope.EventRunning = true;
// your code
}
$scope.StopEvent = function (event) {
event.preventDefault();
$scope.EventRunning = false;
// your code
}
... }
I want to make ckeditor read-only on a page, and only read-only. How do I do this? I have tried to reform the below code to do this, but I can't seem to figure it out.
I made the editor to have a toggle read-only mode, which loads as not read-only. (It's not but I want, but this is the closest I have gotten) This is the code I have for that:
window.onload = function () {
CKEDITOR.replace('textBox', );
}
var editor;
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on('instanceReady', function (ev) {
editor = ev.editor;
// Show this "on" button.
document.getElementById('readOnlyOn').style.display = '';
// Event fired when the readOnly property changes.
editor.on('readOnly', function () {
document.getElementById('readOnlyOn').style.display = this.readOnly ? 'none' : '';
document.getElementById('readOnlyOff').style.display = this.readOnly ? '' : 'none';
});
});
function toggleReadOnly(isReadOnly) {
// Change the read-only state of the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
editor.setReadOnly(isReadOnly);
}
And the html:
<p>
<textarea class="ckeditor" id="editor1" name="editor1" style="height:400px;width:900px">${alert.html}</textarea>
</p>
<p>
<input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only"
style="display:none" />
<input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button"
value="Make it editable again" style="display:none" />
</p>
Define disabled attribute for <textarea> and the editor will start read-only:
<textarea id="editor" disabled>Cow says moo!</textarea>
See the sample fiddle.
I have a Twitter Bootstrap modal that I am displaying where I want to include a "Copy to Clipboard" button. I am attempting to use the ZeroClipboard component https://github.com/jonrohan/ZeroClipboard
Below is my sample code. Button "Copy1" is on a page directly and that works. Button "Copy2" is on the modal and that is not working. Internet Explorer appears to "lock up" when "Copy2" is pressed.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.min.css" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/ZeroClipboard.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="span6">
<!-- Textbox and copy button pair #1 (not on modal) -->
<input type="text" id="Input1" />
<button class="btn" type="button" id="Copy1" data-clipboard-target="Input1">Copy Input #1</button>
</div>
<div class="span6">
<a class="btn" type="button" href="#Modal1" data-toggle="modal">Show Modal Dialog</a>
</div>
</div>
<div class="modal hide fade" role="dialog" id="Modal1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Copy to Clipboard Modal</h3>
</div>
<div class="modal-body">
<p>
<!-- Textbox and copy button pair #2 (on modal) -->
<input type="text" id="Input2" />
<button class="btn" type="button" id="Copy2" data-clipboard-target="Input2">Copy Input #2</button>
</p>
</div>
<div class="modal-footer">
<p>
<button class="btn" type="button" data-dismiss="modal">Close</button>
</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
ZeroClipboard.setDefaults({
moviePath: '/Scripts/ZeroClipboard.swf'
});
var clip1 = new ZeroClipboard($("#Copy1"));
var clip2 = new ZeroClipboard($("#Copy2"));
});
</script>
</body>
</html>
Can anyone offer some guidance on what is going wrong? I understand that Bootstrap takes the modal out of the DOM tree until displayed, but I'm not sure how to accommodate for that.
Edit: Corrected id of 2nd input to be "Input2" to match the button's target.
In addition, I have attempted the following javascript:
//var clip2 = new ZeroClipboard($("#Copy2"));
$("#Modal1").on('shown', function () {
var clip2 = new ZeroClipboard($("#Copy2"));
});
Also, it would appear that the issue is browser-specific.
The original code and my modified code locks up Internet Explorer 10. But Google Chrome is OK under both code attempts.
Your 2nd copy button is targeting a nonexistent ID:
<button class="btn" type="button" id="Copy2" data-clipboard-target="Input2">Copy Input #2</button>
Your markup is incorrect:
<input type="text" id="Text2" />
Should be:
<input type="text" id="Input2" />
When we use "ZeroClipboard" with "Bootstrap modal", it creates conflict in "IE".
We need to make changes in bootstrap's "js" file.
There is method defined for, “ Modal.prototype.enforceFocus “ element in “Bootstrap.js” .
Here, in “If” condition, we need to add following condition,
!$(e.target).closest('[id ^= "ZeroClipboardMovie_"]').length)
Resultant code will look as follows,
if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('[id ^= "ZeroClipboardMovie_"]').length) {
this.$element.focus()
}
where, [id ^= "ZeroClipboardMovie_"] is ZeroClipboard container element.
In above code, it is taking container of recent "ZeroClipboard". You can change it to, appropriate "zeroclipboard-container" as per the requirement.
You can also checkout this blog post for more detail- http://wisdmlabs.com/blog/ie-issue-zeroclipboard-bootstrap-modal/
if (!checkIsBelowIE8()) {
if (/MSIE|Trident/.test(window.navigator.userAgent)) {
(function ($) {
var zcClass = '.' + ZeroClipboard.config('containerClass');
var proto = $.fn.modal.Constructor.prototype;
proto.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') /* Guard against infinite focus loop */
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target &&
!this.$element.has(e.target).length &&
/* Adding this final condition check is the only real change */
!$(e.target).closest(zcClass).length
) {
this.$element.focus();
}
}, this));
};
})(window.jQuery);
}
var client = new ZeroClipboard($(".clipboard"));
client.on("copy", function (e) {
var clipboard = e.clipboardData;
clipboard.setData("text/plain", $.trim($(e.target).parent().prev().find("input").val()));
showMsg("success", "copy success");
});
}
function checkIsBelowIE8() {
try {
var b_name = navigator.appName;
var b_version = navigator.appVersion;
var version = b_version.split(";");
var trim_version = version[1].replace(/[ ]/g, "");
if (b_name == "Microsoft Internet Explorer") {
/*if IE6 or IE7*/
if (trim_version == "MSIE8.0" || trim_version == "MSIE7.0" || trim_version == "MSIE6.0") {
return true;
} else {
return false;
}
} else {
return false;
}
} catch (e) {
return false;
}
}
hope to help you