Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> dynamiczne ładowanie tabelek AJAX
DiamondPir
post
Post #1





Grupa: Zarejestrowani
Postów: 78
Pomógł: 0
Dołączył: 12.09.2010

Ostrzeżenie: (0%)
-----

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 
  1. <script src="/jquery/jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.         (function update(obj){
  5.          $.get($('.get').eq(obj).attr('data'), function(data) {
  6.          $('.get').eq(obj).html(data);
  7.          obj++;
  8.          if($('.get').eq(obj).html() !== null){update(obj);}
  9.          });
  10.     })(0);
  11. });
  12. </script>
  13.  
  14. <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 
  1. <div style='width:200px;height:200px;padding:20px;background:red;'>
  2. zaladowany drugi div z linkiem:
  3. <a href='ajaxtab3.php'>trzeci div</a>
  4. </div>
[PHP] pobierz, plaintext



kod pliku ajaxtab3.php (niebieska tabelka)
[PHP] pobierz, plaintext 
  1. <div style='width:200px;height:200px;padding:20px;background:blue;'>
  2. zaladowany trzeci div z linkiem:
  3. <a href='ajaxtab2.php'>drugi div</a>
  4. </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

Ten post edytował DiamondPir 30.08.2012, 19:09:46
Go to the top of the page
+Quote Post
HgReed
post
Post #2





Grupa: Zarejestrowani
Postów: 59
Pomógł: 0
Dołączył: 13.11.2011

Ostrzeżenie: (0%)
-----

To zrób tak samo jak dla 2, tylko na onclick link'u. I zmień href na # (żeby nie przenosiło).
Go to the top of the page
+Quote Post
DiamondPir
post
Post #3





Grupa: Zarejestrowani
Postów: 78
Pomógł: 0
Dołączył: 12.09.2010

Ostrzeżenie: (0%)
-----

ale to chyba nie będzie zbyt profesjonalne... czyż nie?
Go to the top of the page
+Quote Post
viking
post
Post #4





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

Coś w ten deseń 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  5. 	<script type="text/javascript">
  6. 	$(function() {
  7. 	  jQuery('#wrapper').on('click', '.get', function(e){
  8. 			e.preventDefault();
  9. 			e.stopPropagation();
  10. 		  var url = $(this).data('url');
  11. 		  $(this).load(url, function() {
  12. 			});
  13. 		});
  14. 	});
  15. 	</script>
  16. </head>
  17. <body>
  18. <div id="wrapper">
  19.   <div class='get' data-url='ajax2.html' style='width:300px;height:300px;padding:20px;background:green;'>Loading</div>
  20. </div>
  21. </body>
  22. </html>
[HTML] pobierz, plaintext


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

Ten post edytował viking 31.08.2012, 14:12:29
Go to the top of the page
+Quote Post
« Następny starszy · AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 06:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn