I'm trying to display an alert message when a user clicks on one of the vectors is in the vector layer. This works fine in all browser, except IE8.
map = new OpenLayers.Map(id, {
theme: null
});
vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayer(vectorLayer);
selectControl = new OpenLayers.Control.SelectFeature(vectorLayer);
vectorLayer.events.on({
'featureselected': onPopupFeatureSelect,
'featureunselected': onPopupFeatureUnselect
});
map.addControl(selectControl);
selectControl.activate();
// ...
function onPopupFeatureSelect(feature) {
alert("OK");
} // <-- Exceptions are thrown here
Whenever the onPopupFeatureSelect function is finished (at {) the IE8 debugger somehow falls into the JQuery code and throws exceptions there.
Am I using the select feature correctly?
Update: The crash occurs when I click anywhere in the map. It is not related to the popup feature.
JQuery in combination with VML was causing this problem. I updated to version 1.7.1 and everything is working fine.
More information here: http://bugs.jquery.com/ticket/7071
Related
I am trying to create my website in Material Design, however I found one issue with Material Select regardless whether I use MDB (Material Design for Bootstrap) or Materialize CSS framework. Both are working fine on Windows/OSX/Android , however for some reason when I open Material Select component on my iPad and click on it, there is a blinking cursor showing from the Background of the Dropdown.
Try the following code:
input.select-dropdown {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
I had the same issue on iOS devices, I am using select dropdown from materialisecss "http://materializecss.com/forms.html".
to fix the blinking cursor issue, I used reference code from below link and slightly modified that code.
Ref Link: https://github.com/Dogfalo/materialize/issues/901 (check comment by "chi-bd commented on 17 Nov 2015")
jQuery('select').material_select();
/*--- Materialize Select dropdown blinking cursor fix for iOS devices ---*/
jQuery('select').siblings('input.select-dropdown').on('mousedown', function(e) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
e.preventDefault();
}
}
});
jQuery('select').material_select(); to initialize materialise select and rest code is the fix.
the only problem was this was giving problem on desktop view so added mobile detection condition
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Note: Add this code in document ready $(document).ready(function() { ... });
that's it. I hope this will sort out your issue.
Regards, and have a nice day :)
There is an open issue on github, #StaticBR proposed an approach to solve "Dropdown Broken on iPhone (and Safari in general)" issue, link here.
According to #StaticBR,
"The Issue is that IO13 Safari propagate TouchEnd Events before the Click event is propagated.
So if you have a click listener within an drop down, it is not correctly triggerd, because the Dropwdown is getting closed by the TouchEnd event. After that the click event is at a different position or does not longer exist.
Removing the touch event listener solved this issue for me."
Apologies, the above code works but then it stops the scrolling for drop-down.
For now I am using below fix, but it shows the blinking cursor first and then it hides it. but still this is not the perfect solution, if anyone has better solution please post here :)
function checkDropDown(obj){
var nextObj = jQuery(obj).next();
setTimeout(function(){
if (jQuery(nextObj).is(":visible")){
jQuery("input.select-dropdown").css({
"transition" : "none",
"left" : "-999999px"
});
}else{
jQuery("input.select-dropdown").css({
"left" : 0
});
}
}, 250);
jQuery(document).ready(function(){
jQuery("input.select-dropdown").on("focus", function(){
checkDropDown(jQuery(this));
});
jQuery("input.select-dropdown").on("blur", function(){
checkDropDown(jQuery(this));
});
});
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'm replacing the standard "Reset your password" text link with a help' icon, but I discovered that when a jQuery Tooltip is on a link within an iframe, it remains open once the link is clicked until the parent page is refreshed.
I'm using inline frames, but I also experienced the same problem when linking to another page. I tried moving the title inside a <span> tag, as well as closing the iframe and opening a new one with the functions below, but the tooltip just remains open on the page.
UPDATE - I created a fiddle to demonstrate the problem http://jsfiddle.net/chayacooper/7k77j/2/ (Click on 'Reset Link'). I experience the problem in both Firefox & IE (it's fine in Chrome & Safari).
HTML
<img src="help.jpg">
Functions to close iframe and open new iframe
function close_iframe() {
parent.jQuery.fancybox.close();
}
function open_iframe() {
$.fancybox.open([{href:'reset_password.html'}], { type:'iframe'
});
}
I am using jquery-1.8.2, jquery-ui-1.9.1 and fancyapps2
Could be an incompatibility or bug between the fancybox and the jQueryUI tooltip.
Essentially, the fancybox is showing the second form but the browser is not seeing the mouseout event. You can check this by adding a callback function to the .close() event of the jQueryUI tooltip.
$('a[href="#inline_form1"]').tooltip({
close: function( event, ui ) {
console.log('closing')
}
})
You should be able to see closing in the console in IE, Firefox and Chrome when the mouse moves out of the "Reset Link" anchor. However, when clicking "Reset Link" in Chrome you see the closing log line again but in IE9 it does not appear again. So the browser is missing the event.
We can work around this by manually calling .tooltip('close') when "Reset Link" is clicked, like this:
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
There is a small problem with the way in which the tooltips are created which means that with just the above click handler it will error with
Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'
This seems to be caused by using the $(document).tooltip() method which uses event delegation for all elements with a title attribute. This is the simplest way of creating tooltips for all elements so I understand why this is used but it can add unnecessary events and handling to the whole page rather than targeting specific elements. So looking at the error it is telling us that we need to explicitly create a tooltip on the element we want to call 'close' on. So need to add the following initialisation
$('a[href="#inline_form1"]').tooltip();
Sp here is the completed JavaScript
$(function () {
$(".fancybox").fancybox({
title: ''
})
$(".fancybox").eq(0).trigger('click')
$(document).tooltip();
$('a[href="#inline_form1"]').tooltip()
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
})
Note: You only need one jQuery document.ready wrapping function - the $(function (){ ... }) part :-)
I have a JQM apps and I am incorporating Backbone.
Since my initial javascript code is huge, I am only extracting what I believe is problematic.
I am following the advices and calls steps cited here:
jqm-config.js from http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
http://jquerymobile.com/test/docs/pages/backbone-require.html
I have a major problem, and this is the behaviour, the problem comes from this code:
var r = Backbone.Router.extend
router: ...
"page": "pageDisplay"
...
pageDisplay: function(){
c = new AView(); // Backbone.View ...fetch() data...
$(c.el).page(); // Call to JQM to add its extra stuff; seems done correctly
$.mobile.changePage( "#" + c.id, {changeHash: false}); // line 50
}
When following the links of <a href="#page" >, I come as expected to the
page "#page" properly processed. But once there, if I click a refresh, which is indirectly reprocessed by the same router rule, I end up with the following error:
Uncaught TypeError: Cannot call method 'trigger' of undefined
I downloaded the jquery mobile development code and observed this:
// JQM1.1.2 - Line #3772 Show a specific page in the page container.
$.mobile.changePage = function( toPage, options ) {
if ( isPageTransitioning ) {
pageTransitionQueue.unshift(arguments );
return;
}
var settings = $.extend( {}, $.mobile.changePage.defaults, options);
// Make sure we have a pageContainer to work with.
settings.pageContainer = settings.pageContainer || $.mobile.pageContainer;
// Make sure we have a fromPage.
settings.fromPage = settings.fromPage || $.mobile.activePage;
// Line #3788
var mpc = settings.pageContainer, // Line #3789
pbcEvent = new $.Event("pagebeforechange" ),
triggerData = { toPage: toPage, options: settings };
// Let listeners know we're about to change the current page.
mpc.trigger( pbcEvent, triggerData ); // Line #3794
The Uncaught TypeError is caused by Line #3794, because mpc is undefined.
So, from JQM, In the Chrome inspector, I can see also that settings.fromPage is undefined and settings.pageContainer is undefined. I kind of imagine, that JQM cannot make an assumption on the fromPage, and therefore, cannot proceed on my refresh. All the options I have tried on the $mobile.changePage() have not succeed. I am out of ideas.
UPDATE/ Online site with the minimum to reproduce the problem:
apartindex, access the website with the bug
Any help will be appreciated.
The dextoInit function that calls the router code is called in $(document).ready() which does not guarantee that the jQuery mobile page has actually been set up successfully. But the router code calls $.mobile.changePage which depends on jQuery Mobile being initialized.
Putting it into mobileinit or pageinit should work.
(Unfortunately I can't modify the code and test it easily.)
Although, this fix it for the moment, it does have drawbacks. See below.
$(document).bind("pageinit", function(){
console.log('bindtomobileinit: event pageinit received');
if ( !window.AppNode.router ){
window.AppNode.router = new AppNode.singletons.router();
console.log("mobileRouter.js: Starting b history");
console.log('mobileRouter.js: About to launch Backbone history');
Backbone.history.start();
}
});
Registering to pageinit has a weird effect of being fired twice. I see that 2 nodes have been added to the Dom: the default "loading" jquery mobile div (related to pageinit:1), and my data-role page (pageinit:2). So on a "refresh browser click", my situation leaves me waiting for a first pageinit, creating an unexpected jquery mobile dom element (a default page created to display the waiting JQM circle animation), which trigger the router creation, and allows the Backbone.history call which then deal with my "" home page. The second pageinit do not interfere with the settings since I execute it only once.
I am really disappointed by this setup. I will leave this question for now, since it does sort of work.
I've found the source of the problem to be jquery-mobile version 1.3.0. When I fall back to either JSM 1.2.0 or 1.2.1, the "Uncaught TypeError: Cannot call method 'trigger' of undefined" problem goes away.
BTW, I am not using Backbone.
I had fixed this problem by using method append(), but not html()
$('body').append(view.render().$el);
I was able to resolve this issue by changing the page data property from "data-role" to "data-mobile-page" as what is referenced in line 4042 of jqm 1.3.2
fromPage.data( "mobile-page" )._trigger( "beforehide", null, { nextPage: toPage } );
Setting
$.mobile.autoInitializePage = true;
In your jquery mobile config file, some place like:
$(document).on("mobileinit", function () {...});
May help.
When using the navigate method with triggerRoute = true; the page navigates fine to the new page but history is not updated.
When hitting the back button on an Android device (Nexus S), the history pops, but the navigation does not happen.
If I pass false for the triggerRoute and then call Backbone.history.loadUrl(); Then the back button does work but sort of erratically.
The navigate method has this comment ....
// URL-encoding the fragment in advance. This does not trigger
// a `hashchange` event.
After reading several posts, it seems to me that using the navigate method is the right way and should update the history...
Code snippet ...
er.getApp().getController().navigate('home', true);
OR
er.getApp().getController().navigate('home');
Backbone.history.loadUrl();
Is there a known routing issue with jquerymobile and backbone combination. Older answers here relate to earlier version of backbone.js and are not valid anymore ...
Ok. Found a resolution. Basically tell jquerymobile not to do anything with the back button and hashchange event and let backbone handle it completely.
In the index.html, appLoading event handler, there was code binding Jquerymobile to the back button, removed it.
//removed this part
document.addEventListener("backbutton", function(){
if (window.history.length > 0) {
window.history.back();
return false;
}
navigator.app.exitApp();
}, true);
// Since we are using the backbone router we want to disable
// auto link routing of jquery mobile.
// The code below for mobileinit
// notice the last two settings
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.changePage.defaults.changeHash = false;
});