I am developing the sample apps using the jquerymobile alpha 4.1. In my design, I have to get the value from textbox while enduser change the value of control.
So I am using the following code.
HTML :
<input type="text" id="username" > </input>
JS :
$("#username").live("change" , function() {
alert("hai"+ $("username").val());
});
It is working fine in the iphone-safari browser, Android , blackberrry native browsers.
But It does not work in the Operamobile- 11 and Operamobile 10. ( It could not detect the this events.)
Please share your suggestion. Shall I use any other event for avoiding this error ?
Thanks.
Live Example
Try this:
$("#username").live("change" , function() {
alert("hai "+ $("#username").val());
});
instead of this:
$("username").live("change" , function() {
alert("hai"+ $("username").val());
});
Alternative: ( Without the live() ): Example
$("#username").change(function() {
alert("hai "+ $("#username").val());
});
Related
I am trying to use materialize tool tip for the first time using the example shown on its website. However, the tool tip is not showing up. What am I missing? Here is the link to the fiddle : https://jsfiddle.net/L013uvms/5/
<textarea id="causative_micro_organisms" class="materialize-textarea tooltipped" data-position="top" data-tooltip="I am a tooltip" required="" aria-required="true"></textarea>
<label for="causative_micro_organisms">What are the LIKELY causative Micro-organisms?</label>
I have also initialized the tool-tip
$(document).ready(function() {
$('select').formSelect();
$('.tooltipped').tooltip();
})
as docs of materialize website add these before document ready
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems, options);
});
related link https://materializecss.com/tooltips.html
In my project,jquery-ui-1.10.3.custom.min.js is used to create UIdatePicker. In HTML page , UIDatePicker is defined as below :
<input id='input_birthdate' class='inputText input big,ui-datepicker-title-custom' type="text" maxlength="64" tabindex="7" style ="position: relative; z-index: 1000;" />
If I inspect this particuler field in HTML page in Firefox browser , I can see the IDs and Classes declared in jquery-ui-1.10.3.custom.min.js are being used.(I don't know how jquery-ui-1.10.3.custom.min.js is used on input_birthdate).
If I am declaring as below in some JavaScript page , it works both in laptop browser and ipad but Its not allowing to select any year or month as div is getting closed.
$("#input_birthdate").focusout(function() {
$("#input_birthdate").datepicker("hide");
});
I noticed that datepicker is made of several components,so I thought of applying focusout on parent div as below:
$('#ui-datepicker-div').focusout(function(){
$('#ui-datepicker-div').datepicker("hide");
});
But now its not working on IPAD.
Kindly suggest where I am going wrong or any other alternative to fix this.
Please check the following function should work on iPad
$("#input_birthdate").blur(function()
{
$("#input_birthdate").datepicker("hide");
});
I'm looking for a way to prevent select2's search-input being automatically focussed when the select2-dropdown is opened. I know this is select2's intended default behavior - and while this is fine for desktop clients, I need to prevent this behavior for the iPad where it triggers the iPads software keyboard, which is not what we want as a default.
I've searched for an option to do so with no luck.
http://jsfiddle.net/KwW5n/2/ reflects our setup - we're using a simple -element as a base for our select2-functionality:
$('#source').select2();
This worked for me on select2 v4:
// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e) {
$('.select2-search input').prop('focus',false);
});
credit goes to this github comment
Sometimes select2 "steals" focus from other elements. After messing around for quite a bit, I just used this solution below.
At the very end of the event handler for the YourSelect2.on('change', function(){
setTimeout(firstInputFocus, 300);
}
function firstInputFocus() {
$("YourSelect2").focus();
}
By setting this slight delay it works. I am able to change focus away from the dropdown. Following the "change" event for select2, it does something internal to the select2 code which prevents you from IMMEDIATELY changing focus. Inserting this slight delay did the trick for me at any rate.
Ok, I am not sure if changing the focus is possible unless you change the select2 script itself (I could be wrong about this though). As a workaround what you could do is hide the search box by setting minimumResultsForSearch property to a negative value.
<select id="test">
<option>1</option>
<option>2</option>
</select>
And then:
$(document).ready(function() {
$('#test').select2({
minimumResultsForSearch: -1
});
});
Fiddle
None of the solutions posted here worked for me so I did this work around:
This will make the search input readonly when opened (prevents keyboard on mobile), then when you click the input it removes readonly and opens keyboard.
$('#myselectbox').select2({placeholder: "Select Something"}).on('select2:open', function(e){
$('.select2-search input').attr('readonly',true);
});
$('body').on('click', '.select2-search input', function(){
$(this).attr('readonly',false);
});
The only 'solution' I found is to remove .select2-input and .select2-focusser right after creation of the dropdown. This only works fine when you don't need the input field for searching, e.g. when the list is short enough.
Removing only .select2-focusser at least prevents the keyboard from popping up when an option was selected.
If you want to disable the searchbox and also the auto focus as a text input, e.g. preventing ios browsers to scroll-in the keyboard, use this code:
$('select').select2({});
// will remove the searchbox and focus initially
$(".select2-search, .select2-focusser").remove();
// will remove the searchbox and focus on selection/close
$('select').on('select2:closing', function (e) {
$(".select2-search, .select2-focusser").remove();
});
Although #Choma's answer is fine, it will alter the select2 default behavior on both desktop and mobile devices.
I had to find a solution for a responsive website: prevent the auto-focus of the search input only on mobile devices, and keep the default behaviour on desktops.
In order to detect the mobile devices, I've used Modernizr library, which can test for the existence of Touch Events in the browser.
We can use Modernizr.touch on Modenizr v2, which will return true if touch events are supported, or false otherwise.
So we can modify #Choma's answer like this:
$('select').on('select2:open', function() {
if (Modernizr.touch) {
$('.select2-search__field').prop('focus', false);
}
});
Demo:
https://codepen.io/andreivictor/full/QmKxOw/
Tested on:
Desktop: IE 11, Chrome, Firefox, Opera, Safari
Android 4.2.2
Android 5.0.1 (Samsung Galaxy S4)
Android 6.0.1 (Samsung Galaxy S7 Edge)
iOS 11.2.5 (iPhone 8)
iOS 10.3.2 (iPhone 6 Plus)
iOS 10.3.2 (iPad Mini 3)
I got JQuery's "too much recursion" error in the console when using Choma's solution.
The following worked for me for v4:
// keep search input available, but avoid autofocus and thus mobile
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e) {
$('#modal .select2-search input').attr('readonly',true);
$('#modal .select2-search input').click(function(ev){
$('#modal .select2-search input').attr('readonly',false);
});
});
As you can tell this select2 field is on a modal with the id modal and the select2 field itself has an id of subject. Of course change the selector to what's appropriate for your own code.
It basically adds a readonly attribute to the input when the select2 field opens preventing a mobile keyboard from appearing, and then removes it when the search field is clicked/pressed on allowing the keyboard to appear only then.
Following trick worked for me. You can disable input search field of select2 element :
$('select').on('select2:opening', function() {
$('.select2-search__field').attr("autocomplete", "new-password");
});
setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);
maybe someone need~
I've tried this and it works~
$('#selectID').on('select2:opening', function (e) {
e.preventDefault();
});
The solution worked perfectly for me. tested on mobile
// prevent auto-focus on select2 search input
$('select').on('select2:opening', function(e) {
$('.select2-search input').prop('focus', 1);
});
I have inherited some code using the jquerymobile datebox. The code so far concentrates on making the application look correct. I need to make it work so that when a date is selected, the server is called with the date and a new page loaded. Most examples just change the date in the page.
The code so far is :-
$('#daycal').live('click', function() {
$('#catchdate').datebox('open');
});
$( "#catchdate" ).bind( "change", function(event, ui) {
$("#test1").val("xyz");
});
And
<div data-role="fieldcontain">
<label for="catchdate">Some Date</label>
<input name="catchdate" type="date" data-role="datebox" id="catchdate" data-options='{"mode":"calbox", "useNewStyle":true, "theme":true, "themeHeader":"f", "themeDateHigh":"f", "themeDatePick":"e", "themeDate":"f", "centerHoriz":true}' />
<input id="test1" type="text"/> <!-- Later changed to a function call -->
</div>
In my simple test I expected the text in the input to change when a date was selected.
I have seen an example using the bind to change event, but I cannot get it to work. In the example I was just changing the value in an input element, later this will be changed to a function call.
I also saw somewhere in my search for an answer, a comment that 'live' was deprecated.
Finally, I thought I could use closeCallback ('Callbacks ('openCallback' and 'closeCallback') are simple to work with...') but could not find any examples of how it should be used.
What changes do I need to make to obtain the functionality I need?
You could try using the close function of the date box, so that when user changes the date selection he makes and closes the date box you can call the server method with the selected date:
$('#DateSelectorId').bind('datebox', function (e, passed) {
if ( passed.method === 'close' ) {
// selected date
var date = $('#DateSelectorId').val();
// make your service method and change page to another page
}
});
think this can fix it
$('#catchdate').on('datebox', function(e, p) {
if ( p.method === 'close' ) {
alert('DO SOMETHING');
}
});
u can go and test it on Fiddle
**i think u need some validation check for input box empty or not
I have a strange error occurring with the dialog box, I'm loading the dialog box fine, but whenever I assign a button to it, although it'll display the button, it won't display the name of the button. Here is my code that launches the dialog successfully...
jQuery('#'+message_div_id).dialog({
modal: ui_popup_modal
, width: ui_popup_width
, height: ui_popup_height
, resizable: false
, draggable: false
, buttons: {
"Ok": function() {
jQuery( this ).dialog( "close" );
}
}
});
This is the resulting html from bugzilla after the popup has loaded...
< button type="button" text="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">< span class="ui-button-text">< /span>< /button>
The span class is the area that should contain the text, but as you can see, it is not. Any ideas?
This inspired me a lot, but it didn't work exactly for me, I made the following modifications. I think this works better.
$('div.ui-dialog-buttonset button.ui-button span.ui-button-text').each(function() {
$(this).html($(this).parent().attr('text'));
});
This works for me with jQuery UI v1.8.22 CDN (tested):
$('div.ui-dialog button.ui-button').each(function() {
$(this).children('.ui-button-text').html($(this).attr('text'));
});
I think there is something missing. It would be nice to see it working. I tried creating a test and I get no text, but the css is missing. If I do this it works:
<button type="button" text="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Text Here</span></button>
Sorry, new to SO.
Anyhow, as this piece of code was just part of a bigger piece of functionality and as I couldn't resolve the issue via the example code on the jQueryUI site, I ended up resolving with this :
var button1_text = '';
(ui_popup_but1 != '') ? button1_text = ui_popup_but1 : button1_text = 'OK';
jQuery('button[text="button1"] span').html(button1_text);
I had a similar problem. Finally solved it by upgrading the version of jQuery used from 1.3.2 up to current (1.7.1) at the time. I just noticed that the version of jQuery UI I used is not current (1.8.11 vs current of 1.8.18). I will try downgrading jQuery back and upgrading jQuery UI to current and see what happens.
EDIT: jQuery UI 1.8.18 fixed the issue for me in using both jQuery 1.3.2 and 1.7.1, so it looks like 1.8.11 had a defect that caused it to be not compatible with 1.3.2 (I'm assuming it was supposed to be since .18 is, I would think they wouldn't have changed compatibility between such a small version change).
Had the same issue and ended up patching jquery-ui.js
--- jquery-ui-1.8.23.js 2012-09-14 11:18:34.000000000 +-1000
+++ jquery-ui-1.8.23.js 2012-09-14 11:31:07.000000000 +-1000
## -9088,13 +9088,16 ##
.appendTo(uiButtonSet);
// can't use .attr( props, true ) with jQuery 1.3.2.
$.each( props, function( key, value ) {
if ( key === "click" ) {
return;
}
- if ( key in button ) {
+ if ( key == "text" ) {
+ button.html( value );
+ }
+ else if ( key in button ) {
button[ key ]( value );
} else {
button.attr( key, value );
}
});
if ($.fn.button) {
I had the same problem, but the reason why it was without text was that i had dependency issues. To put it short, i had 2 jquery ui js included in my final html file. When i left only 1 version of jquery ui everything seem to work as expected.