javascript class not working when written to div using getElementById - javascript

I have been using a datepicker js class known as tcal. After you link to the class on your server, you can call it with one line of code.
in header
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
html
Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>
It has been working fine.
However, to streamline a page, I am now trying to take it out of the html and display it in a div only when a user clicks on it using getElementById. while I can display the input box ok, when written to the browser this way, the class no longer seems to work.
js
function pickDate() {
document.getElementById('show').innerHTML = 'Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>';
}
html
Pick Date<div id="show"></div>
When user clicks, input box appears. However, datepicker calendar does not pop up when you click in tox. Does anyone know why tcal is not working when written to browser this way?
Thanks for any suggestions.

the reason for this happening is that you are adding input box in the dom later your datepicker code is initialized just reinitialize datepicker code
as i see your library may don't have a code to initialize is seperately you can do hide and show instead of adding into the dom later, if the text box will be available in the starting of page ready it will be initialized so use the following code
html -
<div id="something" style="display:none;">Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=></div>
js -
document.getElementById('something').style.display="block";

Related

Hide an html element when it loses focus using JavaScript

I've made a datepicker for a custom form and I want to hide it when the input lost the focus and the next focused element is not the datepicker (when you focus another input for example). The problem is that the blur event on the input happens before focus on the datepicker. This is the regular behaviour of the JS events. But I want to close the datepicker only if the input loses the focus and the datepicker is not focused then. Is there any way to achieve this without blocking the user interface using setTimeout() or something similar?
I'm not asking for a code solution, just the process to follow or any alternative. Thanks.
This is a screenshot of the datepicker and the input:
And this is the html code just to give an idea on what's going on (It has Angular bindings and template references mixed):
<div class="col-lg-2 form-group">
<label for="date">Fecha</label>
<input type="text"
class="form-control datepicker-input"
id="date"
placeholder="Fecha"
readonly="true"
formControlName="date"
#datepickerInput>
<app-datepicker [datepickerInput]="datepickerInput"
(pickDate)="onPickDate($event)"></app-datepicker>
</div>
I would treat the date picker as a popup:
Add a full screen transparent overlay behind the calendar
When the user clicks that overlay (not on the calendar itself that is), close the calendar
While the calendar is open, respond to specific key events like [Esc] to close the calendar
Hope that helps
I'm not real sure to understand your need... Since what you wish to do sounds like the normal behavior of bootstrap's datepicker. But you mentioned a custom form... So I don't know.
Now the issue is about a delay between blur the input and focus the datepicker dropdown.
Here, I would talk about mouseup on the dropdown, since focus is more about inputs than divs. And it doesn't work using click, since that event is used by datepicker and there must be a return false somewhere because it just doesn't fire on a datepicker dropdown. Anyway... Your setTimeout idea is something simple to achieve.
The trick:
Set a timeout on input blur to hide the dropdown.
On mouseup on the dropdown, clear that timeout.
Normally, if the user is focussing the input and clicks on the opened dropdown, the delay in between is around 100ms. Using that value results in fail once on 3~4 times. So let's use 150ms.
Here is the code:
$("#date").datepicker();
var dp_timeout;
$(".datepicker-input").on("blur",function(){
dp_timeout = setTimeout(function(){
$(".datepicker").hide();
console.log("Timeout executed");
},150);
});
$(document).on("mouseup",".datepicker-dropdown",function(){
clearTimeout(dp_timeout);
console.log("Timeout canceled");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>
<div class="col-lg-2 form-group">
<label for="date">Fecha</label>
<input type="text"
class="form-control datepicker-input"
id="date"
placeholder="Fecha"
readonly="true"
formControlName="date"
#datepickerInput>
<app-datepicker [datepickerInput]="datepickerInput"
(pickDate)="onPickDate($event)"></app-datepicker>
</div>

get title of items selected using TAB button, on a web page

I have a web application with no images in it. It is for visually impaired people. It is navigated using TAB button. How can I get the title/text of the selected web page like button,menu,etc. By selected I mean using TAB button, not mouse click. Using Javascript or any other language.
Use .focusin() method of jQuery library. Try to navigate on the form inputs from the snippet below using TAB button.
$(document).focusin(function(e) {
console.log(e.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" name="input1"/>
<input type="text" name="input2"/>
<input type="text" name="input3"/>
</form>
I used name property of the event target in my example, but you could get any property value. For example
$(document).focusin(function(e) {
console.log($(e.target).attr("type"));
});
It is possible to get id and another info by same way.

Binding a jAlert popup content to html content

I'm attempting to use jAlert to show a popup dialog with an input box. When clicking "OK" I want to grab the value from this input box to send to the server. I'm using jQuery to pull the content off a div which includes the input field. Problem is that when I use jQuery to try and get the contents of that input field, it doesn't work - it comes back as empty.
HTML as follows:
<div id="test">
<input type="text" id="def" />
</div>
JS as follows:
$.jAlert({ 'content' : $("#test").html()});
...and to try and access using jQuery...
$("#def").val();
I can get around it by force updating the field using a keyup listener, but it seems really clunky...
<input type="text" id="def" onkeyup="$('#def').val($(this).val())" />
After doing this I can access the content of the 'def' field. Is there a more elegant solution?

Datepicker some problems with opening

I use in my web app datepicker jquery but it I have some problem:
I have two tabs in one of them I have two menu, were I use datepicker in each other of menu.
And second tab has one menu and there I also use datepicker.
When I load my web page, and try to set some date with datepicker it is work (datepicker was opened). But after that I go to the second menu in this tab or another tab and try to set some date in my input date, but datepicker not opens. I also use ajax in this page.
Whats wrong? thx!
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text" name="dateTime" id="dateTime" placeholder="yyyy-mm-dd" required />
<script>
$(function() {
$("#dateTime").datepicker({ dateFormat: "yy-mm-dd" , changeMonth: true });
});
</script>
The problem is the selector
$("#dateTime")
ID in a page is supposed to be unique
Use classes instead.
Because you are using a ID selector it tried to find the first instance of the element. Once it finds it, stops searching again. So it will never be applied to the element in the other tab..
Change
<input type="text" name="dateTime" id="dateTime"
to
<input type="text" name="dateTime" class="dateTime"
And then change the selector to
$(".dateTime")

Tab order issue in IE with initial Javascript select of field in form

I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.
Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>

Categories

Resources