ajax. dynamic filling of dropdowns. please help.

What I have to do is to fill the content of the second dropdown based on the choice in the first one, and the content of the third dropdown based on the second. My problem is that only the first thing works. When I try to fill the third dropdown it won't work. I'm using the same function for both so it is really strange.

This is the js/ajax part:

var http = (window.ActiveXObject) ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
var toFill, flag, x, elems;

if(http)
{
http.onreadystatechange = function ()
{
if(http.readyState == 4)
{
if (http.status == 200)
{
alert(flag);
toFill.disabled = false;
clean(toFill);
elems = eval('('+http.responseText+')');
for(x in elems)
{
var newElem = document.createElement('option');

if(flag == 1)
{
newElem.text = elems[x];
}
if(flag == 2)
{
newElem.text = elems[x]['name'];
}

newElem.value = x;
toFill.appendChild(newElem);
}
}
}
};
} else
{
alert('Error initializing XMLHttpRequest!');
}

function clean(obj)
{
for(var x=obj.options.length-1; x>=0 ; x--)
{
obj.remove(0);
}
var newElem = document.createElement('option');
obj.appendChild(newElem);
}

function fillSelect(obj)
{
if(!obj.options[0].value)
{
obj.remove(0);
}

if(obj.id == 'county')
{
flag = 1;
var itmade = 'area';
var folder = 'county';
document.getElementById('imagesel').disabled = true;
}

if(obj.id == 'area')
{
flag = 2;
var itmade = 'imagesel';
var folder = 'area';
}

toFill = document.getElementById(itmade);
http.open('GET', folder+'/'+obj.value+'.json', true);
http.send(null);
}

function changePic(obj)
{
if(!obj.options[0].value)
{
obj.remove(0);
}
var img = document.getElementById('img_holder');
var tmp = elems[obj.value];
img.src = 'img/'+tmp['filename'];
img.alt = tmp['name'];
document.getElementById('desc').innerText = tmp['desc'];
}


This is my html:

<form action="">
<div id="select_top" class="select_top">
<label for="county">County:</label>
<select id="county" class="county" onchange="fillSelect(this);" >
<option></option>
<option value="0">BGMountains</option>
<option value="1">Seaside</option>
<option value="2">BigCities</option>
<option value="3">CentralBulgaria</option>
</select><br />
</div>
<div id="select_middle" class="select_middle" >
<label for="area">Area:</label>
<select id="area" class="area" onchange="fillSelect(this);" disabled="disabled" >
<option></option>
</select>
</div>
<div id="select_bottom" class="select_bottom">
<label for="imagesel">Image:</label>
<select id="imagesel" class="imagesel" onchange="changePic(this);"disabled="disabled" >
<option></option>
</select>
</div>
</form>

<div id="holder" class="holder">
<img id="img_holder" src="" alt="" />
</div>

<div id="history" class="history">
<p>Image description</p>
<div id="desc"></div>
</div>


The only clue that I have so fat is that the part that should work on the response (the top part of js/ajax source) is not executed the second time fillSelect() is called. Can anyone help me fix this annyoing problem?

try

if(obj.id == 'county')
{
flag = 1;
var itmade = 'area';
var folder = 'county';
document.getElementById('imagesel').disabled = true;
}

else if(obj.id == 'area')
{
flag = 2;
var itmade = 'imagesel';
var folder = 'area';
}

I just tried it but it won't work either, unfortunately. Still the second time the request is send with http.send(null) it is not being processed.

also try

if(flag == 1)
{
newElem.text = elems[x];
}
else if(flag == 2)
{
newElem.text = elems[x]['name'];
}

this wouldn't solve it either. :-(

so you said the first dropdown works and the second one doesnt?

for each time you open a function that will call ajax, you need to define a new XmlHttpObj so make something like this and get rid of the defined "http" variable


var http;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function Createhttp()
{
// try creating for IE (note: we don't know the user's browser type here, just attempting IE first.)
try
{
http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
http = null;
}
}
// if unable to create using IE specific code then try creating for Mozilla (FireFox)
if(!http && typeof XMLHttpRequest != "undefined")
{
http = new XMLHttpRequest();
}
}
.... your other functions here


