Solved

Populating a Div with an HREF

Posted on 2013-05-30
16
357 Views
Last Modified: 2013-05-30
I have a slider that has an href attached to it.  I am trying to populate a div when I click on the image.  The div is called BigPlace

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

The file that will populate the div is africa_search.php

The page.
http://www.menuhead.com/dark2.html
0
Comment
Question by:DS928
[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
  • 7
  • 6
  • 3
16 Comments
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39207491
I think that the target attribute of the anchor tag is intended to cause the browser to load the page into a named instance of the browser (tab or window).  As such, it cannot be used to load a DIV in the same page.  You might want to have an AJAX call, to effect the change of the DIV contents.

Here is an example that uses jQuery to change the contents of a DIV when the client clicks on a signal "link" in the web page.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 

Author Comment

by:DS928
ID: 39207523
Thanks Ray.  I don't know if you looked at the code but I have a total of 15 slides. Each slide would populate the div "BigPlace" with a different php file.
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39207534
I didn't look at the code, but it sounds like there would be no problem using several different links (or slides) to populate the same div.  In jQuery the output location is specified with something like this:

$("#output p#target").html(response);

That says, in effect, "Find the DIV named 'output' and look within it for the P named 'target.'  Take the 'response' from the PHP script and treat it as an HTML document.  Replace the entire contents of the P named 'target' with whatever the PHP script sends back."
0
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39207559
You are going to need to use AJAX for this
I am assuming your sliders <a> have a class .image-class - if not change as needed.

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

Open in new window

0
 

Author Comment

by:DS928
ID: 39207672
Thank you.
I see, somewhat.  I have this on the links.

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

Still not populating.
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39207721
You probably want to remove the target attribute.  The class attribute is used to designate multiple elements of the web page that are all expected to be changed at the same time (as opposed to div elements that are unique).

For this to work out well, you would definitely want to use 100% valid markup.  There are some issues that need to be corrected.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.menuhead.com%2Fdark2.html&charset=%28detect+automatically%29&doctype=Inline&group=0

I think if this were my problem, I would step back from the existing code base and try to get an understanding of the principles - how does Javascript work, how does jQuery work - that sort of thing.  Then I would go back to the code and try to implement the principles.  That is the concept of the SSCCE, and it might be the fastest way to get a handle on what is happening to this script.
0
 

Author Comment

by:DS928
ID: 39207753
Target attribute gone.  Still not populating.

<a class= ".image-class" href="http://MenuHead.com/Scripts/africa_search.php"></a>
0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39207787
Yes, I understand.  That is why I would set the current script aside and just work with a small, simple example to illustrate the principles and to produce a teaching example.  Once you've got that together, then go back to the big script and apply the principles you've learned from the SSCCE.

These references may be helpful
http://www.w3.org/TR/CSS21/selector.html
http://www.w3schools.com/jquery/jquery_syntax.asp
http://api.jquery.com/category/selectors/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
0
 

Author Comment

by:DS928
ID: 39207789
This is the script I used before when I was doing it off of a select and it worked.

$(document).ready(function()
            {
            $("#Alpha").change(function()
            {
            var Alpha = $(this).val();
            $.ajax({
            type: "POST",	
            url: "../Scripts/place_search.php",
            data: {"Alpha": Alpha},
            cache: false,
            success: function (html) {
            $("#BigPlace").html(html);
			}
            });
            });
			}); 		

Open in new window

0
 

Author Comment

by:DS928
ID: 39207835
OK I read and changed.  Still not populating.
<script>
        	$(document).ready(function()
			{
			$(".image-class").click(function(e) {
  			e.preventDefault();
			$("#BigPlace").load($(this).attr("[href]"));
			});
			});
		</script>	

Open in new window

0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39207851
There was probably some more to it.  Maybe some HTML, too?

This: $("#Alpha").change(function() says in effect, "when there is a change in the page element identified by id=Alpha, run the following function."  The function makes an AJAX POST-method request, sending the value of the selection to the place_search script.
0
 

Author Comment

by:DS928
ID: 39207930
This is almost working.  The problem is that it opens on a new page.  It needs to be on the same page.

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();
});

<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>

Open in new window

0
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 39208117
I see that you still have the target= attribute in the anchor tag.  I thought we had already talked about that.
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39208160
This works for me
HTML
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('a.image-class').click(function(e) {
    e.preventDefault();
    $('#BigPlace').load($(this).attr('href'));
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div>
  <a href="africa_search.php?abc=123" class="image-class">Image 1</a>
  <a href="africa_search.php?abc=234" class="image-class">Image 2</a>
  <a href="africa_search.php?abc=345" class="image-class">Image 3</a>
  <a href="africa_search.php?abc=456" class="image-class">Image 4</a>
</div>
<div id="BigPlace">
</div>
</body>
</html>

Open in new window

And the backend script
<h1><?php echo $_GET['abc'];?></h1>
<p>Some text to load goes here</p>
<p>Some text to load goes here</p>
<p>Some text to load goes here</p>
<p>Some text to load goes here</p>

Open in new window

Working copy here http://www.marcorpsa.com/ee/t243.php
0
 

Author Closing Comment

by:DS928
ID: 39208424
Perfect Thank you!
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39208621
You are welcome - thanks for the points.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

751 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