homepage Welcome to WebmasterWorld Guest from 54.166.105.24
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Crazy, Random IE Behavior with JQuery
l008comm




msg:4632795
 6:21 am on Dec 22, 2013 (gmt 0)

So here's what I've got. A text input element, and a submit button. It's not a real form, it's fully jQuery'd. So you type a number into the text field, then you either click the submit button, or you can also just hit return in the text field. I have jquery catch both events and do it's thing either way.

But here's where it gets crazy. With both IE9 and IE10 (and no non-IE browsers), when you hit return to submit the faux-form, the page redirects. I can't figure out why or how this is happening. I do have other javascript that redirects the page if you click a different button. But I don't see any way how that code could be activating when you hit return, while the cursor is in a text field.

I'm going to try posting the page itself. All of the relevant javascript code is the page header. If this does't work, I'll reply with the actual code:

[whatsmyip.org...]

 

l008comm




msg:4632796
 6:25 am on Dec 22, 2013 (gmt 0)

So to be clear, it's the "Custom Port Test". It works normally in every other browser. But if you type in a number in IE, and hit return, the page will get redirected to a new page, as if you had clicked the button under "Server Port Test". It makes no sense to me, why this is.

lucy24




msg:4632804
 7:18 am on Dec 22, 2013 (gmt 0)

Does it also happen on other people's MSIE 9/10? After all the usual clear-the-cache and so on?

The description sounds analogous to what happens if I edit a script while the page is open, and then refresh the page. Instead of clearing all values and starting afresh, any existing input is shoveled into some new field.

l008comm




msg:4632805
 7:21 am on Dec 22, 2013 (gmt 0)

But no input into that field, will cause a redirect. And it never has. And my IE9 and IE10 are on completely different virtual machines.

l008comm




msg:4632816
 8:55 am on Dec 22, 2013 (gmt 0)

I just had a friend test it with IE11 and it didn't have the weird behavior, it acted normally.

l008comm




msg:4632817
 8:57 am on Dec 22, 2013 (gmt 0)

For those that don't want to dig through the page to see the code, here is the HTML:


<h2>Custom Port Test</h2>
<p>Check a single port
<p>Port Number: <input id="single_port" type="text" name="id" size="5" maxlength="5" class="input_class" autocomplete="off"> <input type="submit" value="Scan Port" id="single_scan">
<div id="scan_results" class="scan_closed">Enter a port number above to scan</div>

<div id="scan_progress"><img src="../images/spinner.gif" id="spinner" alt="&hellip;"> Scanning...</div>


And here is the javascript:

$(function() {

$("#server_scan").click(function(){ window.location.href = 'server/'; });
$("#game_scan").click(function(){ window.location.href = 'games/'; });
$("#app_scan").click(function(){ window.location.href = 'apps/'; });
$("#p2p_scan").click(function(){ window.location.href = 'p2p/'; });

$("#single_port").focus(function()
{
$("#single_port").removeClass("input_error");
$("#scan_results").attr("class","scan_closed");
$("#scan_results").html("Enter a port number above to scan");
});

$("#single_scan").click( single_scanner );
$("#single_port").keypress(function($e)
{
if ( ( $e.which == 13 ) && ( $("#single_scan").prop('disabled') == false ) )
{ single_scanner(); }
});

function single_scanner()
{
$filtertest = /^[0-9]{1,5}$/;
$port_number = $("#single_port").val();

if ( $filtertest.test( $port_number ) && $port_number >= 1 && $port_number <= 65535)
{
$("#scan_results").html( $("#scan_progress").html() );
$("#scan_results").attr("class","scan_closed");
$("#single_port").removeClass("input_error");
$("#single_scan").prop('disabled', true);

$.post("single.php", { port: $port_number }, function($data)
{
if ($data === "1")
{
play_a_sound('snd_done');
$("#scan_results").attr("class","scan_open");
$("#scan_results").html("Port "+$port_number+" is Open");
}
else if ($data === "2")
{
play_a_sound('snd_done');
$("#scan_results").attr("class","scan_blocked");
$("#scan_results").html("Port "+$port_number+" Timed-Out");
}
else if ($data === "3")
{
play_a_sound('snd_done');
$("#scan_results").attr("class","scan_closed");
$("#scan_results").html("Port "+$port_number+" is Closed");
}
else if ($data === "4")
{
play_a_sound('snd_fail');
$("#scan_results").attr("class","scan_error");
$("#scan_results").html("Error: A Server Error Occurred");
}
})
.fail(function()
{
play_a_sound('snd_fail');
$("#single_port").addClass("input_error");
$("#scan_results").attr("class","scan_error");
$("#scan_results").html("Error: A Network Error Occurred");
})
.always(function()
{
$("#single_scan").prop('disabled', false);
});

}
else
{
play_a_sound('snd_fail');
$("#single_port").addClass("input_error");
$("#scan_results").attr("class","scan_error");
$("#scan_results").html("Error: Invalid Port Number ("+$port_number+")");
}
}

});


I can't see how it could ever be the case, that a return keypress event in $("#single_port") , could trigger a click event on $("#server_scan") , that's certainly not anywhere in MY code!?

l008comm




msg:4632920
 10:13 pm on Dec 22, 2013 (gmt 0)

I made an extremely simplified test case of the problem here:
[whatsmyip.org...]

That page doesn't actually DO anything, but turn the result box green, no matter what. IE still redirects the page. I don't see why.

Or if you prefer, here are the guts of that test page, in a jsfiddle:
[jsfiddle.net...]

l008comm




msg:4632921
 10:13 pm on Dec 22, 2013 (gmt 0)

GAH of course in the fiddle itself, the erroneous redirect doesn't happen. But that might be a limitation of that site, I don't know.

l008comm




msg:4632957
 5:02 am on Dec 23, 2013 (gmt 0)

So even sticking a $e.preventDefault(); inside the keypress handler, does not stop IE9 and IE10 from completely arbitrarily redirecting the browser.

l008comm




msg:4633004
 11:38 am on Dec 23, 2013 (gmt 0)

I was just poking around with it some more. In IE9, you can see the "Server Port" button get focus when you hit return in the input field. There is no sane reason why this would happen. But with that clue, I tried adding tabindex attributes to all of the inputs on the page, so the "Custom Port" text field and button were number 1 and 2, and the four buttons above it were 3-6. I was hoping this would cause the correct button, number 2, to get focus instead of the server port button. But it had no effect. Why microsoft, why!?!?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved