dropdown box populated from php array

[baseballfury]

Hi there,

I've created a page that uses 2 seperate functions for passing variables.
The first runs when the page loads and requests categories from a database to fill a dropdown box.
The second function sends a date value and the contents of the select from the dropdown box to search a database then outputs the results to the page.
They both use getelementbyid to display their results. the category search uses <div id="txtindex"> and the date/dropdown search uses <div id="txtupdate">
My problem is the results from the date/dropdown which should display in the 'txtupdate' div are displaying where the dropdown box used to be, so in the 'txtindex' div.
I've got a feeling it might be because i am fetching the <select name="area"> value with one function then resending that value with the second function along with the date(var1=myform.area.value;var2=myform.area.date) to get another result.

the codes here if you need a look i just didnt want to put up loads of code for you to have to scroll through.

cheers tom

[Airshow]

Fury,

Ultimately some line of code somewhere is using the result of getElementById(txtindex") instead of getElementById(txtupdate"). All you have to do is track it down.

If it's not obvious then I would immediately suspect the use/reuse of a global (or outer) variable. Suggest you give this first consideration.

To analyse your code in this respect you can do worse than install Douglas Crockford's JSLint. There's an online version, or you can install it as a Yahoo! Widget (recommended). It takes a little while to install but soon becomes your best friend when programming in JavaScript.

Airshow

[baseballfury]

had a look and cant seen any repetition.
You mentioned a global variable, the 2 functions are actually saved in seperate js files, is that part of the problem do you think, the javascript getting confused as what it is supposed to be returning.

I thought the problem was that im using one function to return the contents of the dropdown box with textresponse e.g. "<option='Area'>" etc but then i'm resending the user selected option along with a date to get the results of another search.

Any ideas?

Cheers

Tom

[baseballfury]

meant to ask actually is there a better way to return the dropdown list options other than getelementbyid e.g. getelementbytag and have the <option name=area></option> actually on the html page instead of returning it with <div id=txtindex>

thanks again

[Airshow]

Tom,

had a look and cant seen any repetition.
You mentioned a global variable, the 2 functions are actually saved in seperate js files, is that part of the problem do you think, the javascript getting confused as what it is supposed to be returning.

Separate files shouldn't matter but be aware that when included on the same page, both scripts occupy the same global namespace. Therefore, don't reuse variable names or function names.

I thought the problem was that im using one function to return the contents of the dropdown box with textresponse e.g. "<option='Area'>" etc but then i'm resending the user selected option along with a date to get the results of another search.

Here are the rules:

1. There are no constraints on the number of types of AJAX call available in the code.
2. As long as AJAX calls are performed sequentially, then there there are no constraints on the number of calls that are made. To be sequential, each call must have returned, and its response handler completed, before the next call is initiated.
3. With truly independent AJAX calls, you can have two or more in progress simultaneously. To be independent, they must not compete for resources (in particular DOM elements into which their results are inserted) and must be insensitive to the order in which the responses arrive.

From what I understand of your application, the two calls must be sequential, because the second is not possible before the first has successfully returned.

meant to ask actually is there a better way to return the dropdown list options other than getelementbyid e.g. getelementbytag and have the <option name=area></option> actually on the html page instead of returning it with <div id=txtindex>

Typically, in AJAX/DHTML we hard code containing divs in the HTML then dynamically insert/remove content. If you are not doing this, then it would be something to explore to fix the problem.

Airshow

[baseballfury]

Typically, in AJAX/DHTML we hard code containing divs in the HTML then dynamically insert/remove content. If you are not doing this, then it would be something to explore to fix the problem.

any suggestions on how to return the info into a hard coded:
<select></select>
with the <option></option> being returned with the results.
I tried it but the dropdown box appeared below the select box so the data couldnt be sent.

i havent duplicated functions and variables even in the seperate scripts so that bits ok at least lol.

can i ask a couple of things about this script:

var xmlHttp

function showindex(str)
{ 
xmlHttp=GetXmlHttpObject1()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url99="indexPubs.php";
url99+="?t=";
url99+="&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged1; 
xmlHttp.open("GET",url99,true);
xmlHttp.send(null);
}

function stateChanged1() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtindex").innerHTML=xmlHttp.responseText 
 } 
}


