checkbox click works only one time - javascript

When I have this code:
$('input[type="checkbox"]').click(function(){
alert('2');
})
It works great, every time when I click a checkbox, I get an alert.
$('input[type="checkbox"]').click(function(){
alert('2');
$("#fresh-table").bootstrapTable("refreshOptions", {
detailView: false,
});
})
When I add the following, it works also great, but the alert works only one time.
How do I fix this?
EDIT
Used the function onColomnSwitch to fire the event multiple times.
Fixed, tnx!

Please check that you have included the js file for "BootStrapTable" or not. If not included then it will show an error in the console.
I have checked the code and it's working for me. You can try out this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
alert('2');
$("#fresh-table").bootstrapTable("refreshOptions", {
detailView: false,
});
})
});
</script>
</head>
<body>
<input type="checkbox" name="test_cb" id="test_cb"> <label for="test_cb">Test Checkbox</label>
<table border="1px solid black" id="#fresh-table">
<tr><th>Name</th><td>Lorem Ipsum</td></tr>
<tr><th>Email</th><td>example#gmail.com</td></tr>
</table>
</body>
</html>

Related

click 1 times but alert multiple times in jquery

i run code below , click open 5 times and click close 4 times then click alert.
i expected that alert function run 1 times but it run 5 times why? , how to prevent this problem?
code contains 3 buttons that by click open ,shows two buttons including close and alert button and by click close hides alert and close button and by click alert,alerts 1.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".close-but").css("display","none");
$(".alert").css("display","none");
$(".open-but").click(function(){
$(".alert").click(function(){
alert("1");
});
$(".open-but").css("display","none");
$(".close-but").css("display","flex");
$(".alert").css("display","flex");
});
$(".close-but").click(function(){
$(".close-but").css("display","none");
$(".alert").css("display","none");
$(".open-but").css("display","flex");
});
});
</script>
</head>
<body>
<button class="open-but">open</button>
<button class="close-but">close</button>
<br/>
<button class="alert">alert</button>
</body>
</html>
You have misplaced $(".alert").click()
Every time you hit .open-but it assigns an event handler for alert button. You should assign $(".alert").click() once only. So place this outside of $(".open-but").click() as below:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".close-but").css("display", "none");
$(".alert").css("display", "none");
$(".open-but").click(function() {
$(".open-but").css("display", "none");
$(".close-but").css("display", "flex");
$(".alert").css("display", "flex");
});
$(".close-but").click(function() {
$(".close-but").css("display", "none");
$(".alert").css("display", "none");
$(".open-but").css("display", "flex");
});
$(".alert").click(function() {
alert("1");
});
});
</script>
</head>
<body>
<button class="open-but">open</button>
<button class="close-but">close</button>
<br />
<button class="alert">alert</button>
</body>
</html>

The html doesn't seem to be able to read the script element

This code is trying to change a paragraph element in the html, but nothing in the script element seems to even be recognized
We have tried many different variations of this code to try to understand what isn't working, but nothing in the script element is even recognized
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
I want the code to change the paragraph element to something else, but nothing is working, and the console.log()'s aren't working at all
You can't put your code inside the script element for jQuery. Instead add another script tag below it with your code.
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
A script tag can't have both src and internal text code. You need two tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
you need 2 script tags, 1 to list the jquery library you're using and 1 to write the actual code
Try making one <script> tag for jQuery (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>) and another one for your code:
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
You are using a rather old version of jQuery and might want to update to a more recent one
A script tag can either have an src attribute, requiring a script file, OR script content directly, not both. So just make a second script block with the code you'd like to execute:
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>

button by default hide then show

it is showing the checkboxes, but by default i want it to hide but after click show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ElectronicsChk").toggle(1000);
$("#SoftwareChk").toggle(1000);
$("#Dontknow").toggle(1000);
$("p").toggle(1000);
});
});
</script>
<style>
div.electro{
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>
<div class="electro">
<input type="checkbox" id="ElectronicsChk">
<p>Hardware Problems</p></input>
<input type="checkbox" id="SoftwareChk">
<p>Software Problems</p></input>
<input type="checkbox" id="Dontknow">
<p>I dont Know</p></input>
</div>
</body>
</html>
plz help i am a newbie so plz do explain after submitting your code,... Sorry and i'll be very thankfull for the help... waiting for an early response thank you...
To hide the checkboxes and p initially, you can simply use CSS:
div.electro > * {
display:none;
}
That said, it seems you could simplify your code by hiding and showing the div container instead of each individual child element:
CSS:
div.electro {
display:none;
}
JavaScript:
$(document).ready(function(){
$("#btn1").click(function(){
$(".electro").toggle(1000);
});
});
This is much better because it follows the DRY principle and is more flexible, for example if you adding some new elements to the container like some helper text, you don't need to update the JavaScript logic.

How do I refresh a div without adding

I'm trying to refresh the div, but it's duplicating everything else.
Before I do anything, the page looks like this: initial page
The second button is supposed to refresh the div, but when I do, this is what I get:after trying to refresh, it refreshes it, but duplicates everything else
How do I make it so it only refreshes the div?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br/>
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#ff').load('thing2.html');
});
});
</script>
</body>
In this line
$('#ff').load('thing2.html');
You are only updating your div with id="ff", but you are loading into the entire contents of thing2.html.
Is this what you were looking for? If not, can you explain a bit more?
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#input').val('');
});
});
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
You are loading the things2.html again, hence its duplicating.
I have used location.reload() to refresh and its working fine. Is this you are looking for??
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
// $('#ff').load('things.html');
location.reload();
});
});

JQuery and Bootstrap 3 Simple to solve

I've got a quick question
So, my code is something like:
<html>
<head>
</head>
<body>
<?php
//file that contains the modals
include ('modals.php');
<button class="openCompany">
OPEN
</button>
?>
//...
</body>
</html>
and at the very end, I've got a JS script to open a modal like:
<script type="text/javascript">
$('#companyModal').modal('show');
</script>
which works perfectly, but when I do
$(".openCompany").click(function () {
$('#companyModal').modal('show');
});
it doesn't anymore.
Thanks.
try this
$(document).ready(function(){
$(document).on("click", ".openCompany", function(e) {
$('#companyModal').modal('show');
});
});

Categories