I tried to create a dynamic form. Im not sure why the datepicker cant be clicked. Datepicker only work on first row. I already try few other code but no luck. The code is provided below. I excluded the PHP code because it only consist of code for insert into database. My target is to store the dynamic form into database.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
});
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls .d1:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="fa fa-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<form method="POST" action="" name="loginin">
<div class="controls">
<div class="d1">
<div class="entry input-group">
<input list="pronama" name="proPlace[]" type="text" placeholder="Place" class="form-control">
<input type="text" class="datepicker" class="form-control" name="date[]">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</div>
</div>
<button type="submit" name="login" class="btn btn-lg btn-success btn-block">Sign In</button>
</form>
</body>
</html>
You need to initialize the datepicker with each creation, like so:
newEntry.removeAttr('id');
$(".datepicker", newEntry)
.removeAttr('id')
.removeClass('datepicker hasDatepicker')
.datepicker({
dateFormat: 'dd-mm-yy'
});
making the new entry's input a date picker, the removal of the hasDatepicker class is needed for this to work, because you clone the input, the class is in the cloned element too.
here's a jsfiddle: adding dynamic datepickers
EDIT:
updated the fiddler, the reason only the first input was updated on selecting a date, is because it's a cloned element, containing the same id as the original, so when looking for the id of the datepicker, it stumbles upon the one.
the fix was described here.
Datepicker selected value always goes on the first textbox
Related
I want to get an answer from the php file if I click on one of the radio buttons, but if I use the radio button, the alert appers in an endless loop. Why? And how do I get the alert only once?
I try it with only a „normal“ button, then it works:
If I click on the button, the ajax responds the values in the alert once.
Thank you
<!doctype html>
<html lang="de">
<head>
<title>test</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container">
<br>
<br>
<button type="button" class="btn btn-dark" id="go">Go</button>
<div class="row">
<div class="btn-group" id="auswahl" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="aktionswahl" value="alles" checked autocomplete="off"> Alles
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="aktionswahl" value="blue" autocomplete="off"> blue
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="aktionswahl" value="red" autocomplete="off"> red
</label>
</div>
</div>
</div><!--Container-->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">></script>
<script>
$(function() {
$("input[name=aktionswahl]").focus(function () {
//var auswahl = this.value;
var sqlwhere = "where aktion=4 and Datum >= '2017-12-05' and Datum < '2017-12-07'";
ask(sqlwhere);
});
});
$(function() {
$("#go").click(function () {
var sqlwhere = "where aktion=4 and Datum >= '2017-12-05' and Datum < '2017-12-07'";
ask(sqlwhere);
});
});
function ask(sqlwhere) {
$.ajax({
type: 'POST',
url: 'read_sql.php',
data: { sqlwhere:sqlwhere }
}).done(function(data) { alert(data); });
return false;
}
</script>
</body>
</html>
As the alert appears, the radio button will lose focus. As you close the alert, the focus will return which triggers the alert which causes the radio button to lose focus but when you close that alert ...
Use console.log instead
Try this, your code is right just need one change...
write return false; immediately after alert.
means...function(data) { alert(data); return false; }
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 have made two labels(Label1 and Label 2 and two remove button for each labels) by using html, javascript and jquery for my learning purposes.
Now I want the label and button to be removed when the cross button is clicked.
I tried
$(".labels").closest().remove();
But it does not work. Please help
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>
</head>
<body>
<div class="container">
<div class="form-group row">
<div class="col-md-2 labels">
<label>Label 1 </label>
</div>
<div class="col-md-1" style="padding-bottom: 5px">
<button class="btn btn-danger btn-xs removeBtn">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document)
.ready(
function() {
var formGroupRowDiv = $(
document.createElement('div')).attr(
"class", 'form-group row');
var labelTwoDiv = $(document.createElement('div'))
.attr("class", 'col-md-2 labels');
var removeBtnDiv = $(document.createElement('div'))
.attr("class", 'col-md-1 removeBtn');
labelTwoDiv.appendTo(formGroupRowDiv).html(
'<label>Label 2</label>');
removeBtnDiv
.appendTo(formGroupRowDiv)
.html('<button class="btn btn-danger btn-xs removeDate">'
+ '<span class="glyphicon glyphicon-remove"></span>'
+ '</button>');
$(formGroupRowDiv).appendTo('.container');
$(".removeBtn").click(function(e) {
e.preventDefault();
$(".labels").closest().remove();
});
});
</script>
</body>
</html>
Try this:
$("body").click(".removeBtn", function(e) {
$(e.target).parent().parent().siblings().find("label").remove()
});
Since you are dynamically generating the divs, you cant just bind the handler to the divs that appear on load. You need to bind it to something higher up (like body)
e.target here is the removeBtn
.parent() will return a jQuery object of the parent
.siblings() will return all of it [the parent's] siblings
.find() will filter to the passed selector
.remove() will remove it from the DOM
Basically you had 4 problems here:
You don't want to remove all the closest() elements of any .labels element that exists on the page (you want to remove a specific .labels element that is the closest to the current .removeBtn you just clicked.
The closest is not what you are looking for, but actually the prev element.
Since your structure for your HTML is different between the two .removeBtn elements you have - you will need two different selectors.
The first selector will be $(this).prev('.labels') and the second will be $(this).parent().prev('.labels').
If you also want to remove the button that was just clicked - use $(this).remove();.
This is the fist to your code:
$(".removeBtn").click(function(e) {
e.preventDefault();
if ($(this).prev('.labels').length) {
$(this).prev('.labels').remove();
} else if ($(this).parent().prev('.labels').length) {
$(this).parent().prev('.labels').remove();
}
$(this).remove();
});
Here is a working snippet:
$(document)
.ready(
function() {
var formGroupRowDiv = $(
document.createElement('div')).attr(
"class", 'form-group row');
var labelTwoDiv = $(document.createElement('div'))
.attr("class", 'col-md-2 labels');
var removeBtnDiv = $(document.createElement('div'))
.attr("class", 'col-md-1 removeBtn');
labelTwoDiv.appendTo(formGroupRowDiv).html(
'<label>Label 2</label>');
removeBtnDiv
.appendTo(formGroupRowDiv)
.html('<button class="btn btn-danger btn-xs removeDate">'
+ '<span class="glyphicon glyphicon-remove"></span>'
+ '</button>');
$(formGroupRowDiv).appendTo('.container');
$(".removeBtn").click(function(e) {
e.preventDefault();
if ($(this).prev('.labels').length) {
$(this).prev('.labels').remove();
} else if ($(this).parent().prev('.labels').length) {
$(this).parent().prev('.labels').remove();
}
$(this).remove();
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>
</head>
<body>
<div class="container">
<div class="form-group row">
<div class="col-md-2 labels">
<label>Label 1 </label>
</div>
<div class="col-md-1" style="padding-bottom: 5px">
<button class="btn btn-danger btn-xs removeBtn">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
</body>
</html>
I want to make a webpage in which three different contents show/hide when a button is clicked. The code is shown below.
I want the same page to show three contents:
only a search bar when button 'search' is clicked,
only the result of the search after a search is done or when the button 'results' is clicked, and
only the visualization of the search when one specific outcome of the results is chosen, or when the button 'visualization' is clicked.
Right now I only know how to show the results in different pages, not in the same one hiding what I don't want.
Code is below.
Thanks
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="docs-assets/ico/favicon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link href="css/jquery.dataTables.css" rel="stylesheet">
<link rel="shortcut icon" type="image/ico" href="" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery-2.0.3.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.sprintf.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//xmakeTable("treaty");
});
makeTable = function(query) {
var q = encodeURIComponent(query)
$('#example').dataTable({
"oLanguage": {"sSearch": "Filter results:"},
"bProcessing": true,
"bDestroy":true,
"sAjaxSource": $.sprintf('http://leela.sscnet.ucla.edu/voteview/searchdt?q=%s',q),
"aoColumns":[{"mData":"id", "sWidth": "20px", "sTitle":"ID"},
{"mData":"chamber", "sWidth": "10px", "sTitle":"Chamber"},
{"mData":"date", "sWidth": "85px", "sTitle":"Date"},
{"mData":"yea","sTitle":"Vote","sWidth":"80px"},
{"mData":"descriptionShort", "sWidth": "200px","sTitle":"Description"}],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(0)', nRow).html(
$.sprintf('%s',aData['id'],aData['id'])).attr("title","Click to explore this vote");
$('td:eq(3)', nRow).html(
$.sprintf('%s-%s',aData['yea'],aData['no']));
$('td:eq(4)', nRow).attr("title",aData['description'])
return nRow; }
});
}
searchvotes = function() {
$('#example').empty();
makeTable($('#qqtext').val());
};
</script>
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li>Home</li>
<li class="active">Search</li>
<li>Contact</li>
</ul>
<h3 class="text-muted">VoteView</h3>
</div>
<div class="jumbotron">
<div class="container">
<div>
<h3 align="center">Search for Roll Calls</h3>
<div class="col-sm-12">
<input type="search" class="form-control" placeholder="Search" id="qqtext" onchange="searchvotes()"></input>
</div>
</div>
<br>
<div>
<div class="table-responsive">
<table id="example" class="table table-striped"></table>
</div>
</div>
<div>
<div class="col-lg-14 col-md-14 portfolio-item" id="example">
</div>
</div>
</div>
</div>
<div align="center">
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span><br><font color="white">Search</font>
</button>
<button type="button" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-list"></span><br><font color="white">Results</font>
</button>
<button type="button" class="btn btn-warning btn-lg">
<span class="glyphicon glyphicon-eye-open"></span><br><font color="white">Visualize</font>
</button>
</div>
<br>
<hr>
<p></p>
<footer>
<p>Example</p>
</footer>
</div>
</body>
</html>
If one tries a search with this code, the code should show results, but not the way I expect.
Thanks
Probably not the solution but some hint to get there. Given this:
<ul>
<li class="collapsable"><h2>Release 3.0</h2>
<ul>
<li><h3>Allgemeine Übersicht</h3>
<p>Text ....
</li>
</ul>
</li>
....
</ul>
I do:
<script type="text/javascript">
jQuery(document).ready( function () {
jQuery('.collapsable').click(function () {
jQuery(this).children('ul').first().toggle("slow");
});
});
</script>
And
<style>
li.collapsable ul {
display: none;
}
</style>
A Click on the headline opens the <ul> and closes it again on next click (Actually, there is a lot of text in there and thus the list is very long)
Firstly add an Id to your buttons to make things a bit easier
<button id="btnSearch" type="button" class="btn btn-warning btn-lg" />
<button id="btnResult" type="button" class="btn btn-warning btn-lg" />
<button id="btnVisual" type="button" class="btn btn-warning btn-lg" />
then make sure that you have the three mark-up sections on the page wrapped inside it's own div with an Id on each div.
<div id="search">
...
</div>
<div id="result">
...
</div>
<div id="visual">
...
</div>
In your JavaScript, set-up page for the initial conditions and handle the clicks on the buttons as required. In your search and visualisation functions just show and hide the appropriate div(s) for the conditions your require using JQuery's show() and hide() functions.
It may go something like this - just tweaks this snippet as required, to suit your actual scenario.
function reset() {
$('#search').show();
$('#result').hide();
$('#visual').hide();
}
function init() {
var self = this;
// button clicks
$('#search').click(function () {
self.reset();
});
$('#results').click(function () {
self.search();
});
$('#visual').click(function () {
self.visualize();
});
}
function search() {
// Do search and set results table contents
$('#search').hide();
$('#result').show();
}
function visualize() {
// Do visualisation and set content
$('#result').hide();
$('#visual').show();
}
$(document).ready( function () {
this.reset();
this.init();
)};
You need to use toggle() It will hide element if its current status is visible and show if it is currently hidden:
$('.collapsable').click(function () {
$(this).children('ul').first().toggle();
});
How can I update just the tags / class="able", with the datepicker value thats
stored in the <input id="datepicker"> field?
Steps:
Click the "datepicker" input field; Date calendar opens.
Select your date; "datepicker" input field populated with selected date.
Click "Load" Button.
<span> tags with class="able" values are now equal to "datepicker" input field value.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Pass Value Input to SPAN2</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div>
<p>Date: <input id="datepicker" type="text"></p>
<br>
<input type="Button" id="button1" Value="LOAD">
</div>
<span id="result1" class="able"> </span>
<span id="result2" class="able"> </span>
<span id="result3" class="able"> </span>
<span id="result4" class="baker"> </span>
<span id="result5" class="baker"> </span>
<span id="result6" class="charlie"> </span>
</body>
</html>
You need to bind an onclick event to the load button and inside the onclick function you need to set the span text like below,
$('#button1').click (function () {
$('span.able').text($('#datepicker').val());
});
DEMO
Here is the JQuery Code to do this:
$("span.able").text($("#datepicker").text());
What the above code does is, to select all the span tags, with class = "able". It then sets its internal text to the value present in your text box with ID = datepicker.
Here is the documentation for text() function:
http://api.jquery.com/text/
$("Load-button-selector").click( function(){
$("span.able").html( $("datepicker-filed-selector").val() );
});