Javascript (?) help - need to check connectivity - Teh Forum

<body> <div id="header"> <span class="left"> <span class="back"><a href="lthread_list.php?webtag=DEFAULT"><span class="image mobile_back" title="Back"></span></a></span> <span class="image mobile_logo" title="Beehive Forum Logo"></span> </span> <ul> <li> <a class="reply_all" href="lpost.php?webtag=DEFAULT&reply_to=38874.0&return_msg=38874.2"> <span class="image mobile_reply_all"></span><span class="text">Reply to All</span> </a> </li> <li> <a class="navigation" href="#"> <span class="image mobile_navigation"></span><span class="text">Show messages</span> </a> </li> <li> <a class="main" href="#"><span class="image mobile_menu" title="Menu"></span> </a> </li> </ul> </div> <div class="menu main"> <ul> <li><a href="lthread_list.php?webtag=DEFAULT">Messages</a></li> <li><a href="lpm.php?webtag=DEFAULT">Inbox</a></li> <li><a href="lsearch.php?webtag=DEFAULT">Search</a></li> <li><a href="llogon.php?webtag=DEFAULT">Login</a></li> </ul> </div> <div class="menu navigation"><a href="lmessages.php?webtag=DEFAULT&msg=38874.1">1–10</a><a href="lmessages.php?webtag=DEFAULT&msg=38874.11">11–18</a></div> <div id="page_content"> <h3 class="thread_title"><a href="index.php?webtag=DEFAULT&amp;msg=38874.2">Javascript (?) help - need to check connectivity</a> </h3> <div id="messages" data-navigation="38874_2_18_10"> <a name="a38874_2"></a><div class="message" id="message_38874_2"> <div class="message_header"> <div class="message_from"> From: Peter (BOUGHTONP)<span class="message_time"> 3 Sep 2011 12:13</span> <div class="clearer"></div> </div><div class="message_to">To: Monsoir (PILOTDAN) <span><span class="image post_read" title="Read: 3 Sep 2011 12:14"></span></span> <span class="message_count">2 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.2">38874.2</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.1">38874.1</a></div> <div class="message_body"> There's only one jQuery library, and it's one 30KB file, and it makes this so simple compared to what it would be (especially since I can't be arsed looking up the specifics of IE's XHR stuff).<br /> <br /> Besides, you don't even need to copy files. Just convert it to base64 and use the data protocol direct in the HTML. Like in the attachment.<br /> <br /> And then do something like this:<br /> <div class="quotetext" id="code-javascript"><b>javascript code:</b></div><pre class="code"><span style="color: #003366; font-weight: bold;">var</span> ConnAttempts <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span> <span style="color: #003366; font-weight: bold;">var</span> $j <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">noConflict</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span>   $j<span style="color: #009900;">(</span>document<span style="color: #009900;">)</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">(</span>init<span style="color: #009900;">)</span> <span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $j<span style="color: #009900;">(</span><span style="color: #3366CC;">'body'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">append</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'<div id="status-msg"></div>'</span><span style="color: #009900;">)</span> checkConnectivity<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">}</span> <span style="color: #003366; font-weight: bold;">function</span> checkConnectivity<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $j<span style="color: #009900;">(</span><span style="color: #3366CC;">'#status-msg'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Trying to connect...'</span><span style="color: #009900;">)</span> ConnAttempts<span style="color: #339933;">++</span> <span style="color: #003366; font-weight: bold;">var</span> TargetUrl <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://whatever'</span> $j.<span style="color: #660066;">get</span><span style="color: #009900;">(</span> TargetUrl <span style="color: #339933;">,</span> handleUrlResponse <span style="color: #009900;">)</span> <span style="color: #003366; font-weight: bold;">function</span> handleUrlResponse<span style="color: #009900;">(</span>data<span style="color: #339933;">,</span><span style="color: #000066;">status</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span><span style="color: #000066;">status</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #006600; font-style: italic;">// Hooray! Lets go redirect</span> location.<span style="color: #660066;">href</span> <span style="color: #339933;">=</span> TargetUrl <span style="color: #009900;">}</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">{</span> <span style="color: #006600; font-style: italic;">// Boo! Still not ready</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span> ConnAttempts <span style="color: #339933;">></span> MaxConnAttempts <span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $j<span style="color: #009900;">(</span><span style="color: #3366CC;">'#status-msg'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Received status '</span><span style="color: #339933;">+</span><span style="color: #000066;">status</span><span style="color: #339933;">+</span><span style="color: #3366CC;">' after '</span><span style="color: #339933;">+</span>ConnAttempts<span style="color: #339933;">+</span><span style="color: #3366CC;">' tries.'</span><span style="color: #009900;">)</span> <span style="color: #009900;">}</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">{</span> $j<span style="color: #009900;">(</span><span style="color: #3366CC;">'#status-msg'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Please wait...'</span><span style="color: #009900;">)</span> setTimeout<span style="color: #009900;">(</span> checkConnectivity <span style="color: #339933;">,</span> <span style="color: #CC0000;">300</span> <span style="color: #009900;">)</span> <span style="color: #006600; font-style: italic;">// 0.3 seconds</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span> <span style="color: #009900;">}</span></pre><br /> <br /> Which is untested because I'm lazy, but unless I've made any stupid mistakes it should do what you want.<div class="edit_text">EDITED: 3 Sep 2011 12:19 by BOUGHTONP</div> </div> <div class="message_attachments"> <span>Attachments:</span> <ul> <li><span class="image attach"></span><a href="get_attachment.php?webtag=DEFAULT&hash=8a931eecfa9c2f15cfb738214a0416c1&filename=jquery-1.6.2.base64.html" target="_blank">jquery-1.6.2.base64.html</a></li> </ul> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.2&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.2"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_3"></a><div class="message" id="message_38874_3"> <div class="message_header"> <div class="message_from"> From: Peter (BOUGHTONP)<span class="message_time"> 3 Sep 2011 12:25</span> <div class="clearer"></div> </div><div class="message_to">To: Monsoir (PILOTDAN) <span><span class="image post_read" title="Read: 3 Sep 2011 12:29"></span></span> <span class="message_count">3 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.3">38874.3</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.2#a38874_2" target="_self">38874.2</a></div> <div class="message_body"> I decided to test it, and I appear to have done something stupid, because it's not working. <span class="emoticon e_tear_confused" title=":'S"><span class="e__">:'S</span></span><br /> <br /> Oh <em>fucking Microsoft!</em> <span class="emoticon e_angry" title=":@"><span class="e__">:@</span></span><br /> <br /> <div class="quotetext" id="quote"><b>quote: </b></div><div class="quote">Microsoft has limited its support to certain "non-navigable" content for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32 KiB in Version 8.</div><br /> <br /> So because Microsoft are shit and can't write a decent email client, they cripple the browser and apply arbitrary limits. <span class="emoticon e_angry" title=":@"><span class="e__">:@</span></span><div class="edit_text">EDITED: 3 Sep 2011 12:31 by BOUGHTONP</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.3&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.3"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_4"></a><div class="message" id="message_38874_4"> <div class="message_header"> <div class="message_from"> From: Monsoir (PILOTDAN)<span class="message_time"> 3 Sep 2011 12:36</span> <div class="clearer"></div> </div><div class="message_to">To: Peter (BOUGHTONP) <span><span class="image post_read" title="Read: 3 Sep 2011 12:38"></span></span> <span class="message_count">4 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.4">38874.4</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.2#a38874_3" target="_self">38874.3</a></div> <div class="message_body"> Gay, but you have persuaded me to suck it up and use JQuery. I shall have a play, thanks <span class="emoticon e_smile" title=":)"><span class="e__">:)</span></span></div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.4&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.4"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_5"></a><div class="message" id="message_38874_5"> <div class="message_header"> <div class="message_from"> From: Peter (BOUGHTONP)<span class="message_time"> 3 Sep 2011 12:41</span> <div class="clearer"></div> </div><div class="message_to">To: Monsoir (PILOTDAN) <span><span class="image post_read" title="Read: 3 Sep 2011 12:43"></span></span> <span class="message_count">5 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.5">38874.5</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.2#a38874_4" target="_self">38874.4</a></div> <div class="message_body"> I tried going with the native XMLHttpRequest stuff and it's not doing anything sensible. <span class="emoticon e_sad" title=":("><span class="e__">:(</span></span><br /> <br /> You said before you weren't sure if it's IE7 or IE8 - you're going to need to verify that, because this may count as a cross-domain request in the final thing, and <a href="http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests">Wikipedia suggests</a> that only IE8+ accepts the headers that let you do that.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.5&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.5"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_6"></a><div class="message" id="message_38874_6"> <div class="message_header"> <div class="message_from"> From: Monsoir (PILOTDAN)<span class="message_time"> 3 Sep 2011 12:45</span> <div class="clearer"></div> </div><div class="message_to">To: Peter (BOUGHTONP) <span><span class="image post_read" title="Read: 3 Sep 2011 13:22"></span></span> <span class="message_count">6 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.6">38874.6</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.2#a38874_5" target="_self">38874.5</a></div> <div class="message_body"> Just checked and it's IE7. At the minute, I need to assume it has to stay that way <span class="emoticon e_sad" title=":("><span class="e__">:(</span></span></div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.6&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.6"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_7"></a><div class="message" id="message_38874_7"> <div class="message_header"> <div class="message_from"> From: Monsoir (PILOTDAN)<span class="message_time"> 3 Sep 2011 13:08</span> <div class="clearer"></div> </div><div class="message_to">To: Peter (BOUGHTONP) <span><span class="image post_read" title="Read: 3 Sep 2011 13:22"></span></span> <span class="message_count">7 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.7">38874.7</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.2#a38874_5" target="_self">38874.5</a></div> <div class="message_body"> I've found this sort of thing:<br /> <br /> <div class="quotetext" id="code-"><b> code:</b></div><pre class="code"><img alt="Connecting..." id="ImageTest" />   <script type="text/javascript">   $('#ImageTest') .error(function() { alert('Handler for .error() called.') }) .attr("src", $imageURL);     </script></pre><br /> <br /> It seems to work, though I've not tested it in IE7 yet. Only I'm too thick to figure out how to keep on retrying</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.7&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.7"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_8"></a><div class="message" id="message_38874_8"> <div class="message_header"> <div class="message_from"> From: Peter (BOUGHTONP)<span class="message_time"> 3 Sep 2011 13:26</span> <div class="clearer"></div> </div><div class="message_to">To: Monsoir (PILOTDAN) <span><span class="image post_read" title="Read: 3 Sep 2011 13:31"></span></span> <span class="message_count">8 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.8">38874.8</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.2#a38874_7" target="_self">38874.7</a></div> <div class="message_body"> Use setTimeout to call itself after a short pause.<br /> <br /> <div class="quotetext" id="code-javascript"><b>javascript code:</b></div><pre class="code"><span style="color: #003366; font-weight: bold;">function</span> setImageUrl<span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> $<span style="color: #009900;">(</span><span style="color: #3366CC;">'#ImageTest'</span><span style="color: #009900;">)</span> .<span style="color: #660066;">error</span><span style="color: #009900;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066;">alert</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'Handler for .error() called.'</span><span style="color: #009900;">)</span> setTimeout<span style="color: #009900;">(</span> setImageUrl <span style="color: #339933;">,</span> <span style="color: #CC0000;">300</span> <span style="color: #009900;">)</span> <span style="color: #009900;">}</span><span style="color: #009900;">)</span> .<span style="color: #660066;">attr</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"src"</span><span style="color: #339933;">,</span> $imageURL<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> setImageUrl<span style="color: #009900;">(</span><span style="color: #009900;">)</span></pre><br /> <br /> <br /> I guess this will work in IE7 since the image is doing the cross-domain stuff, not the script, so there's no security issues.<br /> <br /> Hmmm, might also need to set the src to a safe value and then back to the test one for it to trigger a change. (Not sure on that.)<div class="edit_text">EDITED: 3 Sep 2011 13:29 by BOUGHTONP</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.8&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.8"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_9"></a><div class="message" id="message_38874_9"> <div class="message_header"> <div class="message_from"> From: Monsoir (PILOTDAN)<span class="message_time"> 3 Sep 2011 14:54</span> <div class="clearer"></div> </div><div class="message_to">To: ALL<span class="message_count">9 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.9">38874.9</a></div> <div class="message_body"> Using images seems to lock up the browser when I do it in any kind of loop <span class="emoticon e_sad" title=":("><span class="e__">:(</span></span></div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.9&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.9"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_10"></a><div class="message" id="message_38874_10"> <div class="message_header"> <div class="message_from"> From: Peter (BOUGHTONP)<span class="message_time"> 3 Sep 2011 15:24</span> <div class="clearer"></div> </div><div class="message_to">To: Monsoir (PILOTDAN) <span><span class="image post_read" title="Read: 3 Sep 2011 15:25"></span></span> <span class="message_count">10 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.10">38874.10</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38874.2#a38874_9" target="_self">38874.9</a></div> <div class="message_body"> Browsers suck. <span class="emoticon e_plain" title=":|"><span class="e__">:|</span></span><br /> <br /> Instead of looping, could you try multiple images, with each src set in a chain after the previous one fails?<br /> <br /> Oh, and make sure IE's shit local caching is disabled (i.e. "check every visit").</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.10&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.10"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38874_11"></a><div class="message" id="message_38874_11"> <div class="message_header"> <div class="message_from"> From: Monsoir (PILOTDAN)<span class="message_time"> 3 Sep 2011 15:25</span> <div class="clearer"></div> </div><div class="message_to">To: ALL<span class="message_count">11 of 18</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38874.11">38874.11</a></div> <div class="message_body"> Right, I'm getting there but if I change a variable in ".Error" it doesn't seem to make any difference. Is that by design?</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38874.11&return_msg=38874.2" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38874.11"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div></div> <div class="message_page_footer"> <ul> <li class="right_col"><form accept-charset="utf-8" method="get" action="lmessages.php" target="_self"><input type="hidden" name="webtag" id="webtag" class="bhinputtext" value="DEFAULT" dir="ltr" /><input type="hidden" name="msg" id="msg" class="bhinputtext" value="38874.12" dir="ltr" /><input type="submit" name="submit" id="keep_reading" value="Keep reading…" class="button" /></form></li> </ul> </div> </div> </body>