Solved

Dropdown selection shows image of the item with jQuery and AJAX

Posted on 2011-02-17
10
989 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 55

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
Get Actionable Data from Your Monitoring Solution

Your communication platform is only as good as the relevance of the information you send. Ensure your alerts get to the right people every time with actionable responses. Create escalation rules that ensure everyone follows the process and nothing is left to chance.

 
LVL 55

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 55

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 55

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 55

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This article discusses how to implement server side field validation and display customized error messages to the client.
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.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

717 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