There is a jquery-ui dialog that needs to be opened on a page load. The relevant code is in two files.
**FileA**
$(function()
{
//some initialization code here
$("#date-range-dialog").dialog({
modal: true,
autoOpen: false,
buttons:
{
"Ok": function()
{
//some code here
}
}
});
});
**FileB**
$(function()
{
//some code
$('#date-range-dialog').dialog('open');
});
This works fine with Chrome and Firefox. But with IE9, the open dialog event/statement is causing the browser to switch the display to the Compatibility View.
The mark-up for the dialog is:
<div id="date-range-dialog" title="Date Range">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">From</label>
<div class="controls">
<input type="text" id="dt-from" class="input-small" />
</div>
</div>
<div class="control-group">
<label class="control-label">To</label>
<div class="controls">
<input type="text" id="dt-to" class="input-small" />
</div>
</div>
</div>
</div>
The application is using Twitter Bootstrap 2.0.4, jQuery 1.8.3, jQuery UI 1.9.2.
There is no manual CSS at the moment.
A strange observation is that if the statement to open the dialog is commented out, it works in IE9 too. If there is button that calls this statement, everything is fine:
$(".date-range").click(function()
{
$("#date-range-dialog").dialog("open");
});
So, the problem occurs only when the dialog is trying to be opened directly within $(function(){});
I have tried placing the dialog open statement in the $(window).load() event too. It still fails in IE9.
Did you try putting the jQuery from file B into a $(document).ready({}); clause? I'd guess that perhaps IE is running the code from file B before it has done its initialisation in file A. That would explain why it works in your click function but not your file B function.
Related
I am very new to HTML,CSS and need some help. I am trying to put my clear icon inside the input tag across all browser. I have used bootstrap glyphicon-remove class. Below is my HTML tag
<input class="abc" type="text" maxlength="6">
<span class = " glyphicon glyphicon-remove " ng-show="showClearItem" ng-Click = "clearStuff()" ></span>
I can fix this using CSS but when i try this with different browser, clear button goes away.
well, it was MESS, complete mess, working on all three browsers. i tried lots of scenarios but nothing worked for me, either they are working on chrome and IE or on Firefox alone BUT here is the trick, we came up with a simple jQuery plugin called jquery-search- plugin
here is the snippet which will work for all the browsers
$(function() {
// init plugin (with callback)
$('.clearable').clearSearch({ callback: function() { console.log("cleared"); } } );
// update value
$('.clearable').val('').change();
// change width
$('.clearable').width('200px').change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://static1.kontaktkarte.de/js/jquery.clearsearch-1.0.4.js"></script>
<input class="clearable" type="text" placeholder="search">
might help you
When I Press Login button one popup is shown.
In that popup I need default autofocus on Login Input field. Can I achieve that with HTML5/CSS only?
jsfiddle
<div class="main">
<div class="panel"> Log In
</div>
</div>
<!-- popup form #1 -->
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" autofocus />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" /> <a class="close" href="#close"></a>
</div>
autofocus is defined to work reliably only on page load. It is not really suited for situations where you are swapping, or opening, or unhiding DOM elements such as in a single-page application framework. You are likely to have to resort to handling the autofocusing yourself.
The Answer is not really effectively (with certainty).
I would suggest Javascript, as UnskilledFreak mentioned, on every click the focus is set
...
Log In
...
<!-- not javascript library needed -->
<!-- tested on Win7 and Chrome 37+ -->
Here is your fiddle updated: http://jsfiddle.net/6f9ge64f/2/
You should probably also check key-input for people that don't use a mouse.
Update:
it's a bit hacky, but you could try
...
Log In
...
<input type="text" id="login" value="" autofocus />
...
<a class="close" href="PATH-TO-FILE?c=2#close"></a>
...
<!-- tested with on Win7 and Chrome 37+ -->
where the PATH-TO-FILE is for example http://www.test.com/default.html (absolute or relative), and the ?c=1 and ?c=2 is any parameter, just to provoke a reload. like this you could use autofocus.
THIS WONT WORK IN JSFIDDLE since the HTML is embedded, but it works in the "real-world".
Update 2:
...
Log In
<!-- tested with on Win7 and Chrome 37+ -->
...
Here is the fiddle http://jsfiddle.net/6f9ge64f/6/
If you are using jQuery do something like this:
$( "#login-button" ).click(function() {
$( "#input" ).focus();
});
Autofocus attribute moves the focus to the specified input on page load. In this case #input is present in DOM but hidden; on clicking login button, the focus is removed.
Should probably use .focus() on the login click event handler
<input type="text" id="login" value="" />
<input type="text" id="login" value="" autofocus />
<input type="text" id="login" value="" />
http://jsfiddle.net/6f9ge64f/4/
autofocus works only on standard pageload, If you are using javascript/angular/react/jquery to modify elements after page load the active element changes, and autofocus wont work.
What I do is I wait for all the dom elements to load and process then set the active element
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#input-field").focus();
}, 1500);
});
</script>
I'm using Twitter's typeahead frontend library for autocompletion. My configs use remote calls to the server. The autocompletion itself works fine, however the form tag refuses to actually input the content (after pressing enter) in the input tag now. I suspect it's because typeahead forces a tag around the . Here is my code:
<form class="navbar-search form-search pull-left" action="javascript:query_main()" method="get">
<div class="main_dropdown navbar-search">
<input class="typeahead" id="query_main" type="text">
</div>
</form>
Below is when the code worked (without typeahead)
<form class="navbar-search form-search pull-left" action="javascript:query_main()" method="get">
<input type="text" id="query_main" class="main_dropdown typeahead">
</form>
Any ideas? Thanks.
You should provide at least one <input type="submit" /> in the form to expect the form to submit on pressing enter.
If you don't want the button to be shown, use CSS to hide it then.
Try putting a data-provide="typeahead" attribute in the input, like in the official doc example: http://getbootstrap.com/2.3.2/javascript.html#typeahead
If you want to do something more complicated with the selected item, you could use the updater option in bootstrap's typeahead.
For instance, in your case, you would put something like this (in jQuery):
$('#query_main').typeahead({
// Some options
updater: function(item) {
// Do something with item
return item;
},
// Other options
});
I am novice to jQuery Mobile and now i am working with form element, I have write following code:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<input type="text" placeholder="Enter some text"/>
<input type="password" placeholder="Enter Password"/>
<input type="button" value="Login" />
</div>
</div>
but design not properly rendered in above two input type.i don't know what is issue .
below Picture shows ouput of above code ,in picture it is clearly displayed rendered view.
#Dima Kuzmich I got my answer.
Actually I was using old version of jquery mobile css 1.2.0 of version, that's why it will render above image design.
but when i used latest version of jquery mobile css 1.3.1 then my issue is solved perfectly fine.
Thank you #Dima Kulmich.
I’m using a jQuery mobile slider in a JQM dialog but it’s not being rendered properly, it’s most noticeable in safari and chrome. It renders fine in a standard JQM page.
<div data-role="dialog" id="Dialog1">
<div data-role="header"> <h1> Dialog</h1> </div>
<div data-role="content">
<label for="slider-2">Input slider:</label>
<input type="range" name="slider" id="slider-2"
value="25" min="0" max="100" />
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>
Here’s a link to a jsfiddle illustrating the issue, if you click the “open dialog” button the slider isn’t rendered correctly but if you click the “open as page” it is.
I’ve tried calling .slider() and .slider(‘refresh’) in the pageshow event but it doesn’t seem to make a difference.
There is an easier way to fix that:
<input type="number" data-type="range" name="slider" id="slider-0" value="0" min="0" max="100">
Its an number type but with an range data-type. Figured it out by playing around with the code.
Works fine so far!
Anyway it's fixed in the latest version 1.0.1!
OK I sort of solved the problem, though the solution is not to pretty and is a bit of a hack.
I realized that the problem is only when the slider is on a dialog, so what I’m doing is setting the data-role of the page I want as a dialog to page, then in my JavaScript I call the dialog() method on that page to initialize it as a dialog widget. The problem is that when you change to the page next the x in the corner (close button) doesn’t get rendered, so I’m manually creating the styles and markup for it.
Here’s the code I’m using
$('#progWiz').dialog().find('a:first')
.addClass('ui-btn-left ui-btn ui-btn-up-a' +
' ui-btn-icon-notext ui-btn-corner-all ui-shadow')
.attr({ 'title': 'close', 'data-theme': 'a' })
.empty()
.append('<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">' +
' <span class="ui-btn-text">Close</span>' +
'<span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span>');
If someone has a better solution I'd be happy to hear, in the meantime I'll just do this and hopefully this get's fixed in the next release of JQM.
I also seek solution. I have two Sliders in dialog.
Code below is not solution but workaround I did for my problem. Hope it helps someone.
Problem is in Android Phones it does not create input boxes on left showing value of slider.
I handled that by hiding the original input type slide and adding a text box above the slider.
On slide change event I change the Text Box Value. And as I dont want Keyboard operations , I have disabled the text box.
Code Below.
<script>
$("#slider-0").change(function(event, ui) {
$('#thicknessBox').val($(this).val());
});
</script>
<label for="slider-1">Thickness:</label>
<input type="text" id="thicknessBox" name="slider-1" disabled="disabled" ></input>
<input data-role="none" style="display:none;" type="range"
id="slider-0" value="1" min="1" max="10" />
Im not proud of it but atleast now it looks and behaves like slider outside the dialog.
Looking forward to better solution.