[AJAX] linki HTML

Wszystko związane ze skryptami JS, DHTML itd.
risaj
Posty: 5
Rejestracja: 15 sie 2011, 14:54:30
Strona na CBA.pl: kamila.palac-bedzin.cba.pl
Płeć: Niewybrana
User Agent: Chrome Windows 1280x800

[AJAX] linki HTML

Post autor: risaj »

Witam, jak można w ajaxie napisać kod aby otwierał mi po naciśnięciu link stronę ładowaną w tle? Dodam że stronkę mam w html, javascript i jquery napisaną.
Awatar użytkownika
DeaDriam
Posty: 4023
Rejestracja: 04 lip 2011, 14:00:40
Lokalizacja: Möglingen
Płeć: Mężczyzna
User Agent: Firefox Windows 1024x768
Kontakt:

Re: [AJAX] linki HTML

Post autor: DeaDriam »

nie pamiętam bo lata świetlne sie bawiłem czymś podobnym i ale zamiast AJAXa można użyć document.write zobacz w Google (oczywiście że jest to wada, gdy korzystasz z dokumentu XHTML,ale wszystko można obejść spokojnie i nawet parsowanie bedzie OK) no zerknąć musisz i poszukać co nie co na forach php
Tak Ci podpowiem bo tyle co pamiętam,a nie pamiętam gdzie mi to kiedys dzwoniło i w zasadzie na emeryture z tym przeszedłem :faja:
_____________________________________________________
Nie badz pijawka-znalazles rozwiazanie problemu..podziel sie na forum!
----------------------------------------------------------------------------
SmacznY WordpresS>> http://www.przepisyzgarnka.pl <<
Awatar użytkownika
viper26
Posty: 51
Rejestracja: 27 sty 2009, 17:00:56
Płeć: Mężczyzna
User Agent: Firefox Windows 1280x960

Re: [AJAX] linki HTML

Post autor: viper26 »

Hmm.. może z użyciem biblioteki jQuery Tools ?
Na tej stronie masz fajny przykład, tylko że tam jest z wykorzystaniem paneli.
risaj
Posty: 5
Rejestracja: 15 sie 2011, 14:54:30
Strona na CBA.pl: kamila.palac-bedzin.cba.pl
Płeć: Niewybrana
User Agent: Chrome Windows 1280x800

Re: [AJAX] linki HTML

Post autor: risaj »

viper26 dziękuję bardzo;]

Ale pojawił mi się kolejny problem. próbowałam dodać stronkę w php, ale z jakieś powodu mi jej nie wyświetla. Używam Ajaxa ale problem nadal jest. poniżej wklejam kod. może ktoś mi powie gdzie co źle zrobiłam:

Kod: Zaznacz cały

<script type="text/javascript" src="ajax.js">
function getXMLHttpRequest()
{
  var request = false;
    
  try {
    request = new XMLHttpRequest();
  } catch(err1) {
    try {
      request = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(err2) {
      try {
        request = new ActiveXObject('Microsoft.XMLHTTP');                
      } catch(err3) {
        request = false;
      }
    }
  }
  return request;
}    
var r;
r = getXMLHttpRequest();    

function processResponse()
{
  if (r.readyState == 4) {
    if (r.status == 200) {
      alert(
        'XML z serwera: ' + 
    r.responseXML.getElementsByTagName('tekst')[0].childNodes[0].nodeValue
      );
    };
  };
}
        $(document).ready(function(){
    
        $('a').click(function(){
            $('#content').load(
            $(this).attr('href')                
            );                
            return false;
        });          
    
     });
        

</script>
Dodam że pierwszy raz próbuje coś w php napisać więc jestem zielona==" Stonka w HTML ale odsyłacz w php.
Dzięki za pomoc.
P.S.
jeśli ten problem opisałam w złym dziele to przepraszam.
P.S.2.
Albo jak zmienić powyższy kod tak aby odwoływał się do kodów HTML (albo XHTML) a nie PHP (no odsyła mnie opisu i filmiku z wakacji na jakimś kolorowym tle;])
Awatar użytkownika
viper26
Posty: 51
Rejestracja: 27 sty 2009, 17:00:56
Płeć: Mężczyzna
User Agent: Firefox Windows 1280x960

Re: [AJAX] linki HTML

Post autor: viper26 »

Jedna rzecz mnie niepokoi, mianowicie masz w kodzie "<script type="text/javascript" src="ajax.js">" a w nim cały kod...
Albo wpisujesz w kodzie HTML odnośnik do zewnętrznego pliku z javascript

