Ajax form loading met handige url in adresbalk
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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');
}
}
});
}
$(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:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<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>
<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):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?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!';
?>
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(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();
});
});
$('#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?
Gewijzigd op 02/01/2015 13:49:35 door Fabian W
Er zijn nog geen reacties op dit bericht.