Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Call up

  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Call up

    Hello, I'm still learning javascript and I need some help regarding a selector option.

    Basically a page has three drop-down options with several listings in each. Based on selected options of the three, the script would call up a reference code, a pdf link and two images.

    I understand this will need an xml file and repository for the images, with reference to the name of each image corresponding to the xml file and javascript call up. I imagine it will need a loop in order to determine the correct outcome. How feasible is this in javascript and if anyone could guide me through it would be appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 592 Times in 591 Posts
    This will get the drop down values for you.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function bug()
    {
    	// three lines get choosen value of each drop down.
    	var x=document.getElementById("first").value;
    	var y=document.getElementById("second").value;
    	var z=document.getElementById("last").value;
    	if (x && y && z) // The loop is activated only if all 3 dropdowns have been picked
    	{
    		txt = x+" and "+y+" and "+z;
    		alert(txt);          // while this just display you do your magic instead
    	}
    }
    </script>
    </head>
    <body>
    <select id="first" onchange="bug();">
    <option value="">First</option>
    <option value="the11">choose 11</option>
    <option value="the12">choose 12</option>
    <option value="the13">choose 13</option>
    </select>
    
    <select id="second" onchange="bug();">
    <option value="">Second</option>
    <option value="the21">choose 21</option>
    <option value="the22">choose 22</option>
    <option value="the23">choose 23</option>
    </select>
    
    <select id="last" onchange="bug();">
    <option value="">Last</option>
    <option value="the31">choose 31</option>
    <option value="the32">choose 32</option>
    <option value="the33">choose 33</option>
    </select>
    </body>
    </html>

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,144
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I'm curious as to why you think you need an XML file.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello sorry for the delay in getting back.

    Update: I've been playing about with this and trawling the web for solutions and I think it would be easier for me to use a txt file that the javascript can access.
    Would you know a way of doing this as I have some code but I can't figure out how it references the text file?


    <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

    xmlhttp.open("GET","products/"+dropdown1+'-"+dropdown2+'-"+dropdown3+".txt",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" 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>


  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,144
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    It looks *generally* right. Are you having some specific error?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for getting back,

    I can't figure out how to list content I require in the referenced text file.
    Or how to call up the file, as nothing comes up in the divs?

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I seem to have found the solution to my problems(thanks to nap0leon), I wasn't using the right title combination for the outcome, e.g. use-wall-NFR-metal-pic-door-frame.txt.

    I'll need to create each possible combination using the right titling for them.

    Thanks once again for your assistance


  •  

    Posting Permissions

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