Kod: Zaznacz cały

<script type="text/javascript" src="ajax.js"></script>
a w pliku ajax.js nie dajesz już script :P

albo wpisujesz bezpośrednio kod javascript (w miejsce "...") w kodzie HTML

Kod: Zaznacz cały

<script type="text/javascript">
...
</script>
Niby banał i być może nie potrzebnie to wkleiłaś tutaj, ale przez to może kod nie działać ;)

Widzę że masz kod zrobiony dwoma sposobami, tzn. można to zrobić za pomocą jquery albo w czystym javascripcie (funkcje getXMLHttpRequest i processResponse).
Co do jquery to kod jest dobry i to jak najbardziej powinno działać.

Kod: Zaznacz cały

$(document).ready(function(){
        $('a').click(function(){
            $('#content').load(
            $(this).attr('href')
            );
            return false;
        });
    });
 
I tylko to wystarczy.
Zakładam że kod HTML jest dobry :P

Co do funkcji getXMLHttpRequest to jest okej, ale kod "var r; r = getXMLHttpRequest();" powinnien być w funkcji processResponse i brakuje jeszcze onreadystatechange no i wysłania.
Dla Twojego przykładu to powinno wyglądać mniej więcej w ten sposób:

Kod: Zaznacz cały

function getXMLHttpRequest()
{
  var request = false;
    
  try {
    request = new XMLHttpRequest();
  } catch(err1) {
    try {
      request = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(err2) {
      try {
        request = new ActiveXObject('Microsoft.XMLHTTP');                
      } catch(err3) {
        request = false;
      }
    }
  }
  return request;
}    

function ajax(item)
{
    var myrequest=new getXMLHttpRequest();
    myrequest.onreadystatechange=function()
    {
        if (myrequest.readyState==4)
        {
            if (myrequest.status==200)
            {
                document.getElementById('content').innerHTML=myrequest.responseText;
            }
        }
    }
    myrequest.open('GET', item.href, true);
    myrequest.send();
    return false;
}
 
i dla każdego odnośnika jeszcze trzeba dodać

Kod: Zaznacz cały

onclick="return ajax(this)"
 
albo można skorzystać z javascript i zrobić to automatycznie, ale trzeba dodać ten kod na koniec elementu body

Kod: Zaznacz cały

<script type="text/javascript">
var items=document.getElementsByTagName('a');
for(i=0; i<items.length; i++)
{
    items[i].onclick=function(){return ajax(this);};
}
</script>
Na http://www.w3schools.com/ajax/default.asp jest fajny kurs AJAX.
risaj pisze:Albo jak zmienić powyższy kod tak aby odwoływał się do kodów HTML (albo XHTML) a nie PHP (no odsyła mnie opisu i filmiku z wakacji na jakimś kolorowym tle;])
Hmm.. tyle że on odwołuje się właśnie do HTML-a a nie PHP. Kod HTML może być wyświetlany przez PHP, ale dalej to jest HTML. Nie za bardzo rozumiem tego co napisałaś :P
risaj
Posty: 5
Rejestracja: 15 sie 2011, 14:54:30
Strona na CBA.pl: kamila.palac-bedzin.cba.pl
Płeć: Niewybrana
User Agent: Chrome Windows 1280x800

Re: [AJAX] linki HTML

Post autor: risaj »

viper26 dzięki jesteś moim zbawieniem!

Jeszcze tylko dla pewności dopytam się. Przed kodem jQuery nie muszę dodawać:

Kod: Zaznacz cały

function processResponse()
{
  if (r.readyState == 4) {
    if (r.status == 200) {
      alert(
        'XML z serwera: ' + 
    r.responseXML.getElementsByTagName('tekst')[0].childNodes[0].nodeValue
      );
    };
  };
} 
tylko samo:

Kod: Zaznacz cały

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

       $(document).ready(function(){
    
        $('a').click(function(){
            $('#content').load(
            $(this).attr('href')                
            );                
            return false;
        });          
    
     });
tak?

P.S.
Niestety, próbowałam dodać kod ale ni chodzi:( albo rozwala mi całą stronkę albo na stronie głównej pojawia się kod)
Awatar użytkownika
viper26
Posty: 51
Rejestracja: 27 sty 2009, 17:00:56
Płeć: Mężczyzna
User Agent: Firefox Windows 1280x960

Re: [AJAX] linki HTML

Post autor: viper26 »

Tak, ale jQuery to też javascript, więc musisz ująć to w ten sposób:

