Solved

Dropdown selection shows image of the item with jQuery and AJAX

Posted on 2011-02-17
10
978 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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

706 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now