and inside your fillSelect() function, initiate a new ajax call by

Createhttp();
if(http)
{
http.onreadystatechange = function ()
{
if(http.readyState == 4)
{
if (http.status == 200)
{
alert(flag);
toFill.disabled = false;
clean(toFill);
elems = eval('('+http.responseText+')');
for(x in elems)
{
var newElem = document.createElement('option');

if(flag == 1)
{
newElem.text = elems[x];
}
if(flag == 2)
{
newElem.text = elems[x]['name'];
}

newElem.value = x;
toFill.appendChild(newElem);
}
}
}
};
} else
{
alert('Error initializing XMLHttpRequest!');
}
..... the rest of your fillSelect() function

thanks a lot boeing747fp. I will try it now and let you how it worked out.

this really solves 99% of my problem and ends my 5- day misery :) :) :)
The final stand is: the description of the image would not display. Strangely enough it would show if I put in a text box, but I find that rather stupid:) . Do you have any suggestions?

couldnt u just call document.getElementById('img_holder').alt

sorry for the lamer post, but I don't seem to get your point. How would this give me the description? Could you please explain this to me? Here is how one of my .json files looks like:

[
{
"name": "kartinka1",
"filename": "img1.jpg",
"desc": "description1"
}
]

ooo... umm... not sure. i thought you meant the "alt" of the <img>

no, not really. What I need to "extract" is the description in these .json files, but they wouldn't appear in a regular div, only in a text box.:mad:

try

....
document.getElementById('desc').innerHTML = tmp['desc'];
.....

actually... you need a <body></body> set of tags for document.getElementById(something).innerHTML or innerText to work

That solves my last problem. Тhank you so very much for the idiot's guide that you gave me. I didn't excpect someone would get so involved into my problem. You saved me so much time and nerves.

I am really grateful.

Kindest regards,
Valentin

Damn, I just realized it is not over yet. My current script and .json files allow me to add only one option per city in the image dropdown(the third one) and it shouldn't be like this. There should be at least three. Can anyone help me fix this with the code I'm currently using(the sample .json is one the previous page) Here is the script part:

var http;
var toFill, flag, x, elems;

function Createhttp()
{
try
{
http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
http = null;
}
}
if(!http && typeof XMLHttpRequest != "undefined")
{
http = new XMLHttpRequest();
}
}

function clean(obj)
{
for(var x = obj.options.length-1; x >= 0 ; x--)
{
obj.remove(0);
}
var newElem = document.createElement('option');
obj.appendChild(newElem);
}

function fillSelect(obj)
{
Createhttp();
if(http)
{
http.onreadystatechange = function ()
{
if(http.readyState == 4)
{
if (http.status == 200)
{
toFill.disabled = false;
clean(toFill);
elems = eval('('+http.responseText+')');
for(x in elems)
{
var newElem = document.createElement('option');

if(flag == 1)
{
newElem.text = elems[x];
}
else if(flag == 2)
{
newElem.text = elems[x]['name'];
}

newElem.value = x;
toFill.appendChild(newElem);
}
}
}
};
} else
{
alert('Error initializing XMLHttpRequest!');
}
if(!obj.options[0].value)
{
obj.remove(0);
}

if(obj.id == 'county')
{
flag = 1;
var itmade = 'area';
var folder = 'county';
document.getElementById('imagesel').disabled = true;
}

else if(obj.id == 'area')
{
flag = 2;
var itmade = 'imagesel';
var folder = 'area';
document.getElementById('imagesel').disabled = false;
}

toFill = document.getElementById(itmade);
http.open('GET', folder+'/'+obj.value+'.json', true);
http.send(null);
}

function changePic(obj)
{
if(!obj.options[0].value)
{
obj.remove(0);
}
var img = document.getElementById('img_holder');
var tmp = elems[obj.value];
img.src = 'img/'+tmp['filename'];
img.alt = tmp['name'];
document.getElementById('desc').innerHTML = tmp['desc'];
}

Thank you.

what does your .json file look like?

Sorry for the fuzz. It was a very simple issue. I just expanded the content of the .json files and now everything is fine. I'll sleep peacefully now. :)