Focus function not working without alert

@joboyApr 20.2010

This JS code is on RoR+ImgMap site.

I’ve tweak several portion of ~~[URL=”http://code.google.com/p/imgmap/”]~~ImgMap[/URL], specifically around line 2205 of the file imgmap.js by adding this code

[CODE] $$(‘#img_area_’+this.currentid.toString()+’ .img_href’).first().focus(); alert(‘Click here’); [/CODE]

as replacement to..

[CODE]this.addNewArea();[/CODE]

so that when the user draws a shape, the focus will be set to the respective href field, instead of the default behavior – adding new row(imgmap form).

but for brevity let me just simply the code..

~~[QUOTE]~~

$(‘elem_id’).focus();
alert(‘Click here’);

[/QUOTE]

If i’ll removed alert function, focus() won’t do its job.

Alert is really disturbing.. can anyone explain why this is happening?

Thanks.

to post a comment

JavaScript

4 Comments(s) _↴

@tirnaApr 20.2010 — #I've seen similar symptoms when someone tries to reference an element that isn't fully loaded yet. The alert() gives the browser sufficient time to continue loading and so the script works. When the alert() is removed the script does not work correctly.

Therefore, are you sure the element or whatever you are referencing before the alert(), is fully loaded by your browser before you try doing anything with it?

Unfortunately 2200+ lines is far too much code for me to look at with my limited attention span ?

@joboyauthorApr 20.2010 — #I've seen similar symptoms when someone tries to reference an element that isn't fully loaded yet. The alert() gives the browser sufficient time to continue loading and so the script works. When the alert() is removed the script does not work correctly.

Therefore, are you sure the element or whatever you are referencing before the alert(), is fully loaded by your browser before you try doing anything with it?
[/QUOTE]

Thanks for your reply tirna. You must be right with this assumption - maybe the element isn't fully loaded yet the time focus() fires up, may I know how would you deal with this kind of scenario, is there a way in PrototypeJS to suspend execution of focus() while the target element isn't fully loaded?

Unfortunately 2200+ lines is far too much code for me to look at with my limited attention span ?
[/QUOTE]

I've wish your editor could go to line at your request e.g. in notepad++, CTRL + 'g' would ask which line you want to go. ?

@tirnaApr 20.2010 — #Without seeing your code I am only guessing.

Make sure the JS that references any object is loaded [B]after[/B] the object's html markup in the <body>

I don't normally click posted links for obvious security reasons so maybe just post the relevent piece of code if possible.

@joboyauthorApr 20.2010 — #This is a customized version of ImgMap interface. Pls. note, other html element were omitted for brevity..

[code=html]
 <%= form_tag( {:controller => 'window', :action => 'setmap'}, {:id => 'img_area_form'} ) -%>
 <fieldset>
 <legend>
 <a onclick="toggleFieldset(this.parentNode.parentNode)">Image map areas</a>
 </legend>
 <div style="border-bottom: solid 1px #efefef">
 <div id="button_container">
 <!-- buttons come here -->
 <img src="javascripts/imgmap/images/add.gif" onclick="myimgmap.addNewArea();toggle_sample_href();" alt="Add new area" title="Add new area"/>
 <img src="javascripts/imgmap/images/delete.gif" onclick="myimgmap.removeArea(myimgmap.currentid);toggle_sample_href();" alt="Delete selected area" title="Delete selected area"/>
 <img src="javascripts/imgmap/images/zoom.gif" style="display: none;" id="i_preview" onclick="myimgmap.togglePreview();" alt="Preview image map" title="Preview image map"/>
 
   <table id="sample_href" style="display: inline; margin-left: 100px; display: none;">
   <tr>
   <td style="font-size: 80%;">example: http://www.site.com/register.html</td> 
   </tr>
   </table>
   </div>
   </div>
 
   <div id="form_container" style="clear: both;">
   <!-- form elements come here -->
   </div>
  </fieldset>
 
 
  <!--////// Image //////-->
  <fieldset>
   <legend>
   <a onclick="toggleFieldset(this.parentNode.parentNode)">Image</a>
   </legend>
   <div id="pic_container">
   </div> 
  </fieldset>
 
 
  <input type="button" value="Save" onclick="javascript:showPreview();" />
 
 </form>
 
 <script type="text/javascript" src="javascripts/imgmap/js/imgmap.js"></script>
 <script type="text/javascript" src="javascripts/imgmap/js/default_interface.js"></script>
 [/code]

When the user clicks the + icon, various forms (including Href field) will be generated inside <div id="form_container" /> , he can draw map on the image, once the mouse has been release associated Href field should be focus(); see snippets from imgmap.js

[CODE]
 
 //Codes here...
 
 /**
 *	EVENT HANDLER: Handles mousedown on the image.
 *	Handles beggining or end of draw, or polygon/bezier point set.
 *	@param	e	The event object.
 */
 imgmap.prototype.img_mousedown = function(e) {
 //Emphasize only this area for brevity.
 if (this.areas[this.currentid] == this._getLastArea()) {
 //editor mode adds next area automatically
 //if (this.config.mode != "editor2") {this.addNewArea();}
 
   /*//////////////////////////////////////////////////////
   this the code that triggers focus();
   //////////////////////////////////////////////////////*/
   if (this.config.mode != "editor2") {
   $$('#img_area_'+this.currentid.toString()+' .img_href').first().focus();
   alert('Click here.');
   }
   return;
   }
   return;
  }
 
 };
 
 //Codes here..
 [/CODE]

Also in #JavaScript _↴

How do I make the first letter of a string uppercase in JavaScript?can AJAX...?detect if a browser is not ie6 then if so run script

Success!

Help @joboy spread the word by sharing this article on Twitter...

Tweet This

Focus function not working without alert

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Focus function not working without alert

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