Using a decoy breaks my upload on IE. Why? - javascript

I'm using Valums AJAX Uploader and it works just fine, even in IE.
The problem appears when i try to use a decoy to hide Valums markup.
$('.control.addphoto:not(.controlactive)').live('click', function(){
$('#upload input[type=file]').click();
});
so, the real input is hidden but clicking my control activates it. The "choosing file" dialog gets displayed just fine in IE but once i click OK the file upload fails (it doesn't even get to the server). When I doesn't use the decoy (i.e. when i click in the input directly) it works just fine.
Everything works fine in Chrome and Firefox.
Why is this happening? I couldn't understand since it's just a decoy and it's calling the actual input. Any clue? Any way to make the decoy more "transparent"?
obs: just found out that the decoy isn't working on Opera (doesn't opens the dialog). Again, clicking directly on the input works fine. Shouldn't this be working since i'm using jquery (wich is suposed to be crossbrowser)?
EDIT
Opera actually doesn't allow triggering the input behavior through a decoy by nature.
Using Kevin B's alternative i've been able to solve my problem. On the other hand i still don't know why that happened with IE and will keep this question opened for the sake of knowledge.

One solution to this is to make the trigger element invisible, but not hidden, such as giving it the same background color as the element behind it. You can then place it on top of the "decoy" so that it will look like you are clicking on the decoy, while you are actually clicking on the file input.

Related

My javaScript code is causing IE to time out but works on Chrome and Firefox

I have some code that detects when a radio button is clicked in a form and then clicks a "Next" button. The form is multi-page wizard style.
It works fine in Chrome and Firefox but it causes IE to time out with a Not Responding error when I click the radio button there.
Here's the code:
jQuery(function($) {
$('#UL_24').on('click', function() {
var $form = $(this).closest('form');
$form.find('.gform_next_button').click();
});
});
Here's a JSFiddle of the HTML and JS together: http://jsfiddle.net/zpjyndd6/1/
Note that the redirect upon click works in this JSFiddle. It just goes to a page not found because I'm using a relative URL within the form action.
I just tested this JSFiddle in IE and the redirect actually works in this. So I'm guessing there is something outside of this code that is blocking it within IE. Not sure why it still works in Chrome and Firefox though.
Any ideas would be much appreciated.
The code in the JSFiddle might look a little off because I used a Chrome Extension to grab the block of HTML and related CSS from within a larger page. It changed the names of some of the IDs automatically and did some other strange things. It shouldn't impact this question though.
The way I read your code, looks like you have messed up little with HTML. Anyway that is a different problem.
Try using .trigger('click') instead of .click().

Accordion getting sporadically hidden in IE 7-8

I am using jQuery accordion on a web page. In IE 8, it gets hidden sporadically sometimes when user clicks on some other window. I am not able to get why is it behaving like this. When I inspect element in HTML developer tool I could see accordion and if I change some value in that, accordion gets visible again. Can somebody please help me to identify what is the problem? If I use debugger mode everything works correctly.
I looked at code carefully and observed that accordion code was added in one extra tag but strange that only IE was not able to run it properly. So I removed that extra wrapper and its running properly now.

Javascript specific to Chrome

I have lots of rails and javascript code in one project. So far it works fine, but on one particular place Javascript is not working in Chrome, works in other browsers.
The form itself has a checkbox. Once it is selected it will enable textboxes on the form. On initial load, it is not enabling the fields. But as soon as I select "inspect elements" in Chrome, and close inspect elements window it starts working, javascript kicks in and works as it should.
There is so much code behind, that it would be really difficult to post it here. I am hoping there is some "magic" only specific to Chrome.
Did anyone ever had this kind of problem before?

Javascript/Flash focus issue on different browsers

I have been looking into how you could use Javascript to direct focus to a Flash movie. I've seen it discussed on Stack Overflow and other sites and it seems you cannot do this reliably except in Internet Explorer. I am just calling the .focus() method on a Flash object via Javascript.
It does in fact work in Internet Explorer, but I don't like its behavior on Firefox or other browsers. Basically, I have a username/password login field INSIDE my Flash movie, and I want to give it focus when the Flash movie loads, so you can start typing your username immediately, without having to first click the field.
The problem with Firefox is that not only does it not set the focus, you can SEE a blinking cursor inside the field in Flash, which really indicates that the field has focus. However, you still have to click.
This is counterproductive on Firefox. I would rather not even attempt to set the focus if this is the behavior. I could of course check what browser is in use and determine whether to even call .focus(), but this functionality may change in later versions of Firefox. I'd love to have a better solution, that would:
Remember the current focus before the Flash movie is dynamically added to the page (this is how I do it, I cannot display the movie as part of the initial page load).
Attempt to set focus to the Flash movie.
Check if the focus WAS properly set, so I can expect that the Flash movie is actually receiving keystrokes without an additional click.
If focus was not set, revert to whatever was focused before the Flash movie was loaded.
I am not sure how (or if) this can be done but I'd love to find out. I think document.activeElement may be useful, but I was not able to get very far with that. Thanks for any help!
This may help. It's a kind of workaround using javascript to avoid having to focus on the actual Flash object at all...
https://github.com/englandrp/Cross-browser-Flash-tabbing-and-focus-solution
Try something like this:
private function setInitialFocus():void {
myInput.setFocus();
ExternalInterface.call("function() { var app = document.getElementById('myApp'); app.tabIndex = 0; app.focus(); }");
}
You will also want to set the tabIndex to 0 on your input control.
http://kb2.adobe.com/cps/155/tn_15586.html
Firefox Focus and Actual Links
and this one too

Why is this hidden div not showing in IE?

I've made a page which should show a div when the user clicks on a input text box. The div will contain more information about the required input, etc. The page works fine on FireFox and the div shows, but when using IE the div just doesn't show. It seems like I've tried everything and nothing has worked so far. This is the page. Maybe you could look at the source and see what I'm doing wrong? If you need me to upload the source as a text file, I can do that.
Tried on IE 8 and it works fine - what version of IE are you using? Try clearing your cache and restarting the browser!

Categories