Kod: Zaznacz cały

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
       $(document).ready(function(){
    
        $('a').click(function(){
            $('#content').load(
            $(this).attr('href')                
            );                
            return false;
        });          
    
     });
</script>
Jeszcze mam 2 pytania...
Co jest w pliku "ajax.js" ?
I czy masz w ten sam sposób jak plik "ajax.js" dodany kod jQuery (np. "http://code.jquery.com/jquery-1.6.2.min.js" lub "jquery.js") ?
risaj
Posty: 5
Rejestracja: 15 sie 2011, 14:54:30
Strona na CBA.pl: kamila.palac-bedzin.cba.pl
Płeć: Niewybrana
User Agent: Chrome Windows 1280x800

Re: [AJAX] linki HTML

Post autor: risaj »

w ajax.js:

Kod: Zaznacz cały

// AJAX Hello World Demo http://www.hackorama.com/ajax

// Make a POST to the server 
// and pass on any data from browser
// via the XMLHTTPRequest

function talktoServer(){
    var req = newXMLHttpRequest();
    //register the callback handler function
      var callbackHandler = getReadyStateHandler(req, updateMsgOnBrowser);
      req.onreadystatechange = callbackHandler;
      req.open("POST", "servertime.php", true);
      req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      //get the value from the text input element and send it to server
      var testmsg = document.getElementById("testmsg");
      var msg_value = testmsg.value;
      req.send("msg="+msg_value);
}

// This is the callback functions that gets called
// for the response from the server with the XML data

var lastPing = 0;
function updateMsgOnBrowser(testXML) {

    var test = testXML.getElementsByTagName("test")[0];
    var message = testXML.getElementsByTagName("message")[0];
    var ip = testXML.getElementsByTagName("ip")[0];

    var timestamp = test.getAttribute("timestamp");
    if (timestamp > lastPing) {
        lastPing = timestamp;

        var ip_value = ip.firstChild.nodeValue;
        var message_value = message.firstChild.nodeValue;

        var msg_display = document.getElementById("msg_display");
        msg_display.innerHTML = " Server got the  message: \"" + 
            message_value + "\"" +
            "<br>Server IP: "+ ip_value + 
            " Server Timestamp: \""+ timestamp + "\"" ;
    }
}


//the following two functions are helper infrastructure to 
//craete a XMLHTTPRequest and register a listner callback function

function newXMLHttpRequest() {
    var xmlreq = false;
    if (window.XMLHttpRequest) {
        xmlreq = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
            // Try ActiveX
        try { 
            xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) { 
            // first method failed 
            try {
                xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                 // both methods failed 
            } 
        }
     }
       return xmlreq;
} 

function getReadyStateHandler(req, responseXmlHandler) {
    return function () {
    if (req.readyState == 4) {
        if (req.status == 200) {
                responseXmlHandler(req.responseXML);
        } else {
            var hellomsg = document.getElementById("hellomsg");
            hellomsg.innerHTML = "ERROR: "+ req.status;
              }
        }
     }
}

syntax highlighted by Code2HTML, v. 0.9
Ale znowu linki się nie otwierają, znowu jak próbowałam zmienić na prototype.js to też się wysypywał.
Mam coś takiego:

Kod: Zaznacz cały

<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
Awatar użytkownika
viper26
Posty: 51
Rejestracja: 27 sty 2009, 17:00:56
Płeć: Mężczyzna
User Agent: Firefox Windows 1280x960

Re: [AJAX] linki HTML

Post autor: viper26 »

risaj pisze:Ale znowu linki się nie otwierają, znowu jak próbowałam zmienić na prototype.js to też się wysypywał.
Może w kodzie javascript jest gdzieś błąd ? Wystarczy jeden błąd a reszta kodu po prostu się nie uruchomi :P

Jeśli będziesz korzystać tylko z jQuery, to ten plik "ajax.js" jest nie potrzebny, chyba że te funkcje użyte są w innej części kodu.
Wpierw zostaw sobie to co niezbędne i zobacz czy działa.

PS. Jeśli masz stronę wrzuconą na serwer, to jak możesz to podaj linka, będzie mi łatwiej sprawdzić co jest nie tak ;)
risaj
Posty: 5
Rejestracja: 15 sie 2011, 14:54:30
Strona na CBA.pl: kamila.palac-bedzin.cba.pl
Płeć: Niewybrana
User Agent: Chrome Windows 1280x800

Re: [AJAX] linki HTML

Post autor: risaj »

Sprawdź proszę pocztę.
ODPOWIEDZ