[web] IE - Cache Problem? JavaScript

Started by
8 comments, last by DareDeveloper 16 years, 8 months ago
Hi all, I'm kinda new to &#106avascript and I got a script to work nicely. There is only one problem left in IE. It seems as if caching is responsible, but that would be weird I guess. I use onKeyup for a textfield to execute a script. However the script doesn't always get executed. Let's say I enter Admin in a membername field. Until Ad the status is "Membername is too short". From Adm on it jumps to "Membername is valid". For Admin it tells: "Membername is already taken". So far so good ... but if I delete characters then ... the script isn't called any more. Just as if IE knows "Admi" and thinks it doesn't have to call the script again. Might that be the reason? Do I have to disable caching of something? Is that even possible? Or any other ideas of where I can look if caching can not possibly play a role ...
Given enough eyeballs, all mysteries are shallow.

MeAndVR

Advertisement
Could you post your JS code? I recall IE having issues with onkeypress for me, but not for onkeyup. I have made an autotab jQuery plugin and had to make an IE conditional, but that was in regards to onkeypress, not onkeyup.
Thanks for your reply. Guess I should start a onkeyup research.
Thought something like that must be a general thing. But that might be something.

Sure ... this is the code. Html and &#106avascript:

This is the HTML part ...

<ul class="setting floatleft">	<li>	<p class="floatleft"><label>Member Name:</label></p>	<p class="floatright"><input type="text" id="membername" name="membername" onKeyup="update_infos('./');" /></p>	<br class="newline" />	</li>	<li>	<p class="floatleft"><label>Password:</label></p>	<p class="floatright"><input type="password" id="password" name="password" onKeyup="update_infos('./');" /></p>	<br class="newline" />	</li>	<li>	<p class="floatleft"><label>Confirm Password:</label></p>	<p class="floatright"><input type="password" id="confirm_password" name="confirm_password" onKeyup="update_infos('./');" /></p>	<br class="newline" />	</li>	<li>	<p class="floatleft"><label>e-Mail address:</label></p>	<p class="floatright"><input type="text" id="mailaddress" name="mailaddress" onKeyup="update_infos('./');" /></p>	<br class="newline" />	</li>	<li>	<p class="floatleft"><label>Confirm e-Mail address:</label></p>	<p class="floatright"><input type="text" id="confirm_mailaddress" name="confirm_mailaddress" onKeyup="update_infos('./');" /></p>	<br class="newline" />	</li></ul>


