HTML5/JS How to show DatePicker onload (no libraries ) - javascript

I try to show the datepicker popup (input type="date") immediately after the HTML content has loaded. But in my example below, I get only the alert-message. Clicking the ok-button afterwards shows the alert-message and the datepicker. Is this a timing problem? How can I solve this?
Could only test this with Chrome on Android so far. Finally I want to use this with the Android-App Tasker. There you can show scenes (Dialogs) with HTML content. I would prefer a solution without libraries like jquery.
<!DOCTYPE html>
<html>
<body onload="clickPicker()">
<p>Select date:</p>
<input type="date" id="picker">
<button id="ok" onclick="clickPicker()">OK</button>
<script>
function clickPicker()
{
alert("clickPicker");
document.getElementById("picker").click();
}
</script>
</body>
</html>

Related

something like "http://test:<a b>" is not getting displayed in text area in IE

Anything given inside a tag is not getting displayed in a particular text area in IE.
example : http://test:
Do you mean you wrote exactly http://test: and it is not displaying the text inside the tag? On my side it is displaying in IE 11.
Sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function add_txt()
{
document.getElementById("t_area").value = "http://test:<a b>";
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="t_area">
</textarea>
<input type="button" value="add text" onclick="add_txt()">
</body>
</html>
Output:
It was recongnized as text so it can be displayed. If you try to add HTML inside textarea then it will not going to display. this is the behavior with all the browsers not just with IE.
So if you try to add a text it will surely display it.
You can try to make a test with above code. If your issue still persist then try to provide a sample code to produce the issue. I will try to make a test with it on my side.

focus() won't work - query

I have some input field, and I call this in my js file
$(document).ready(function () {$('#input_id').focus(); });
but it doesn't launch. Even, when I launch it in my chrome console, I get no focus. How can it be
This is working sample for a text input, just match with your page code and see what you are missing as compared to this.
I assume that you have referred jquery js already and any other jquery functions work well in your page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function ()
{
$('#input_id').focus();
});
</script>
</head>
<body>
<input type="text" id="input_id"/>
</body>
</html>
In any case please make sure that there is no js error in your page as
$('#input_id').focus(); must work fine individually, so only thing looks wrong could be reference to jquery, else some js error before code reaches to .focus() call on input_id.
Also you can validate if on your page focus for the input working fine, for this keep $('#input_id').focus(); in a script tag just before your body page ends/closes,
to make sure input control, jquery reference are placed correctly and page has no js errors, if this way too focus doesn't work then something is wrong with any of these 3.

broke my code into fiddle not appearing

i am planing to make my text box editable...
so i removed the id from the disabled code...
even i tested in fiddle its not working...
providing my cod below....
i am providing part of my code in fiddle i am not able to see the text box...
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
You have to use input instead of form:input, browser can render standard html tags and you have to provide standard html.
Live Demo
Change
<input id="behvrName" type="text" cssClass="icwText" path="" />
To
<input id="behvrName" type="text" cssClass="icwText" path="" />
cssClass and are also not standard attributes and you need to change them if you want them to be interpreted and act accordingly by browser. cssClass would be class.
spring:message and form:input are not plain HTML tags; rather, they are pseudo-tags processed by your server-side framework. If you want to use JSFiddle, you must use plain HTML.
Furthermore, your input's id is behvrName, but you're not selecting that. If you want to disable that input, use an appropriate selector $('#behvrName') in the JavaScript portion.

Contents inserted by Javascript is not catching up the styles

Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.

Auto Focus in Google Chrome extension

I made a simple Chrome extension - search with a form.
When I open the extension, there is no default focus on form, but it requires additional click.
Focus is suppose to happen on popup.html form.
Now JavaScript .focus() method didn't work, Is there any other way to set default focus for Chrome extensions?
HTML:
<input type="text" id="mydata" />
JS:
document.getElementById('mydata').focus();
the latest chrome has supported tabindex attribute. So you can use
<input type="text" id="mydata" tabindex="1" />
to make it work without any js codes. just FYI.
Chrome supports autofocus which doesn't require any JavaScript.
<input type="text" id="mydata" autofocus />
The issue with chrome extensions is that the entire popup.html document has no focus by default. Therefore it's simply not enough to set the focus on an element. You first need to reload the page.
Just put the following code into the page header:
<script type="text/javascript">
function Init () {
if (document.hasFocus)
setInterval ("checkFocus ()", 300);
}
function checkFocus () {
if (!document.hasFocus ()) {
document.location.reload();
}
}
document.getElementById('mydata').focus();
</script>
Then call the code in your body tag:
<body onload="Init ();">
That's it.
Please keep in mind that this solution is just a work-around. May future chrome versions fix the focus issue in extensions to make this workaround superfluous.
Try something like this:
<html>
<head>
<script type="text/javascript">
function setFocus()
{
document.getElementById("target").focus();
}
</script>
</head>
<body onload="setFocus()">
<input type="text" id="target" name="target" size="25" value="" />
</body>
</html>
it works for me.
function setFocus(loc) {
window.open(loc, 'popup1', 'height=655,width=710,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,minimizable=no').close();
window.open(loc, 'popup1', 'height=655,width=710,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,minimizable=no').status.fixed();
}
Then:
lnkSongTitle.Attributes.Add("onclick", "javascript:setFocus('url')");
or in html onClick call SetFocus() function

Categories