HTML loading state only works with one button - javascript

I work with Bootstrap and i want to add several buttons with the loading state-"effect". But the problem is that the loading state only work with one button. Can anyone explain me why and maybe show me an working example?
HTML:
<td>
<input type="button" id="fat-btn" data-loading-text="Einschalten..." class="btn btn-success" onclick="l1_on();" value= "einschalten" />
<input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="btn btn-danger" onclick="l1_off();" value= "ausschalten" />
</td>
JS:
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})

IDs are supposed to only return one element.
Try with class names, it's more correct, adding another class for example 'loadable' will do the trick:
<input type="button" id="fat-btn" data-loading-text="Einschalten..." class="loadable btn btn-success" onclick="l1_on();" value= "einschalten" />
<input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="loadable btn btn-danger" onclick="l1_off();" value= "ausschalten" />
$('.btn.loadable')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
});
I would encourage to don't repeat ID attributes on documents.

You can do this using the btn class like:
$('.btn').click(function () {
var btn = $(this);
btn.button('loading');
setTimeout(function () {
btn.button('reset')
}, 3000);
});

Related

How do you make a button disabled at first when the page is rendered and then it will be enabled when 2 button is pressed

I want to make the third button graph disabled at first and after the first 2 buttons (button1 and button2) is pressed and hidden, third will be enabled and can click on it.
<button type="button" class="btn btn-primary" id="button1" onclick="dataButton1(); this.style.visibility= 'hidden'; this.disabled=true">Data1</button>
<button type="button" class="btn btn-primary" id="button2" onclick="dataButton2();this.style.visibility= 'hidden'; this.disabled=true">data2</button>
<button type="button" class="btn btn-primary " id="button3" onclick="chart1();this.style.visibility= 'hidden'; this.disabled=true">Graph</button>
Have a go with this
const dataButton1 = () => console.log("1")
const dataButton2 = () => console.log("2")
const chart1 = () => console.log("chart 1")
const container = document.getElementById("container");
const buttons = [...container.querySelectorAll("button")];
container.addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.id === "button1") {
dataButton1();
}
else if (tgt.id === "button2") {
dataButton2();
}
else if (tgt.id === "button3") {
chart1();
}
tgt.setAttribute("hidden",true); // hide
const show = buttons.map(btn => btn.getAttribute("hidden")); // cannot use hasAttribute here
if (show[0] && show[1] && !show[2]) buttons[2].removeAttribute("disabled");
})
<div id="container">
<button type="button" class="btn btn-primary" id="button1">Data1</button>
<button type="button" class="btn btn-primary" id="button2">Data2</button>
<button type="button" class="btn btn-primary" id="button3" disabled>chart</button>
</div>
First add disable attribute to third button. Then on each click of button 1 and 2 check for hasAttribute("disabled") of other button to see both of them are clicked (and disabled) or not
Here is working sample:
function dataButton1() {
if (document.getElementById("button2").hasAttribute("disabled"))
document.getElementById("button3").setAttribute("disabled", false);
}
function dataButton2() {
if (document.getElementById("button1").hasAttribute("disabled"))
document.getElementById("button3").removeAttribute("disabled");
}
<button type="button" class="btn btn-primary" id="button1"
onclick="dataButton1(); this.style.visibility='hidden'; this.disabled=true">
Data1
</button>
<button type="button" class="btn btn-primary" id="button2"
onclick="dataButton2();this.style.visibility= 'hidden'; this.disabled=true">
data2
</button>
<button disabled type="button" class="btn btn-primary " id="button3">
chart
</button>

onclick inside function fail

