Solved

Dropdown selection shows image of the item with jQuery and AJAX

Posted on 2011-02-17
10
986 Views
Last Modified: 2012-06-21
I have a form that uses jQuery's AJAX functions to show the result on the same page without a refresh, and it works well.

One of the items on the form is a dropdown list of about 10 products. | would like an image, and some copy, to show on the page beside the form,of the product currently selected, without triggering sending all of the forms data. Just changing the item displayed in the select box window, would show that item's image and copy in a div next to the form.

I am experienced with PHP/mySQL, so I have no problem writing the server side code to do this, but I am a novice at JavaScript and jQuery, so your help is appreciated..

0
Comment
Question by:birwin
  • 5
  • 4
10 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34923301
So, you want to update a certain section of screen (image along with certain copy) at the onchange event of dropdown box

All you need to do is capture the 'change' event for that drop down, and depending on the new value, update that portion on the screen

$("#dropdownID").change(function(){
  //update image by changing its src
  $("#imageId").attr("src", "newImage.jpg");
 
  //any other updation
});
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 34923544
check this pure js solution

check properties of image each time you change the value of select box...
<script>
function setImage(){
  var sb = document.getElementById("sbProducts");
  var img = document.getElementById("imgProduct");
  var ix = sb.selectedIndex;
  var si = sb.options[ix];
  var sv = si.value;
  var simg = si.getAttribute("img");
  alert(ix + " - " + si + " - " + sv + " - " + simg);
  img.src="/images/prd/medium/"+ simg;
}
</script>

<select id=sbProducts onChange="setImage()">
<option>select product</option>
<option value=1 img="a.gif">product A</option>
<option value=2 img="b.gif">product B</option>
<option value=3 img="c.gif">product C</option>
</select>

<img id=imgProduct src="blank.gif">

Open in new window

0
 
LVL 6

Author Comment

by:birwin
ID: 34923546
Nice concept. I hadn't considered not querying the server to change the image. The problem is that the "newimage.jpg" has to be different for each item on the list. I was assuming hat I'd send the select item's value (an item number code, e.g. CCD4321) to the server, determine the matching image, assemble it and its copy on the server side and return it to the page, based on that item code. I need like to include some copy with the item's specifications. (I suppose that I could put the copy in the images, but that would be a long term manintenance nightmare)

But  it would be possible to rename the image files to be the the code numbers that are the value of the dropdown item. Is there a way to to change attr("src", "newImage.jpg");
 to something like attr("src", $(this).val(); )  I suppose I could create a Javascript array when the page is being created on the server side that would contain the copy for each item on the list, since there is only about ten items. Would that be practical?

However, I would also like the images to fade in and out nicely, if at all possible.

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 34923556
in pure js solution, you can construct the image source in any way you want...
you can use selected option value, or selected options img property, a custom property to store image name if it cannot be constructed by option value... also you can use

si.text

(example "product B") to get the text of the selected option in the code above...
0
 
LVL 6

Author Comment

by:birwin
ID: 34923568
Thanks HainKurt:

The problem is that I am using other jQuery effects on the page, including a cycle plug-in image fade, and I would like the image from the dropdown to also fade in and out, to keep the "look and feel" of the page the same.
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 34923611
you can use the one I posted with jQuery, no issue here...

for example instead of this line

img.src="/images/prd/medium/"+ simg;

you can use

var newImg = "/images/prd/medium/"+ simg;
$("#imgProduct).attr("src",newImg).stop(true,true).hide().fadeIn();

did not test it :)
0
 
LVL 6

Author Comment

by:birwin
ID: 34923744
Hi HainKurt:

The JavaScript works on my site, but with the jQuery added, it still works but, I do not get any fade effect. It appears to act exactly as it did without the jQuery. Any idea what I have done wrong?

(other readers should note that you need to add a closing quote to the id)

<script>
function setImage(){
  var sb = document.getElementById("sbProducts");
  var img = document.getElementById("imgProduct");
  var ix = sb.selectedIndex;
  var si = sb.options[ix];
  var sv = si.value;
  var simg = si.getAttribute("img");
var newImg = "/images/"+ simg;
$("#imgProduct").attr("src",newImg).stop(true,true).hide().fadeIn();
}
</script>
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 34926481
try this

$("#imgProduct").attr("src",newImg).stop(true,true).hide().fadeIn();

-->

$("#imgProduct").fadeOut(1000, function(){
    $("#imgProduct").attr("src",newImg);
    $("#imgProduct").fadeIn(1000);      
  });
};

got it from : http://stackoverflow.com/questions/4599511/javascript-if-else-statement-change-img-src
0
 
LVL 52

Accepted Solution

by:
Huseyin KAHRAMAN earned 500 total points
ID: 34926624
I successfully tested this on my side:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
function setImage(){
  var sb = document.getElementById("sbProducts");
  var img = document.getElementById("imgProduct");
  var ix = sb.selectedIndex;
  var si = sb.options[ix];
  var sv = si.value;
  var simg = si.getAttribute("img");
  //alert(ix + " - " + si + " - " + sv + " - " + simg);
  //img.src="img/prd/"+ simg;
  var newImg = "img/prd/"+ simg;

$("#imgProduct").fadeOut(1000, function(){
    $("#imgProduct").attr("src",newImg);
    $("#imgProduct").fadeIn(1000);       
  });

}
</script>

<select id=sbProducts onChange="setImage()">
<option>select product</option>
<option value=1 img="a.jpg">product A</option>
<option value=2 img="b.jpg">product B</option>
<option value=3 img="c.jpg">product C</option>
</select>

<img id=imgProduct src="img/blank.gif">

Open in new window

0
 
LVL 6

Author Closing Comment

by:birwin
ID: 34928364
Thank HainKurt,

I made one small change. I changed the fade in time to 2000. Otherwise it appears that both envents are occuring within the same 1000 milliseconds, so the image fades OK, but the new image just pops in.

Great code and it saved me having to write any server side code.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question