Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: Ajax+element.focus()

  1. #1
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default Ajax+element.focus()

    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?
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    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.

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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...
    Last edited by djr33; 04-20-2013 at 10:46 PM.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

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

  5. The Following User Says Thank You to molendijk For This Useful Post:

    djr33 (04-20-2013)

  6. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

    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.

  8. The Following User Says Thank You to molendijk For This Useful Post:

    djr33 (04-20-2013)

  9. #7
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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:
    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  10. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    I think it's just a timing issue.

    You might consider adding a callback parameter to the ajaxpage function - something like
    Code:
    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.)

  11. The Following User Says Thank You to traq For This Useful Post:

    djr33 (04-21-2013)

  12. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

    If it's there after page load only, the line in map.js may not have recognized it early enough. You could try:
    Code:
    <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>

  13. The Following User Says Thank You to molendijk For This Useful Post:

    djr33 (04-21-2013)

  14. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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).
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Similar Threads

  1. Resolved Ajax loaded element not recognized in ajax post send(element)?
    By crobinson42 in forum JavaScript
    Replies: 6
    Last Post: 04-10-2012, 07:48 PM
  2. How to find out which element has focus?
    By Tohaki in forum JavaScript
    Replies: 2
    Last Post: 10-30-2008, 02:00 PM
  3. SOLVED! Focus on element loaded in content via AJAX?
    By JAB Creations in forum JavaScript
    Replies: 1
    Last Post: 03-24-2008, 03:42 PM
  4. Replies: 6
    Last Post: 01-21-2008, 05:50 AM
  5. ajax tabs focus
    By arminium in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-24-2007, 10:04 PM

Bookmarks

Posting Permissions

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