Focus function not working without alert

This site is best viewed in a modern browser with JavaScript enabled.

Focus function not working without alert

joboy

This JS code is on RoR+ImgMap site.

I've tweak several portion of ImgMap, specifically around line 2205 of the file imgmap.js by adding this code

$$('#img_area_'+this.currentid.toString()+' .img_href').first().focus();
alert('Click here');

as replacement to..

this.addNewArea();

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..

$('elem_id').focus();
alert('Click here');

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

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

Thanks.

tirna

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

joboy

tirna;1082936 wrote:
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?

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?

tirna;1082936 wrote:
Unfortunately 2200+ lines is far too much code for me to look at with my limited attention span

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.

tirna

Without seeing your code I am only guessing.

Make sure the JS that references any object is loaded after 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.

joboy

This is a customized version of ImgMap interface. Pls. note, other html element were omitted for brevity..

<%= 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>

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


//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..