oninput/onkeyup/onkeydow/onpropertychange doesn't work in IE8 - javascript

As you might have noticed from the title I'm trying to make an event work properly and IE is giving me a hard time. I have tried all possible combinations, none of them seems to work.
I'm trying to mimic the Google suggestions list. A visitor should be able to come down in the list using the arrow keys, which is a Jquery keydown event. This event however also renders the request for the suggestion list at the same time in IE8 so the therefore the arrow keys function comes to an end (because of the request that is being maid.)
I know there must be a simple solution to this, but I can't see it.Help is appreciated. This is a demo: at jsbin
It works in all browsers but not in IE.

You are attaching the events before the elements exist.
Always work with elements only inside $(document).ready() method to be sure they exist and loaded in the document.
In your specific case, just move all the code:
el("inp").oninput=function(){
addScript("http://www.google.nl/complete/search?callback=suggest&q="+this.value);
}
$('#inp').keydown(
function (e){
var curr = $('#test').find('.current');
//......
}
//.....
To be inside the $(document).ready( you already have.
Live test case that works for me in IE as well: http://jsfiddle.net/n7qAD/12/
(Your original code really didn't work in IE)

Related

How to find a form element inside multiple frames using jquery

I am working on a website that currently uses the old style frames. I want to go through a replace some javascript DOM calls because I am running into cross-browser issues. This is what I would like to replace.
window.parent.frames['topdisplay'].document.FORMSV2DISPLAY.action = 'what ever action';
In the above code my problem is that the 'document.FORMSV2DISPLAY' part doesn't work in IE I have to replace that part with document.form(0) and then of course neither of those work correctly in Chrome or Safari.
I would like to use jquery to find the form named FORMSV2DISPLAY and then perform my usual actions and submits.
I have tried things like
$(this).find('FORMSV2DISPLAY').action
$(parent).find('FORMSV2DISPLAY').action
$('topdisplay').find('FORMSV2DISPLAY').action
none of these return the same thing as the javascript DOM calls I am trying to replace. I am very new to jquery and help or understanding is greatly appreciated.
to set the action:
$('#topdisplay').find('#FORMSV2DISPLAY').attr('action', 'whateveraction');

jQuery Ajax-load replaces page instead of div in IE9 (without developer tool mode-switching)

I'm working on a website where one of the pages has a list of articles and an option to filter these based on certain keywords. All the keywords are links and listed to the right of the list. In order to get the correct URL's, the links on each keywords hold part of the ajaxURL that would give the correct response for the given keyword. In addition, I got a script that adds a 'click'-event to all links and appends the last required parameters to the ajaxURL. I "reload" the list by using jQuery's 'load'-function, like this:
$('a.keyword').click(function(event){
event.preventDefault();
// Other logic
$('.list').load(ajaxURL);
}
However, when using the filter in IE9 the content of 'ajaxURL' is loaded into the entire page. That is, the entire page is replaced with the resulting list. I figured this could be a problem of only using 'event.preventDefault()' on the 'click'-event I got on each link, so I added a variety of alternatives:
event.stopPropagtion()
return false
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
After hours of debugging, trying different combinations of these and trying IE7, IE8 and IE9 using the developer tool provided in IE, I realized that the first time I open the page with IE9 (without opening the developer tool), I get the problem described above. However, when I open the developer tool and selects IE8 it all works perfectly! The same happens when I change it back to IE9! (In this case I used all the alternatives above.)
For some reason, these transitions make it work! I can't figure out how to fix this.. I can't force users to open developer tool and switch mode to make i work. :P Any ideas? Does the developer tool add something that could do this?
I appreciate any help on the matter! :-)
PS. It works just fine in Chrome, ++.
The only thing I can think of is having console.log() in your script. That statement throws a Javascript error in IE up until you open the Developer Tools.
If that occurs earlier than the code you provided in the question then the rest of your script probably won't get evaluated, and your event handlers won't be bound at all, causing the links to just be regular links.

How does Rafael JS tie events to elements?

I was inspecting my source on a page that uses Rafael js and some elements have "element.click(handler)"
on several elements however I never see any "onclick=handler()" or any events on the svg elements, so how does it know to call handler when the element is clicked?
The reason I ask is because one of my elements works the first time you click on it, but doesn't work after that. There is no js error, it just doesn't call the method anymore and I don't know how to debug this, since I can't tell if the onclick is gone from the element or what.
Any ideas?
Thanks
You can not see for eg. because he is not using that coding.
He uses his own addEvent function that uses addEventListener(FF) or attachEvent (MS) depending on what browser that code runs.
On FF/chrome install firebug plugin and use debugger; statement.
Use console.log(); or alert() to represent yourself what's going on in that handler function.
And take a good look at 'this' if you are using it. 'This' changes scope depending on fun or object.

jQuery in Opera User JS Doesn't Work

). I'm playing with some Opera User JS. I included "1jquery.min.js" in my User JS folder (1 in front because Opera loads them alphabetically). Unfortunately, it doesn't appear to be working.
window.onload = OnWindowLoad;
$(document).ready(function()
{
alert ($('#area_19'));
});
function OnWindowLoad ()
{
alert ($('#area_19'));
alert(document.getElementById("area_19"));
}
What's interesting about this code is that the first two alerts come back in NULL, but the last one does find the object! So the element definitely exists in the page, but my jQuery seems unable to get it. What's even stranger is that the jQuery "ready" function works, indicating that I do have jQuery capability.
I'm quite puzzled about all this ::- /. Hopefully somebody can give me a clue ::- ).
I suspect you are running the script on a page that uses another JS framework, probably Prototype.js.
If Prototype were included by the target page it would overwrite your jQuery copy of $ with its own that gets an element by ID, not selector. Since there is no element with ID #area_19 (# not being a valid character in an ID), it would return null. jQuery would never return null for a non-existant element, you'd only get an empty wrapper object.
(The $(document).ready() code would still execute because the $ was called before Prototype was included and changed the behaviour of $.)
Try using the explicit jQuery function rather than the $ shortcut.
These sorts of interferences are common when mixing multiple frameworks, or even mixing two copies/versions of the same framework. From jQuery's side its interactions can be reduced, but not eliminated, with noConflict. Personally for code like user scripts that might have to live in a wide range of contexts not controlled by myself, I would avoid using wide-ranging frameworks like jQuery.

jQuery event handlers not firing in IE

I have a list of items on a page with a set of controls to MoveUp, MoveDown and Delete.
The controls sit at the top of list hidden by default. As you mouseover an item row, I select the controls with jquery
//doc ready function:
..
var tools = $('#tools');
$('#moveup').click(MoveUp);
$('#movedn').click(MoveDn);
$('#delete').click(Delete);
..
$('li.item').mouseover(function(){
$(this).prepend(tools);
});
This works great in Firefox .. the tools move into the current row, and the click events call the ajax functions. However, in IE6 and IE7 .. no click occurs. I tried unbinding on mouseout and rebinding on each mouseover .. to no avail.
I also looked into various reasons outside of javascript (e.g. transparent png conflicts, z-index, position:absolute) .. also no solution found.
I eventually needed to add a tools row to each item and show/hide on mouse over/out. Works just as well -- the only downer is that I have much more 'tools' markup on my page.
Does anyone know why IE ignores/drops/kills the mouse events once the objects are moved (using prepend)? And why rebinding the event afterwards also has no effect? Kept me annoyed for almost 2 hours before I gave up.
IE will lose events depending on how you are adding things to the DOM.
var ele = $("#itemtocopy");
$("#someotheritem").append( ele ); // Will not work and will lose events
$("#someotheritem").append( ele.clone(true) );
I would also recommend using .live() on the click events to simplify your code a little. Mouseover/out is not supported by live yet. http://docs.jquery.com/Events/live
I just spent the whole day troubleshooting events not triggering on items appended to the DOM, (IE7, jQuery 1.4.1) and it wasn't because I needed to use live() (though, good to know, Chad), nor was it because I needed to clone the items.
It was because I was selecting anchor tags that had a "#" in them like so:
var myitem = $('a[href=#top]');
My solution was to use the "Attribute Contains Selector" like so:
var myitem = $('a[href*=top]');
Fortunately I have enough control over everything that it won't likely break in the future. This isn't technically related to appended objects, but hopefully it saves someone some time.
i had a similar problem. trying to use .ready to load a div on the initial page load.
works well in FF , but not ie7.
i have found a hack that seems to get around this.
I have load call a callback, divLoaded().
In divLoaded i check the $('#targetdiv').innerText.length < 50 or whatever you think will indicate that it didnt load. If I detect that case, i simply call the function taht loads that div again.
Oddly enough, i also add a '.' to the innerText before i recall the ajax function. It seems taht sometimes we go through 3 or 4 loops before the ajax load finally takes.
This leads me to think that document.ready works pretty flawlessly in IE7, which seems to dispel a bit of a myth that it is unreliable. What really 'seems' to be happening is that .load is a little bit flakey and doesnt work well when the page is just loaded.
I am still a bit green w/ all the jQuery stuff, so take this w/ a grain of salt. Interested to hear anyone's take on my little hypothesis.
cheers
greg

Categories