Loading Divs Without Reload Page

[Tameem]

Hi Everyone.

I need Some help.

I'm trying to make a vertical navigation menu with links like the example below:

but i want from example links to be shown in the box.

for example (book your flight) when someone clicks the link it load directly into the box without reloading the page.

And thank you.

[Tameem]

I tried http://angularjs.org with this code

Angular.js

var app = angular.module( "myApp", [] );
app.config( function ( $routeProvider ) {
$routeProvider
.when( '/this', { templateUrl: 'this.html' } )
.when( '/that', { templateUrl: 'that.html' } )
.when( '/other', { templateUrl: 'other.html' } )
.otherwise( { redirectTo: '/this' } );
});
app.controller( 'MainCtrl', function ( $scope ) {
});

<script type="text/ng-template" id="this.html">
This Page.
</script>
<script type="text/ng-template" id="that.html">
That Page.
</script>
<script type="text/ng-template" id="other.html">
Other Page.
</script>
<div ng-controller="MainCtrl">
<ul>
<li><a href="#/this">This</a></li>
<li><a href="#/that">That</a></li>
<li><a href="#/other">Other</a></li>
</ul>
<ng-view></ng-view>
</div>

http://jsfiddle.net/joshdmiller/NEuJ6/

but it keeps give me errors

i placed the code above in profile_main.tpl

and the supporting libraries in layout.tpl

[Tameem]

*bump*

[freshJet]

If you wanted you could do this easily using jQuery, but with no experience with AngularJS, I can't help you if that's how you want to do it.

[StartVM]

You could use the bootstrap javascript tabbed pills and them style the pills to match your current design

[Tameem]

ok thank guys.

[ARV187]

Re-edit next post.

[ARV187]

I did a progress, now try load the load.php, but now its named traffictable.php

In frontpage_main.tpl i wrote this:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function() {
$("#traffictable").load("lib/skins/templatemo_254_agency/traffictable.php");
var refreshId = setInterval(function() {
 $("#traffictable").load('lib/skins/templatemo_254_agency/traffictable.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>

But i have a error: Fatal error: Class 'ACARSData' not found in /home/argavirt/public_html/lib/skins/templatemo_254_agency/traffictable.php on line 17

line 17 is: $results = ACARSData::GetACARSData();

This is the content in traffictable.php:

<table>
<table width="100%" border="5" bgcolor="#000000">
<thead>
<tr>
<td></td>
<td align="center" bgcolor="#FFFF00"><strong>Estado </td>
<td align="center" bgcolor="#FFFF00"><strong>Número de vuelo </td>
<td align="center" bgcolor="#FFFF00"><strong>Aerolínea </td>
<td align="center" bgcolor="#FFFF00"><strong>Salida----> </td>
<td align="center" bgcolor="#FFFF00"><strong>---->Llegada </td>
<td align="center" bgcolor="#FFFF00"><strong>Piloto </td>
<td align="center" bgcolor="#FFFF00"><strong>Avión </td>

<?php
$results = ACARSData::GetACARSData();
if (count($results) > 0)
{
foreach ($results as $flight)
{
 if ($flight->client == 'FSACARS')
 {
	 $plane = OperationsData::getAircraftInfo($flight->aircraft);
 } else
 {
	 $plane = OperationsData::getAircraftByReg($flight->aircraft);
 }
?>
<tr>
			 <td align="center">
etc....................
?>
</thead>
</table>
</div>

Solved!! http://forum.phpvms.net/topic/6261-auto-refresh-flight-boardsolved/page__hl__refresh

Edited November 21, 2014 by ARV187