And this is the &#106avascript file ...<br><br><!--STARTSCRIPT--><!--source lang="cpp"--><div class="source"><pre><br>var req = null;<br><br>function get_request() {<br> req = null;<br> <span class="cpp-keyword">try</span> {<br> req = <span class="cpp-keyword">new</span> XMLHttpRequest();<br> } <span class="cpp-keyword">catch</span> (ms) {<br> <span class="cpp-keyword">try</span> {<br> req = <span class="cpp-keyword">new</span> ActiveXObject(<span class="cpp-literal">"Msxml2.XMLHTTP"</span>);<br> } <span class="cpp-keyword">catch</span> (nonms) {<br> <span class="cpp-keyword">try</span> {<br> req = <span class="cpp-keyword">new</span> ActiveXObject(<span class="cpp-literal">"Microsoft.XMLHTTP"</span>);<br> } <span class="cpp-keyword">catch</span> (failed) {<br> req = null;<br> }<br> }<br> }<br>}<br><br>function get_captcha(Rootpath) {<br> captcha_req = null;<br><br> <span class="cpp-keyword">try</span> {<br> captcha_req = <span class="cpp-keyword">new</span> XMLHttpRequest();<br> } <span class="cpp-keyword">catch</span> (ms) {<br> <span class="cpp-keyword">try</span> {<br> captcha_req = <span class="cpp-keyword">new</span> ActiveXObject(<span class="cpp-literal">"Msxml2.XMLHTTP"</span>);<br> } <span class="cpp-keyword">catch</span> (nonms) {<br> <span class="cpp-keyword">try</span> {<br> captcha_req = <span class="cpp-keyword">new</span> ActiveXObject(<span class="cpp-literal">"Microsoft.XMLHTTP"</span>);<br> } <span class="cpp-keyword">catch</span> (failed) {<br> captcha_req = null;<br> }<br> }<br> }<br><br> <span class="cpp-keyword">if</span> (null==captcha_req) {<br> alert('JavaScript Error. Request can not be created!');<br> } <span class="cpp-keyword">else</span> {<br> captcha_req.open(<span class="cpp-literal">"GET"</span>, Rootpath + <span class="cpp-literal">"ajax/captcha.php"</span>, <span class="cpp-keyword">true</span>);<br><br> captcha_req.onreadystatechange = function() {<br> <span class="cpp-keyword">switch</span>(captcha_req.readyState) {<br> <span class="cpp-keyword">case</span> <span class="cpp-number">4</span>:<br> <span class="cpp-keyword">if</span> (captcha_req.status!=<span class="cpp-number">200</span>) {<br> alert(<span class="cpp-literal">"Error: "</span>+captcha_req.status); <br> } <span class="cpp-keyword">else</span> {<br> document.getElementById('viewcaptcha').innerHTML =<br> '&lt;strong&gt;' + captcha_req.responseText + '&lt;/strong&gt;';<br> }<br> <span class="cpp-keyword">break</span>;<br> <span class="cpp-keyword">default</span>:<br> <span class="cpp-keyword">return</span> <span class="cpp-keyword">false</span>;<br> <span class="cpp-keyword">break</span>;<br> }<br> };<br><br> captcha_req.setRequestHeader(<span class="cpp-literal">"Content-Type"</span>, <span class="cpp-literal">"application/x-www-form-urlencoded"</span>);<br> captcha_req.send(null);<br> }<br>}<br><br>function get_passwordconfirmStatus() {<br><br> var password = document.getElementById('password').value;<br> var passwordconfirm = document.getElementById('confirm_password').value;<br><br> <span class="cpp-keyword">if</span> ('' == password) {<br> document.getElementById('passwordconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; ...&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> <span class="cpp-keyword">if</span> ('' == passwordconfirm) {<br> document.getElementById('passwordconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Please match the password!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> <span class="cpp-keyword">if</span> (password == passwordconfirm) {<br> document.getElementById('passwordconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"green"</span>&gt;&amp;bull; Password matched properly!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> document.getElementById('passwordconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Password and confirmation <span class="cpp-keyword">do</span> not match!&lt;/strong&gt;';<br> }<br> }<br> }<br>}<br><br>function get_mailaddressconfirmStatus() {<br><br> var mailaddress = document.getElementById('mailaddress').value;<br> var mailaddressconfirm = document.getElementById('confirm_mailaddress').value;<br><br> <span class="cpp-keyword">if</span> ('' == mailaddress) {<br> document.getElementById('mailaddressconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; ...&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> <span class="cpp-keyword">if</span> ('' == mailaddressconfirm) {<br> document.getElementById('mailaddressconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Please match the e-Mail address!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> <span class="cpp-keyword">if</span> (mailaddress == mailaddressconfirm) {<br> document.getElementById('mailaddressconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"green"</span>&gt;&amp;bull; e-Mail address matched properly!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> document.getElementById('mailaddressconfirm_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; e-Mail address and confirmation <span class="cpp-keyword">do</span> not match!&lt;/strong&gt;';<br> }<br> }<br> }<br>}<br><br>function set_membernameinfo() {<br> <span class="cpp-keyword">if</span> ('unknown' == document.getElementById('membername_status').value) {<br> document.getElementById('membername_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The membername status is unknown!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('empty' == document.getElementById('membername_status').value) {<br> document.getElementById('membername_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Please enter a membername!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('<span class="cpp-keyword">short</span>' == document.getElementById('membername_status').value) {<br> document.getElementById('membername_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The name is too <span class="cpp-keyword">short</span>!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('taken' == document.getElementById('membername_status').value) {<br> document.getElementById('membername_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; <span class="cpp-keyword">This</span> membername is already taken!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('valid' == document.getElementById('membername_status').value) {<br> document.getElementById('membername_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"green"</span>&gt;&amp;bull; The membername is valid!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('invalid' == document.getElementById('membername_status').value) {<br> document.getElementById('membername_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The membername is not valid!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> document.getElementById('membername_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Unexpected status: ' + status + '&lt;/strong&gt;';<br> }<br>}<br><br>function set_passwordinfo() {<br> <span class="cpp-keyword">if</span> ('unknown' == document.getElementById('password_status').value) {<br> document.getElementById('password_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The password status is unknown!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('empty' == document.getElementById('password_status').value) {<br> document.getElementById('password_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Please enter a password!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('<span class="cpp-keyword">short</span>' == document.getElementById('password_status').value) {<br> document.getElementById('password_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The password is too <span class="cpp-keyword">short</span>!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('unsafe' == document.getElementById('password_status').value) {<br> document.getElementById('password_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"yellow"</span>&gt;&amp;bull; <span class="cpp-keyword">This</span> password is valid but unsafe!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('valid' == document.getElementById('password_status').value) {<br> document.getElementById('password_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"green"</span>&gt;&amp;bull; The password is valid and safe!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('invalid' == document.getElementById('password_status').value) {<br> document.getElementById('password_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The password is not valid!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> document.getElementById('password_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Unexpected status: ' + status + '&lt;/strong&gt;';<br> }<br>}<br><br>function set_mailaddressinfo() {<br> <span class="cpp-keyword">if</span> ('unknown' == document.getElementById('mailaddress_status').value) {<br> document.getElementById('mailaddress_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The e-mail address status is unknown!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('empty' == document.getElementById('mailaddress_status').value) {<br> document.getElementById('mailaddress_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Please enter a valid e-mail address!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('valid' == document.getElementById('mailaddress_status').value) {<br> document.getElementById('mailaddress_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"green"</span>&gt;&amp;bull; The e-mail address appears to be valid!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> <span class="cpp-keyword">if</span> ('invalid' == document.getElementById('mailaddress_status').value) {<br> document.getElementById('mailaddress_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; The e-mail address is not valid!&lt;/strong&gt;';<br> } <span class="cpp-keyword">else</span> {<br> document.getElementById('mailaddress_info').innerHTML =<br> '&lt;strong <span class="cpp-keyword">class</span>=<span class="cpp-literal">"orange"</span>&gt;&amp;bull; Unexpected status: ' + status + '&lt;/strong&gt;';<br> }<br>}<br><br>function update_infos(Rootpath) {<br><br> get_request();<br><br> <span class="cpp-keyword">if</span> (null==req) {<br> alert('JavaScript Error. Request can not be created!');<br> } <span class="cpp-keyword">else</span> {<br> url = Rootpath + <span class="cpp-literal">"ajax/getinfos.php?name="</span> + document.getElementById('membername').value + <span class="cpp-literal">"&amp;pass="</span> + document.getElementById('password').value + <span class="cpp-literal">"&amp;address="</span> + document.getElementById('mailaddress').value;<br> req.open(<span class="cpp-literal">"GET"</span>, url, <span class="cpp-keyword">true</span>);<br><br> req.setRequestHeader(<span class="cpp-literal">"Content-Type"</span>, <span class="cpp-literal">"application/x-www-form-urlencoded"</span>);<br> req.send(null);<br><br> req.onreadystatechange = function() {<br> <span class="cpp-keyword">switch</span>(req.readyState) {<br> <span class="cpp-keyword">case</span> <span class="cpp-number">4</span>:<br> <span class="cpp-keyword">if</span> (req.status!=<span class="cpp-number">200</span>) {<br> alert(<span class="cpp-literal">"Error: "</span>+req.status); <br> } <span class="cpp-keyword">else</span> {<br> xml = req.responseXML;<br> name = xml.getElementsByTagName(<span class="cpp-literal">"membername"</span>)[<span class="cpp-number">0</span>].firstChild.nodeValue;<br> pass = xml.getElementsByTagName(<span class="cpp-literal">"password"</span>)[<span class="cpp-number">0</span>].firstChild.nodeValue;<br> mail = xml.getElementsByTagName(<span class="cpp-literal">"mailaddress"</span>)[<span class="cpp-number">0</span>].firstChild.nodeValue;<br><br> <span class="cpp-comment">// alert('name=' + name + ' pass=' + pass + ' mail=' + mail);</span><br><br> document.getElementById('membername_status').value = name;<br> set_membernameinfo();<br> document.getElementById('password_status').value = pass;<br> set_passwordinfo();<br> document.getElementById('mailaddress_status').value = mail;<br> set_mailaddressinfo();<br> }<br> <span class="cpp-keyword">break</span>;<br> <span class="cpp-keyword">default</span>:<br> <span class="cpp-keyword">return</span> <span class="cpp-keyword">false</span>;<br> <span class="cpp-keyword">break</span>;<br> }<br> };<br> }<br><br> get_passwordconfirmStatus();<br> get_mailaddressconfirmStatus();<br>}<br><br></pre></div><!--ENDSCRIPT-->
Given enough eyeballs, all mysteries are shallow.

