SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Mad Beach Bum jgsketch's Avatar
    Join Date
    Aug 2002
    Location
    FL
    Posts
    825
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Explaination of this script

    Hello,
    I found this page which has a dynamic form drop down list. When you select a paticular object, the right side of the table shows the results dynamically without reloading the entire page. I'm looking for resources, guides or scripts that will show me how this is done. Any help would be great. Thanks
    http://www.rivervalleycandle.com/web/candle/maker.htm

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    What you're looking to do is done with the help of 'Arrays'.

    I don't know exactly how to explain it to you. But you might find your query has been answered in Sitepoint before: http://www.sitepointforums.com/searc...searchid=86897

    Browse through that.

  3. #3
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    Bangarang! Karloff's Avatar
    Join Date
    Mar 2003
    Location
    Manchester, United Kingdom
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, arrays are definately the better choice for this type of task, yet that candle page didn't use them at all. Instead there is a bunch of IF statements that basically check the value of the selected item and set apropriate string variables that are then replaced in the existing HTML (using innerHTML). A pretty simple approach and somewhat wasteful considering the repetitive lines of code which are absolutely unnecessary.

    Just my 2c
    Karl


    I'm desperately trying to figure out why Kamikaze pilots wore helmets. - George Carlin

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karloff
    Well, arrays are definately the better choice for this type of task, yet that candle page didn't use them at all. Instead there is a bunch of IF statements that basically check the value of the selected item and set apropriate string variables that are then replaced in the existing HTML (using innerHTML). A pretty simple approach and somewhat wasteful considering the repetitive lines of code which are absolutely unnecessary.

    Just my 2c [img]images/smilies/biggrin.gif[/img]
    I agree completely, i've never actually looked at grassblades example, but I just remember seeing it frequently so its stuck in my mind. Although it does provide a good basis to alter the code provided.

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup -- the coder for that site certainly got it to work, but it's pretty messy. I'd probably try using objects, but even sticking in a few arrays and some switch statements would help alot for brevity, readability, and execution speed.

    A good example for results, but not for source or efficiency.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    Mad Beach Bum jgsketch's Avatar
    Join Date
    Aug 2002
    Location
    FL
    Posts
    825
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input. I'm going to look at the Array option and do some more research. I understand the menu lists, but not sure how to make the discription and image to change dynamiclly on the same page. I'm a JS newb. Thanks for the help.

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jgsketch

    The process is fairly simple. Basically, you need to retrieve a reference to the HTML element, then change one of it's properties. Let's say the image in your example had an ID of 'myPic'. To change that image, we could do this
    Code:
    function changeImage ( imgId, newSrc )
    {
    	// retrieve reference to element
    	var img = document.getElementById( imgId );
    	// Change it's src property to desired value
    	img.src = newSrc;
    }
    Pretty simple. For all the other changes, you just have to know which properties to access, and other ways to retrieve element references (such as elements in a form, etc)

    If you'd like, I can give you some reference material.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    Mad Beach Bum jgsketch's Avatar
    Join Date
    Aug 2002
    Location
    FL
    Posts
    825
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, reference material would be great. I really want to learn this material. This paticular section of my website will be very usefull for customers.

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, for starters, check the MSDN, Gecko, and xBrowser DOM links in my sig [img]images/smilies/thumbs_up.gif[/img] -- You can also visit my links page
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •