...

View Full Version : ajax. dynamic filling of dropdowns. please help.



sanchopansa
08-01-2006, 06:47 PM
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?

boeing747fp
08-01-2006, 06:52 PM
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';
}

sanchopansa
08-01-2006, 06:56 PM
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.

boeing747fp
08-01-2006, 07:04 PM
also try


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

sanchopansa
08-01-2006, 07:11 PM
this wouldn't solve it either. :-(

boeing747fp
08-01-2006, 07:17 PM
so you said the first dropdown works and the second one doesnt?

boeing747fp
08-01-2006, 07:20 PM
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

sanchopansa
08-01-2006, 07:32 PM
thanks a lot boeing747fp. I will try it now and let you how it worked out.

sanchopansa
08-01-2006, 08:40 PM
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?

boeing747fp
08-01-2006, 08:46 PM
couldnt u just call document.getElementById('img_holder').alt

sanchopansa
08-01-2006, 08:51 PM
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"
}
]

boeing747fp
08-01-2006, 08:53 PM
ooo... umm... not sure. i thought you meant the "alt" of the <img>

sanchopansa
08-01-2006, 08:58 PM
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:

boeing747fp
08-01-2006, 09:00 PM
try


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

boeing747fp
08-01-2006, 09:04 PM
actually... you need a <body></body> set of tags for document.getElementById(something).innerHTML or innerText to work

sanchopansa
08-01-2006, 09:10 PM
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

sanchopansa
08-02-2006, 12:09 AM
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.

boeing747fp
08-02-2006, 12:24 AM
what does your .json file look like?

sanchopansa
08-02-2006, 12:50 AM
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. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum