Populating a div

[DS928]

I have a slider with 15 images. Depending on the image selected a div called "Big Place" would be populated by the appropriate php file. I have tried this but it is not populating the div.

<a href="http://MenuHead.com/Scripts/africa_search.php" target="BigPlace"></a>

Here is the page....

http://www.menuhead.com/dark2.html

Thank you.

[DS928]

Added this...

$('.image-class').click(function(e) {
e.preventDefault();
$('#BigPlace').load($(this).attr('href'));
});

and this...

<a class= ".image-class" href="http://MenuHead.com/Scripts/africa_search.php" target="#BigPlace"></a>

Still no luck!

[jscheuer1]

Two problems, maybe three.

1) HTML doesn't work like that. You cannot target a div with a link. AJAX can though, but that's another thing altogether. You can target an iframe by its name in HTML, but that gets messy when the height of the imported content varies.

2) There are no links like the one in your post on that page. Well there are, like:

                        <div class="cj-item">
                        	<img src="Images/Slider/FeedSlider/African.jpg" width="800" height="300" alt="CJ Simple Slider" />
                        	<a href="http://MenuHead.com/Scripts/africa_search.php" target="BigPlace"></a>
                        </div>

But because there's nothing between > and </a>, there's nothing to click on. It should be:

                        <div class="cj-item">
                        	<a href="http://MenuHead.com/Scripts/africa_search.php" target="BigPlace"><img src="Images/Slider/FeedSlider/African.jpg" width="800" height="300" alt="CJ Simple Slider" /></a>
                        </div>

Now if instead of:

<div id="BigPlace" align="center">The File Goes Here</div>

There was:

<iframe name="BigPlace" style="width:100%;height100px;" src="about:blank"></iframe>

It would work as long as the above links survived the creation of the slideshow via javascript and that the slideshow would work with them (that's the possible third problem).

But, unlike a div tag, an iframe needs its height and width specified, so you may want to populate a div after all. To do that though, you would need AJAX or some other way to fetch the external content and make it a part of the DOM. There are also various scripts around that make the height of an iframe depend upon its contents, but they can be more trouble than they're worth due to cross browser issues.

I see you're already using jQuery on the page. That makes doing AJAX easier. It would be something like:

<script type="text/javascript">
jQuery(function($){
	$(document).on('click', '.cj-item a', function(e){
		var href = this.href;
		$.ajax({
			url: href,
			success: function(data){
				$('#BigPlace').html(data);
			}
		});
		e.preventDefault();
	});
});
</script>

That would be with keeping the div and not using the iframe. And would still depend upon the links being changed as above and surviving the transformation into a slideshow. Also, I say 'something like' because there's no easy way to test the AJAX code until you get it all set up.

In summary though, I would say:

Fix the links and add the script, use the div 'as is' and skip the iframe. If you still have problems after that, let me see it again.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[DS928]

Thank you John. Ok, I changed the href part and added the iframe. That worked, but I have resizing t go through. So I took your suggestion added the JQuery, Keep the Div and used the new href. It works but.......when the slide is selected it does not popultae the div....it opens to a new page. So all in all, closer........once again, thank you. I appreciate your help.

[jscheuer1]

I had the script wrong. As I said, it's hard to test AJAX until it's set up, try:

jQuery(function($){
	$(document).on('click', '.cj-item a', function(e){
		var href = this.href;
		$.ajax({
			url: href,
			success: function(data){
				$('#BigPlace').html(data);
			}
		});
		e.preventDefault();
	});
});

There could still be problems, but let's see what happens.

One more problem, you need to use relative paths in the links to the external pages, example:

<a href="Scripts/africa_search.php" target="BigPlace">

[DS928]

You nailed it! Thank you John! Very much appreciated.

[jscheuer1]

Great! It might have been a bit of overkill. I'm assuming that the slideshow script might jerk around the HTML, thus making it advisable to use the:

$(document).on('event', 'context', function(){});

construct, which finds the links if they're clicked, rather than assigns a click behavior directly to them. And I used the root $.ajax() function on which all of the other jQuery functions like .load(), .get(), etc. are based, both to avoid confusion and to allow for the easy insertion of additional properties. Like perhaps a no cache directive:

jQuery(function($){
	$(document).on('click', '.cj-item a', function(e){
		var href = this.href;
		$.ajax({
			url: href,
			cache: false,
			success: function(data){
				$('#BigPlace').html(data);
			}
		});
		e.preventDefault();
	});
});

I wrapped it in a shorthand document ready function that also passes the jQuery variable as $ afresh in case jQuery is in noConflict mode.

Oh, and by way of explanation about having to use the relative URL in the links, that's because if you navigate to the page as www. whatever and the links are hard coded without the www. part or visa versa, the links will not fire because they're seen as off site. AJAX has a same domain policy. You could use the network path though. That's the same as the absolute path, just without the http://www.somedomain.com parts. In other words, using a / to signify the root of the domain:

<a href="/Scripts/africa_search.php" target="BigPlace">

And, you don't need the target attribute either, but it could be used to determine which div to target:

jQuery(function($){
	$(document).on('click', '.cj-item a', function(e){
		var href = this.href, $target = $('#' + this.target);
		$.ajax({
			url: href,
			cache: false,
			success: function(data){
				$target.html(data);
			}
		});
		e.preventDefault();
	});
});

[DS928]

Thank you John, I appreciate the additional info.