MeAndVR

From what I can see, the JS has either been modified by the forums, or you're simply missing single quotes in multiple spots.

Before:
if (' == password) {

After:
if ('' == password) {

There are multiple instances of this. If var req = null; is line one, then the single quotes are on lines 68, 72, 92, and 96. If your original is ok in that regard, then could you provide a link for me to see this in action since you are using AJAX?
Sure ... stupid me. It's not like there is only the local version.
I think you should be able to access the js file. Didn't notice that the script got messed up (I made some minor changes, but the behauviour didn't change):

Ajax.js - Source

And this is the site where the script is called:

Registration

Btw ... there is almost no functionality. Its pretty much only layout so far ...
Given enough eyeballs, all mysteries are shallow.

MeAndVR

Hard to see what the problem is to be honest. The only odd thing I'm seeing is in your HTML. You've specified XHTML, and as such, all attributes need to be lowercase. You have onKeyup, which should read onkeyup.

Can't really see anything else :\
That's fine. Thanks for taking the time. :)

Now I'm just wondering if ...

- ... it is just me and my IE Version ...
(I have the stong feeling that the IE on that PC is stuck in a buggy Beta version)

- ... or if you (or anybody else) gets the same weird behavour in IE.


Guess there is probably a workaround. And if there is I'll find it.
Given enough eyeballs, all mysteries are shallow.

MeAndVR

I can confirm that it acted oddly on my PC as well. I ran it on IE7 in Vista and it seemed sporadic on whether it would work or not.
As if for some onkeyups the status just doesn't get updated?
That would be the same behavour ... fine - I'll try to fix that.

Thanks again
Given enough eyeballs, all mysteries are shallow.

MeAndVR

Weird ... it was the server side caching. Just had to change the header of the XML file that the client requests.
Now I wonder why it did work in Firefox. Maybe the request is different there and generally forbids cached responses?
Given enough eyeballs, all mysteries are shallow.

MeAndVR

This topic is closed to new replies.

Advertisement