Ik heb een script op internet gedownload waarmee ik alle menu links kan laden met jquery-ajax.
Deze heb ik bewerkt zodat hij het doet op mijn site. De bedoeling is dat mijn site volledig gaat werken op Ajax. Dat betekent voor de urls dat elke pagina als bijv www.site.com/#about er uit komt te zien. De files in de directory heten nog wel gewoon data/about.php
Tot hier geen problemen.

Nu wil ik ook mijn forms op deze manier laden. Ik wil dus mijn script dat links met ajax laadt omzetten naar een script dat forms laadt met ajax.

Dit is het script dat links laadt met Ajax:

javascript:

var default_content="";

$(document).ready(function(){
	checkURL();
	$('ul li a').click(function (e){checkURL(this.hash); });
	
	//filling in the default content
	default_content = $('#pageContent').html();
	
	setInterval("checkURL()",250);
});

var lasturl="";

function checkURL(hash){
	if(!hash) hash=window.location.hash;
	if(hash != lasturl)	{
		lasturl=hash;
		// if we've used the history buttons to return to the homepage,
		// fill the pageContent with the default_content
		
		if(hash=="")
		$('#pageContent').html(default_content);
		else
		loadPage(hash);
	}
}

function loadPage(url){
	url=url.replace('#','');
	$('#loading').css('visibility','visible');
	
	$.ajax({
		type: "POST",
		url: "load_page.php",
		data: 'page='+url,
		dataType: "html",
		success: function(msg){
			
			if(parseInt(msg)!=0){
				$('#pageContent').html(msg);
				$('#loading').css('visibility','hidden');
			}
		}
	});
}



html:

<ul>
	<li><a href="#index">Home</a></li>
	<li><a href="#activities">Activiteiten</a></li>
    <li><a href="#about">Over</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div id="pageContent"></div>


php (load_page.php):

<?php

if(!$_POST['page']) die("0");

$page = (string)$_POST['page'];

if(file_exists('data/'.$page.'.php'))
echo file_get_contents('data/'.$page.'.php');

else echo 'There is no such page!';
?>


.
.
.
.

Dit is mijn huidige script dat met ajax pagina's laadt, maar ik ben niet tevreden over de errormelding die mist als de pagina niet bestaat en over de url die niet verandert als ik een pagina laadt.

Deze wil ik dus op dezelfde manier maken als het script wat bovenaan staat.


$(document).ready(function(){
    $('#change_content_select1').submit(function(){
    	var which_to_load = $('#chart1').val();
		var week_to_load = $('#week1').val();
		var year_to_load = $('#year1').val();
		source_of_file = 'data/'+which_to_load+'-'+week_to_load+'-'+year_to_load+'-body.php';
        $('#pageContent').load( source_of_file );
		event.preventDefault();
    });
});


Toevoeging op 02/01/2015 23:36:22:

Het komt er dus op neer dat ik die
$('ul li a').click(function
wil vervangen door een url die ik verkrijg via mijn form.

Weet iemand hoe je dat het best kan doen?

Reageren