I have 3 inputs and 3 buttons. I would like to set a value by clicking on the button. Everything working fine with the first set. When I set next input, it change the value of all my inputs.
How can I fix that?
$(function() {
$("input").on("click", function () {
var here = $(this);
$("div").on("click", "button", function() {
here.val(this.value);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
You can't scope click function inside click function , just use two click and global variable ...
$(function() {
var here;
$("input").on("click", function () {
here = $(this);
});
$("div").on("click", "button", function() {
here.val(this.value);
});
});
Are you wanting to place the value of the Button, into the last focused INPUT,.
This might help..
$(function() {
var lastFocus;
$('body').on('focus','input', function () {
lastFocus = this;
});
$("div").on("click", "button", function() {
$(lastFocus).val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
is this you want ?
$(function() {
$("input").on("click", function () {
var here = $(this);
$("div").on("click", "button", function() {
here.val(this.value+here.val());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<div>
<button value="a">a</button>
<button value="b">b</button>
<button value="c">c</button>
</div>
Why have you used the outer function?
You can add a temporary class to the input, to which you want to change the value.
$("input").on("click", function () {
$("input").removeClass('addToThis');
$(this).addClass('addToThis');
});
$("div").on("click", "button", function() {
$(".addToThis").val(this.text());
});
Easiest solution: just put the here variable out the first click listner:
$(function() {
var here;
$("input").on("click", function () {
here = $(this);
$("div").on("click", "button", function() {
here.val(this.value);
});
});
});

HTML input elements and Javascript onclick function

I want to make all my HTML input elements change according to an onclick Javascript function and prevent them from changing again after a click event. My problem is that all the input elements change if only one of them is clicked on. Here is my HTML code:
<input type="button" id="button1" onclick="playerMove('button1')"/><input type="button" id="button2" onclick="playerMove('button2')"/><input type="button" id="button3" onclick="playerMove('button3')"/>
<input type="button" id="button4" onclick="playerMove('button4')"/><input type="button" id="button5" onclick="playerMove('button5')"/><input type="button" id="button6" onclick="playerMove('button6')"/>
<input type="button" id="button7" onclick="playerMove('button7')"/><input type="button" id="button8" onclick="playerMove('button8')"/><input type="button" id="button9" onclick="playerMove('button9')"/>
Here is my Javascript function:
function playerMove() {
document.getElementById("button1").value = "X";
document.getElementById("button1").disabled = "disabled";
document.getElementById("button2").value = "X";
document.getElementById("button2").disabled = "disabled";
document.getElementById("button3").value = "X";
document.getElementById("button3").disabled = "disabled";
document.getElementById("button4").value = "X";
document.getElementById("button4").disabled = "disabled";
document.getElementById("button5").value = "X";
document.getElementById("button5").disabled = "disabled";
document.getElementById("button6").value = "X";
document.getElementById("button6").disabled = "disabled";
document.getElementById("button7").value = "X";
document.getElementById("button7").disabled = "disabled";
document.getElementById("button8").value = "X";
document.getElementById("button8").disabled = "disabled";
document.getElementById("button9").value = "X";
document.getElementById("button9").disabled = "disabled";
}
change your js function like this
function playerMove(button) {
document.getElementById(button).value = "X";
document.getElementById(button).disabled = "disabled";
}
You can do this simply with jQuery:
$("input[type=button]").click(function() {
$(this).attr("disabled", "disabled");
$(this).val("X");
});
This will dynamically add an onclick event listener to each <input type="button" /> to automatically turn on the disabled attribute. No function nor onclick attributes required.
If you don't want to use / don't know how to use jQuery, then here's a plain JS representation of the above code:
var buttons = document.querySelectorAll("input[type=button]");
for(var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
this.disabled = "disabled";
this.value = "X";
});
}
Try using single onclick handler attached to window ; if event.target of click is INPUT element and event.target is not disabled , set event.target value to "x" , disabled property to true
window.onclick = function(e) {
if (e.target.nodeName === "INPUT"
&& /^button\d+$/.test(e.target.id)
&& !e.target.disabled) {
e.target.disabled = true;
e.target.value = "x"
}
}
<input type="button" id="button1" />
<input type="button" id="button2" />
<input type="button" id="button3" />
<input type="button" id="button4" />
<input type="button" id="button5" />
<input type="button" id="button6" />
<input type="button" id="button7" />
<input type="button" id="button8" />
<input type="button" id="button9" />
Consider attaching your event handlers entirely in JavaScript
window.addEventListener('load', function () { // after page loaded (i.e. elements exist)
Array.prototype.forEach.call( // for each
document.querySelectorAll('.my_awesome_buttons'), // of the awesome buttons
function (button) { // call it "button" and do the following
button.addEventListener( // when it gets
'click', // clicked
function (e) { // do your thing to it
this.value = "X";
this.disabled = "disabled";
}
);
}
);
});
<input type="button" id="button1" class="my_awesome_buttons"/><input type="button" id="button2" class="my_awesome_buttons"/><input type="button" id="button3" class="my_awesome_buttons"/>
<input type="button" id="button4" class="my_awesome_buttons"/><input type="button" id="button5" class="my_awesome_buttons"/><input type="button" id="button6" class="my_awesome_buttons"/>
<input type="button" id="button7" class="my_awesome_buttons"/><input type="button" id="button8" class="my_awesome_buttons"/><input type="button" id="button9" class="my_awesome_buttons"/>
element.addEventListener
document.querySelectorAll
Array.prototype.forEach
Which gets Function.prototype.called on a NodeList in this example

MVC Listbox how do I use jQuery to select all, remove all

I have an MVC application that has two listboxes. It uses jQuery to move selected items from one listbox. I would like to know how I can use jQuery to select all the items in the first listbox and how to remove all the items in the second listbox?
The code and markup is:
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script>
$(function () {
$("#add").click(function () {
$("#listBoxAvail > option:selected").each(function () {
$(this).remove().appendTo("#listBoxSel");
});
});
$("#remove").click(function () {
$("#listBoxSel > option:selected").each(function () {
$(this).remove().appendTo("#listBoxAvail");
});
});
});
</script>
</head>
<body>
<div>
#using (Html.BeginForm())
{
#Html.ListBoxFor(m => m.SelectedAttributes, Model.Attributes, new {id="listBoxAvail", SIZE = 5} )
<button type="button" id="add">MoveRight</button>
<button type="button" id="remove">"MoveLeft"></button>
<button type="button" id="remove-all">RemAll</button>
<button type="button" id="select-all">SelAll</button>
#Html.ListBoxFor(m => m.SelectedAttributes2, Model.SelectedItems, new { id = "listBoxSel", SIZE = 5})
}
</div>
</body>
To remove all element just make all option selected for listBoxSel select and trigger remove button's click action.
The same for select all:
$("#add").click(function () {
$("#listBoxAvail > option:selected").each(function () {
$(this).remove().appendTo("#listBoxSel");
});
});
$("#remove").click(function () {
$("#listBoxSel > option:selected").each(function () {
$(this).remove().appendTo("#listBoxAvail");
});
});
$("#remove-all").on("click", function (event){
$('#listBoxSel option').prop('selected', true);
$("#remove").trigger("click");
})
$("#select-all").on("click", function (event){
$('#listBoxAvail option').prop('selected', true);
$("#add").trigger("click");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select option multiple="true" id="listBoxAvail">
<option>1</option>
<option>2</option>
</select>
<input type="button" id="add" value="add">
<input type="button" id="select-all" value="select all">
<input type="button" id="remove" value="remove">
<input type="button" id="remove-all" value="remove all">
<select option multiple="true" id="listBoxSel">
</select>
UPDATE:
As Stephen Muecke suggested in comment thread below, more proper solution to select-all
$('#move').click(function(){
$('#first option').appendTo($('#second'));
});
see fiddle

Select a div from a function which is called by a button using event.target.id

I have the following HTML:
<div id="unit0">
<input onclick="getFeedback()" id="46003" class="btn" type="button" value="Upload assignment 1 here">
<input onclick="getFeedback()" id="46001" class="btn" type="button" value="Upload assignment 2 here">
</div>
and my getFeedback function
function getFeedback(){
console.log("This function's caller was " + event.target.id);
$.get('moodle/api.php',{action: "getfeedback", id: event.target.id}, function(data) {
});
}
How would I select the div from that function? I want to append the output of the $.get to the div which contains the event.target.id
You can pass this to the function first like:
<input onclick="getFeedback(this)" id="46003" class="btn" type="button" value="Upload assignment 1 here">
<input onclick="getFeedback(this)" id="46001" class="btn" type="button" value="Upload assignment 2 here">
Next modify the js like:
function getFeedback(obj) {
console.log("This function's caller was " + obj.id);
$.get('moodle/api.php', {
action: "getfeedback",
id: obj.id
}, function (data) {
// Get the parent div like
var $div = $(obj).closest('div');
});
}
You can use $.parent, like so:
var parent_div = $(event.target).parent();
Try without inline onClick
<div id="unit0">
<input id="46003" class="btn" type="button" value="Upload assignment 1 here">
<input id="46001" class="btn" type="button" value="Upload assignment 2 here">
</div>
JS:
$('input.btn').on('click',function(e){
$.get('moodle/api.php',{action: "getfeedback", id: this.id}, function(data) {
});
});

Categories

Resources