A basic question on Prototype

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • RamananKalirajan
    Contributor
    • Mar 2008
    • 608
    #1

    A basic question on Prototype

    Hi guys I am facing this problem very often I dont know the reason. Can any tell this why.

    My Problem is, I am jsut new to the prototype. When I made a prototype file like this
    [HTML]<html>
    <head>
    <script src="prototype. js"></script>
    $('myButton').o bserve('click', function(){aler t('I am Clicked')});
    </script>
    </head>
    .
    ..
    ...
    some code
    <input type="button" id="myButton" value="click Me">
    .
    ..
    ...
    some code

    </html>[/HTML]

    If i execute the code it is not working. But if i replace the code like this

    [HTML]<html>
    <head>
    </head>
    .
    ..
    ...
    some code
    <input type="button" id="myButton" value="click Me">
    .
    ..
    ...
    some code

    </html>
    <script src="prototype. js"></script>
    $('myButton').o bserve('click', function(){aler t('I am Clicked')});
    </script>[/HTML]

    It is working. I want to know the reason why it is not working when the script is within the head. If any one knows the reason please answer it. It will help me a lot in developing myself.

    Regards
    Ramanan Kalirajan
    Last edited by gits; Jul 25 '08, 09:54 AM. Reason: added code tags
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      i guess the problem is, that you (or better prototype with your call) try to add an eventlistener to a specific node before the page is loaded correctly ... and the DOM cannot be used at this time ... you could fix that with the following method:

      [HTML]
      <html>
      <head>
      <script src="prototype. js"></script>

      <script type="text/javascript>
      function init_page() {
      $('myButton').o bserve('click', function(){aler t('I am Clicked')});
      }
      </script>
      </head>
      <body onload="init_pa ge()">
      <input type="button" id="myButton" value="click Me">
      </body>
      </html>
      [/HTML]
      in your second example the interpreter has the nodes parsed already so it works in this case ...

      kind regards

        Comment

        • RamananKalirajan
          Contributor
          • Mar 2008
          • 608
          #3
          Originally posted by gits
          i guess the problem is, that you (or better prototype with your call) try to add an eventlistener to a specific node before the page is loaded correctly ... and the DOM cannot be used at this time ... you could fix that with the following method:

          [HTML]
          <html>
          <head>
          <script src="prototype. js"></script>

          <script type="text/javascript>
          function init_page() {
          $('myButton').o bserve('click', function(){aler t('I am Clicked')});
          }
          </script>
          </head>
          <body onload="init_pa ge()">
          <input type="button" id="myButton" value="click Me">
          </body>
          </html>
          [/HTML]
          in your second example the interpreter has the nodes parsed already so it works in this case ...

          kind regards

          Thanks for your Reply Yaar.

          Regards
          Ramanan Kalirajan

            Comment

            • RamananKalirajan
              Contributor
              • Mar 2008
              • 608
              #4
              Actually I found out the reason Mr. Gits. In my first code what it does means while loading the window itself it is trying to fetch the object so the error occurs. In order to avoid that. There is a predefined method in Prototype.

              By writing the code like this

              [HTML]<script>

              Event.observe(w indow,'load',fu nction(){
              alert($('myVal' ).readAttribute ('value'));
              });
              </script>
              [/HTML]
              This script can be placed inside the script. What this piece of code does is after loading the window it just fetches the value.

              Anyhow thanks for your Ideas

              Regards
              Ramanan Kalirajan
              Last edited by gits; Jul 25 '08, 03:14 PM. Reason: added code tags

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5390
                  #5
                  as you see it is the same explaination ... and fixed just with a prototype.js-construct itself ... that i do not / will not use :) ... glad to hear and see that you find a framework-compliant solution ... because it shows that you start to dive into the 'framework-machine' itself and start to understand how it works ... well done!

                  kind regards

                    Comment

                    • RamananKalirajan
                      Contributor
                      • Mar 2008
                      • 608
                      #6
                      Originally posted by gits
                      as you see it is the same explaination ... and fixed just with a prototype.js-construct itself ... that i do not / will not use :) ... glad to hear and see that you find a framework-compliant solution ... because it shows that you start to dive into the 'framework-machine' itself and start to understand how it works ... well done!

                      kind regards
                      Thanks. Mr. Gits. Any how I will come up with some new doubts and I expect your help.


                      Thanks and Regards
                      Ramanan Kalirajan

                        Comment

                        Previous template Next
                        Working...