...

View Full Version : Call up



tabbu
07-17-2012, 11:42 AM
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.

sunfighter
07-17-2012, 06:19 PM
This will get the drop down values for you.


<!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>

Old Pedant
07-17-2012, 08:55 PM
I'm curious as to why you think you need an XML file.

tabbu
07-25-2012, 10:17 AM
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>

Old Pedant
07-25-2012, 08:58 PM
It looks *generally* right. Are you having some specific error?

tabbu
07-25-2012, 10:35 PM
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?

tabbu
07-26-2012, 11:43 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum