Jquery problem loading image and DIV at the same time

JavaScript
1

Hi,

I have the following navigation links:

<a href="images/apollohaga.jpg" title="a" id="productlink">Num 1</a><br />
                        <a href="images/apolloherr.jpg" title="b" id="productlink">Num 2</a><br />
                        <a href="images/apollodam.jpg" title="c" id="productlink">Num 3</a><br />
                        <a href="images/apollosandhamn.jpg" title="d" id="productlink">Num 4</a><br />
                        <a href="images/apollovaxholm.jpg" title="e" id="productlink">Num 5</a><br />

which, when clocked load an image into a div with this jquery:


$("a#productlink").click(function() {
		  $("#productpics").html($("<img>").attr("src", this.href).attr("class", $(this).attr("title")));

		  return false;
	});

I then have a series of DIVs which match the title of each link above (a, b, c, d, e)


<div id="a">This is a</div>
<div id="b">This is b</div>
<div id="c">This is c</div>
<div id="d">This is d</div>
<div id="e">This is e</div>

I want the link to load the image (as it is doing already) but also load the corresponding div into another placeholder div (with no content) called: <div id=“productholder”></div>

I have tried all sorts of things to get this working but no luck so far.

Any help appreciated!

Thanks

2

You’ll want to use this for the productholder:
$(“#productholder”).html(…);

So it’s just a matter of working out how to retrieve the HTML content of the div.

You can get the div from the link title. You don’t need to use $(this).attr(‘title’) since this.title achieves just the same thing:
$(‘#’ + this.title)

So, you should be able to get the content from there, and put it in the product holder.


var content = $('#' + this.title).html();
$("#productholder").html(content);
3

Almost working perfectly now, cheers!

I now have this jQuery code:


$(document).ready(function() {
	$("a#productlink").click(function() {
		  $("#productpics").html($("<img>").attr("src", this.href));
     	  var content = $('#' + this.title).html();
		  $(".productcontent").css("visibility", "visible");
		  $("#producttext").html(content);
		  return false;
	});
});

I changed a div name, the target DIV to load the content div’s is now #producttext (.productcontent is a CSS class used maker the visibility hidden until a link is clicked)

When I click a link for whichever 1 I want to load, it loads the correct image and DIV. however, when I click on a second link, it loads the image, clears the #prdoucttext DIV and doesn’t load a new DIV to match the picture.

Any ideas why that might be happening?

4

Anyone able to help with this last bit guys? I’m stuck!

Cheers,
Martin

5

Have a look at live instead of click.

6

That seems like it will help, thanks.

I had a look and changed it to:


$(document).ready(function() {
	$("a#productlink").live(click(function() {
		  $("#productpics").html($("<img>").attr("src", this.href));
     	  var content = $('#' + this.title).html();
		  $(".productcontent").css("visibility", "visible");
		  $("#producttext").html(content);
		  return false;
	}));
});

…but now it just loads the image on its own in the browser like as if you clicked a normal HTML link

7

You have the syntax of the parameters wrong. Look again at the documentation.

8

Thanks for your help, I noticed an error I made and have changed it:


$(document).ready(function() {
	$("a#productlink").live('click',function() {
		  $("#productpics").html($("<img>").attr("src", this.href));
     	  var content = $('#' + this.title).html();
		  $(".productcontent").css("visibility", "visible");
		  $("#producttext").html(content);
		  return false;
	});
});

The image load is back to normal now but it wont load the text part except for the 1st 1 I click on

9

I put in an alert to show the value of ‘content’ on each click. On the first click it is fine then on subsequent it is giving ‘null’

I was reading up on .live and thought that would sort it.

This should be pretty simple, dunno why I’m stuck on it!

10

May we have a look at a sample test page that demonstrates the problem?

11

HEre you go: Untitled Document

Click on “Produkter”

Thanks for your help!

12

Thanks.

Your unique identifier “productlink” is illegally used on multiple links.

ID attributes are unique identifiers. They must be unique.

Remove the “productlink” identifiers completely, and either use a class name instead, or as a better solution, use a selector such as ‘#productlist a’ to target all of those intended links.

Also, run your HTML page through an HTML validator to find and fix other problems.

13

Forgot about the ID being unique. I have removed those now and used ‘#productlist a’ as the selector and reuploaded but still the same error.

Would you mind having a look again? I dont know what Im missing

14

Your click event is currently targeting only one id element.

You need to apply the advice that I gave to you in my previous post, about targeting all of the appropriate links with a selector such as ‘#productlist a’

15

Sorry, I thought I had done. I changed it to this:


$(document).ready(function() {
	$("#productlist a").live('click',function() {
		  $("#productpics").html($("<img>").attr("src", this.href));
     	  var content = $('#' + this.title).html();
		  //alert(content);
		  $(".productcontent").css("visibility", "visible");
		  $("#producttext").html(content);
		  return false;
	});
});

Apologies, this is my first real foray into jQuery

16

Currently the “producttext” section contains all of the content.
Your script copies one of them to the variable called content, and then replaces all of the “producttext” with that content.

End result, you have now lost all of the previous content.

What I believe you should do instead, is to first hide all of the content in “producttext” and then to show only the one that you want to be shown.

17

Perfect, that done it!

I just moved the DIVs outside that layer and hid them

Cheers