SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    body onLoad ok, problem in inline calling a function

    Hi all,

    In the code below, if I call function in <body onLoad> it works perfect, but if I call it like the below

    <script>
    ajaxLoader('Urunler.xml','contentLYR');
    </script>

    it doesn't work.

    What am I doing wrong? I'm about to get crazyy.

    Thanks in advance


    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    
       function ajaxLoader(url,id)
     {
      if (document.getElementById) {
       var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
       }
       if (x)
        {
       x.onreadystatechange = function()
         {
        if (x.readyState == 4 && x.status == 200)
          {
          el = document.getElementById(id);
          el.innerHTML = x.responseText;
         }
         }
        x.open("GET", url, true);
        x.send(null);
        }
         }
    </script>
    </head>
    <body>
    <script>
    ajaxLoader('Urunler.xml','contentLYR');
    </script>
    <div id="contentLYR">
    </div>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are calling your function before the div has been added to the page. getElementById will not find the div.

    You could try putting the script after the div (or at the end of the page).
    Alternatively, put an onload event handler in the script in the head section.

    Code:
    <head>
    <script type="text/javascript">
    
       function ajaxLoader(url,id)
     {
      if (document.getElementById) {
       var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
       }
       if (x)
        {
       x.onreadystatechange = function()
         {
        if (x.readyState == 4 && x.status == 200)
          {
          el = document.getElementById(id);
          el.innerHTML = x.responseText;
         }
         }
        x.open("GET", url, true);
        x.send(null);
        }
         };
    
    window.onload = function() {
        ajaxLoader('Urunler.xml','contentLYR');
    }
    </script>
    </head>
    Or, even better, use a proper event listener attachment function.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by r51 View Post
    Or, even better, use a proper event listener attachment function.
    If he's not going to be attaching more than one function to an element's event, what other benefits does using listener attachment provide?

    In my experience using the standard event registration technique is more cross-browser compatible.

    So far as when to load the script, it should be at the end of the body. Anything else will slow down the loading of the page as the browser has to stop all processing of the page until the script has been completely run.

    Loading the script at the bottom of the page is also a lot faster than using onload, because the dom is all available, by nature of running the code from the bottom of the page, and the page doesn't have to wait for the images and other content to finish loading.

    The only other solution that comes anywhere near being as effective is to use functions like onDOMLoad which aren't as cross-browser compatible as placing the script at the bottom of the page. It really is the best solution to many issues that are likely to be faced.

    Yahoo has some good info about this too.
    http://developer.yahoo.net/blog/arch...formanc_5.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely.
    It's always hard to tell the context of a problem in a post from the snippets provided. The same goes for the knowledge and experience of the poster. I'm happy to contribute what I know, as far as it goes, in the form of options. People can take from it what they want and others, like pmw57, can add more.
    I hope you get it working.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Thanks for the positive comments r51. I too used to recommend using event listeners but then faced several issues. Along with the already mentioned ones, it grated that I had to lug around a large function just to attach events.

    The event listener functions had to be large to prevent memory leaks, and because with microsoft, the this keyword loses reference to the element.

    There was also several flavours of functions to use, depending on when they were written and how effective they were at handling edge-case scenarios. It was quite a war until it was deemed "addEvent() considered harmful" which nobody wants.

    Anyway, next to JavaScript: The Definitive Guide, there is only one other place that has become bible-like to me and that is quirksmode.org - they have excellent information about event handling and cross-compatibility issues and solutions for a wide range of scenarios.

    Check out what they have to say about traditional event registration
    http://www.quirksmode.org/js/events_tradmod.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'm a frequent visitor to quirksmode too (and I have the book, but not the tee-shirt!).

    My comments were influenced by 'Advanced DOM Scripting' by Jeffrey Sambells, which has an addEvent function which in turn is based on one by John Resig. I even think it solves the 'this' problem.

    As I said, I think it depends on the context and type of project. For a single AjaxLoader, nice and simple; as part of a megacorp project with multiple writers, enterprise design patterns and potential queues of events waiting to be registered...?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by r51 View Post
    I think it depends on the context and type of project. For a single AjaxLoader, nice and simple; as part of a megacorp project with multiple writers, enterprise design patterns and potential queues of events waiting to be registered...?
    That is very true. The event listeners have their place after the standard event registration proves to be insufficient for their needs, which tends to be very sufficient until you get in to the realms of fortune 500 companies.

    This though is getting in to the realm of opinions, and people will want to contest with their own opinions as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear r51 and pmw57,

    Thank you very much for your help. I have learnt a lot from your comments. I plan to load multiple xml's in a single page, so from your sayings, I understand that it's better to use it at the and of the body.

    best

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You have a number of options, listed from fastest to slowest.

    • Run the script code directly from the end of the body
    • Use an onDOMLoad function to run a function the code when the DOM has finished loaded, but before images and other content have finished loading
    • Use the body onload event or an addEvent function that runs the code when the page has fully finished loading.

    These each have a different range of pros and cons.

    • Code at the end of the body is the fastest loading but is in danger of not being taken seriously, as it appears to be so simple, and doesn't use any fancy techniques.
    • The onDOMLoad technique is often used when people first come across it and think to themself "this is so cool!" I know this because I said that too.
    • The onload technique is commonly used because it's what people have seen in tutorials and is typically the only way they know how.

    As to whether to place the code in the head or the body, here's how they differ.
    • When scripts are loaded in the head the document, the page renderer won't even start on the body until the scripts have been read and processed, causing quite a delay before anything starts to happen. You can't run any initialisation functions that need to work with the body of the page, so you tend to use onload or similar to run the code afterwards.
    • When the script is loaded at the end of the body, the page has already started loading by the time the script starts to load, There is no need for body onload events as all of the page elements are already instantly available.

    So why do people load code in the head of the document and use onload (or similar) to initialise things afterwards? It's typically because they don't know any better and it's all they've been told to do. That's partly why I'm helping to spread the news.

    Placing you code at the end of the document speeds up your page loading time, removes the complexities of running code after the page has been loaded, and in general is a whole lot better than the head/onload paradigm.

    However, the method that you use is entirely up to you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •