Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old August 22nd, 2008, 02:39 AM
Authorized User
 
Join Date: Jul 2008
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
Default Invoking selection.js library file in static page


I am invoking a js library file name selection.js to a static page using the below.

  var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',o nSelect:test()});

 where
   - grid1 is a element name
   - selectedClassName is an ooption value
   - onSelect an event handler
   - GridColor is CSS class name and test() is function.
   - test() is function

The code is

  <html>
<head>
<title>Selection Grid</title>
<link rel='stylesheet' type='text/css' href='css/selection.css'>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/selection.js'></script>

<script type='text/javascript'>

$(grid1).observe('click', function(event){

var selectionobj = new Selection('grid1',{selectedClassName:'GridColor',o nSelect:test()});

})

</script>



</head>
<body>
            <div class='Layout' id='GridLayout'>

                    <div class='GridBox' id='grid1' name='grid1'>
                    hai
                    </div>

            </div>
        </body>
</html>

 so onSelected the element it should adds a css class and onDeselected it removes the css class.

select select function is

 _select : function ( element, event )
  //-----------------------------------
  {

    // is the element presently selected?
    if ( !element._selected )
    {
      // if not ...

      // are there any elements selected?
      if ( this._selectedCount > 0 )
      {
        // if so ...

        // are mutliple selections pemited?
        if ( this.options.multiple )
        {
          // if so ...

          // is there no selection limit or, if there is a limit, are we
          // currently below it?
          if ( !this.options.limit ||
                this._selectedCount << this.options.limit )
          {
            // if so ...

            // is there no specified onSelect handler or, if it was specified,
            // did it return true?
            if ( typeof this.options.onSelect != 'function' ||
                 this.options.onSelect( event, element ) )
            {
              // if so ...

              // select the element
              element._deselected = false;
              element._selected = true;
              this._setElementClassName ( element );

              // are there any other selected elements?
              if ( !this._selectCount )
                // if not, mark all other elements as 'deselected'
                this._setDeselected ();

              // increment the selection count
              this._selectedCount++;

              // invoke the selected handler, if specified
              if ( typeof this.options.onSelected == 'function' )
                this.options.onSelected( element );
            }
          }
        }
        // otherwise, mutliple selections are not permited ...
        else
        {
          // is there no specified onSelect handler or, if it was specified,
          // did it return true?
          if ( typeof this.options.onSelect != 'function' ||
               this.options.onSelect( event, element ) )
          {
            // if so ...

            // clear the selection
            this.clear ( true );

            // select the element
            element._deselected = false;
            element._selected = true;
            this._setElementClassName ( element );

            // mark all other elements as 'deselected'
            this._setDeselected ();

            // increment the selection count
            this._selectedCount++;

            // invoke the selected handler, if specified
            if ( typeof this.options.onSelected == 'function' )
              this.options.onSelected( element );

          }
        }

      }
      // otherwise, there is no current selection
      else
      {
        // is there no specified onSelect handler or, if it was specified,
        // did it return true?
        if ( typeof this.options.onSelect != 'function' ||
             this.options.onSelect( event, element ) )
        {
          // if so ...

          // select the element
          element._deselected = false;
          element._selected = true;
          this._setElementClassName ( element );

          // mark all other elements as 'deselected'
          this._setDeselected ();

          // increment the selection count
          this._selectedCount++;

          // invoke the selected handler, if specified
          if ( typeof this.options.onSelected == 'function' )
            this.options.onSelected( element );
        }
      }

    }
    // otherwise, the clicked on element is currently selected.
    else
    {
      // is there no specified onDeselect handler or, if it was specified,
      // did it return true?
      if ( typeof this.options.onDeselect != 'function' ||
           this.options.onDeselect( event, element ) )
      {
        // if so ...

        // select the element
        element._selected = false;

        // increment the selection count
        this._selectedCount--;

        // are there any other selected elements?
        if ( this._selectCount )
          // if so, mark this element as deselected
          element._deselected = true;
        else
          // if not, reset all deselected elements
          this._resetDeselected ();

        // set the elements class name
        this._setElementClassName ( element );

        // invoke the selected handler, if specified
        if ( typeof this.options.onSelected == 'function' )
          this.options.onDeselected( element );

      }
    }
  },

  //
  // Actually deselect the element
  //
  _deselect: function ( element, event )
  //------------------------------------
  {
    var element = $( element );

    // is there no specified onDeselect handler or, if it was specified,
    // did it return true?
    if ( typeof this.options.onDeselect != 'function' ||
         this.options.onDeselect( event, element ) )
    {
      // if so ...

      // select the element
      element._selected = false;

      // increment the selection count
      this._selectedCount--;

      // are there any other selected elements?
      if ( this._selectCount )
        // if so, mark this element as deselected
        element._deselected = true;
      else
        // if not, reset all deselected elements
        this._resetDeselectedClassName ();

      // set the elements class name
      this._setElementClassName ( element );

      // invoke the selected handler, if specified
      if ( typeof this.options.onSelected == 'function' )
        this.options.onDeselected( element );

    }
  },



and the css file is


.Layout{

    border: 1px solid blue;
    width: 385px;
    height: 383px;
    padding-bottom:5px;
}

.GridRows{

    width: 300px
    height: 30px;


}

.GridBox{

    border: 1px solid red;
    width: 30px;
    height: 30px;
    margin: 4px;
    float: left;
}


.GridColor{

    width: 30px;
    height: 30px;
    margin: 4px;
    float: left;
    border: 1px solid green;

}

 Kindly help me to invoke the js correctly



 
Old September 2nd, 2008, 03:57 AM
Friend of Wrox
 
Join Date: Jul 2003
Posts: 142
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Your problem is fairly simple - your javascript (where you're attaching to the event, in the head) is invoked before the page has loaded. You need either to invoke that code in the window.onload event, or (and much better), use prototype's window.observe(window, 'onload', function() {alert('window has loaded');});

 
Old September 2nd, 2008, 04:05 AM
Authorized User
 
Join Date: Jul 2008
Posts: 26
Thanks: 0
Thanked 0 Times in 0 Posts
Default

  Thank you jaucourt for your reply

  I have addressed this problem by using document.observe and it is working well.






Similar Threads
Thread Thread Starter Forum Replies Last Post
zxml.js library for firefox 3.0 manahual BOOK: Professional Ajax ISBN: 978-0-471-77778-6 4 March 2nd, 2010 04:59 AM
Parsing and Executing js in class library project indiandotnet C# 2008 aka C# 3.0 0 September 19th, 2008 08:56 AM
How to include static library in c# nitesh kumar C# 2005 0 July 25th, 2008 12:45 AM
how to include .js file in .aspx page shanwaj ASP.NET 2.0 Basics 13 March 11th, 2008 07:36 AM
Invoking Help File MichaelRReed1939 VB How-To 1 October 26th, 2006 10:37 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.