function GetXmlHttpObject1(handler)
{
var xmlHttp=null;
	if (window.XMLHttpRequest)
	{
		//code for IE7+, Firefox, Chrome, Opera, Safari
		xmlHttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		//code for IE6, IE5
		try
		{
		xmlHttp1 = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {alert (e.description);}
	}
	return xmlHttp;
}

firstly what is the value of 't' the php script gets it but what is it i dont see it being declared anywhere.
Also i have the global variable 'xmlHttp' which is the same or both scripts but when i tried to change it to 'xmlHttp1' in one script, it stopped working. any ideas?

Also you are correct about the sequential nature of the functions but i thought it might have a problem with sending a value that isnt hardcoded i.e. returned from the first function but if you say it's fine then thats a big relief.
Sorry to keep on like this but you're giving me a bloody good education and when i get a question in my head i'm a bit OCD about getting the answer.

thanks again

Tom.

[baseballfury]

just to check is it possible to have too many <script src=""></script> in the head of my page

ta

tom

[Airshow]

any suggestions on how to return the info into a hard coded: <select></select> with the <option></option> being returned with the results.
I tried it but the dropdown box appeared below the select box so the data couldnt be sent.

IIRC most/all browsers won't play ball with selectbox.innerHTML += '<option>....</option>'; . You have two main choices:

• Get the php (ajax responder) to recompose and serve the whole <select>...</select> complete with its name etc. attributes and its original options plus the new option you want to be inserted. Then get the javascript ajax response handler to insert the whole <select>...</select> into a hard coded <div> or <span> using .appendChild() .
• Learn how to dynamically create/insert the new option using Javascript's document.createElement() and .appendChild() . These are two of smallish a family of socalled "DOM methods".

firstly what is the value of 't' the php script gets it but what is it i dont see it being declared anywhere.

t comes from the line url99+="?t="; , which is redundant, unless the php script acts on it regardless of value.

i havent duplicated functions and variables even in the seperate scripts so that bits ok at least lol.

Also i have the global variable 'xmlHttp' which is the same or both scripts but when i tried to change it to 'xmlHttp1' in one script, it stopped working. any ideas?

Then my first suspicion was correct; a reused global variable! :icon_rolleyes:

All you need to do is to delete var xmlHttp; and in each ajax function change xmlHttp=GetXmlHttpObject1(); to var xmlHttp=GetXmlHttpObject1(); . This localises the object to the functions thus avoiding name-clash in the global namespace. You also need to specify the response handler differently so as to keep xmlHttp in scope (due to a Javascript feature named closures - take a lesson from the master) :

function showindex() {
  var xmlHttp = GetXmlHttpObject1();
  if (xmlHttp==null) {
    alert ("Browser does not support HTTP Request");
    return;
  }
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
      document.getElementById("txtindex").innerHTML = xmlHttp.responseText;
    }
  };
  var url99 = "indexPubs.php?t=&sid=" + Math.random();
  xmlHttp.open("GET", url99, true);
  xmlHttp.send(null);
}

Sorry to keep on like this but you're giving me a bloody good education and when i get a question in my head i'm a bit OCD about getting the answer.

OCD is cool :icon_cool:

Must go now - I have a little music project to complete.

Airshow

[baseballfury]

might sound stupid but i didnt realise the global variables affected seperate files, good to know will give it a go now.
Good luck with the music dude

thanks again,

Tom.

[Airshow]

might sound stupid but i didnt realise the global variables affected seperate files, good to know will give it a go now.

I suppose it's not obvious but yup, all javascript on any one page floats in the same global namespace. If you follow through all the videos and written stuff by Douglas Crockford (as per link in my post above), then you find there's quite a lot more to learn about variable scope, including a "namespace pattern" which allows you to create your own namespaces while putting no more than one member in the global namespace! It's good fodder for OCD.

Good luck with the music dude

It's done and successfully running on my mp3 player.

Keep me up to date with progress.

Airshow

[baseballfury]

it's working great now thanks. Will check out those videos aswell. It was weird though that i changed the name of the global variable in the one script (and everywhere it appeared) but kept it as a global and yet the script wouldnt work.
Hopefully those videos will give me some insight.

I eventually want to get an autocomplete working. I used the
w3schools version but it returns hyperlinks that the user selects so i'm trying to work out how to allow the user to select the option and the value to populate the input box instead of linking to a different page.

thanks again

Tom