For some reason .hide works, but .show not?
This is my code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<button onclick="alertShowAccount()">Add account</button>
<script>
function alertHideAccount() {
$("#addAccount").hide();
}
function alertShowAccount() {
$("#addAccount").show();
}
</script>
<div style="display:none" id="addAccount">
<button class="btn btn-md" onclick="alertHideAccount()">Cancel</button>
</div>
<body>
Anyone has an idea why it is not working? The function IS being called, I tested it with an alert. Also the console gives no errors.
Here's how I did man, it worked for me this way...
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#addAccount').hide();
$('#hide_div').on('click',function(){
$("#addAccount").hide();
});
$('#show_div').on('click',function(){
$("#addAccount").show();
});
});
</script>
<body>
<button id="show_div">Add account</button>
<div id="addAccount">
<button class="btn btn-md" id='hide_div'>Cancel</button>
</div>
<body>
So here's what happened, we changed Onclick to just the ID of the element, and called it on the script with $(elem).on('event',function());
Related
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js
"></script>
<script type="text/javascript">
$(function(){
for(i=0;i<5;i++){
var ids=[1,2,3,4,5];
$("#btn"+ids[i]).click(function(){
alert("btn"+ids[i]);
});
}
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
</body>
</html>
Clicking the button should alert the value in the array, but it instead alerts btnundefine.
How can I visit the value in the external array in the lambda function?
Define i with let. Otherwise, it will try to access ids[5] and prints undefined because ids array only has 5 elements.
$(function(){
var ids=[1,2,3,4,5];
for(let i=0;i<5;i++){
$("#btn"+ids[i]).click(function(){
alert("btn"+ids[i]);
});
}
});
<script typetype=="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
This is workable also:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js
"></script>
<script type="text/javascript">
$(function(){
var ids=[1,2,3,4,5];
for(i=0;i<5;i++){
console.log("#btn"+ids[i]);
$("#btn"+ids[i]).click(function(){
alert(this.id);
});
}
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
</body>
</html>
I want to achieve that after a click on a button (Bootstrap 3.3.7.1) it is marked as active. For that I actually just copy paste a code I found here on stackoverflow. But still, when I test it, the button doesn't show any behavior.
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>
<div class="container">
<form method="post" action="specifyDetails">
<h2>Chose what you want to trade</h2>
<label>
<select th:name="Products" class="selectpicker" multiple="multiple">
<!--/*#thymesVar id="productList" type="java.util.List"*/-->
<option th:each="product : ${productList}"><a th:text="${product}"></a></option>
</select>
</label>
<button th:type="submit" class="btn btn-info">Send</button>
</form>
<form><a th:href="'orderview/'" href="#" class="btn btn-default btn-sm" role="button">Orderview only</a>
</form>
<input type="button" class="btn btn-info" value="Input Button"/>
<script>$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})</script>
</div>
<div th:replace="template :: footer"></div>
</body>
</html>
And here the template.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<meta charset="UTF-8"/>
<!--/*#thymesVar id="title" type="String"*/-->
<title th:text="${title}">Library trader</title>
</head>
<footer th:fragment="footer">
<script th:src="#{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<script th:src="#{/webjars/bootstrap-select/1.12.2/js/bootstrap-select.min.js}"></script>
<link th:href="#{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="#{/webjars/bootstrap/3.3.7-1/css/bootstrap-theme.min.css}" rel="stylesheet"/>
<link th:href="#{/webjars/bootstrap-select/1.12.2/css/bootstrap-select.min.css}" rel="stylesheet"/>
</footer>
</html>
Thank you very much!
Place click event handler in the footer because you are loading jquery after loading DOM
in footer
like
<footer th:fragment="footer">
<script th:src="#{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<script th:src="#{/webjars/bootstrap-select/1.12.2/js/bootstrap-select.min.js}"></script>
<script>$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})</script>
//rest of the code
</footer>
Add the ready function to your script :
<script>
$(function(){
$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
});
});
</script>
Hope this helps.
I think this the issue. You are finding the element with btn-info CSS Class.
Since there are two elements with the same CSS class name, it's failing to apply on-click event to each element.
So below code works as I'm iterating the $('.btn-info') so that every button with the class has on-click event.
/*$('.btn-info').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})*/
$('.btn-info').each(function( index ) {
$(this).click(function(e) {
e.preventDefault();
$(this).addClass('active');
alert("class Added")
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>
<div class="container">
<form method="post" action="specifyDetails">
<h2>Chose what you want to trade</h2>
<label>
<select th:name="Products" class="selectpicker" multiple="multiple">
<!--/*#thymesVar id="productList" type="java.util.List"*/-->
<option th:each="product : ${productList}"><a th:text="${product}"></a></option>
</select>
</label>
<button th:type="submit" class="btn btn-info">Send</button>
</form>
<form><a th:href="'orderview/'" href="#" class="btn btn-default btn-sm" role="button">Orderview only</a>
</form>
<input type="button" class="btn btn-info" value="Input Button"/>
</div>
<div th:replace="template :: footer"></div>
</body>
</html>
I hope this might help. Thank you!!
I am trying to make a page with several buttons(or links) that will direct to different pages.
I have tried this by using the following code that should redirect the user to google.com.
<!DOCTYPE HTML>
<html>
<body>
<form id='form' action="main.php">
<button id="allSetsButton" class="float-left submit-button"> main</button>
</form>
<script type="text/javascript">
document.getElementById("allSetsButton").onclick = function (){
location.href = 'http://google.com';
};
</script>
</body>
</html>
However, when I press the button, the page refreshes instead of redirecting me.
What am I doing wrong here?
Add type="button" to your button element so that it's not considered as a submit button for the form (which causes to submit the form before your event handler can do anything).
<button type="button" id="allSetsButton" class="float-left submit-button"> main</button>
Considering your requeriments, why don't you just use plain links and style them as you need?
<!DOCTYPE HTML>
<html>
<style>
.submit-button {
display: inline-block;
padding: 0.5em 1em;
background-color: #e1ecf4;
}
</style>
<body>
<form id='form' action="main.php">
Main
</form>
</body>
</html>
U can try this
<!DOCTYPE HTML>
<html>
<body>
<form id='form' action="main.php">
<button type="button" id="allSetsButton" class="float-left submit-button" onClick="gotoweb()"> main</button>
</form>
<script type="text/javascript">
function gotoweb(){
window.location.href = 'http://google.com';
};
</script>
</body>
or this in short
<button type="button" id="allSetsButton" class="float-left submit-button" onClick="window.location.href='http://google.com'"> main</button>
I have multiple divs inside a form tag.
<form id="RegdForm">
#Html.Partial("../Partials/_PatientEdit")
The partial view,
<div id="zafar"> <h3>Zafar</h3> </div>
When I try to hide all the divs its working like below
<script type="text/javascript">
$('Div').hide();
</script>
But when I try to hide specific Div it's not hiding at all.
<script type="text/javascript">
$('#zafar').hide();
</script>
I am using ASP.Net MVC 5 with Razor.
Any help appreciated.
Try this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zafar">
<h3>Zafar</h3>
</div>
<div class="well well-sm">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn btn-primary" type="button" data-bind="click: printPatient">Print</button>
<button class="btn btn-danger" type="button" data-bind="click: resetForm">Reset</button>
</div>
<button id="hide">Hide</button>
<button id="hideAll">Hide All</button>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$('#zafar').hide();
});
$("#hideAll").click(function(){
$('Div').hide();
});
});
</script>
</body>
</html>
Here is your answer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zafar").hide();
});
</script>
Add your respective function inside this.
$(function() {
$('#zafar').hide();
})
After a long googling I found out one solution to this.
As the div was inside the form tag, the way accesing the div can be done as,
<script type="text/javascript">
$('#RegdForm #zafar').hide();
It helped me to achieve the task.
I have a problem adding bootstrap class to button with a function. I want to add the disable class to #eng.
My code:
<li>
<div class="btnLang">
<form id="formLang1">
<button id="slo" class="btn btn-mini disabled">slo</button>
</form>
<form id="formLang2" onsubmit='return eng_clicked()'>
<button id="eng" class="btn btn-mini">eng</button>
</form>
</div>
</li>
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>
you forgot the script tag
<script type="Text/javascript">
//scripts
</script>
Anyway I have better solution for you using jQuery, just remove "onsubmit='return eng_clicked()'" and and replace the codes below instead of your codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$("#formLang2").click(function() {
$('#eng').addClass("disabled");
});
</script>
have you add the script tag?
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>