|
HTML - Ajax Dynamic Content
http://www.walterdecantelupe.co.uk/n...c-content.html
I have been working on calling external html files into divs on another page and can't seem to get it right! I can't see what I am doing wring here! Please help. Cheers - Mas The original files are available here http://www.dhtmlgoodies.com/scripts/...ic-content.zip Html HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ajax dynamic content</title>
<style type="text/css">
/* This css is only needed for the demo */
body{
margin:10px;
font-size:0.9em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
background-color:#E2EBED;
height:100%;
}
a{
color:#F00;
}
#mainContainer{
width:760px;
margin:0 auto;
text-align:left;
background-color:#FFF;
height:100%;
padding-bottom:10px;
}
#mainContainer .news{
margin:5px;
border:1px dotted #555;
background-color:#EEE;
padding:10px;
}
#mainContainer img{
float:left;
margin:2px;
}
div#header{
border:0px;
background-color:#FFF;
padding:0px;
margin:0px;
height:100px;
}
h2{
font-size:1.3em;
margin-bottom:5px;
}
p{
margin-top:0px;
}
.clear{
clear:both;
}
h2{
color:#000;
}
#news2{
height:150px;
}
.header{
padding-left:5px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax.js"></script>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax-dynamic-content.js"></script>
<script type="text/javascript">
ajax_loadContent('news1','http://www.walterdecantelupe.co.uk/new/external/externalfile1.html');
ajax_loadContent('news2','http://www.walterdecantelupe.co.uk/new/external/externalfile2.html');
ajax_loadContent('news3','http://www.walterdecantelupe.co.uk/new/external/externalfile3.html');
</script>
</head>
<body>
<div id="mainContainer">
<p class="header">The content of the three boxes below are loaded by Ajax(Asyncron Javascript And XML) from external files.</p>
<div class="news" id="news1"></div>
<div class="news" id="news2"></div>
<div class="news" id="news3"></div>
</div>
</body>
</html>
Similar TutorialsIntroduction: Seeing as this question is brought up very often, I hope this short guide will be a destination for users seeking information about the topic. Although this is a server-side issue, those who are not aware of this fact generally seek help in HTML/XHTML, so this is where the topic will remain Note: Read the answers to Frequently Asked Questions in the next post! Hasn't this been done before? Absolutely; this is meant as a straightforward stickied version that brings a few things together and references previous threads where you can find further details. If your question is somewhere in the realm of one of these, you're in the right place: How do large websites manage their content? How do I make the same content appear in multiple pages without copy/pasting? How do I automatically update parts of different pages, without editing every file? How do I avoid duplicating code in multiple files? Is there an alternative to IFrames? The answer is using PHP Includes, SSI (Server Side Includes), or ASP Includes. Each will be discussed below. Basic Concept: Let's assume we have a basic HTML page with a few links that represent a navigation menu (we're using HTML5 markup for simplicity): Code: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Main Page</title> </head> <body> <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> </body> </html> This HTML page is now our basic template for subsequent pages that we create, which traditionally meant that we copy and paste our menu into each one. However, what if we end up creating 50 pages and then find out we have to add another link to the menu? Our only solution would be to add the link to each page. In order to avoid this, we separate our menu from the rest of the page like so: Code: <div> <ul> <li><a href="home.html">Home Page</a></li> <li><a href="gallery.html">Gallery Page</a></li> <li><a href="about.html">About Page</a></li> <li><a href="contact.html">Contact Page</a></li> </ul> </div> Save it in a file, and then place an include on every page where we want to display the menu: Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
code for including menu would go here
</body>
</html>
This setup lets us update our menu file, and have the changes be immediately reflected everywhere we placed our include. The concept is most often used with things like menus, headers, and footers, but it can be used with anything and we'll now discuss how it's done in practice. Note: The attached zip contains working examples of all three methods. PHP Includes: General Requirements: Your web-hosting provider must support PHP, which most of them do. If your host does not support PHP, I would suggest switching hosts. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to run PHP. The easiest way to do this at once is by installing XAMPP. Required Filetypes: By default, servers will only parse PHP code inside files with the .php extension. Therefore, you must change the extension of any files you want to use includes in to .php (e.g. index.html becomes index.php). Although your main file must have a .php extension, you can include files with extensions such as .html, .txt, .inc, other .php files, and more. Syntax Here are two ways to include a file in PHP: PHP Code: <?php include('file_to_include.html');?> or: PHP Code: <?php include 'file_to_include.html';?> Note that you can also include full URLs if URL file-access is enabled in your server's configuration: PHP Code: <?php include("http://www.google.com/");?> Code Example: (some_page.php) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Include</title>
</head>
<body>
<?php include("menu.html");?>
</body>
</html>
Server Side Includes (SSI): General Requirements: Your web-hosting provider must support Server Side Includes, which most of them do. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support Server Side Includes. If you are using Apache, you can find information on enabling SSI here. If you are using IIS, you can install Server Side Includes inside Windows Features > World Wide Web Services > Application Development Features > Server Side Includes, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse Server Side Includes inside files with the .shtml, .shtm or .stm extensions. Therefore, you must change any files you want to use includes in to have one of these extensions (e.g. index.html becomes index.shtml). Although your main file must have one of the above extensions, you can include files with extensions such as .ssi, .html, .txt, .inc, and more. Syntax Here are two ways to include a file using SSI: Code: <!--#include file="menu.ssi" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.ssi are in the same directory. Code: <!--#include virtual="includes/menu.ssi" --> Is used to specify a path relative to the web root. The above assumes that menu.ssi is located inside webroot/includes Code Example: (some_page.shtml) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SSI Include</title>
</head>
<body>
<!--#include file="menu.ssi" -->
</body>
</html>
ASP Includes: General Requirements: Your web-hosting provider must support ASP. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support ASP. If you are using Apache, you can find information on enabling ASP here. If you are using IIS, you can install ASP inside Windows Features > World Wide Web Services > Application Development Features > ASP, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse ASP code inside files with the .asp extension. Therefore, you must change the extension of any files you want to use includes in to .asp (e.g. index.html becomes index.asp). Although your main file must have a .asp extension, you can include files with extensions such as, .html, .txt, .inc, other .asp files, and more. Syntax Here are two ways to include a file using ASP (The syntax is exactly the same as SSI): Code: <!--#include file="menu.html" --> Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.html are in the same directory. Code: <!--#include virtual="includes/menu.html" --> Is used to specify a path relative to the web root. The above assumes that menu.html is located inside web root directory/includes Code Example: (some_page.asp) Code: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ASP Include</title>
</head>
<body>
<!--#include file="menu.html" -->
</body>
</html>
Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long. I was just wondering how I can replace a word or number with a specified word or number. What I want to achieve: I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image. But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified. ------------- Man I really wish I remembered how to do this haha. Thanks guys. I really need help on this this is the original code : - Code: <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="Andy Moo http://locationdetection.mobi/"> <title>TEST1</title> </head> <body> <div id="geo" class="geolocation_data"></div> <?php include 'geojavascript.php'; ?> </body> </html> I would like to add ajax auto refresh.. to refresh the div link which is something like this : - Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#geo').fadeOut('slow').load('geojavascript.php').fadeIn("slow");
}, 20000);
</script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="Andy Moo http://locationdetection.mobi/">
<title>Locator</title>
</head>
<body>
<div id="geo" class="geolocation_data"></div>
<?php
include 'geojavascript.php';
?>
</body>
</html>
But, there is something wrong here... instead of refreshing the div.. it refresh html page only.. not the div data.. anyone.. please help me on this ? thanks in advance guys... I'd like to have a newsletter opt-in, but I don't want to move the person to a php page to confirm they're in the system. Is it possible to add them from the same page, and without a page refresh, show them they're added? Hi guys, I have a problem and I really dont know how to solve it: my ajax/php/mysql application has to reload a picture every 5 secs. The image gets overwritten every 5 secs too so you can see in the browser how it changes. It works good in Firefox but in IE, the browser saves the image in the cache and doesnt reload it, so I see every time the same pic, even if it was overwritten!!! the main problem is that the image has to keep its name, so renaming the picture isn't a solution :S Reloading the page isn't a solution neither because i use ajax to reload just the container div. I tried with: <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> and <meta http-equiv="expires" content="-1" > but IE doesnt reload the image!!!!! Please help me if you know any solution... Thanks in advance! Sebastian Breit.- Hi everyone. I'm after an image gallery for my site like the one found here . I have found the Ajax image gallerys quite nice, but don't have the ability to scroll through the thumbnails if there is more than, say, 5 displayed. Does anybody know of any similar scripts or whatever to get a better result to the mentioned website. TIA, n00b Daniel Hi... I am using an application that delivers data in the form of HTML tags (example: ^vst843^). I use these tags in an HTX file which writes to an HTML web page. I'd like to use Ajax to update the tag values without refreshing the page, but from what I understand I must write in Javascript to use Ajax. Am I right about this? If so how can I use the HTML tags coming from my application in this way? Thanks. I have a problem filling select input from javascript/ajax: the important bits of code: function handleFillList() { if (filledList.readyState == 4) window.document.getElementById('listToFill').innerHTML = filledList.responseText; alert(filledList.responseText); alert(window.document.getElementById('listToFill').innerHTML); One would think, that both alerts would show the same result, but it is not so! The first gives me (only the beggining is important) : <option value=CANADA>CANADA</OPTION><option value=CHINA>CHINA</OPTION><option ...... The second gives me: CANADA</OPTION><OPTION value="CHINA">CHINA</OPTION><OPTION..... why did the begging got lost! And then I don't get the select filled as it should be! Thank you for your help, ales Hi, I am designing a small website for a friend and decided to use Ajax on one of the pages: http://122.201.74.87/~natural/treatments.html Problem is in firefox the white background (cell) doesnt extend with the ajax cell so the text just runs down the page over the purple background. But if you look at the page in internet explorer the white background (cell) extends and collapses with the ajax cell like it should. Can someone have a quick look at this and let me know what changes i should make so it works in firefox like it does in IE. PS. Yes the coding is nothing special because it is just a quick site i put together for a friend. Thanks. im wondering if any1 can help me figure out how i can keep my domain name and link it to my Apache Home Server with a Dyanmic IP i have tried no-ip.com but i dont like having sitename.no-ip.com i want sitename.com does any1 know a way to do this?? My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bg.jpg">
<body>
<div id="wrapper">
<div id="header">
<div id="topleft"><!--start of content keep left -->
</div>
<div id="home">
</div>
<div id="about">
</div>
<div id="process">
</div>
<div id="yachts">
</div>
<div id="blog">
</div>
<div id="news">
</div>
<div id="contact">
</div>
<div id="headbanner">
</div>
</div><!--header -->
<div id="contentwrap">
<div id="leftcontentwrap">
<div id="static">
</div>
<div id="dynamic">
</div>
</div><!--leftconentwrap -->
<div id="rightcontentwrap">
<div id="sidebarwrap">
<div id="sidebar">
</div><!--end sidebar -->
<div id="sidedynamic">
</div>
</div><!--sidebarwrap -->
</div>
</div><!--contentwrap -->
<div id="footwrap">
<div id="footer">
</div><!--footer -->
</div><!--footer wrap -->
</div> <!--wrapper -->
</body>
</html>
CSS Code: @charset "utf-8";
/* CSS Document */
#header {
height: 280px;
width: 891px;
}
#headbanner {
background-image: url(images/island_12.png);
height: 203px;
width: 891px;
float: left;
}
#home {
background-image: url(images/island_04.png);
height: 77px;
width: 63px;
float: left;
}
#sidebarwrap {
float: left;
height: 348px;
width: 200px;
}
#dynamic {
background-image: url(images/island_15.png);
width: 659px;
min-height: 427px;
}
#contact {
background-image: url(images/island_10.png);
float: left;
height: 77px;
width: 140px;
}
#news {
background-image: url(images/island_09.png);
float: left;
height: 77px;
width: 55px;
}
#footer {
background-image: url(images/island_16.png);
height: 75px;
width: 891px;
float: left;
}
#sidedynamic {
background-image: url(images/sidedynamic.jpg);
float: left;
height: 77px;
width: 232px;
min-height: 77px;
}
#rightcontentwrap {
height: auto;
width: auto;
float: left;
}
#contentwrap {
width: 891px;
min-height: 348px;
}
#sidebar {
background-image: url(images/island_14.png);
height: 348px;
width: 232px;
}
#static {
background-image: url(images/island_13.png);
float: left;
height: 152px;
width: 659px;
}
#process {
background-image: url(images/island_06.png);
float: left;
height: 77px;
width: 93px;
}
#about {
background-image: url(images/island_05.png);
height: 77px;
width: 67px;
float: left;
}
#blog {
background-image: url(images/island_08.png);
float: left;
height: 77px;
width: 61px;
}
#leftcontentwrap {
width: 659px;
min-height: 348px;
float: left;
}
#topleft {
background-image: url(images/island_03.png);
height: 77px;
width: 347px;
float: left;
}
#yachts {
background-image: url(images/island_07.png);
float: left;
height: 77px;
width: 65px;
}
#wrapper {
width: 891px;
min-height: 800px;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 0px;
}
Hello, I am using a loop to dynamically generate buttons using the <button> tag. The value for this button is populated using a variable. When I click on one of these buttons, I want the content of the button to be displayed on the text field. But, because it is in a loop and the because the value is a variable only the value of the 1st button comes in and then disappears from the text field. The javascript I am trying out to populate the text field is : function passButtonValue() { poitem= document.getElementById("poitem"); hiddenField = document.getElementById("hiddenField"); hiddenField.value = poitem.innerHTML; } I am using ABAP for getting the values and running the loop How can I reprogram it to overcome this problem? Thanks! I also want to be able to make my website more interactive in this way: when I click on one table cell, another cell appears below, which can then be clicked on. Is there a way to do this with CSS and/or HTML, or will I have to resort to Flash? I need dynamic iframe and i found that I have found your script: http://www.dynamicdrive.com/dynamici...iframessi2.htm but this doesn't exactly work in IE6 what to do solve this problem? i wont to add dynamic iframe work also in IE6 pls help me I have 10 rows compose of 3 textbox per row. After pressing submit button, they are post to the next page to a table. But my problem is if only 3 rows have data the other rows is still shown in a table but blank with borders. So I want my table to show the rows who only have data |
|||||||