www.webdeveloper.com
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 33

Thread: Call up

  1. #16
    Join Date
    Jul 2012
    Posts
    17
    How would I rearrange this for txt files

    xmlhttp.open("GET","proxy_page.html?parameter1="+dropdown1+'&parameter2="+dropdown2+'&parameter3="+d ropdown3,true);

    would it be

    xmlhttp.open("GET","products/'&parameter1="+ABC.txt+'&parameter2="+DEF.txt+'&parameter3="+GHI.txt,true);

    I don't have the skills for php coding either so I'll have to do it the text file way.

    Also
    would this become obsolete if I do it with txt files?

    ReferenceCodeHere||/docs/pdfs/somefile.pdf||/images/image1.gif||/images/image2.gif

    Out of curiosity would the above line need any additional coding, as if I add it just to a <div> layer or <p> in a page, wouldn't it just appear as text?

    Thanks

  2. #17
    Join Date
    Jul 2012
    Posts
    17
    Sorry for being so dumb but how does the script call up the text file and display the results?

    <head>
    <title>AJAX Demo</title>
    <script type="text/javascript">
    function showDetails(){
    //fetch product details based on the selection
    var dropdown1 = document.getElementById('id_for_use_in').value;
    var dropdown2 = document.getElementById('id_environment').value;
    var dropdown3 = document.getElementById('id_type').value;

    //if any of the three are empty, break out of the function - don't do anything yet
    if (dropdown1 =='' || dropdown2 == '' || dropdown3 == '') { return '' }

    //set up the AJAX
    var xmlhttp;
    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    //page responded with a result
    //format of responseText should be like
    // CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2

    //split the responseText on ||
    var arrContent = xmlhttp.responseText.split('||');

    //verify the array and update the webpage
    var length = arrContent.length;
    if (length=4){
    document.getElementById("referenceCode").innerHTML=arrContent[0];

    document.getElementById("pdfLink").innerHTML= "<a href='"+arrContent[1]+"'>Download the PDF</a>";

    document.getElementById("image1").src=arrContent[2];
    document.getElementById("image1").alt=product;

    document.getElementById("image2").src=arrContent[3];
    document.getElementById("image2").alt=product;
    } else {
    alert('error reading details - invalid result');
    }
    }
    }

    //The URL you are getting the details from

    xmlhttp.open("GET","products/"+product+".txt"+dropdown1+'&parameter2="+dropdown2+'&parameter3="+dropdown3,true);
    xmlhttp.send();
    }
    </script>

    </head>
    <body>
    <select name="id_for_use_in" id="id_for_use_in" onChange="showDetails()">
    <option value=""></option>
    <option value="use-wall">For use in the wall</option>
    <option value="use-ceiling">For use in the ceiling </option>
    </select><br/>

    <select name="id_environment" id="id_environment" onChange="showDetails()">
    <option value=""></option>
    <option value="NFR">General NFR</option>
    <option value="brick-block">Brick & Block-Work</option>
    <option value="plaster"> Plaster</option>
    <option value="drywall">Drywall</option>
    <option value="with-seals">Fitted with Seals</option>
    <option value="fire">Fire Rated</option>
    <option value="acoustic">Acoustic</option>
    <option value="anti-tamper">Anti Tamper environments</option>
    </select><br/>

    <select name="id_type" id="id_type" onChange="showDetails()">
    <option value=""></option>
    <option value="metal-pic-door-frame">Metal Faced Door Picture Frame</option>
    <option value="metal-bead-door-frame">Metal Faced Door Beaded Frame</option>
    <option value="plaster-pic-door-frame">Plaster Faced Door Picture Frame</option>
    <option value="plaster-bead-door">Plaster Faced Door Beaded Frame</option>
    <option value="plaster-bead-door-frame">Plaster Faced Beaded Door Beaded Frame</option>
    </select><br/>


    <div id="referenceCode"></div>
    <div id="pdfLink"></div>
    <img id="image1" src="" alt="">
    <img id="image2" src="" alt="">

    </body>
    </html>
    Title of text file: use-wall-NFR-metal-pic-door-frame.txt
    This is what's in my text-file:
    I see the divs above with "referenceCode" etc, but how does the script know where to get the information from?

    If its from this:
    xmlhttp.open("GET","products/"+product+".txt"+dropdown1+'&parameter2="+dropdown2+'&parameter3="+dropdown3,true);
    If so then when the selections are made would the "pdfLink" and others referenced call the information into these divs? At the moment it isn't so I assume the above line is wrong.
    Last edited by tabbu; 07-24-2012 at 02:54 AM.

  3. #18
    Join Date
    Nov 2007
    Posts
    432
    If your file is named like this "use-wall-NFR-metal-pic-door-frame.txt" and you place them all in a subdirectory named "products"you need to assemble the values from the dropdowns into your "filename format", like this:
    Code:
    xmlhttp.open("GET","products/"+dropdown1+'-"+dropdown2+'-"+dropdown3+".txt",true);
    Maybe it'd be easier to follow if we break it into two lines:
    Code:
    var detailsPage = dropdown1+'-"+dropdown2+'-"+dropdown3+".txt"
    xmlhttp.open("GET","products/"+detailsPage,true);
    When the GET completes, the xmlhttp has "readystate=4" and if the file was found, it has "status=200", so it drops into this block of code:
    Code:
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      //page responded with a result
      //format of responseText should be like
      // CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2
    
      //split the responseText on ||
      var arrContent = xmlhttp.responseText.split('||');
    
      //verify the array and update the webpage
      var length = arrContent.length;
      if (length=4){document.getElementById("referenceCode").innerHTML=arrContent[0];
    
      document.getElementById("pdfLink").innerHTML= "<a href='"+arrContent[1]+"'>Download the PDF</a>";
    
      document.getElementById("image1").src=arrContent[2];
    
      document.getElementById("image2").src=arrContent[3];
    } else {
    The information from the file is split into an array
    arrContent[0] is the reference code
    arrContent[1] is the next item - the URL for the PDF
    arrContent[2] and arrContent[3] are the 3rd and 4th items in the array - the paths to the images.
    this line sets up the HTML that is a hyperlink and places it into the div with id=pdfLink
    Code:
    document.getElementById("pdfLink").innerHTML= "<a href='"+arrContent[1]+"'>Download the PDF</a>";
    These two lines simply update the source of the images to be the URL for that item. I noticed in your code that you still had "product" which is not a variable that you are setting anymore, so I removed setting the alt text on the images - you can add that back in if you have a value to put there:
    Code:
      document.getElementById("image1").src=arrContent[2];
      document.getElementById("image2").src=arrContent[3];

  4. #19
    Join Date
    Jul 2012
    Posts
    17
    Thank you for all this assistance.

    I originally thought that each selection needed its own txt file, but I see how stupid this would be.

    If I understand it, this code :

    xmlhttp.open("GET","products/"+dropdown1+'-"+dropdown2+'-"+dropdown3+".txt",true);
    will go into my txt file as it refers to the variables, therefore picks up the necessary information from what ever the user chooses from each dropdown, am I warm?

    If so, I still don't see what the txt file should contain, in terms of paths?
    I understand that products is a directory, as this is how I have it set up.
    e.g. products / filename.txt

    Now with in that txt file do I add, each path for each dropdown e.g.
    +dropdown1+

    products / refcodes/ NFR / 2345
    products / pdfs / brick-block / bricks.pdf
    products / images /brick.gif

    I'm sorry but I don't understand how the two files talk to each other and how each of the combinations in the dropdowns would be picked up?

    What would the txt file need to contain?

    Thanks

  5. #20
    Join Date
    Nov 2007
    Posts
    432
    The filename is value of the dropdowns with hyphens in between the values:

    we get values from the dropdowns here:
    Code:
    //fetch product details based on the selection
    var dropdown1 = document.getElementById('id_for_use_in').value;
    var dropdown2 = document.getElementById('id_environment').value;
    var dropdown3 = document.getElementById('id_type').value;
    we put them together into value1-value2-value3.txt format here:
    Code:
    var detailsPage = dropdown1+"-"+dropdown2+'-"+dropdown3+".txt"
    xmlhttp.open("GET","products/"+detailsPage,true);
    If you have the page on your local machine, add an "alert(detailsPage)" so you can see what file name you just created.
    Last edited by nap0leon; 07-25-2012 at 08:00 AM.

  6. #21
    Join Date
    Jul 2012
    Posts
    17
    This is all the script that you've given me, thought I'd post it in case there is anything I've altered that shouldn't be there, also I've tried a number of things with the text file, i.e. changed name to value1.txt, value1-value-2-valu3.txt, detailsPage.txt but I just don't get how to list the info, could you give me an example? I've tried it server side.

    I presume I'd need three txt files one for each value?

    Thank you for your patience and help

    Code:
    	<title>AJAX Demo</title>
    <script type="text/javascript">
    function showDetails(){
    	//fetch product details based on the selection
    	var dropdown1 = document.getElementById('id_for_use_in').value;
    	var dropdown2 = document.getElementById('id_environment').value;
    	var dropdown3 = document.getElementById('id_type').value;
    
    	//if any of the three are empty, break out of the function - don't do anything yet
    	if (dropdown1 =='' || dropdown2 == '' || dropdown3 == '') { return '' }
    
    	//set up the AJAX
    	var xmlhttp;
    	if (window.XMLHttpRequest) {
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		xmlhttp=new XMLHttpRequest();
    	} else {
    		// code for IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    
    	xmlhttp.onreadystatechange=function() {
    		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    			//page responded with a result
    			//format of responseText should be like
    			// CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2
    
    			//split the responseText on ||
    			var arrContent = xmlhttp.responseText.split('||');
    
    			//verify the array and update the webpage
    			var length = arrContent.length;
    			if (length=4){
    				document.getElementById("referenceCode").innerHTML=arrContent[0];
    
    				document.getElementById("pdfLink").innerHTML= "<a href='"+arrContent[1]+"'>Download the PDF</a>";
    				document.getElementById("image1").src=arrContent[2];
    				document.getElementById("image2").src=arrContent[3];
    		
    			} else {
    				alert('error reading details - invalid result');
    			}
    		}
    	}
    
    	//The URL you are getting the details from
    
    var detailsPage = dropdown1+'-"+dropdown2+'-"+dropdown3+".txt"
    xmlhttp.open("GET","products/"+detailsPage,true);
    }
    
    </script>
    
    
    </head>
    <body>
    <select name="id_for_use_in" id="id_for_use_in" onChange="showDetails()">
    	<option value=""></option>
    	<option value="use-wall">For use in the wall</option>
    	<option value="use-ceiling">For use in the ceiling </option>
    </select><br/>
    
    <select name="id_environment" id="id_environment" onChange="showDetails()">
    	<option value=""></option>
    	<option value="NFR">General NFR</option>
    	<option value="brick-block">Brick & Block-Work</option>
    	<option value="plaster"> Plaster</option>
    	<option value="drywall">Drywall</option>
    	<option value="with-seals">Fitted with Seals</option>
    	<option value="fire">Fire Rated</option>
    	<option value="acoustic">Acoustic</option>
    	<option value="anti-tamper">Anti Tamper environments</option>
    </select><br/>
    
    <select name="id_type" id="id_type" onChange="showDetails()">
    	<option value=""></option>
    	<option value="metal-pic-door-frame">Metal Faced Door Picture Frame</option>
    	<option value="metal-bead-door-frame">Metal Faced Door Beaded Frame</option>
        <option value="plaster-pic-door-frame">Plaster Faced Door Picture Frame</option>
    	<option value="plaster-bead-door">Plaster Faced Door Beaded Frame</option>
    	<option value="plaster-bead-door-frame">Plaster Faced Beaded Door Beaded Frame</option>
    </select><br/>
    <input type="submit" value="search" />
    
    <div id="referenceCode" style="width:200px; height:100px; border:1px solid #333;"></div>
    <div id="pdfLink"></div>
    <img id="image1" src="" alt="">
    <img id="image2" src="" alt="">
    
    </body>
    </html>

  7. #22
    Join Date
    Nov 2007
    Posts
    432
    Dropdown1, dropdown2, dropdown3, detailsPage are all variables.

    After the line that begins "detailsPage ="
    Add this line:
    HTML Code:
    alert(detailsPage)
    Now when you select the third drop down you can see the name I the file that it is goin to try to read.

    On my phone right now...When I get real computer I can try writing this out more explicitly for you.

  8. #23
    Join Date
    Nov 2007
    Posts
    432
    I've renamed the variables to make them easier for you to interpret, and added some alerts to help you trouble shoot.

    Here is the page with the drop-downs:
    HTML Code:
    <html>
    <head>
    <title>AJAX Demo</title>
    <script type="text/javascript">
    function showDetails(){
    	//fetch product details based on the selection
    	var for_use_in = document.getElementById('id_for_use_in').value;
    	var environment = document.getElementById('id_environment').value;
    	var type = document.getElementById('id_type').value;
    
    	//if any of the three are empty, break out of the function - don't do anything yet
    	if (for_use_in =='' || environment == '' || type == '') { return '' }
    
    	//set up the AJAX
    	var xmlhttp;
    	if (window.XMLHttpRequest) {
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		xmlhttp=new XMLHttpRequest();
    	} else {
    		// code for IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    
    	xmlhttp.onreadystatechange=function() {
    		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    			//page responded with a result
    			//format of responseText should be like
    			// CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2
    
    			//split the responseText on ||
    			var arrContent = xmlhttp.responseText.split('||');
    
    			//verify the array and update the webpage
    			var length = arrContent.length;
    			if (length=4){
    				var referenceCode = arrContent[0];
    				var pdfURL = arrContent[1];
    				var image1URL = arrContent[2];
    				var image2URL = arrContent[3];	
    
    				document.getElementById("referenceCode").innerHTML= referenceCode;
    				document.getElementById("pdfLink").innerHTML= "<a href='"+pdfURL+"'>Download the PDF</a>";
    				document.getElementById("image1").src= image1URL;
    				document.getElementById("image2").src= image2URL;
    			} else {
    				alert('error reading details - invalid result');
    			}
    		} else {
    			if (xmlhttp.readyState==4) {
    				alert('error locating file at location "' +detailsFile+ '"');
    			}
    		}
    	}
    
    	//The URL you are getting the details from
    	var detailsFile = 'products/'+ for_use_in + '-' + environment +'-'+ type +'.txt'
    
    	xmlhttp.open("GET",detailsFile,true);
    	xmlhttp.send();
    }
    </script>
    
    </head>
    <body>
    <select name="id_for_use_in" id="id_for_use_in" onChange="showDetails()">
    	<option value=""></option>
    	<option value="use-wall">For use in the wall</option>
    	<option value="use-ceiling">For use in the ceiling </option>
    </select><br/>
    
    <select name="id_environment" id="id_environment" onChange="showDetails()">
    	<option value=""></option>
    	<option value="NFR">General NFR</option>
    	<option value="brick-block">Brick & Block-Work</option>
    	<option value="plaster"> Plaster</option>
    	<option value="drywall">Drywall</option>
    	<option value="with-seals">Fitted with Seals</option>
    	<option value="fire">Fire Rated</option>
    	<option value="acoustic">Acoustic</option>
    	<option value="anti-tamper">Anti Tamper environments</option>
    </select><br/>
    
    <select name="id_type" id="id_type" onChange="showDetails()">
    	<option value=""></option>
    	<option value="metal-pic-door-frame">Metal Faced Door Picture Frame</option>
    	<option value="metal-bead-door-frame">Metal Faced Door Beaded Frame</option>
    	<option value="plaster-pic-door-frame">Plaster Faced Door Picture Frame</option>
    	<option value="plaster-bead-door">Plaster Faced Door Beaded Frame</option>
    	<option value="plaster-bead-door-frame">Plaster Faced Beaded Door Beaded Frame</option>
    </select><br/>
    
    
    <div id="referenceCode"></div><br/>
    <div id="pdfLink"></div><br/>
    <img id="image1" src="" alt=""><br/>
    <img id="image2" src="" alt="">
    
    </body>
    </html>
    Now create a sub-directory named "products" and create a file named "use-wall-NFR-metal-pic-door-frame.txt" with the following text in it.
    Code:
    2398765||http://www.web.com/spec/CTBB_B&Block_G.pdf||http://paulo-design.net/AirGraph.jpg||http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Neil_Armstrong_pose.jpg/220px-Neil_Armstrong_pose.jpg
    With the code above, when you select the first value in each drop-down, you will see a reference code appear, the PDF link appears, and 2 images.

    You will need to create a file for each and every combination that a user can choose from your drop-downs (80 possible combinations). For example, if the user selects "use-wall" and "NFR", there are 5 possible "types". To cover the results for each of these, you need the following 5 files:
    products/use-wall-NFR-metal-pic-door-frame.txt
    products/use-wall-NFR-metal-bead-door-frame.txt
    products/use-wall-NFR-plaster-pic-door-frame.txt
    products/use-wall-NFR-plaster-bead-door.txt
    products/use-wall-NFR-plaster-bead-door-frame.txt

  9. #24
    Join Date
    Jul 2012
    Posts
    17
    Thank you so much this is fantastic!! works a treat.

    Exactly what I needed, now I can lay it out and present it.

    One more thing I require which is something that I've been told only yesterday, is if for example in the "For Use In" dropdown we select "ceiling" can we add or limit the options of the other dropdowns?
    So a user selects
    "ceiling" from dropdown1
    Which adds or limits further options

    In the ceiling options they want to add two more in dropdown3 "Type"

    In dropdown2 "Environment" they want to limit several options to two or three in dropdown3 "Type"

    I have a word file with it in which I have attached

    Many thanks yet again
    Attached Files Attached Files

  10. #25
    Join Date
    Nov 2007
    Posts
    432
    Here's a page on my site that shows how to do this:
    http://www.jasondahlin.com/2011/codi...s-dropdown.asp

    In this example, it takes the value from a radio button (instead of a select drop-down) and populates the next select's drop-down with the appropriate options.

    In practice, I've found the best way to handle this is to create the page with all 3 select boxes on the page, but the 2nd and 3rd would be empty. When the user makes a selection in the first drop-down, run a function "onchange" that populates the second drop-down. When the user makes a selection in the second dropdown, run an "onchange" function that populates the third drop-down.

    One thing not to forget is that if a user makes selections for "use_in" and "environment", if the user changes "use-in", not only does the script need to re-populate "environment", you should also empty "type" (if you don't your page will have "use-in" and "type" with options selected but not "environment", which is an odd user experience)

    This next example is probably over your head right now, but... play with the drop-downs to see the concepts above in action.

    Here is a demo-page I built for a client that shows this concept in action using AJAX to fetch the list of options for each subsequent drop-down.
    http://jasondahlin.com/sweetdreams/c...asp?type=order

  11. #26
    Join Date
    Jul 2012
    Posts
    17
    Thanks Jason,

    This is a great resource, I certainly think the fun box on your demo page is close to what is needed. This seems to allow switching on and off items, I'll have a play with it.

    Thanks

  12. #27
    Join Date
    Jul 2012
    Posts
    17
    Hello again,

    I've tried a number of inferences but I can't see m to get it to work, could you point out where I'm going wrong?

    Code:
    <script type="text/javascript">
    
    function specChange(spec){
    	var selectSpec = document.getElementById('spec_list').value;
    	
    		switch (spec.value) {
    			case 'drop3':{
                dropdown.options.length = 0;
                dropdown.options[dropdown.options.length] = new Option('Select One','0');
                dropdown.options[dropdown.options.length] = new Option('Karnataka','Karnataka');
                dropdown.options[dropdown.options.length] = new Option('TamilNadu','TamilNadu');
                dropdown.options[dropdown.options.length] = new Option('Kerala','Kerala');
                dropdown.options[dropdown.options.length] = new Option('Delhi','Delhi');
                break;
            }
    			
    		}
    }
    
    
    function showDetails(){
    	//fetch product details based on the selection
    	var for_use_in = document.getElementById('id_for_use_in').value;
    	var environment = document.getElementById('id_environment').value;
    	var type = document.getElementById('id_type').value;
    	
    	//if any of the three are empty, break out of the function - don't do anything yet
    	if (for_use_in =='' || environment == '' || type == '') { return '' }
    
    	//set up the AJAX
    	var xmlhttp;
    	if (window.XMLHttpRequest) {
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		xmlhttp=new XMLHttpRequest();
    	} else {
    		// code for IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    
    	xmlhttp.onreadystatechange=function() {
    		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    			//page responded with a result
    			//format of responseText should be like
    			// CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2
    
    			//split the responseText on ||
    			var arrContent = xmlhttp.responseText.split('||');
    
    			//verify the array and update the webpage
    			var length = arrContent.length;
    			if (length=4){
    				var referenceCode = arrContent[0];
    				var pdfURL = arrContent[1];
    				var image1URL = arrContent[2];
    				var image2URL = arrContent[3];	
    
    				document.getElementById("referenceCode").innerHTML= referenceCode;
    				document.getElementById("pdfLink").innerHTML= "<a href='"+pdfURL+"'>Download the PDF</a>";
    				document.getElementById("image1").src= image1URL;
    				document.getElementById("image2").src= image2URL;
    			} else {
    				alert('error reading details - invalid result');
    			}
    		} else {
    			if (xmlhttp.readyState==4) {
    				alert('error locating file at location "' +detailsFile+ '"');
    			}
    		}
    	}
    
    	//The URL you are getting the details from
    	var detailsFile = 'products/'+ for_use_in + '-' + environment +'-'+ type +'.txt'
    
    	xmlhttp.open("GET",detailsFile,true);
    	xmlhttp.send();
    }
    </script>
    
    </head>
    <body>
    <fieldset id="drop1">
    <select name="id_for_use_in" id="id_for_use_in" onChange="showDetails()">
    	<option value=""></option>
    	<option value="use-wall">For use in the wall</option>
    	<option value="use-ceiling">For use in the ceiling </option>
    </select><br/>
    </fieldset>
    
    <fieldset id="drop2">
    <select name="id_environment" id="id_environment" onChange="showDetails()">
    	<option value=""></option>
    	<option value="NonFireRated">General NFR</option>
    	<option value="brick-block">Brick & Block-Work</option>
    	<option value="plaster"> Plaster</option>
    	<option value="drywall">Drywall</option>
    	<option value="with-seals">Fitted with Seals</option>
    	<option value="fire">Fire Rated</option>
    	<option value="acoustic">Acoustic</option>
    	<option value="air_sealed" onchange="javascript:specifics(this);">Air Sealed</option>
    </select><br/>
    </fieldset>
    
    
    <fieldset id="drop3">
            <legend>Spec List</legend>
            <select name="id_type" id="type_list" size="1">
                <option value="00">Select Type</option>
            </select>
        </fieldset>
        
    
    <div id="referenceCode"></div><br/>
    <div id="pdfLink"></div><br/>
    <img id="image1" src="" alt=""><br/>
    <img id="image2" src="" alt="">
    
    </body>
    I also tried this one out but I can't figure out how to integrate it to work with three selections, would it require a loop?

    Code:
    <script type="text/javascript">
        function configureDropDownLists(ddl1,ddl2) {
            var colours = new Array('Black', 'White', 'Blue');
            var shapes = new Array('Square', 'Circle', 'Triangle');
            var names = new Array('John', 'David', 'Sarah');
    
            switch (ddl1.value) {
                case 'Colours':
                    document.getElementById(ddl2).options.length = 0;
                    for (i = 0; i < colours.length; i++) {
                        createOption(document.getElementById(ddl2), colours[i], colours[i]);
                    }
                    break;
                case 'Shapes':
                    document.getElementById(ddl2).options.length = 0; 
                for (i = 0; i < colours.length; i++) {
                    createOption(document.getElementById(ddl2), shapes[i], shapes[i]);
                    }
                    break;
                case 'Names':
                    document.getElementById(ddl2).options.length = 0;
                    for (i = 0; i < colours.length; i++) {
                        createOption(document.getElementById(ddl2), names[i], names[i]);
                    }
                    break;
                    default:
                        document.getElementById(ddl2).options.length = 0;
                    break;
            }
    
        }
    
        function createOption(ddl, text, value) {
            var opt = document.createElement('option');
            opt.value = value;
            opt.text = text;
            ddl.options.add(opt);
        }
    </script>
    
    </head>
    
    <body>
    
    <select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
    <option value=""></option>
    <option value="Colours">Colours</option>
    <option value="Shapes">Shapes</option>
    <option value="Names">Names</option>
    </select>
    
    <select id="ddl2">
    </select>

  13. #28
    Join Date
    Nov 2007
    Posts
    432
    In your first example:
    1- I presume you want to add a call to "specChange" when the user selects an option in the first drop down. If so,
    a- change your <select> element to:
    Code:
    <select name="id_for_use_in" id="id_for_use_in" onChange="specChange(this)">
    b- in "specChange", "drop3" is not a value that a user can select, you are looking for whether the user selected "use-wall" or "use-ceiling", so your case statement would look like this:
    Code:
    case 'use-wall':
      //
    and
    Code:
    case 'use-ceiling':
    At the top of the function you are identifying the drop-down that you want to change the options for, but there is no drop-down with the ID "spec_list" so nothing will ever get updated.

    Also, inside your switch, once you've properly identified the value that the user chose, you are setting the options in a dropdown by using the variable "dropdown" as a pointer to the drop-down that you want to update, but your variable is named "selectSpec" so you will be getting an "undeclared variable" error.

    I could go on and on...

    functioning code in next post.

  14. #29
    Join Date
    Nov 2007
    Posts
    432
    The javascript:
    HTML Code:
    function chgUseIn(sVal){
    	//user changed "Use In", set the values for "Environment" and clear "Type"
    
    	//create reference to Environment drop-down
    	var sEnv = document.getElementById('selEnv');
    	
    	//for the selected value, fill the drop-down
    	switch (sVal) {
    		case 'use-wall':{
    			sEnv.options.length = 0;
    			sEnv.options[sEnv.options.length] = new Option('-- Select Environment --','');
    			sEnv.options[sEnv.options.length] = new Option('General NFR','NonFireRated');
    			sEnv.options[sEnv.options.length] = new Option('Brick & Block-Work','brick-block');
    			sEnv.options[sEnv.options.length] = new Option('Plaster','plaster');
    			sEnv.options[sEnv.options.length] = new Option('Drywall','drywall');
    			sEnv.options[sEnv.options.length] = new Option('Fitted with Seals','with-seals');
    			sEnv.options[sEnv.options.length] = new Option('Fire Rated','fire');
    			sEnv.options[sEnv.options.length] = new Option('Acoustic','acoustic');
    			sEnv.options[sEnv.options.length] = new Option('Air Sealed','air_sealed');
    			break;
    		}
    		case 'use-ceiling':{
    			sEnv.options.length = 0;
    			sEnv.options[sEnv.options.length] = new Option('-- Select Environment --','');
    			sEnv.options[sEnv.options.length] = new Option('Brick & Block-Work','brick-block');
    			sEnv.options[sEnv.options.length] = new Option('Plaster','plaster');
    			sEnv.options[sEnv.options.length] = new Option('Drywall','drywall');
    			sEnv.options[sEnv.options.length] = new Option('Fitted with Seals','with-seals');
    			sEnv.options[sEnv.options.length] = new Option('Fire Rated','fire');
    			sEnv.options[sEnv.options.length] = new Option('Acoustic','acoustic');
    			sEnv.options[sEnv.options.length] = new Option('Air Sealed','air_sealed');
    			break;
    		}
    		default:{
    			sEnv.options.length = 0;
    			sEnv.options[sEnv.options.length] = new Option(' ','');
    			break;
    		}
    	}
    
    	//just in case we need to, let's clear "Type" by passing in an empty value
    	chgEnvironment('');
    }
    
    function chgEnvironment(sVal){
    	//create reference to the Type drop-down 
    	var sType = document.getElementById('selType');
    	
    	//for the selected value, fill the drop-down 
    	switch (sVal) {
    		case 'NonFireRated':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		case 'brick-block':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		case 'plaster':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		case 'drywall':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		case 'with-seals':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		case 'fire':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		case 'acoustic':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		case 'anti-tamper':{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option('-- Select Type --','');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Picture Frame','metal-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Metal Faced Door Beaded Frame','metal-bead-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Picture Frame','plaster-pic-door-frame');
    			sType.options[sType.options.length] = new Option('Plaster Faced Door Beaded Frame','plaster-bead-door');
    			sType.options[sType.options.length] = new Option('Plaster Faced Beaded Door Beaded Frame','plaster-bead-door-frame');
    			break;
    		}
    		default:{
    			sType.options.length = 0;
    			sType.options[sType.options.length] = new Option(' ','');
    			break;
    		}
    	}
    }
    
    function showDetails(){
    	//fetch product details based on the selection
    	var selUseIn = document.getElementById('selUseIn').value;
    	var selEnv = document.getElementById('selEnv').value;
    	var selType = document.getElementById('selType').value;
    	
    	//if any of the three are empty, break out of the function - don't do anything yet
    	if (selUseIn =='' || selEnv == '' || selType == '') { return '' }
    
    	//set up the AJAX
    	var xmlhttp;
    	if (window.XMLHttpRequest) {
    		// code for IE7+, Firefox, Chrome, Opera, Safari
    		xmlhttp=new XMLHttpRequest();
    	} else {
    		// code for IE6, IE5
    		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    
    	xmlhttp.onreadystatechange=function() {
    		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    			//page responded with a result
    			//format of responseText should be like
    			// CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2
    
    			//split the responseText on ||
    			var arrContent = xmlhttp.responseText.split('||');
    
    			//verify the array and update the webpage
    			var length = arrContent.length;
    			if (length=4){
    				var refCode = arrContent[0];
    				var pdfURL = arrContent[1];
    				var image1URL = arrContent[2];
    				var image2URL = arrContent[3];	
    
    				document.getElementById("referenceCode").innerHTML= refCode;
    				document.getElementById("pdfLink").innerHTML= "<a href='"+pdfURL+"'>Download the PDF</a>";
    				document.getElementById("image1").src= image1URL;
    				document.getElementById("image2").src= image2URL;
    			} else {
    				alert('error reading details - invalid result');
    			}
    		} else {
    			if (xmlhttp.readyState==4) {
    				alert('error locating file at location "' +detailsFile+ '"');
    			}
    		}
    	}
    
    	//The URL you are getting the details from
    	var detailsFile = 'products/'+ selUseIn + '-' + selEnv +'-'+ selType +'.txt'
    
    	xmlhttp.open("GET",detailsFile,true);
    	xmlhttp.send();
    }

  15. #30
    Join Date
    Nov 2007
    Posts
    432
    The HTML (place this after the javascript posted above):
    HTML Code:
    <style>
    fieldset {width:300px;}
    select {width:200px;}
    </style>
    <fieldset id="use_in_fieldset">
    	<select name="selUseIn" id="selUseIn" onChange="chgUseIn(this.value)">
    		<option value="">-- Select Use --</option>
    		<option value="use-wall">For use in the wall</option>
    		<option value="use-ceiling">For use in the ceiling </option>
    	</select>
    </fieldset>
    <br/>
    <fieldset id="environment_fieldset">
    	<select name="selEnv" id="selEnv" onChange="chgEnvironment(this.value)">
    		<option value=""> </option>
    	</select>
    </fieldset>
    <br/>
    <fieldset id="type_fieldset">
            <select name="selType" id="selType" onChange="showDetails()">
    		<option value=""> </option>
            </select>
    </fieldset>
        
    
    <div id="referenceCode"></div><br/>
    <div id="pdfLink"></div><br/>
    <img id="image1" src="" alt=""><br/>
    <img id="image2" src="" alt="">

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles