Ajax+element.focus()

[djr33]

I'm not quite ready to have this link indexed by Google, so I'll put it here at text:
ouraccent.com

The code is a mess at this point, so I don't expect you to go through it, and I hope that I can explain what's going on.

I'm using the Dynamic Drive Dynamic Ajax Content Script, which brings in external content and loads it in a div. (This div also happens to be hidden then shown when the content loads.)

Then there's a text box in that newly loaded content, and I'd like to focus() it so that the cursor is ready to start typing in the text box.

I imagined there might be some issues with timing (whether it's ready or not), but that's not the issue. In fact, it doesn't seem to work when I run it from the console either.

The code I'm trying to use is:
document.getElementById('newurl').focus();

To try this out on the page, click on the "new" icon, which is located in the bottom left. In theory, the large text box should be focused when loaded. [By the way, if you're just testing it, please don't save anything on the website, since it is live, but you can just click anywhere outside that div to make it disappear.]

If you open your error console, you'll see the error, or you can then try the code (above) manually. The response I get (in Firefox) is:
Error: TypeError: document.getElementById(...) is null



Any ideas or workarounds?

[traq]

It works when I run it from the console.

I do get an error about trying to focus "null" when I load the new window, though, so I'd say maybe it is a timing issue. I didn't have a chance to look at your actual code but I will when I get home.

[djr33]

It works when I run it from the console.

Really? I can't get it to work at all in Firefox. Otherwise, I'd think it's a timing issue. But it seems like it's not loading properly, because it doesn't ever work (I tried a timeout as well).

I do get an error about trying to focus "null" when I load the new window, though, so I'd say maybe it is a timing issue. I didn't have a chance to look at your actual code but I will when I get home.

Thanks! I'd hope someone just happens to know what's wrong (I'm guessing something about Ajax-loaded content).

If you do look at the code, check line 222 of "map.js". (It's a long messy .js file, but that'll point you in the right direction.)



Edit: it does seem to work from the console in Safari, but not Firefox. I wonder if something else is wrong, perhaps with how the code is loading or whether there's something about the code that is causing a bug in FF.

Edit 2: though the code is still messy, I validated the page, including the resulting page after the Ajax occurs; there are no more errors or warnings. I also changed the doctype to HTML 4.01 strict, instead of XHTML (a relic of the older code). So it can't be that the HTML isn't valid. But it still might not be making the browser happy, somehow...

[molendijk]

Daniel, I can't find an element having id="newurl" on your page. I think that's why the Error Console is complaining.

[djr33]

You have to click on the "new" icon (it's white, in the lower left). Then it will be loaded with Ajax on top of the map. It's the large text box.

[molendijk]

Yes, I did that. It made the console complain about the fact that document.getElementById('newurl') (line in map.js) does not reference an existing id on your page.

[djr33]

It's not on the page until it loads, but then it is there. However, the browser doesn't seem to know it.

If I use "view selection source" to see what's happening on the page, I get the following code:

<p style="font-size:2em;margin-left:0px;margin-top:60px;text-align:center;">
		Video URL on Youtube:
		<br><input name="url" style="width:250px;" id="newurl" value="" onkeyup="if(this.value!='') { showel('savenew',0,1); } else (hideel('savenew',1));" type="text">
		<br><input id="savenew" style="display:none;margin:auto;" value="Add to Map" onclick="editpin(document.getElementById('newurl').value); return false;" type="submit">
	</p>

So it is definitely there, but the browser doesn't know it's there.

Is there any reason you know of that this might occur?



Edit: I keep re-double-checking to be sure there are no typos, and I can't find any. If I'm just missing something, that would explain it, so let me know if you see something. But as far as I can tell, it should be working.

[traq]

I think it's just a timing issue.

You might consider adding a callback parameter to the ajaxpage function - something like

ajaxpage(
    '/new.php'
   ,'userinfoajax'
   ,function(){
        document.getElementById('newurl').focus();
    }
);

I'm not sure how else you could check on the response status of the ajax request from outside the ajaxpage function.

(I still like jquery because of issues like this.)

[molendijk]

If it's there after page load only, the line in map.js may not have recognized it early enough. You could try:

<script defer type="text/Javascript" src="/map.js">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

[djr33]

If it's a timing issue, I can fix it as a timing issue. But I don't think it's entirely a timing issue-- any idea why in Firefox it is never recognized, even from the console? If I can get that fixed, then I'll worry about the timing (it may indeed be both).