Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:
    Code:
    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:
    Code:
    <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?

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    try
    Code:
    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';            
       }

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    also try
    Code:
    if(flag == 1)
                   {
                       newElem.text = elems[x];
                   }   
                   else if(flag == 2)   
                   {
                       newElem.text = elems[x]['name'];
                   }

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this wouldn't solve it either. :-(

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    so you said the first dropdown works and the second one doesnt?

  • #7
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    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

    Code:
    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
    Code:
    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
    Last edited by boeing747fp; 08-01-2006 at 07:23 PM.

  • #8
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a lot boeing747fp. I will try it now and let you how it worked out.

  • #9
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    couldnt u just call document.getElementById('img_holder').alt

  • #11
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"
    }
    ]

  • #12
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    ooo... umm... not sure. i thought you meant the "alt" of the <img>

  • #13
    New Coder
    Join Date
    Aug 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    try
    Code:
    ....
    document.getElementById('desc').innerHTML = tmp['desc'];
    .....

  • #15
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post
    actually... you need a <body></body> set of tags for document.getElementById(something).innerHTML or innerText to work


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •