Call up

**tabbu** · 07-17-2012 04:38 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.

**nap0leon** · 07-18-2012 08:42 AM

If I understand...

User makes selections in three drop-down boxes then clicks a "Go" button... The "Go" button examines the selected values to display a reference code, a PDF link, and 2 images. The specifics about what to display come from an XML file.

The Go button should run a javascript function that makes an AJAX call to another page on your webserver. The AJAX request contains QueryString parameters for each of the 3 values that the user selected.

The page that receives the request reads the XML file to determine the Reference Code, PDF link, and image paths to display. The output of this page could be like "CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2"

When the AJAX request completes, you can split the responseText on '||' to get an array of the values that were returned and then update your webpage to display that information as appropriate.

**tabbu** · 07-18-2012 11:50 AM

Hello, thank you for replying.

Yes this is precisely what I need to do, only I don't have much experience with ajax or javascript for that matter.

Would you say this is a relatively achievable task for a novice, to create something like this?

If you have any code or know of any sites that utilise this function, so I can see it in action, it would be very helpful.

thank you again.

**nap0leon** · 07-18-2012 12:27 PM

This example shows how to add AJAX to a page that reads a text file:
http://www.w3schools.com/ajax/default.asp

Instead of reading "ajax_info.txt" you would instead point at whatever page you are using to read the XML file. How you read the XML file depends on what server-side language you are using.

Once you have your webpage giving you the information you want, using the format described in my first reply, you would replace this

Code:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

with something like this:

Code:

var arrContent = xmlhttp.responseText.split('||')

Now that the response is loaded into an array, update or create the elements on your page with those values.

For example:

Code:

//place the ReferenceCode into the div with ID='refCode'
document.getElementById('refCode').innerHTML = arrContent[0]

similar for the other items...

Code:

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

**tabbu** · 07-20-2012 05:23 AM

Thanks for the snippets,

Could this be done without the use of an xml file, just referring a txt file instead?

**nap0leon** · 07-20-2012 08:59 AM

You can put the data into whatever file or format you want, as long as your webpage (the one you make the AJAX call to) can pull out the appropriate information from it based on the parameters you pass to the webpage.

**tabbu** · 07-20-2012 11:32 AM

Thanks, I've been trying this out in various ways, but I don't exactly know where to place the elements you've highlighted and then also to make it selectable through select option.

Heres what I've tried basically taken from the w3schools:

<head>
<script type="text/javascript">
function loadXMLDoc()
{
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)
{
var arrContent = xmlhttp.responseText.split('||') }
}
xmlhttp.open("GET","data.xml",true);
xmlhttp.send();

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

}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

<select>
<option value="active">Select an option</option>
<option value="Wall" onchange="loadXMLDoc()">Wall</option>
<option value="Ceiling" onchange="loadXMLDoc()">Ceiling</option>

</select>

<div id='refCode-1'>||||</div>
<div id='pdfLink'>||||</div>

</body>
</html>

**nap0leon** · 07-20-2012 11:43 AM

1- m

**nap0leon** · 07-20-2012 11:48 AM

1- move these lines to be directly after the split or put the split and these lines into a separate function and pass the responseText into that function.

Code:

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

2- you dont want to AJAX request the XML file, you want to send a request to a web page that uses server side code to load the XML file and decide what to return based on the parameters you pass to the page.

I have a bunch of meetings today but will see if I can locate an example for you and post later.

**tabbu** · 07-22-2012 04:49 AM

Thank you for all this assistance much appreciated.

I don't know if I can get this to work in time as my boss is hassling me to get it done.

If possible can we pay you to set up the code?
With some instructions on where I can add options and modifications for later use should i need to update the content, the layout is not important at this point as i'm proficient in html and css just not javascript yet or any ajax. This way it'll give me a base to work off and learn as I go on.

In the meantime I'll continue to get my head around this code.

Thank you

**nap0leon** · 07-22-2012 07:38 AM

Here is a very basic example.

Here is a sample page where the user selects a product from a dropdown box. When they select an item, the javascript function "showDetails" fires. Presuming the user selected product "ABC", the function sends a request for webpage "proxy_page.html?product=ABC". proxy_page.html returns "double-pipe delimited" text in the format "CODEHERE||PDFPATHHERE||IMAGEPATH1||IMAGEPATH2" which is split into an array. These values are then updated on the page.

Code:

<html>
<head>
	<title>AJAX Demo</title>
<script type="text/javascript">
function showDetails(product){
	//fetch product details based on the selection
	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","proxy_page.html?product="+product,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<select name="ProductSelector" id="ProductSelector" onChange="showDetails(this.value)">
	<option value=""></option>
	<option value="ABC">Product ABC</option>
	<option value="DEF">Product DEF</option>
	<option value="GHI">Product GHI</option>
</select><br/>
<div id="referenceCode"></div>
<div id="pdfLink"></div>
<img id="image1" src="" alt="">
<img id="image2" src="" alt="">

</body>
</html>

For proxy_page.html...
This page does nothing but spit out the information as described above. For demonstration purposes, just create this page in the same location as the first file and put this text into it (these paths are obviously wrong):

Code:

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

In reality, if you want to read an XML file or connect to a database, this should be a .php or .asp or .aspx or .jsp page (depending on what server-side language you are using).

Or... if you have a different txt file for each product... you can change the path to the file so that it reads the specific file you are looking for.
e.g., this would look for the file "/products/ABC.txt"

Code:

	xmlhttp.open("GET","products/"+product+".txt",true);

This should be enough to get you started on the AJAX portion of it. The rest of the work depends on how you are going to look up the values for the Reference Code, PDF Path, and image Paths.

There are *a ton* of ways to do this... the method above is one I devised a few years ago and used successfully at a major internet company.

When you get to the point of trying to read the XML file- you should post for help in the forum specific to the language (ASP, PHP, etc.) you are using.

**tabbu** · 07-23-2012 05:04 AM

Thank you for this, I'll take a trawl through it and see if I can make sense of it.
I see there is one select option menu, if I were to add another two is it a question of replicating the existing code with reference values to the other select option menus?

Thank you

**nap0leon** · 07-23-2012 07:12 AM

If you have 3 select boxes and want the AJAX to fire only when all 3 have values, change the code above to this:

The select boxes should all look like this (removed "this.value" from the onChange event):

Code:

<select name="ProductSelector" id="ProductSelector" onChange="showDetails()">
	<option value=""></option>
	<option value="ABC">Product ABC</option>
	<option value="DEF">Product DEF</option>
	<option value="GHI">Product GHI</option>
</select><br/>

Change the top of the function so that it reads the values from the form - of course, you will need to change the IDs to be those of your form fields.

Code:

function showDetails(){
	//fetch product details based on the selection
	var dropdown1 = document.getElementById('id_of_drop_down1').value;
	var dropdown2 = document.getElementById('id_of_drop_down2').value;
	var dropdown3 = document.getElementById('id_of_drop_down3').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;

You'll also need to add these to the AJAX request:

Code:

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

**tabbu** · 07-23-2012 07:14 AM

I think it'll be PHP, but I'd be inclined to use the txt file function you've mentioned.

**nap0leon** · 07-23-2012 08:35 AM

If you have a manageable number of combinations and a way to generate a unique txt file for each, the simplest approach may be to use the text files:

value1-value2-value3.txt

Long term - especially if there are lots of combinations - look into getting the information from an XML file or database.

Thread: Call up

Thread Tools

Display

Call up

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions