Keskustelu: Nettisivujen teko: Ajax URL

Miten saan päivitettyä osoiteriville tiedot? Jos haluaa esim. kopioda linkin. Eli Ajaxilla haettu tietoa ja se on tulostettu sivulle etusivu.html, osoiteriville ei päivity mitään. Onko edes mahdollista? Onko Ajaxilla mahdollista tehdä niin että hakee esim. tietoa ja sitten haluaa siirtyä takaisin päin back-painikkeella?

Tulosta sivulle koodipätkä

<meta http-equiv="refresh" content="0; URL=osoite">

, jossa "osoite" on se kohta mihin tulostat ajaxilla linkin.

Tässä varmaankin haettiin Ajax-vaihtoehtoa, jossa koko sivua ei ladata uudestaan. Voit päivittää osoitteesta hash-osion, ts. risuaidan jälkeen tulevan osan, mikä laukaisee oman eventtinsä. Uusimmilla selainversioilla toimii window.addEventListener('hashchange', funcRef, false);, mutta cross-browser ratkaisuun voit käyttää esim. jQuery hashchange plugaria.

Saanko tällä mitenkään lähetettyä arvoja functiolle? en saa kyllä pelaamaan.

Tällä pitäisi lähettää. Jos teen formin niin saan lähetettyä value arvoilla. Mutta osoiteriville ei silloin saa mitään arvoja. Tiedän että tuo testi(this.value) on ainakin väärin.

<a href="#otsikko=TESTI" onClick="javascript:testi(this.value)">TESTI</a>

Javakoodi

function testi(str)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("testi").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("testi").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","testi.php?otsikko="+str,true);
xmlhttp.send();
}

-----------------------

Tällä Jqueryllä sain toimimaan mutta on mielestäni hidasta käyttää. Sekä miten siihen sais lisarvoja section lisäksi. esim. section=home ja jokin=testi?

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

Olipas sekava sepostus. Haluatko siis lähettää nappia painettaessa lomakkeen sekä päivittää samalla osoiteriville useamman kuin yhden parametrin? Siinä tapauksessa tee jotain seuraanvanlaista. Lue kommentit, sisäistä toiminta ja muokkaa tarpeen mukaan. En testannut, eli korjaa myös mahdolliset virheet :).

// Sidotaan elementtiin, jonka id on 'form', submit-tapahtumankuuntelija
$('#form').submit(function() {
    // Validoi lomake tässä

    // Valikoi lomakkeelta lähtevä data tähän, esim.
    var data = { 'otsikko': $('#otsikko').val() };

    // Lähetetään lomakkeen tiedot serverille
    // Vaihda tilalle $.post, mikäli formin metodi on post
    // Vaihda parametrejä tarpeesi mukaan, kts. http://api.jquery.com/jQuery.get/
    $.get(testi.php, data, function(data) {
        // Tehdään datalla jotain?
        alert(data);

        // Päivitetään lokaatio
        /* Jos käytät a-elementtiä lomakkeen lähettämiseen,
         * hrefin asettaminen kenties riittää, ellet halua
         * muodostaa osoitetta dynaamisesti
         */
        /* Jos selaimet eivät tykkää =-ja &-merkeistä hashissa
         * kokeile vaihtaa ne joksikin muiksi
         */
        window.location.hash = '#section=home&jokin=testi';
    });


    // Estetään sivun vaihtuminen
    return false;
});

// Tutkitaan osoiterivin muutoksia
/* Jos päivität sivun osoitteen aina vain
 * lomaketta lähetettäessä, et tarvitse tätä.
 * Voit hoitaa tarvittavat toiminnot lomaketta
 * lähetettäessä
 */
$(window).hashchange(function() {
    // Tehdään jotain location.hashilla
});

Ok luen läpi.. olen huono selittämään mutta olen tehnyt ajaxia käyttämällä sivut jossa tietoa haetaan tietokannasta. Sitten jokaisessa haetussa on lue lisää. kun sitä painaa niin niin lisäteksti avautuu tiettyyn moduuliin. esim. <div id="testi"> tähän </div>

nyt kun ajaxilla haetaan niin esim et voi palata back painikkeella takaisinpäin tai päivittää sivua tai kopioida linkkiä.

eli siksi haluan että osoiteriville saisin koodit jonka kopiomalla voi kyseinen jutun lukea.

