Solved

Dropdown selection shows image of the item with jQuery and AJAX

Posted on 2011-02-17
10
982 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 51

Expert Comment

by:HainKurt
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 51

Expert Comment

by:HainKurt
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 51

Expert Comment

by:HainKurt
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 51

Expert Comment

by:HainKurt
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 51

Accepted Solution

by:
HainKurt 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

770 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