[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

How to use Jquery on select box to access and display a DIV tag inside a iframe

Posted on 2011-03-18
9
Medium Priority
?
483 Views
Last Modified: 2012-05-11
Hello Experts,
I have a select box like below
<select name="disFruits" id="disFruits" style="width: 156px;">
<option>&raquo;Select&laquo;</option>
<option value="apples.html">Apples</option>
<option value="grapes.html">Grapes</option>
<option value="oranges.html">Oranges</option>
</select>

Open in new window


Now right below it I have declared an Iframe like
<iframe id="frameFruits">

</iframe>

Open in new window


Now in each of the pages in the select box options there is an DIV tag which has some images in it 3 to be excat.

What I am trying to do it when someone selects an option I want to display the image from that page in the Iframe. below is the code for the div tag

<div id="imgFruit" align="center">
<img id="Img1" src="/images/&mvt:category_image1;.jpg" />

<img id="Img2" src="/images/&mvt:category_image2;.jpg" />

<img id="Img3" src="/images/&mvt:category_image;3.jpg" />

</div>

Open in new window

I was wondering if i can use Jquery to achieve this
Thanks and appreciate it
0
Comment
Question by:niceoneishere
[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
9 Comments
 
LVL 60

Expert Comment

by:HainKurt
ID: 35166777
are you setting src of iFrame

<iframe id="frameFruits" src="Images.aspx">No Iframe Support</iframe>

and div is coming from Images.aspx?
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 35167009
oops sorry i am not coding in asp.net. its just plain html and yes the src for the iframe should be what the url is in the select option and the DIV is coming from those url, what I mean is there is a DIV in apples.html, oranges.html and so on
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 35167093
do you want this?
<select name="disFruits" id="disFruits" style="width: 156px;" onChange="setSrc(this.value)">
<option>&raquo;Select&laquo;</option>
<option value="apples.html">Apples</option>
<option value="grapes.html">Grapes</option>
<option value="oranges.html">Oranges</option>
</select> 

<iframe id="frameFruits" src="">No IFrame Support</iframe> 

<script type="text/javascript">
function setSrc(s){alert(s);
  document.getElementById("frameFruits").src=s;
}
</script>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:niceoneishere
ID: 35167259
Thanks for replying. What I am trying to display inside the Iframe is the DIV tag called imgFruit along with its content when one of the options is selected. SORRY I apologize if I didnt explain clearly.

So say when Apples are selected, the Iframe should display the <div> imgFruits from apples.html not the whole apples.html page

Hope i am explaining this correctly

Thanks
0
 
LVL 60

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 35167531
ok got it...

I am giving you code for both Iframe & div

it will load only div part into iFrame & div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<select name="disFruits" id="disFruits" style="width: 156px;" onChange="setSrc(this.value)">
<option>&raquo;Select&laquo;</option>
<option value="apples.html">Apples</option>
<option value="grapes.html">Grapes</option>
<option value="oranges.html">Oranges</option>
</select> 

<iframe id="frameFruits" src=""></iframe> 

<div id=fruits style="border:1px solid silver"></div>

<script type="text/javascript">
function setSrc(s){alert(s);
	$("#fruits").load(s + " #imgFruit");
	$("#frameFruits").load(s + " #imgFruit");
}
</script>

</body>
</html>

and oranges.html is here

header

<div id="imgFruit" align="center">
<img id="Img1" src="/images/category_image1.jpg" />

<img id="Img2" src="/images/category_image2.jpg" />

<img id="Img3" src="/images/category_image3.jpg" />
</div>

footer

Open in new window

0
 
LVL 1

Author Comment

by:niceoneishere
ID: 35167881
Thanks but nothing loads in Iframe, it directly display the image it the DIV id="fruits", So can we get rid of the Iframe sir

appreciate it
0
 
LVL 60

Expert Comment

by:HainKurt
ID: 35167906
I put both div & iFrame solution

you can remove

<iframe id="frameFruits" src=""></iframe>

and

$("#frameFruits").load(s + " #imgFruit");

as long as css files are on the page, your div should look ok...

it is working fine with me using iFrame too, but I guess div is a better solution for you too..
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 35194394
Works great thanks a lot
0
 
LVL 1

Author Closing Comment

by:niceoneishere
ID: 35194396
Thanks
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

656 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