faaraot: koska olet itse tehnyt sivusi, niin sähän voit tehdä jonkun tuonne jonkun linkin, josta osoitteen voi kopioida (esim. eri videopalveluissa aukeaa erillinen lightbox, jossa tekstikentässä linkki).

Linkinhän muodon sä voit itse määrittää, joten tässä varmaan se järkevin olisi juuri jo joku edellämainittu tapa, esim.

www.faaraot.fi/mun-juttu#lue-lisaa tai www.faaraot.fi/mun-juttu?luelisaa

Ensimmäisessä tapauksessa vain joudut JavaScriptillä tarkistamaan ja lataamaan sisällön ajaxilla, jolloin se tietenkin vaikuttaa jonkin verran myös hakukonetuloksiin.

Kaikelta tältä säädöltähän ois vältytty, kun ois jätetty käyttämättä sitä Ajaxia...

On se kumma kun ensin pitää rikkoa vepin perustoiminnallisuus ja sitten ihme purkalla yrittää sitä korjata.

Githubissa näyttäisi (näin niin kuin silmämääräisesti) toimivan ainakin Fx 5:llä (Operalla tuntuisi lataavan sivun aina uudelleen) niin, että repoja selatessa tiedostot liukuvat esiin ja osoitekin päivittyy normaalin oloisesti. Jos kiinnostaa tutkia niin eikun kaivamaan sorsia, en itse valitettavasti juuri nyt ehdi.

iso JOS ymmärsin oikein... ;)
Nopea rääpäisy, eli siis napin painnalluksesta div update, sekä jos tullaa sivulle suoralla urlilla sis. hash. http://sivut.fi#artikkeli
Toki nyt hän se koittaa ladata sisalto:on kaikki mahdolliset hashit, joten se kannattaa ehkä rajata johonki arrayhin tjn..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-language" content="fi" />

	<title>Bomppabolen</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$("document").ready(function() {

     //Tarkista onko hashi urlissa..
     tarkistaHash();

    $('.artikkeli').click(function() {
            var hash = $(this).attr('href');
            lataa(hash.substring(1) + ".html");
    });

    function tarkistaHash()
    {
        if(window.location.hash)
        {
            lataa(window.location.hash.substring(1) + ".html");
        }
    }

    function lataa(filu)
    {
        //Tahan joku tarkistusfunktio, eli saadaanko kys. filu getata..
        $.get("artikkelit/" + filu, function(data){
            $("#sisalto").html(data);
        });
    }

});
</script>

</head>

<body>

<div id="sisalto">
Sisältää osan artikkelista..
<p>
<!-- painalluksesta urli paivittyy, eli hashi lisataan -->
<!-- 'a' on ladattava artikkeli.. -->
<a href="#a" class="artikkeli">Lue lisää..</a>
</p>
</div>

</body>
</html>

Tai versio 2..

Liitetään myös divin id mukaan hashiin ja lautaus funktioon..

http://sivut.fi#divinid-artikkelinnimi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-language" content="fi" />

	<title>Bomppabolen</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$("document").ready(function() {

     //Tarkista hashia urlissa..
     if(window.location.hash)
     {
            lataa(window.location.hash.split("-"));
     }

    $('.artikkeli').click(function() {
            lataa($(this).attr('href').split("-"));
    });

    function lataa(tavara)
    {
        //Tahan edelleen joku tarkistusfunktio, eli saadaanko kys. filu getata..
        $.get("artikkelit/" + tavara[1] + ".html", function(data){
            $(tavara[0]).html(data);
        });
    }

});
</script>

</head>

<body>

<div id="sisalto1">
Sisältää osan artikkelista..
<p>
<a href="#sisalto1-artikkeli1" class="artikkeli">Lue lisää..</a>
</p>
</div>

<div id="sisalto2">
Sisältää osan artikkelista..
<p>
<a href="#sisalto2-artikkeli2" class="artikkeli">Lue lisää..</a>
</p>
</div>

</body>
</html>

Tuo githubin osoitteenpäivitys toimii HTML 5 History/State API:lla. Edellistä ehdottamaani jQuery-plugaria parempi vaihtoehto on History.js, joka hoitaa APIn käpristelyn käyttäjän puolesta ja turvautuu tuota History APIa tukemattomien selainten ja versioiden tapauksessa tässä ketjussa moneen kertaan esiteltyyn hashin muuttamiseen.