javascript - Bookmark i ajax hjemmeside - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

Bruger #16138 @ 20.09.10 17:39

Hej. jeg er ved at lære lidt om ajax, og er ved at lave en hjemmeisde med det.
Jeg bruger ajax til at "skifte" side.
Problemet er at man så ikke kan linke til en speciel side.
Jeg har hørt at det kan gøres muligt med noget "bogmærke ting".
har kigget lidt rundt og kan sq ikke lige finde noget. (Måske søger jeg på det forkerte).

Håber en af jer kan hjælpe mig med dette.

Siden ligger på: www.fraggit.dk/ny
her er de scripts der er invonleret i selve sideskifts delen

index.php

Kode

<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="onload.js"></script>

<title>Fraggit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body style=" background: url(bg.jpg);"  onload="onload_function();" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table id="Table_01" width="1001"  border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="17">
            <img src="images/index_01.png" width="50" height="278" alt=""></td>
        <td rowspan="17">
            <img src="images/index_02.png" width="28" height="278" alt=""></td>
        <td colspan="3" rowspan="6"  width="204" height="50" style=" background: url(images/sideanvisning.png);" id="place_show"></td>
        <td rowspan="6">
            <img src="images/index_04.png" width="32" height="50" alt=""></td>
        <td colspan="8">
            <img src="images/index_05.png" width="608" height="1" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="images/index_06.png" width="28" height="25" alt=""></td>
        <td rowspan="3">
            <img src="images/index_07.png" width="50" height="26" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/index_08.png" width="608" height="24" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td colspan="6" rowspan="2">
            <img src="images/index_09.png" width="351" height="14" alt=""></td>
        <td rowspan="9">
            <img src="images/index_10.png" width="71" height="157" alt=""></td>
        <td colspan="2" rowspan="10"  width="199" height="161"  style=" background: url(images/adminpanel_place.png);"></td>
        <td rowspan="15">
            <img src="images/index_12.png" width="15" height="253" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td rowspan="14">
            <img src="images/index_13.png" width="50" height="252" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="images/index_14.png" width="163" height="1" alt=""></td>
        <td colspan="2">
            <img src="images/fraggit_banner_link.png" width="188" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index_16.png" width="43" height="10" alt=""></td>
        <td colspan="2" rowspan="11">
            <img src="images/index_17.png" width="121" height="196" alt=""></td>
        <td rowspan="4">
            <img src="images/fraggit_banner_link-19.png" width="187" height="57" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="images/index_19.png" width="277" height="11" alt=""></td>
        <td rowspan="4">
            <img src="images/index_20.png" width="2" height="67" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="9">
            <img src="images/index_21.png" width="16" height="175" alt=""></td>
        <td colspan="4">
            <img src="images/index_22.png" width="261" height="3" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="5"  width="234" style=" background: url(images/login_box.png);">
            </td>
        <td rowspan="2">
            <img src="images/index_24.png" width="27" height="53" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="33" alt=""></td>
    </tr>
    <tr>
        <td rowspan="6">
            <img src="images/index_25.png" width="187" height="110" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">
            <img src="images/login_fane.png" width="29" height="77" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="images/index_27.png" width="71" height="19" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="images/index_28.png" width="186" height="50" alt=""></td>
        <td rowspan="5">
            <img src="images/index_29.png" width="13" height="92" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
    </tr>
    <tr>
        <td colspan="4" rowspan="3">
            <img src="images/index_30.png" width="261" height="42" alt=""></td>
        <td rowspan="3">
            <img src="images/index_31.png" width="2" height="42" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="7" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/index_32.png" width="71" height="35" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="6" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_33.png" width="187" height="29" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="29" alt=""></td>
    </tr>
    <tr>
        <td colspan="12" width="844" height="42" style=" background: url(images/menu.png);" align="center">
        <?php  
        include('menu.php');
        ?>      
          
            </td>
        <td>
            <img src="images/spacer.gif" width="1" height="42" alt=""></td>
    </tr>
    <tr>
        <td colspan="3"  width="81" height="687" style=" background: url(images/midt_left_border.png);">
        </td>
        <td colspan="11"  height="" width="841" style="background: #222222;" valign="top">
            
            <div id="content" width="841">
            
            
            </div>
            
