Sroy, the Dynamic Ajax Content script is very old. You're better served with modern jquery. I use it in the lines below. Put the following files in the same folder. They do what you want (I think):
index.html (main page)
Code:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta name="viewport" content="user-scalable=no">-->
<title>Cars</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
body {margin:0; padding:10%; padding-top:30px; padding-bottom: 10px; font-family: arial; font-size: 14px; line-height: 25px }
hr {border-top: 0}
</style>
<script>
var porsche=0, ferrari=0, aston=0
</script>
</head>
<body>
<div id="leftcolumn" style="display: inline-block; vertical-align: top; width: 47%; text-align: left; border: 1px solid black; padding: 10px">
<a href="javascript: void(0)" onclick="$('#rightcolumn').load('porsche.html'); return false">Porsche Page</a><hr>
<a href="javascript: void(0)" onclick="$('#rightcolumn').load('ferrari.html'); return false">Ferrari Page</a><hr>
<a href="javascript: void(0)" onclick="$('#rightcolumn').load('aston.html'); return false">Aston Martin Page</a><hr><br>
<div id="porsche_clicked">Total Porsche clicked: <span style="font-weight: bold" id="porsche_clicked_total">0</span></div>
<div id="ferrari_clicked">Total Ferrari clicked: <span style="font-weight: bold" id="ferrari_clicked_total">0</span></div>
<div id="aston_clicked">Total Aston Martin clicked: <span style="font-weight: bold" id="aston_clicked_total">0</span></div>
</div>
<div id="rightcolumn" style="display: inline-block; vertical-align: top; width: 47%; text-align: left; border: 1px solid black; padding: 10px">
<h3 style="margin-top: 0">Choose a page to load.</h3>
</div>
<script>
function height_right()
{
document.getElementById('rightcolumn').style.minHeight=document.getElementById('leftcolumn').clientHeight-20+'px'
}
height_right()
</script>
</body>
</html>
porsche.html:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta name="viewport" content="user-scalable=no">-->
<title>Porsche</title>
</head>
<body>
<img style="border:0; width: 100%" alt="" src="http://www.dynamicdrive.com/dynamicindex17/ajaxfiles/porschegt.jpg" onclick="porsche=porsche+1; document.getElementById('porsche_clicked_total').innerHTML=porsche">
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<p style="line-height: 17px">The Carrera GT has a 5.7 litre V10 internal combustion engine that produces
605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100
km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph).
With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only
offered with a six-speed manual transmission, in contrast to its rival the
Ferrari Enzo that is only offered with sequential manual transmission. Also
the Carrera GT is significantly less expensive than the Ferrari Enzo. The
Ferrari Enzo is priced around €660,000 to the Carrera GT's €440,000. The
Carrera GT is known for its high quality and reliability which makes it one of
the best supercars ever. [<a href="http://en.wikipedia.org/wiki/Porsche_Carrera_GT">source</a>]</p>
</body>
</html>
ferrari.html:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta name="viewport" content="user-scalable=no">-->
<title>Ferrari</title>
</head>
<body>
<img style="border:0; width: 100%" alt="" src="http://www.dynamicdrive.com/dynamicindex17/ajaxfiles/ferrari.jpg" onclick="ferrari=ferrari+1; document.getElementById('ferrari_clicked_total').innerHTML=ferrari">
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p style="line-height: 17px">The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
The name, which means "red head", comes from the red painted cylinder heads on
the flat-12 engine. The engine was technically a 180 V engine since it shared
flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
kW), and the car won many comparison tests and admirers - it was featured on
the cover of Road & Track magazine nine times in just five years. Almost
10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
most common Ferrari models despite its high price and exotic design. [<a href="http://en.wikipedia.org/wiki/Ferrari_Testarossa#Testarossa">source</a>]</p>
</body>
</html>
aston.html:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta name="viewport" content="user-scalable=no">-->
<title>Aston</title>
</head>
<body>
<img style="border:0; width: 100%" alt="" src="http://www.dynamicdrive.com/dynamicindex17/ajaxfiles/aston.jpg" onclick="aston=aston+1; document.getElementById('aston_clicked_total').innerHTML=aston">
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Aston Martin V8</h3>
<p style="line-height: 17px">The new Aston Martin V8 Vantage was first seen at the Geneva Motor Show in
2005. The two seat, two door coupe has a bonded aluminium structure for strength
and lightness. The car is powered by a 4.3 L quad-cam 32-valve V8 which produces
380 hp (283 kW) at 7000 rpm and 302 ft.lbf (409 N.m) at 5000 rpm. This engine is
unique to Aston Martin and features race-style dry-sump lubrication, which
enables it to be mounted low to lower the centre of gravity. The car can
accelerate to 60 mph (97 km/h) in 4.9 seconds.<p>The V8 Vantage will cost
£79,000 or €104,000 when it goes on sale towards the end of summer 2005 and is
intended to compete with the Porsche 911. [<a href="http://en.wikipedia.org/wiki/Aston_Martin_V8_Vantage_(2005)">source</a>]</p>
</body>
</html>
I can put a demo on my server if you want. The values for total clicked only hold for one session. Tell me if you want them to be stored for multiple sessions.
Dynamic Ajax Content - Update Parent Div from Child
Reply With Quote
Bookmarks