I'm using Bootstrap select that converts native selects to twitter bootstrap dropdown lists.
I have the problem that the change event is not triggered on iOS or Android devices in normal browsers on the pc is it working. If I'm using the native element support of the library the change event is triggered on these devices.
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
var submitSearchForm = function() {
$(this).parents('form').submit();
};
$('.selectpicker').on('blur change', submitSearchForm);
Anyone an idea?
Tested (ios-safari and chrome, android chrome, desktop chrome & FF) and it worked fine for me.
jsfiddle: Demo with the plugin and latest Bootstrap
The problem is not with the plugin and it might be with some additional code.
Make some tiny changes for testing and debuging:
Remove blur event - it will submit your form when you click the select box, for some unknown reason the plugin focus and immediately blur the select-box when clicking the select-box.
Make sure you are firing your js on DOM-ready - use $(function(){ }); or put your script before the closing BODY tag.
Change the selector - by default the plugin recognizes the .selectpicker and just for testing lets make sure it doesn't add some unwanted events that may cause unwanted behavior.
Use the chrome devtools with the extension jQuery debuger installed. select the select box with the inspector -> go to "jQuery events" tab and make sure the "change" event is attached and only him, another "change" event may cause the problem.
Make sure there is no ~"submit" event attached to the form - it may stop the form from submitting.
Make sure the action attribute of the form tag is set correctly or not defined at all. Be sure the select box is a child of the form and that the form is closed properly.
Obviously the problem is caused by your additional code that we can't see - if those tests won't work for you add your code or a demo that reproduce the problem you have and we will be more capable to help you.
Ok, it's probably because of the rendering of the bootstrap select in the page. This should work
$(document).on('change','.selectpicker',submitSearchForm)
or, in alternative
$("body").on('change','.selectpicker',submitSearchForm)
Related
I need to learn how to right click on an element in a webpage using IE8 document mode.
The webpage I am working with is PTC's windchill 10, which I believe is created usings sencha's extjs. I am not sure if extjs registers the .click() method as a click always. Some elements I need to use onmousedown and onmouseup to get a click to work.
This function I have tested on the iframe object psbIFrame to do a regular .click() and it works using autohotkey.
Autohotkey Syntax
click_event:=window_handle.document.all.psbIFrame.contentWindow.document.createEventObject()
click_event.button:=1 ;left button down
links[a_index-1].fireEvent("onclick", click_event)
Javascript Type Syntax
document.all.psbIFrame.contentWindow.document.createEventObject();
click_event.button=1;
links[a_index-1].fireEvent("onclick", click_event)
I also have this working for other elements not in an iframe.
event:=document.createEventObject()
event.button:=1 ;left button down
element.fireEvent("onmousedown", event)
element.fireEvent("onmouseup", event)
Those are all left clicks since the document mode is ie8. When I set the button to 2 and do either of those I don't get anything happening.
Does anyone else have access to a windchill page that can help me test?
element.fireEvent("oncontextmenu")
This does what I expect a right click to do. With fireEvent you don't even need to initialize the event most times it seems. FireEvent will do that in the background assuming some defaults. I don't know if what I was doing in my question with changing the button to 2 even makes sense.
http://help.dottoro.com/ljvtddtm.php for fireEvent
http://help.dottoro.com/lagstsiq.php/#MouseEvent_Members for a list of mouse events
I am making mobile web app in Html, css, javascript, jquery .
I am initializing iScroll on page .
iScroll is working fine .
Page contains textbox . It becomes not editable after iScroll intialization.
even z-index isn't useful here.
Yes, There is alternative ....
https://github.com/neave/touch-scroll
download example and put your text box and just try ...
My edited example is here http://www.mediafire.com/?uzb5wa0m5hd3dgq
Touch to scroll and you can edit text also ....
I have made my text box working in an iscroll enabled div
Just below the form elements add this javascript
var selectField = document.getElementById('input_field');
selectField.addEventListener('touchstart' /*'mousedown'*/, function(e) {
e.stopPropagation();
}, false);
This works for me in iphone 5.1
If you have a dom element listening to events like ontouchstart, the event first triggers on the element and then ultimately bubbles up to the DOM, where the browser picks it up and does it's browser related work - scrolling, checkboxes, etc.
On the other hand, iScroll prevents this event from bubbling up. The reason iScroll does this is to prevent the browser's default scrolling from kicking in.
The short answer: It's not possible to put a textbox inside iScroll.
I'm trying to implement a "custom" combobox options popup, so that near each option on the list i can place an icon / image.
My goal is to make this as unobtrusive as possible and make it look as close to a regular combo as possible, so, for Chrome and IE, the solution of grabbing the mouse and keyboard events that cause the standard popup to appear works fine:
#el.bind 'mousedown keydown keyup click', (e) =>
(...)
e.stopPropagation()
e.preventDefault()
This basically makes it so that the control is still there, looking native, and whenever the user clicks or focuses it, it shows up the "custom" list instead of the native one.
However, in firefox, as soon as the user clicks the combobox control (< select >), a popupshowing event is triggered, but i can't find a way to cancel it before the popup with the < options > shows up, covering up my "custom" options display implementation.
The only information regarding this event i was able to find, was on the Mozilla XUL documentation.
Thanks in advance.
I looked at the source code and it doesn't appear to be possible to cancel either the mouse event that opens the drop down or the popupshowing event (I don't even know why that event is generated). However I think you might be able to capture the mouse event on a parent element and stop its propagation.
When clicking a link in google chrome the focus event fails to fire. All other browsers fire the focus event for links.
Link
I do not want to attach the event onmousedown, but onfocus.
Anyone have an idea for a workaround.
EDIT:
I would definitely consider this a bug because all other focusable elements trigger focus on click.
Even non focusable elements with a tabindex trigger focus on click in google chrome.
<div tabindex="-1" onfocus="console.log('focus')">div</div>
I can't attach to both click and focus because then onclick, other browsers would call the function twice. I can't detect this functionality because it requires user
interaction, and I won't do user agent string detection, because well its wrong.
Using this html:
Link
Is they any way to invalidate the second onmousedown call to prevent the function being called twice in non google browsers.
EDIT 2:
After some further testing <input type=radio> also fails to call focus in google chrome.
Why in the world is google chrome like this, while Opera, IE and firefox are all okay. What is crazy is that the mobile webkit browser even triggers focus on links when I tried it on my Android device.
That actually works just fine, except that the focus event isn't triggered simply by clicking on the link (try tabbing and you'll see the event firing). I don't think it's a bug, why not just safe guard and use both?
One work around you could do to avoid the double focus events from popping on the working browsers while still getting the focus event to pop on Chrome, is to on a click event check whether anything has focus on the page, and if not, then trigger the focus event.
With jQuery it could be done like this:
$('a').click(function(e){
if(!$('*:focus').length) $(this).trigger('focus');
});
example: http://jsfiddle.net/niklasvh/qmcUt/
You can use small hack:
Link
I have an ajax script with a "get more posts" button that inserts a couple screens/viewports worth of information. In doing this, the document looses focus at some point and thus the default behavior of the space bar (page down) doesn't work in firefox.
How can I focus the document again to regain the default behavior? What components control this behavior?
It works in Chrome and IE (surprisingly), but not FF.
I tried in a callback function: document.body.focus() and document.getElementById('someClickableElement').click(), but no luck.
If I actually click on the page after the content is displayed, then I can scroll again with the space bar.
Since this is a frequently used feature, it's annoying to click "load more", click again, then space to page down.
Thoughts? Suggestions?
EDIT:
Ok, so i was using a YUI button (just a nice looking html "button" element with some css styling) for the interface. i replaced it with a link, and i no longer have this problem.
Interesting that it works as expected in Chrome & IE, and I'm not even using YUI listeners for the event (just the nice-looking buttons). It's handled by jquery's live method (b/c of the event delegation).
Also interesting that I'm not able to programmatically do what I can do physically (ie. "click").
Even if there is some YUI bug, it seems like firefox should be able to regain focus via some javascript action.
VERY WEIRD. Still any input appreciated (more javascript suggestions to try?). I'm somewhat committed to my current interface.
It looks like you need to blur YUI button element. Or do something with tab order between whole document and the YUI button.
So - not to focus() document, but to blur() YUI button.
Alternatively, you may try to apply 'keypress' event simulating 'TAB' key.
I haven't tried this but how about doing a blur() on the body or the window.
window.blur();