</td>
        <td colspan="3"  width="78" height="687"  style=" background: url(images/midt_right_border.png);">
        </td>
        <td>
            <img src="images/spacer.gif" width="1" height="687" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_38.png" width="50" height="35" alt=""></td>
        <td>
            <img src="images/index_39.png" width="28" height="35" alt=""></td>
        <td>
            <img src="images/index_40.png" width="3" height="35" alt=""></td>
        <td colspan="11">
            <img src="images/bund.png" width="841" height="35" alt=""></td>
        <td colspan="3">
            <img src="images/index_42.png" width="78" height="35" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="35" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="50" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="28" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="3" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="13" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="188" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="32" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="14" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="2" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="120" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="187" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="71" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="186" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="13" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="15" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="50" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
</center>

</body>
</html>

ajax.js

Kode

function loadpage(url, sitetitle){

    if (window.XMLHttpRequest) {
          xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("content").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","test.php?side=" + url,true);
    xmlhttp.send();
    document.getElementById("place_show").innerHTML = 'Du er: ' + sitetitle;
    document.title = 'Fraggit - ' + sitetitle;
}

test.php

Kode

<center>
<?php
$side = $_GET['side'];
$id = $_GET['id'];
if($side == "1"){
    $place = "Home";
    include('forside.php');
}elseif($side == "2"){
    include('members.php');
}elseif($side == "3"){
$place = "Chat";
include('chat.php');
}elseif($side == "4"){
$place = "Regler";
include('regler.php');
}elseif($side == "5"){
$place = "Nyheder";
include('nyheder.php');
}
?>
</center>

menu.php

Kode

<p>
<a href="#/?side=1"  id="menu" title="Home" onclick="loadpage('1', 'Home');">Home</a>   | 
<a  href="#/?side=2" id="menu" title="Medlemmer" onclick="loadpage('2', 'Medlemmer');">Medlemmer</a> |     
<a  href="#" id="menu"  title="Join the chat" onclick="loadpage('3', 'Chat');">Chat</a>          |            
<a href="#" id="menu"  title="Regler" onclick="loadpage('4', 'Regler');">Regler</a>          |            
<a href="#"  id="menu" title="Nyheder" onclick="loadpage('5', 'Nyheder');">Nyheder</a></p>

Håber en af jer kan hjælpe mig med dette

Indlæg senest redigeret d. 20.09.2010 17:39 af Bruger #16138

4 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #3143 @ 20.09.10 18:25

1.965

Hvis du ikke vil bruge netop det framework, så er tricket at du placerer et hash i sidens url (det efter "#"), som fortæller hvad ajax-applikationens tilstand er, fx

http://www.fraggit.dk/ny/#side=1
http://www.fraggit.dk/ny/#side=2
osv.

Det kan findes med window.location.hash

Indlæg senest redigeret d. 20.09.2010 18:25 af Bruger #3143

Bruger #5789 @ 20.09.10 17:50

640

Kig her: http://code.google.com/p/reallysimplehistory/

Bruger #16138 @ 20.09.10 18:59

Kan du ikke lave mig en eksemple på hvordan jeg skal bruge window.location.hash

har kigget lidt på google men syntes ikke helt at kunne finde ud af hvor det skal placeres i mit script

Bruger #5789 @ 22.09.10 22:49

640

Jesper så simpelt er det kun i få moderne browsere, i ældre, kan man godt nok gå tilbage med hash, men man skal asynkront holde øje med data og cache det og med et interval chekke om hash har ændret sig.. Og hvad hvis bruger selv skriver en ny hash i ex IE?

Der skal som minimum laves følgende: http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

Det er i hvert fald en kæmpe opgave der tager flere timer for et enkelt løsning, og flere dage/uger at lave generisk/dynamisk som RSH - Crossbrowser.

Her er flere; : Backbase, Dojo, Hash Listener library, og sikkert mange flere, men ingen løser opgaven lige så godt som ovenstående, efter min mening.

Men for mig, virker det tåbeligt at lave selv, med mindre det er med interesse i at lære JS og Browser fk's.

/J

Bookmark i ajax hjemmeside

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler