No refresh?

[Stickybomb]

Hi,

I was wondering if its possible to say have a drop down menu on a web form that lists all the countries for example.

When you select a country from the list it would display a pic to the right that is associated with the country, and here is the tricky part,

It would do this with out having to refresh the page. If possible with out having to preload the images since there are hundreds of them.

 

Any help is appriciated

 

Thxs

 

Stickybomb*

[nloding]

You would have your select box all setup with an onChange="updatePicture(value);"

 

<select id="countries-list" size="1" onChange="updatePicture(options[selectedIndex].value);">
<option selected="selected">Choose Your Country:</option>
<option value="usa">United States</option>
<option value="mex">Connecticut</option>
</select>

<div id="pictureDiv" style="visibility=hidden;"><img src="" id="pictureImg" /></div>

 

And the updatePicture() function would append, say, ".gif" to the value, then make the div visible, then set the src for the img tag ...

 

function updatePicture(picture) {
  //you don't even need ajax for this!

  //where's your image dir?
  var pictureUrl = "http://www.website.com/images/";

  //add the passed value
  pictureUrl += picture;

  //add the extension
  pictureUrl += ".gif";

  //then use javascript to update everything
  var targetDiv = getElementById('pictureDiv');
  targetDiv.style.visibility = visible;

  var targetImg = getElementById('pictureImg');
  targetImg.src = pictureUrl;
}

 

I didn't test what I wrote, so I hope I don't have any typos, but that should work.

[Stickybomb]

Thks ill try this should help alot

[Stickybomb]

sorry that did not help me im almost certain it will require ajak t dynamicly update it without having to preload the images

 

keep in mind the file size for each img is 4kb each and there are like 100 of them or so.

[nloding]

OK, then Ajax is needed.

 

Have the onChange="updatePicture(options[selectedIndex].value);" still there.

 

Your updatePicture function would then do three things:

 

1) Create a new Ajax request object (see the forum stickies for this, this is the easy part).

2) Call a file that will spit out the correct img tag ...

3) Update the innerHTML with the responseText.

 

function ajaxCreate() {
  if(window.XMLHttpRequest) { // Do we have a Gecko Broswer?
    var ajax = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) { // Or is it IE?
    var ajax = new ActiveXObject("Microsoft.XMLHTTP");
    if(!ajax) {
      var ajax = new ActiveXObject("MSXML2.XMLHTTP");
    }
  }    

  if(!ajax) { // What if the the browser sucks?
    alert("Your broswer is too old. Consider upgrading!");
  }
  
  return ajax;
}

function updatePicture(picture) {
  var ajax = new ajaxCreate();
  
  var obj = getElementById(pictureDiv);
  var method = "GET";
  var phpURL = "update.php?picture="+picture;
  
  ajax.open(method, phpURL);
  ajax.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      obj.innerHTML = ajax.responseText
    }
  }
  ajax.send(null);
}

 

I'll leave the PHP part up to you, but it could do any number of things from what my previous javascript did to get the img source, or it could pull it from a database ... whatever.  But the end result is that the PHP script should output a single HTML line:

 

<img src="path/to/picture.jpg" alt="If you want alt txt" />

 

Then that code is placed into the pictureDiv element.

 

BTW, I am new to Ajax as well, so if I'm wrong, I apologize.  Trying my best to help!

[Stickybomb]

thats fine any help is appriciated although im not really OOP savy and why is it you are using an external php file rather than just using javascript?

[nloding]

First, this isn't OOP, it's just two functions.  Very procedural.  As for calling another file, that's the beauty of Ajax ... you can.  It's so much easier to use a PHP script to print out the correct img tag.  Using javascript exclusively is going to do exactly what my first code did, which you said didn't work.  I'd just create a tiny PHP file to create the correct tag ... then all you gotta do is copy the code I pasted above.  Shouldn't have any issues.

[nloding]

Just realized I made a typo!  It's

 

document.getElementById

 

Not just "getElementById" ...... could be why the other script didn't work?

[Stickybomb]

thks that all helps