Ładowanie zawartości podstron do div (AJAX)

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
gabhel
Posty: 2
Rejestracja: sob lis 27, 2010 2:58 pm

Ładowanie zawartości podstron do div (AJAX)

Post autor: gabhel »

Witajcie, mam nadzieję że ktoś pomoże mi w tym problemie :)

Usiłuję stworzyć stronę opartą na wczytywaniu zawartości podstron do diva na stronie głónej metodą AJAX. JS nie znam prawie w ogóle, ale korzystam z gotowego rozwiązania. Problem polega na tym, że wczytując w ten sposób np. podstronę z formularzem php, w ogóle nie wczytuje sie formularz. Rozumiem, że to kwestia chyba tego, że tak wczytując go, przeglądarka nie wykonuje skryptu php, ale jak to obejść?

Poniżej skrypt, który wczytuje zawartość zewnętrznych plików php do diva:

Kod: Zaznacz cały

 
<script type="text/javascript">
<!-- <![CDATA[
function strona(plik) {
  if (plik!='s1' && plik!='s2' && plik!='s3' && plik!='s4' && plik!='s5') return false; // zabezpieczenie
  var xml = null;
  var wynik = document.getElementById("content");
  wynik.innerHTML = "Trwa ładowanie strony";
 
    if (window.XMLHttpRequest) xml = new XMLHttpRequest();
    else if (window.ActiveXObject) xml = new ActiveXObject("Microsoft.XMLHTTP");
 
  if (xml) {
    xml.onreadystatechange = function() {
      if (xml.readyState==4) {
          wynik.innerHTML = xml.responseText;
      }
    }
    xml.open("GET", plik+".php", true);
    xml.send(null);
  }
  return false;
}
strona('s1');
// ]]> -->
 
gabhel
Posty: 2
Rejestracja: sob lis 27, 2010 2:58 pm

Re: Ładowanie zawartości podstron do div (AJAX)

Post autor: gabhel »

rafaelk pisze:
Jedyne moje pytanie jest takie, czy wywołujesz funkcję strona('s1'); w momencie, gdy dokument jest załadowany?
Nie wiem czy dobrze rozumiem pytanie ale:
funkcja jest umieszczona na samym końcu strony, po wszystkich innych elementach. Wywoływana jest dopiero po przyciśnięciu odpowiedniego przycisku menu.

Poniżej mój formularz php, mam nadzieję, że może w nim coś dostrzeżesz, kodowanie pliku iso-8859-2
dla bezpieczeństwa adresy i e-mail zamieniłem na x

Kod: Zaznacz cały

<?php
// sprawdzamy, czy zmienna $submit jest pusta
if (empty($_POST['submit'])) {
    // wyświetlamy formularz
    echo "<table border=\"0\"><form method='post'>
<tr>
<td>Imię i nazwisko</td>
<td><input type=\"text\" name=\"imie\" style=\"width: 500px\" class=form></td>
</tr>
<tr>
<td>Adres e-mail</td>
<td><input type=\"text\" name=\"email\" style=\"width: 500px\" class=form></td>
</tr>
<tr>
<td>Treść wiadomości</td>
<td><textarea name=\"tresc\" style=\"width: 500px; height: 200px\" class=form></textarea></td>
</tr>
<tr>
<td> </td>
<td class=\"buttons\"><input type=\"submit\" name=\"submit\" value=\"Wyślij\" class=\"button\"> 
<input type=\"reset\" value=\"Wyczyść\"  class=\"button\"></td></form>
</tr>
</table>";
}
// sprawdzamy, czy zmienne przesłane z formularza nie są puste
elseif (!empty($_POST['tresc']) && !empty($_POST['imie']) && !empty($_POST['email'])) {
    // jeżeli powyższy warunek jest spełniony tworzona jest wiadomość
    // zmienna $message zawiera treść wiadomości
    $message = "Tresc wiadomosci:\n$_POST[tresc]\nWyslal: $_POST[imie]\ne-mail: $_POST[email]";
    // zmienna $header zawiera przede wszystkim adres zwrotny
    $header = "From: $_POST[imie] <$_POST[email]>";
    // funkcja mail() za pomocą której wiadomość zostanie wysłana
    @mail("xxxxxx@xxxxxxxx","Wiadomosc ze strony XXXXXXXXXXXXXX","$message","$header")						/* E-MAIL */
    or die('Nie udało się wysłać wiadomości');
    // wyświetlenie komunikatu w przypadku powodzenia
    echo "<p class='alert'><strong>Wiadomość została wysłana poprawnie!<br>Postaramy się wkrótce na nią odpowiedzieć.<br><br><a href=\"http://xxxxxxxxxxxxxxx\" class='alert'>Powrót do strony głównej</a></strong></p>";
}
// lub w przypadku nie wypełnienia formularza do końca
else echo "<p class='alert'>Wypełnij wszystkie pola formularza!<br /><br /><a href=\"http://xxxxxxxxxxxxxx\" class='alert>Powrót</a></p>";
?>
l-web
Posty: 12
Rejestracja: sob lis 20, 2010 11:03 am
Kontakt:

Re: Ładowanie zawartości podstron do div (AJAX)

Post autor: l-web »

Ten skrypt do ładowania stron, o ile dobrze zrozumiałem masz na końcu strony?! Spróbuj wrzucić do pomiędzy <head>Twój skrypt AJAX</head>. Powinien zadziałać.


A zamiast:

Kod: Zaznacz cały

    if (window.XMLHttpRequest) xml = new XMLHttpRequest();
    else if (window.ActiveXObject) xml = new ActiveXObject("Microsoft.XMLHTTP");
użyj tego, krócej i bardziej profesjonalnie :)

Kod: Zaznacz cały

var xml = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

Kod: Zaznacz cały

xml.send(null); --->  xml.send();

class='alert'>Powrót</a></p>";


Więcej nie zdzierżę.


Mała rada jak już piszesz kod HTML między <?php ?>

Zrób coś takiego, a łatwiej Ci będzie ->

Kod: Zaznacz cały

<?php
echo '<form action="xxx.php" >Jakiś sobie tekst może być i "cudzysłów"</form>'; 
?>
Jak nie zauważyłeś, nie musisz robić ciągle \"\"\"\".
ODPOWIEDZ