www.webdeveloper.com
Results 1 to 8 of 8

Thread: ajax load to specific div

  1. #1
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293

    ajax load to specific div

    from the index.html page i click a link to open the about.html page in a specified div called content. when i click the link it opens the page as a complete seperate document. ignoring all attriburtes off css linked to the index page. How can i display this data in the correct div taking on the attributes of the index page.

    here is my .js

    Code:
    	$(document).ready(function(){
        	
    		$('.about.').click(function(){
            $('#content').load(url + ' about.html');
        	});
    	
    	})

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,154
    1. thats not JavaScript
    2. you can not load an HTML page in to a DIV elemment.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    Quote Originally Posted by \\.\ View Post
    1. thats not JavaScript
    2. you can not load an HTML page in to a DIV elemment.
    thanks for replying!

    If i have 5 links and i want to add each one in to a div to show when each of the links are clicked..

    whats the best way to do this?

  4. #4
    Join Date
    Oct 2013
    Posts
    377
    The workaround to loading content into a DIV is to put an iframe into that DIV. Load the content into the iframe and voila. Of course you have to size them appropriately.

  5. #5
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293

    new approach and code

    Quote Originally Posted by Kevin2 View Post
    The workaround to loading content into a DIV is to put an iframe into that DIV. Load the content into the iframe and voila. Of course you have to size them appropriately.
    thanks Kevin. I have worked everything in to one page. but i cant seem to get the content to load. maybe someone can help here is my code.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>David's Site</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css" />
    
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    		<script src="js/jquery.zaccordion.js"></script>
    		
    		<!-- for the slide show -->
    		<style type="text/css">
    			/* Just some styles to set the page layout. */
    			* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
    			body {padding:20px;line-height:20px;font-size:12px;color:#000;}
    			h1 {font-size:18px;margin:10px 0;line-height:1;}
    			h2 {font-size:14px;margin:10px 0;line-height:1;}
    			p {font-size:12px;margin:10px 0;}
    			small {font-size:11px;margin:10px 0;color:#333;}
    			a {font-size:12px;text-decoration:none;color:#f00;}
    			p span {color:#00f;}
    			#container {width:960px;margin:0 auto;padding-bottom:40px;}
    			#examples {margin-top:60px;}
    			pre {font-family:"Courier New", Courier, monospace;font-size:11px;margin:20px 0 100px 0;border:1px dashed #ddd;padding:10px;background:#f6f6f6;}
    			pre.html {margin:10px 0;}
    			.clear {clear:both;}
    		</style>
    	
      
    <style type="text/css">
    @import url(css.css);
    </style>
    <script type="text/javascript" src="js.js"></script>
    
    
    <!-- for loading the div with ajax -->
    <script>
    function showDiv(idInfo) {
      var sel = document.getElementById('divLinks').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      document.getElementById('containers'+idInfo).display = 'block';
      return false;
    }
    </script>
    
    <style type="text/css">
    #containers1, #containers2, #containers3, #containers4 #containers5 {
      display:none;
      overflow:hidden;
    }
    </style>
    
    </head>
    
    <body>
    <div id="top">
    </div>
    
    
    <!-- The navigation css is in styles.css -->
    
    <div id="main">
    
    <ul id="navigationMenu">
        <li>
    	    <a class="home" href="#" onclick="return showDiv('1');return false">
                <span>Home</span>
            </a>
        </li>
        
        <li>
        	<a class="about" href="#" onclick="return showDiv('2');return false">
                <span>About</span>
            </a>
        </li>
        
        <li>
    	     <a class="services" href="#" onclick="return showDiv('3');return false">
                <span>Services</span>
             </a>
        </li>
        
        <li>
        	<a class="portfolio" href="#" onclick="return showDiv('4');return false">
                <span>Portfolio</span>
            </a>
        </li>
        
        <li>
        	<a class="contact" href="#" onclick="return showDiv('5');return false">
                <span>Contact us</span>
            </a>
        </li>
    </ul>
        
    </div>
    
    
    <!-- The css for the main area is in css.css-->
    <!-- The wrapper and the content div control the jquery slide up effect -->
    
    <div id="wrapper">
    	<div id="content">
      
      <!-- The 5 container content divs will display in the containers area -->		   	
           <div id="divLinks">
     <div id="containers1">Containers #1<p>Whole bunch of text 1</div>
     <div id="containers2">Containers #2<p>Whole bunch of text 2</div>
     <div id="containers3">Containers #3<p>Whole bunch of text 3</div>
     <div id="containers4">Containers #4<p>Whole bunch of text 4</div>
      <div id="containers5">Containers #5<p>Whole bunch of text 5</div>
     </div> 
    
    	</div>
    </div>
    
       
    <!-- This is the slide show. Also the css for the slid show is in the head of this document -->
    
    	<div id="container">
    		<div id="examples">
    			<ul id="example1">
    				<li>
    					<img src="images/slide0.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide1.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide2.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide3.gif" width="600" height="270" alt="" />
    				</li>
    				<li>
    					<img src="images/slide4.gif" width="600" height="270" alt="" />
    				</li>
    			</ul>
    	
    	<script type="text/javascript">
    	$("#example1").zAccordion({
    	timeout: 4000,
    	slideWidth: 600,
    	width: 960,
    	height: 270
    	});
    	</script>
    
    </div>
    </div>
    
    <div id="foot">
    <a href="#top"><img src="img/upArrow.png" width="100" /></a>
    </div>
    </body>
    </html>
    I also have an external .js file controling the slide function on the target div... here is the code for that...

    Code:
    $(document).ready(function() {
    						   
    	var hash = window.location.hash.substr(1);
    	var href = $('#navigationMenu li a').each(function(){
    		var href = $(this).attr('href');
    		if(hash==href.substr(0,href.length-5)){
    			var toLoad = hash+'.html #content';
    			$('#content').load(toLoad)
    		}											
    	});
    
    	$('#navigationMenu li a').click(function(){
    								  
    		var toLoad = $(this).attr('href')+' #content';
    		$('#content').hide('fast',loadContent);
    		$('#load').remove();
    		$('#wrapper').append('<span id="load">LOADING...</span>');
    		$('#load').fadeIn('normal');
    		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    		
    		function loadContent() {
    			$('#content').load(toLoad,'',showNewContent())
    		}
    		function showNewContent() {
    			$('#content').show('normal',hideLoader());
    		}
    	
    		function hideLoader() {
    			$('#load').fadeOut('normal');
    		}
    		return false;
    		
    		
    		
    	});
    
    });
    Also here is the error in my console
    Code:
    OPTIONS file:///Applications/XAMPP/xamppfiles/htdocs/david/.html  jquery.min.js:2
    send jquery.min.js:2
    p.extend.ajax jquery.min.js:2
    p.fn.load jquery.min.js:2
    (anonymous function) js.js:8
    p.extend.each jquery.min.js:2
    p.fn.p.each jquery.min.js:2
    (anonymous function) js.js:4
    k jquery.min.js:2
    l.fireWith jquery.min.js:2
    p.extend.ready jquery.min.js:2
    D
    Last edited by Nicholas Diaz; 01-04-2014 at 04:01 PM.

  6. #6
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    http://jsfiddle.net/#&togetherjs=08LnngLQ1M

    here is the jsfiddle of my code... i have all the content in the html file i just need someone to show me how to get the java script to add it to the box in the middle of the screen and then swap it out as each link is clicked.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,154
    I am looking at a blank screen here on that link.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    This is the answer to load the data all in one page in the same div, then hide it, then display it as the links are clicked in nav.
    Code:
       
    >     <!-- The navigation css is in styles.css -->
    >     
    >     <div id="main">
    >     
    >     <ul id="navigationMenu">
    >         <li>
    >     	    <a class="home" href="#home">
    >                 <span>Home</span>
    >             </a>
    >         </li>
    >         
    >         <li>
    >         	<a class="about" href="#about">
    >                 <span>About</span>
    >             </a>
    >         </li>
    >         
    >         <li>
    >     	     <a class="services" href="#services">
    >                 <span>Services</span>
    >              </a>
    >         </li>
    >         
    >         <li>
    >         	<a class="portfolio" href="#portfolio">
    >                 <span>Portfolio</span>
    >             </a>
    >         </li>
    >         
    >         <li>
    >         	<a class="contact" href="#contact">
    >                 <span>Contact us</span>
    >             </a>
    >         </li>
    >     </ul>
    >         
    >     </div>
    >     
    >     <!-- The wrapper and the content div control the jquery slide up effect -->
    >     <div id="wrapper">
    >     	<div id="content">
    >         <!-- The 5 pages content divs will display in this area -->	
    >         <!-- The actual content I want to switch in and out of the panel, this is hidden -->
    >      
    >      <div id="home" class="pages">
    >      <h1 style=color:#7fff00;>Welcome</h1>
    >      <p>hey this is cool</p>
    >      </div>
    >     
    >      <div id="about" class="pages">
    >      <h1 style=color:#6495ed;>My Qualifications</h1>
    >      <p>2 Whole bunch of text 2</div>
    >      
    >      <div id="services" class="pages">
    >      <h1 style=color:#ee7621;>Welcome</h1>
    >      <p>3 Whole bunch of text 3</div>
    >      
    >      <div id="portfolio" class="pages">
    >      <h1 style=color:#ffb90f;>Welcome</h1>
    >      <p>4 Whole bunch of text 4</div>
    >      
    >      <div id="contact" class="pages">
    >      <h1 style=color:#ff1493;>Welcome</h1>
    >      <p>5 Whole bunch of text 5</div>	   	
    >     
    >     	</div>
    >     </div> 
    >     
    >     
    >      
    >     <!-- This is the slide show -->
    >     <div id="container">
    >     		<div id="examples">
    >     			<ul id="example1">
    >     				<li>
    >     					<img src="images/slide0.gif" width="600" height="270" alt="" />
    >     				</li>
    >     				<li>
    >     					<img src="images/slide1.gif" width="600" height="270" alt="" />
    >     				</li>
    >     				<li>
    >     					<img src="images/slide2.gif" width="600" height="270" alt="" />
    >     				</li>
    >     				<li>
    >     					<img src="images/slide3.gif" width="600" height="270" alt="" />
    >     				</li>
    >     				<li>
    >     					<img src="images/slide4.gif" width="600" height="270" alt="" />
    >     				</li>
    >     			</ul>
    >     	
    >     	<script type="text/javascript">
    >     	$("#example1").zAccordion({
    >     	timeout: 4000,
    >     	slideWidth: 600,
    >     	width: 960,
    >     	height: 270
    >     	});
    >     	</script>
    >     
    >     </div>
    >     </div>
    >     
    >     <div id="foot">
    >     <a href="#top"><img src="img/upArrow.png" width="100" /></a>
    >     </div>
    >     </body>
    >     </html>
    >     
    >     
    >     
    >     $(document).ready(function () {
    >         $(".pages").hide();
    >         $("#navigationMenu a").click(function (e) {
    >             e.preventDefault();
    >             var item = this.href.split("#")[1];
    >             $(".pages:visible").slideUp(function () {
    >                 $("#" + item).slideDown();
    >             });
    >         });
    >         $("#home").show();
    >     });
    >     
    >     .pages{
    >     display: none}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles