JQuery UI autocomplete NOT WORKING with Chrome on mac OSX - javascript

That's really really weird.
In the web app I did (look here), thanks to cloudant guys for free hosting, I finally implemented Jquery UI Autocomplete widget.
I'm using backbone as a framework.
What is really really weird is that IT WORKS WITH EVERYTHING (even IE9!) except CHROME on apple OS.
What I have is that no dropdown list appears when clicking on the text input field.
Chrome on a different OS wokrs (e.g. on win7).
This is the code I use to implement the widget, I report her ejust for the sake of completeness, even if I suppose that that the problem I have DOES NOT depend on the code.
$(select).on("click",function(){
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
---- UPDATE ------
I made a comparison btw chrome running on ubuntu and chrome running on macosx.
The result is that under ubuntu, the DOM element gets created (before closing the body tag), while under macosx the DOM element IS NOT created at all.
It looks like under macosx the onclick event is not catched.

I found a really helpful post here
Why does select box on mac chrome doesn't respond to click event?
Basically, it is a bug of chrome under OSX.
As #JamWaffles explains in its answer,"IIRC, the click event works for s in Firefox, however does not work in Chrome. The best, most supported event is change." and it turns out to be completely true!!
So the working code for my webapp is:
$(select).change(function(){//**************CHANGE AND NOT ON('CLICK', ... *******
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
Hope this answer is useful for somebody else.

Related

Javascript not working on mobile but works on desktop

This works on a desktop browser, but not on my iOS mobile phone. I tried adding 'touchstart' and looked at this post's solution to check how other's got it to work, but it still isn't working. Any suggestions as to other options? I also tried adding e.preventDefault() - and added e to function(), but that didn't work as well.
I have tried:
$('body').on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Edit:
It appears there may be something else going on, I changed the code to be as general as possible and it is not firing the event on iOS, but working in my chrome emulator:
$(document).on('click touchstart', 'body', function() {
alert('hi');
});
Additional update:
I have added the following code to my script.js file:
$('body').css('display', 'none');
As expected, the screen goes blank on my desktop browser for both local and on heroku, but when I test on mobile, the screen is not blank. It looks like js isn't working properly.
Images attached:
Answer: the reason it wasn't working on iOS Safari is because in my js page I was using ES6, specifically 'let' which is [not supported currently][1]. Changed to ES5 and the issue disappeared.
$('body').on('click', '.dashboard_leftNav_category a', function() {
var link = $(this).attr('showSection'); //changed from let link
var show = $('[section="'+link+'"]');
$('[section]').hide();
$('body').find(show).fadeIn();
$('html,body').scrollTop(0);
});
You have two options:
Reset your mobile browser's history because your browser's cache reads the old source.
Change the name of your source file in the desktop and refresh your page again.
This should help you. Instead of binding it to the body element, bind the event to the document.
$(document).on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Also try changing adding the following style to myContainer class
cursor : pointer;
Put e.preventDefault(); inside your javascript function.

How to trigger focus on input with monaca?

I am using Onsen UI and Monaca to build a mobile app for iOS and Android. I would like to set focus on the #search-cities input field, once the #search-city page is visible.
I've tried:
$(document).on('pageinit', '#search-city', function() {
console.log('pageinit: #search-city');
// doesn't work!
$('#search-cities').focus();
});
I am testing it on iOS and focus() doesn't set the search field on focus. Is there any way to do this with the onsen/monaca framework?
I know this question was asked few months ago,
this is still posted in case someone still looking for solution.
In case you keep failing to autofocus input fields on iOS device.
Cause:
Cordova iOS Configuration KeyboardDisplayRequiresUserAction was set as true (default to true)
There is already an answer for this question.
The code you wrote should work fine. I made a element with id my-page that contains an input element with id my-input.
In the JavaScript:
$(document).on('pageinit', '#my-page', function() {
$('#my-input').focus();
});
But this is exactly what you did so I don't understand why it isn't working in your case.
Working example:
http://codepen.io/argelius/pen/jPXoNN

jQuery return 0 inputs in IE9

I having a strange problem. I am working in Parallels to test a site in IE 9 on Windows 7.
My setup is jQuery 2.1.1, Bootstrap 3.2.
I was validating a form with Parsley which if course worked well in Chrome, but did nothing in IE. When testing further I realized the DOM wasn't even updating at all. So I stripped it out down to just this to see what was happening:
$(document).ready(function()
{
console.log('ready')
/*
The form submit handler
*/
$('.submit').click(function(){
fields = $('#promo-form').find(':input');
console.log($(fields).length)
});
});
Chrome Console:
ready
15
IE 9 Console (with F12 Developer Tools)
LOG: ready
LOG: 0
I can get IE to recognize some simple selectors like $('input'), $('form') but cannot use jQuery methods to find a collection. All works just fine in Chrome on the Mac.
Any ideas here?
Thank you
Rich
Have you tried :
http://jsfiddle.net/dhyjwg4L/
Just tested in IE 10 / 11, don't have an IE9 machine to hand.
$(document).ready(function () {
alert($("#promo-form :input").length);
});
If you didn't want textareas / buttons remove the : before the input, and they wont be counted.
$('#promo-form').find(':input');
//Combine the selector to make
$("#promo-form :input")
UPDATE : Have now tested this on IE 8-11, and is working on all of them.

Use JQuery to target Mac browsers not working

I am having some small layout issues with some of my elements when I bring them up on a Mac (with all browsers).
I have created this:
$(function() {
if (navigator.appVersion.indexOf("Mac")!=-1) {
console.log("HERE");
$('#topmenudisplay UL').addClass('topmenudisplaymac');
};
});
But it simply does not work.
I have placed this in my header below my CSS of course.
I cannot even see the console.log in my console, so the if statement is just not triggering.
Can anyone advice me on how to ammend this?

Firefox-addon-sdk: launching pageMod when pressing a button?

I am making a Firefox add on using toolbar button by Erik Vold and I would like to know how to launch and stop pageMod when an user press a button in the toolbar. Is that even possible ?
I tried injecting Javascript using this method and it didn't work quite well. Moreover I couldn't inject CSS.
Below is my current code, if that can help understanding the problem:
var tbb = require('toolbarbutton').ToolbarButton({
id: 'button',
label: 'us-button',
image: self.data.url('img/on.png'),
onCommand: function () {
tabs.activeTab.attach ({
contentScriptFile: [
self.data.url('jquery/jquery.min.js'),
self.data.url('jquery/jquery-ui.js'),
self.data.url('recuperation.js'),
self.data.url('dialog.js')
]
});
}
});
What do you mean by
It didn't work quite well?
Did it work at all? As long as onCommand() is being called, I don't see any problems with the code.
As for the CSS
You're probably the one who filed the contentStyleFile bug (beat me to it), but for reference, it's been filed here and they seem to be working on a fix.
In the meantime, I'm using javascript/jQuery.
Main.js
var worker = tabs.activeTab.attach({
contentScriptFile: [data.url('jquery.js'),
data.url('annotate.js')]
contentScriptOptions: data.url('annotate.css')
});
annotate.js
$('head').append("<link href='"+self.options+"' type='text/css' rel='stylesheet' />");
This could also be done in plain javascript, but I'm using jQuery elsewhere as well.

Categories