<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>A Leased Line to the Collective Unconscious &#187; IE</title>
	<atom:link href="http://www.chichira.com/tag/ie/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.chichira.com</link>
	<description>random scribblings from the other end of the wire</description>
	<lastBuildDate>Wed, 04 Nov 2009 12:15:29 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Internet Explorer 7/Opera 9 form button gotcha</title>
		<link>http://www.chichira.com/2009/01/06/internet-explorer-7opera-9-form-button-gotcha/</link>
		<comments>http://www.chichira.com/2009/01/06/internet-explorer-7opera-9-form-button-gotcha/#comments</comments>
		<pubDate>Tue, 06 Jan 2009 13:12:17 +0000</pubDate>
		<dc:creator>RobinLayfield</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[geek stuff]]></category>
		<category><![CDATA[button behaviour]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[forms]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[non-standard]]></category>
		<category><![CDATA[Opera]]></category>
		<category><![CDATA[Safari]]></category>

		<guid isPermaLink="false">http://www.chichira.com/?p=79</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p>Well I thought I'd kick off the New Year by documenting an annoying and frustrating "undocumented feature" of IE and Opera.<br />
This one is pretty simple and I guess it's fairly obvious when you think about it but it's not consistent with other platforms or this web developer's expectations of browser behaviour.</p>
<p>Internet Explorer 7 and Opera 9, as far as I can tell do not send the form element details correctly when the form is submitted. Instead of posting the input element name and value, they post the input name with the x and y co-ordinates of the mouse pointer at the time of clicking. This information is also sent by Firefox and other browsers but they do send it together with the actual element name and value as well.</p>
<p><strong>Important information e.g. the Value of the button could be missed by these browsers</strong></p>
<p>The real gotcha is if you are processing a form and performing alternate actions when a button is clicked on (eg you may have an 'Upload Image' button and a 'Finish' button). Testing that the button has been clicked by looking for a POST or GET value of the <em>button name</em> will not give you the correct result when the button was clicked in IE.</p>
<p><strong>To replicate this behaviour:</strong></p>
<p>Create a form and add a graphical submit button to it, with a name of "submit"</p>
<div id="attachment_82" class="wp-caption alignleft" style="width: 249px"><img class="size-full wp-image-82" title="Form with graphical input button" src="http://www.chichira.com/wp-content/uploads//picture-2.png" alt="Form with graphical input button" width="239" height="53" /><p class="wp-caption-text">Form with graphical input button</p></div>
<div class="igBar"><span id="lhtml-1"><a href="#" onclick="javascript:showPlainTxt('html-1'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-1">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">&lt;form</span></a> <span style="color: #000066;">action</span>=<span style="color: #ff0000;">"/Search/"</span> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">"get"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"search"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text"</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></a></span> <span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"submit"</span> <span style="color: #000066;">alt</span>=<span style="color: #ff0000;">"search"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"submit"</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">src=&quot;images/btn_search.gif&quot; type=&quot;image&quot; value=&quot;submit&quot; /<span style="color: #ddbb00;">&amp;gt;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/form&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>you would expect that as it's an input source that the submit value will be transmitted as part of the form.</p>
<p>Here is the output displayed when the form is submitted to this simple script</p>
<div class="igBar"><span id="lphp-2"><a href="#" onclick="javascript:showPlainTxt('php-2'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-2">
<div class="php">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><a href="http://www.php.net/print_r"><span style="color:#000066;">print_r</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF;">$_GET</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">?&amp;gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>this is what you see when you <strong>View Source</strong> in Firefox and Safari</p>
<div id="attachment_83" class="wp-caption alignleft" style="width: 206px"><img class="size-full wp-image-83" title="Output from Firefox" src="http://www.chichira.com/wp-content/uploads//picture-3.png" alt="Output from Firefox" width="196" height="109" /><p class="wp-caption-text">Output from Firefox</p></div>
<div id="attachment_84" class="wp-caption alignleft" style="width: 162px"><img class="size-full wp-image-84" title="output from Safari" src="http://www.chichira.com/wp-content/uploads//picture-5.png" alt="output from Safari" width="152" height="135" /><p class="wp-caption-text">output from Safari</p></div>
<p>see the final value - submit (the button) has a value of "submit"</p>
<p>now lets <strong>View Source</strong> in Internet Explorer 7 and Opera 9</p>
<div id="attachment_81" class="wp-caption alignleft" style="width: 206px"><img class="size-full wp-image-81" title="Windows form output" src="http://www.chichira.com/wp-content/uploads//picture-11.png" alt="output from Internet Explorer 7" width="196" height="133" /><p class="wp-caption-text">output from Internet Explorer 7</p></div>
<div id="attachment_85" class="wp-caption alignleft" style="width: 211px"><img class="size-full wp-image-85" title="output from Opera" src="http://www.chichira.com/wp-content/uploads//picture-6.png" alt="output from Opera" width="201" height="155" /><p class="wp-caption-text">output from Opera</p></div>
<p>nada - zip, zilch, nothing</p>
<p>As far as I know, when you create an input element in a form that element has to pass its value by name, eg. last_name=layfield otherwise it is not behaving correctly.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.chichira.com/2009/01/06/internet-explorer-7opera-9-form-button-gotcha/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JQuery 1.2.6 quirk in Internet Explorer 7</title>
		<link>http://www.chichira.com/2008/11/17/jquery-126-quirk-in-internet-explorer-7/</link>
		<comments>http://www.chichira.com/2008/11/17/jquery-126-quirk-in-internet-explorer-7/#comments</comments>
		<pubDate>Mon, 17 Nov 2008 15:00:03 +0000</pubDate>
		<dc:creator>RobinLayfield</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[geek stuff]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://www.chichira.com/?p=60</guid>
		<description><![CDATA[I've been doing a lot of work lately with JQuery and I love it... I really do, it's a great piece of code, nay, framework, that strips out all the pain of working with JavaScript and provides a launchpad for great code and interface adventures.
Nonetheless, it's not without its headaches and recently I lost a [...]]]></description>
			<content:encoded><![CDATA[<p>I've been doing a lot of work lately with JQuery and I love it... I really do, it's a great piece of code, nay, framework, that strips out all the pain of working with JavaScript and provides a launchpad for great code and interface adventures.</p>
<p>Nonetheless, it's not without its headaches and recently I lost a few hours to trying to figure out why my JQuery functionality refuses to work on Internet Explorer 7. It's very frustrating, as everything works perfectly in Safari and Firefox and then as soon as IE comes up the site goes suddenly two-dimensional with none of the interesting UI customisations that JQuery makes so much fun to build.</p>
<p>After a bout of head scratching, coupled with the realisation that JQuery 1.2.3 works fine I started to experiment with the way the script was invoked, fearing that IE had some kind of issue with it.</p>
<p>Sure enough, that was the source of the problem and as soon as I changed my JQuery initialiser to run the "old-fashioned" way, the scripts came magically back to life. So here it is:</p>
<p>If you're having problems running JQuery in IE, open your html and look for the following lines</p>
<div class="igBar"><span id="ljavascript-5"><a href="#" onclick="javascript:showPlainTxt('javascript-5'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-5">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">//shorthand for document.ready</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">...</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>and change them to this. Be sure to check the closing part of the script too, as that is different</p>
<div class="igBar"><span id="ljavascript-6"><a href="#" onclick="javascript:showPlainTxt('javascript-6'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-6">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color: #66cc66;">&#40;</span>document<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">...</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>hopefully the JQuery developers will sort out that problem in time for the next version...</p>
]]></content:encoded>
			<wfw:commentRss>http://www.chichira.com/2008/11/17/jquery-126-quirk-in-internet-explorer-7/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
