www.webdeveloper.com
Results 1 to 5 of 5

Thread: Focus function not working without alert

Hybrid View

  1. #1
    Join Date
    Dec 2006
    Location
    Philippines
    Posts
    15

    Thumbs down Focus function not working without alert

    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

    Code:
    $$('#img_area_'+this.currentid.toString()+' .img_href').first().focus();
    alert('Click here');
    as replacement to..

    Code:
    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.
    Last edited by joboy; 04-19-2010 at 09:34 PM.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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

  3. #3
    Join Date
    Dec 2006
    Location
    Philippines
    Posts
    15
    Quote Originally Posted by tirna View Post
    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?

    Quote Originally Posted by tirna View Post
    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.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  5. #5
    Join Date
    Dec 2006
    Location
    Philippines
    Posts
    15
    This is a customized version of ImgMap interface. Pls. note, other html element were omitted for brevity..

    HTML Code:
    <%= 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

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles