Results 1 to 8 of 8

Thread: Populating a div

  1. #1
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default Populating a div

    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.

  2. #2
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Added this...

    Code:
    $('.image-class').click(function(e) {
    e.preventDefault();
    $('#BigPlace').load($(this).attr('href'));
    });
    and this...
    HTML Code:
    <a class= ".image-class" href="http://MenuHead.com/Scripts/africa_search.php" target="#BigPlace"></a>
    Still no luck!
    Last edited by keyboard; 06-01-2013 at 02:27 AM. Reason: Format: Code Tags [code][/code], Php Tags [php][/php]

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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:

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

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

    Code:
    <div id="BigPlace" align="center">The File Goes Here</div>
    There was:

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

    Code:
    <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.
    Last edited by jscheuer1; 05-30-2013 at 03:58 PM. Reason: correct ajax script
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

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

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

    Code:
    <a href="Scripts/africa_search.php" target="BigPlace">
    Last edited by jscheuer1; 05-30-2013 at 04:19 PM. Reason: saw other problem
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    DS928 (05-30-2013)

  7. #6
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

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

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    $(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:

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

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

    Code:
    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();
    	});
    });
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    DS928 (06-02-2013)

  10. #8
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you John, I appreciate the additional info.

Similar Threads

  1. Resolved not populating table??
    By liamallan in forum PHP
    Replies: 8
    Last Post: 07-20-2010, 08:06 PM
  2. Help with populating checkboxes ...
    By pepe_lepew1962 in forum PHP
    Replies: 1
    Last Post: 04-10-2010, 06:21 AM
  3. Data Not Populating
    By rebelbwb in forum JavaScript
    Replies: 0
    Last Post: 07-22-2009, 03:10 AM
  4. populating one drop down with another
    By nasirmunir in forum PHP
    Replies: 1
    Last Post: 03-27-2009, 06:47 PM
  5. Populating Array....
    By bunker in forum PHP
    Replies: 0
    Last Post: 11-26-2008, 04:42 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •