I have several select menus that needs that need to have their change events triggered on page load, so that they can automatically use the change behavior from an on('change', ...) handler.
I have it working fine in Firefox, but apparently this doesn't work in Internet Explorer.
Example
var changeEvent = new Event('change')
input.dispatchEvent(changeEvent);
I have tried finding alternatives in IE, and this is the closest I've come:
ie_event = document.createEvent('change')
ie_event.initEvent('change', function(e) {
...
}, false);
document.dispatchEvent(ie_event);
*The above is from codeproject.com, but it doesn't tell me what to put in the ellipses.
Can someone tell me what's wrong, point me in the right direction, or give me an example?
Would this be of any help?
<script>
$(document).ready(function () {
$("#select").on("change",function(){
//do something
});
$("#select").trigger("change");
});
</script>
Related
I'm trying to update the DOM based on the value entered in a text box.
HTML:
<input id="event-name" type="text"/>
JQUERY:
$('#event-name').on('blur',function(){
$.post("scripts/add-team-support.php",{eventName : eventName},function(minAndMaxString){
//my code here
});
});
this works on the first blur in Chrome. When I tried it in opera, mozilla and edge it doesn't worked on the first attempt.
It worked when I added this before the jquery.
$("#event-name").focus();
$("#event-name").blur();
$("#event-name").focus();
I did this to make the first $.post call to occur when the page opens.
Why is this problem happening?
How to solve this in a proper way?
Please help!
You can try this code:
var lazyTriggerEvent = function(id,event,callback){
var searchTrigger=null;
$("#"+id).bind(event,function(){
var text = $.trim($(this).val());
clearTimeout(searchTrigger);
searchTrigger = setTimeout(function(){
callback(text);
},500);
})
};
//use keyup event
lazyTriggerEvent("event-name","keyup",function(){})
It often happens with elements across browsers that consequent events do not work when binding an event to them through ID or class. The following solution should help you:
$(document).on('blur','#event-name', function(){
$.post("scripts/add-team-support.php",{eventName : eventName},function(minAndMaxString){
//my code here
});
});
Alternatively, you could use keyup event. You can do so following:
$(document).on('keyup','#event-name', function(){
var eventName = $(this).val();
$.post("scripts/add-team-support.php",{eventName : eventName},function(minAndMaxString){
//my code here
});
});
Also, using - in IDs is not a good approach. Rather, either stick to camelCase or underscore_format of naming convention.
I have noticed that toggling class in Firefox is not working and I'm not sure why.
var contactUs = document.querySelectorAll('.contact-us')[0];
var buttonExpand = document.querySelectorAll('a.write')[0];
buttonExpand.addEventListener('click', function(e) {
contactUs.classList.toggle('js-expand-form');
console.log('click');
},false);
When I click on a.write in Firefox nothing happens. It works on Chrome and IE.
The problem is related both to event binding and to classList.toggle, because console.log('click') doesn't work in FF and when I type manually from console:
document.querySelectorAll('.contact-us')[0].classList.toggle('js-expand-form')
it returns true or false but nothing actually changes - inspected element doesn't get a new class. What concerns me even more is that the same line pasted in Chrome's console doesn't take effect either, despite the fact it works in normal circumstances.
jQuery's equivalent jQuery('.contact-us').toggleClass('js-expand-form') works in every browser, including pasting into console.
See the fiddle.
You change the class on link (a.write). I'd guess that the link fires, page reloads and changes are flushed away.
Try to add
e.preventDefault();
in the handler after the toggle() command.
Mystery solved. The problem was caused by including code in window.onload:
window.onload = function() {
var buttonExpand = document.querySelectorAll('a.write')[0];
buttonExpand.addEventListener('click', function(e) {
console.log('click');
},false);
}
It started to work in Firefox after moving it elsewhere:
var buttonExpand = document.querySelectorAll('a.write')[0];
buttonExpand.addEventListener('click', function(e) {
console.log('click');
},false);
window.onload = function() {
}
Not sure why Firefox had problem with that, though.
I am using one event "tableFocusEvent" in YUI. It's working fine in FF but it's not working in IE.I tried to get similar event and use "focus" but that also not working.
Can anyone Please help me in this. Any help is appriciated.
My code is here
myDataTable.subscribe('tableFocusEvent', test);
function test()
{
alert("Hii");
}
Kailash you can try this one I think this must be helpful.You have mentioned in your question that you have used focus event please check below code have you used like this way -
var items = Y.one('#items');
items.on('focus', function (e) {
Y.log("testing for focus event");
});
I played around with a webdesign where jQuery is available. There is now a point where I need the opposite Eventwatching, so I realized it already with a jQuery routine which installs an "onnomousemove" event. Yes, you read correct, an NOT HAPPENING EVENT.
(Below) you find my allready working solution in jQuery. The idea is to have control over not happening Events and to react on that via this extra specified jQuery.Event
Hehe, I know most stupid would be to handle "onnoerror" Events with this. But thats not desired. Its working now and I want to go a step forward here. So what is my problem?
Here it comes: How to fire the same behavior with native Javascript EventListening so element.addEventListener(...); can handle the same Events too?
Problem: newer Web browser like Chrome, Firefox have an implemented CustomEvent handling to make this happen, but in older browsers there should be a way with prototype or so.
I'm a bit jQuery blind now, anyway is there somebody out there who knows the freaky trick to generate Custom Events in a traditional way without prototype.js or other libraries? Even a solution with jQuery would be fine, but desired goal is the native listener should be able to handle it.
jQuery:
(function($){
$.fn.extend({
// extends jQuery with the opposite Event Listener
onno:function(eventname,t,fn){
var onnotimer = null;
var jqueryevent = {};
$(this).on( eventname, function(e){
window.clearTimeout(onnotimer);
function OnNoEventFn(){
jqueryevent = jQuery.Event( "onno"+eventname );
$(this).trigger(jqueryevent);
e.timeStampVision=e.timeStamp+t;
e.timer=t; e.type="onno"+eventname;
fn(e);
}
onnotimer = window.setTimeout( OnNoEventFn, t);
});
return $(this);
}
});
})(jQuery);
$(document).ready(function() {
// installs "onnomousemove" and fires after 5sec if mousemove does not happen.
$(window).onno('mousemove', 5000, function(e){
console.log('function fires after:'+e.timer+'ms at:'+e.timeStampVision+'ms with:"'+e.type+'" event, exact fired:', e.timeStamp);
});
// installs "onnoclick" and fires after 4sec if click does not happen.
$(window).onno('click', 4000, function(e){
console.log('function fires after:'+e.timer+'ms at:'+e.timeStampVision+'ms with:"'+e.type+'" event, exact fired:', e.timeStamp);
});
// just for demonstration, routine with "onno.." eventnamescheme
$(window).on('onnomousemove',function(e){
console.log( 'tadaaaa: "'+e.type+'" works! with jQuery Event',e);
});
// same for "onnoclick"
$(window).on('onnoclick',function(e){
console.log( 'tadaaaa: "'+e.type+'" works! with jQuery Event',e);
});
});
// but how to install Custom Events even in older Safari ?
// newer Chrome, Firefox & Opera have CustomEvent.
window.addEventListener('onnomousemove',function(e){
console.log('native js is watching you',e);
},false);
I'm using the excellent jQuery knob plugin. However, I need to dynamically enable/disable the element depending on user input. There is support for having a disabled state on page load which have the effect that no mouse (or touch) events are bound to the canvas element. Does anyone know how to resolve this issue, that is, how to (after page load) bind and unbind these mouse event listeners?
Ideally I would like to do something like this (on a disabled knob)
$('.button').click(function() {
$('.knob').enable();
});
Edit:
I ended up rewriting the source which binds/unbinds the mouse and touch events. The solution is not perfect so I leave the question open if someone perhaps have a better (cleaner) solution.
html
<input class="knobSlider" data-readOnly="true">
<button id="testBtn">clickHere</button>
script
in doc ready,
$(".knobSlider").knob();
$("#testBtn").click(function(){
$(".knobSlider").siblings("canvas").remove();
if($(".knobSlider").attr("data-readOnly")=='true'){
$(".knobSlider").unwrap().removeAttr("data-readOnly readonly").data("kontroled","").data("readonly",false).knob();
}
else{
$(".knobSlider").unwrap().attr("data-readOnly",true).data("kontroled","").data("readonly",true).knob();
}
});
For reference you can use my jsfiddle link > http://jsfiddle.net/EG4QM/ (check this in firefox, because of some external resource load problem in chrome)
If someone doesn't like how the accepted answer destroys and recreates the internal canvas element, then checkout my approach:
https://jsfiddle.net/604kj5g5/1/
Essentially, check the draw() implementation (I also recommend listening on value changes in the draw method instead of the change and release, which work for and click and mousewheel events respectively, which imo is inconvenient).
var $input = $("input");
var knobEnabled = true;
var knobPreviousValue = $input.val();
$input.knob({
draw: function () {
if (knobPreviousValue === $input.val()) {
return;
}
if (!knobEnabled) {
$input.val(knobPreviousValue).trigger("change");
return;
}
knobPreviousValue = $input.val();
console.log($input.val());
},
});
Try this to disable the control.
I'm still trying to find a way to enable it back
$("#btnDisable").click(function(){
$("#knob").off().prev().off();
});