I am dynamically creating start and end time drop down fields. I have one more remove link fileds also in my app. But when I use 'tab' key I can see the dropdown in remove button also. How should I avoid the droopdown in my remove button. How should I get rid of the time picker drop down in my remove button
my script is
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<input class="btn btn-link" onclick="addtextbox()" type="button" value="Add">
</div>
<div id="ToolsGroup">
</div>
</div>
<script>
var count = 0;
function addtextbox() {
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.id = 'Tools';
document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group"><label class="col-md-4 control-label" for="starttime">Start time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dstarttime' + count + '" placeholder="starttime" required> </div></div>' +
'<div class="form-group"><label class="col-md-4 control-label" for="endtime">End time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dendtime' + count + '" placeholder="endtime"></div></div>' +
'<input type="button" value="Remove" class="reomvetools" onclick="removeTextArea(this);"></div><div id="dresultDiv' + count + '"></div></form>'
count++;
$('#Tools input').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
};
function removeTextArea(inputElement) {
var el = inputElement;
while (el.tagName != 'DIV') el = el.parentElement;
el.parentElement.removeChild(el);
counter--;
}
</script>
</body>
</html>
Instead of ("#tools input").timepicker ,I have tried giving the ("#form -group").timpicker,that doesnt work.
I tried changing the remove button class to 'btn btn-link' .That didnt work.
how should i do this? If I use the mouse I dont see the time dropdown in 'remove' button .If I use tab I see the dropdown. Can someone help me to get rid of the drop down in remove button?
Just define the input type explicity for time and you are good to go
$('#Tools input[type=time]').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
Related
I have the following jqueryCode:
$(document).ready(displayItems);
$(document).ready(getAreaIndex);
function displayItems()
{
$.ajax({
type:"GET",
url:"http://tsg-vending.herokuapp.com/items",
success:function(data){
var div = $("#div1");
var html="";
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
for(let i=0;i<data.length;i++)
{
var itemId = data[i].id;
if(i%3==0)
{
html+="<br><br><br><br>";
}
html+='<textarea readonly rows="4" cols="60" style="overflow:hidden" id="' + itemId + '">'+ (i+1) + ' \n ' + data[i].name + ' \n ' + formatter.format(data[i].price) + ' \n Quantity Left: '+ data[i].quantity + '</textarea> ';
}
div.append(html);
//console.log(html);
},
error: function()
{
console.log("Issue");
}
//add error here
});
/*
$("textarea").each(function(){
$text = this.value;
console.log(text);
});
*/
}
function getAreaIndex()
{
console.log($("#21").val());
$("textarea").each(function(){
$text = this.value;
console.log(text.charAt(0));
});
}
I am trying to add textareas dynamically through jquery appending it to a div I have on my html page. The text area id's are generated by an ajax response to a api that functions correctly. The textareas do append correctly on the html page however when trying to print out the textarea values given known IDs it shows undefined. I even try to do a .each through all textareas and it never it even goes in loop. I do this in the getAreaIndex(), printing it to console(id #21 is a valid textarea id generated).
The Following is the html page if needed:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Vending Machine</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Additional CSS files here -->
</head>
<body>
<div class="container-fluid" id="homeview">
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">Vending Machine</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-9" id="div1">
<!-- Textareas go here -->
</div>
<div class="col-sm-3 float-right" id="Form1">
Total $ In<br>
<input type="text" id="moneyIn"><br><br>
<button id="addDollar">Add Dollar</button>
<button id="addQuarter">Add Quarter</button><br><br>
<button id="addDime">Add Dime</button>
<button id="addNickel">Add Nickel</button>
<hr style="width:30% ;margin-left:0"><br>
Messages<br>
<input type="text" id="messages"><br><br>
Item: <input type="text" id="itemNumber" style="display:block"><br><br>
<button id="makePurchase">Make Purchase</button>
<hr style="width:30% ;margin-left:0"><br>
Change<br><br>
<input type="text" id="change">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="VendingMachine.js"></script>
</body>
</html>
The textareas are inserted after "id=div1"
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
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'm trying to inject into the header of a page(JQM) a title by using Javascript.
I also want to enable a Subscription feature so I need to insert the button via Javascript aswell. However, whenever I inject it, it's getting messy.
I want the button to align with the title, and I want the title in the middle of the header.
Here's a picture to demonstrate how it looks right now
and I want it to align perfectly, with no line-breaks at all(like it has now)
Im using these lines to insert the button and the title(JS):
document.getElementById("forum_name").innerHTML = fName;
document.getElementById("subscribe_btn").innerHTML = " <a href='#' class='ui-btn'>Unsubscribe</a>";
And Im using these lines in the HTML File:
<div data-role="header"><span style="display:inline;" id="subscribe_btn"></span><center><div id="forum_name" style="display:inline-block"></div></center></div>
With JQM you can do it following way:
var subscribeText = "Subscribe", unsubscribeText = "Unsubscribe";
function changeSubscription() {
var choiche = $('input[name=rg-subscription]:checked'),
value = choiche.val(),
label = choiche.parent().text();
$("#toggleSubscription").toggleClass("ui-screen-hidden", value == "no-subscription");
if (value == "no-subscription") {
$("#toggleSubscription").text(subscribeText);
}
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
$("#" + pageId + " [data-role='header'] h1").text(label);
}
$(document).on("pagecreate", "#page-1", function(e) {
$("input[name='rg-subscription']").change(changeSubscription);
$("#toggleSubscription").on("vclick", function(e) {
$(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
});
$("#injectButton").click(injectButton);
});
$(document).on("pagebeforeshow", "#page-1", function(e, ui) {
changeSubscription();
});
function injectButton() {
$("#toggleSubscription").off();
var html = [
'<button id="toggleSubscription" ',
'class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all">',
'Subscribe',
'</button>'
].join("");
$("#toggleSubscription").remove();
$("#page-1 [data-role='header']").prepend(html).enhanceWithin();
$("#toggleSubscription").on("vclick", function(e) {
$(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-1" data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div role="main" class="ui-content" id="page-1-content">
<fieldset data-role="controlgroup" data-mini="true">
<input name="rg-subscription" id="rc-subscription-0" value="no-subscription" checked="checked" type="radio">
<label for="rc-subscription-0">no subscription</label>
<input name="rg-subscription" id="rc-subscription-1" value="alt-binaries-mp3" type="radio">
<label for="rc-subscription-1">alt.binaries.mp3</label>
<input name="rg-subscription" id="rc-subscription-2" value="alt-binaries-linux" type="radio">
<label for="rc-subscription-2">alt.binaries.linux</label>
<input name="rg-subscription" id="rc-subscription-3" value="alt-binaries-games" type="radio">
<label for="rc-subscription-3">alt.binaries.games</label>
</fieldset>
<button id="injectButton" class="ui-btn ui-btn-inline ui-mini ui-corner-all">Inject "Subscribe" Button</button>
</div>
</div>
</body>
</html>
I have a button that add a new bootstrap date-picker input field when the add button is clicked.
The problem I am facing is when the new bootstrap date-picker input field is added, it doesn't allow me to select date and the size of those newly added bootstrap date-picker input field isn't the same as the first input field
$(document).ready(function() {
var counter = 2;
$("#addBtn").click(function() {
var newRowDiv = $(document.createElement('div')).attr("class", 'row');
var newStartDateLabel = $(document.createElement('div')).attr("class", 'col-md-2');
var newStartDateInput = $(document.createElement('div')).attr("class", 'col-md-2', 'input-group', 'input-daterange');
newStartDateLabel.appendTo(newRowDiv);
newStartDateLabel.after().html("Start Date " + counter);
newStartDateInput.insertAfter(newStartDateLabel).html('<input "id="startDate"' + counter + 'name="startDate' + counter + 'type="text class="form-control" >');
newRowDiv.appendTo(".container");
counter++;
});
});
<body>
<form id="form" name="form" action="DateServlet" method="POST">
<div class="container">
<div class="row">
<div class="col-md-2">
Start Date 1
</div>
<div class="col-md-2 input-group input-daterange">
<input id="startDate1" name="startDate1" type="text" class="form-control">
</div>
</div>
</div>
<button id="addBtn" type="button" class="btn btn-default">Add</button>
</form>
<script type="text/javascript">
$('.input-daterange input').each(function() {
$(this).datepicker("clearDates");
});
</script>
</body>
Please look at below code. Specifically made changes at:
var newStartDateInput = $(document.createElement('div'))
.attr("class", 'col-md-2 input-group input-daterange');
AND
var dateText = $('<input id="startDate' + counter + '" name="startDate' + counter + '" type="text" class="form-control" >');
newStartDateInput.insertAfter(newStartDateLabel).html(dateText);
dateText.datepicker(); //initializing the datepicker on newly added text field
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="js/addInput.js" charset="UTF-8"></script>
<script>
$(document)
.ready(
function() {
var counter = 2;
$("#addBtn")
.click(
function() {
var newRowDiv = $(
document
.createElement('div'))
.attr("class", 'row');
var newStartDateLabel = $(
document
.createElement('div'))
.attr("class", 'col-md-2');
var newStartDateInput = $(
document
.createElement('div'))
.attr("class", 'col-md-2 input-group input-daterange');
newStartDateLabel
.appendTo(newRowDiv);
newStartDateLabel.after().html(
"Start Date " + counter);
var dateText = $('<input id="startDate' + counter + '" name="startDate' + counter + '" type="text" class="form-control" >');
newStartDateInput
.insertAfter(
newStartDateLabel)
.html(dateText);
dateText.datepicker(); //initializing the datepicker on newly added text field
newRowDiv.appendTo(".container");
counter++;
});
});
</script>
</head>
<body>
<form id="form" name="form" action="DateServlet" method="POST">
<div class="container">
<div class="row">
<div class="col-md-2">
Start Date 1
</div>
<div class="col-md-2 input-group input-daterange">
<input id="startDate1" name="startDate1" type="text" class="form-control">
</div>
</div>
</div>
<button id="addBtn" type="button" class="btn btn-default">Add</button>
</form>
<script type="text/javascript">
$('.input-daterange input').each(function() {
$(this).datepicker("clearDates");
});
</script>
</body>
</html>