Forum PHP.pl > dynamiczne ładowanie tabelek AJAX

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: dynamiczne ładowanie tabelek AJAX

DiamondPir

30.08.2012, 19:08:18

witajcie, mam mały ajaxowy problem.

chciałbym stworzyć alternatywę iframe:

oto co wyskrobałem: link

Główny div (zielony) ładuje do siebie ajaxem plik ajaxtab2.php (czerwony div)
w tym czerwonym divie chcę mieć link który w miejsce pliku ajaxtab2.php ładuje plik ajaxtab3.php
Chcę osiągnąć taki efekt że w każdym załadowanym boxie mam linki do innych boxów i po kliknięciu one mi się przeładowują w ajaxie...
rozumiecie co chcę osiągnąć... po prostu w miejsce czerwonej tabelki ma się załadować niebieska tabelka bez przeładowania strony

kod głównego pliku ajaxtab.php

[PHP] pobierz, plaintext 
<script src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        (function update(obj){
         $.get($('.get').eq(obj).attr('data'), function(data) {
         $('.get').eq(obj).html(data);
         obj++;
         if($('.get').eq(obj).html() !== null){update(obj);}
         });
    })(0);
});
</script>
 
<div class='get' data='ajaxtab2.php' style='width:300px;height:300px;padding:20px;background:green;'>Loading</div>
[PHP] pobierz, plaintext

kod pliku ajaxtab2.php (czerwona tabelka)

[PHP] pobierz, plaintext 
<div style='width:200px;height:200px;padding:20px;background:red;'>
zaladowany drugi div z linkiem:
<a href='ajaxtab3.php'>trzeci div</a>
</div>
[PHP] pobierz, plaintext

kod pliku ajaxtab3.php (niebieska tabelka)

[PHP] pobierz, plaintext 
<div style='width:200px;height:200px;padding:20px;background:blue;'>
zaladowany trzeci div z linkiem:
<a href='ajaxtab2.php'>drugi div</a>
</div>
[PHP] pobierz, plaintext

Z osobą która zdoła mi pomóc mogę nawiązać dalszą współpracę. Potrzebuję osób które będę odpłatnie tworzyć dla mnie ajaxowe dodatki i efekty.
Pozdrawiam

HgReed

30.08.2012, 22:38:15

To zrób tak samo jak dla 2, tylko na onclick link'u. I zmień href na # (żeby nie przenosiło).

DiamondPir

31.08.2012, 12:15:28

ale to chyba nie będzie zbyt profesjonalne... czyż nie?

viking

31.08.2012, 14:03:05

Coś w ten deseń

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
	  jQuery('#wrapper').on('click', '.get', function(e){
			e.preventDefault();
			e.stopPropagation();
		  var url = $(this).data('url');
		  $(this).load(url, function() {
			});
		});
	});
	</script>
</head>
<body>
<div id="wrapper">
  <div class='get' data-url='ajax2.html' style='width:300px;height:300px;padding:20px;background:green;'>Loading</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Function na zewnątrz. I uporządkować. To zakłada że bierzesz adres z data-url.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.