Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX]Dynamiczne ładowanie strony z parametrami
piotr485
post 26.06.2016, 21:18:59
Post #1





Grupa: Zarejestrowani
Postów: 292
Pomógł: 0
Dołączył: 10.07.2009

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

Witam.

Chciałbym zrobić coś takiego, aby klikając w link otwierało mi się nowe okno

Teraz mam coś takiego:

[HTML] pobierz, plaintext 
  1. <a href="#?w=930" rel="window_140" class="poplight">Link</a>
  2.  
  3.  
  4. <div id="window_141" class="popup_block">
  5. Treść okna po kliknięciu w link
  6. </div>
  7.  
[HTML] pobierz, plaintext


Problem w tym, że teraz mam ok. 150 takich linków na stronie z produktami i moja podstrona zajmuje 12tys. lini co przekłada się niestety na wolne wczytywanie strony.

Chciałbym zrobić coś takiego że dopiero po kliknięciu w link zaczynały by się wczytywać dane, czyli dodać tam jakiś atrybut data-id i z niego odczytywać - tylko nie mam zielonego pojęcia jak to zrobić, czy mógłby mnie ktoś nakierować ? Dodam jeszcze że w treści otwierającego się okna są checkboxy i przycisk do wysłania metodą POST.

Ten post edytował piotr485 26.06.2016, 21:19:51
Go to the top of the page
+Quote Post
Star
post 26.06.2016, 21:53:17
Post #2





Grupa: Zarejestrowani
Postów: 294
Pomógł: 34
Dołączył: 16.02.2015

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

Mozesz zrobic cos w tym stylu, w pliku content.php napisz kod ktory wygeneruje odpowiednia treść

[PHP] pobierz, plaintext 
  1. 			<a href="#?w=930" rel="window_140" class="poplight">Link1</a>
  2. 			<a href="#?w=930" rel="window_141" class="poplight">Link2</a>
  3. 			<a href="#?w=930" rel="window_142" class="poplight">Link3</a>
  4. 			<div id="content"></div>
  5.  
  6. 			<script>
  7. 			$('.poplight').click(function(){
  8.  
  9. 				$("#content").empty();
  10. 				var window =  $( this ).attr( "rel" );
  11.  
  12. 						$.ajax({
  13. 							  method: "POST",
  14. 							  url: "content.php",
  15. 							  data: { window: window }
  16.  
  17. 						}).done(function(data) {
  18.  
  19. 						 var newDiv = document.createElement('div');
  20. 							newDiv.id= window;
  21. 							newDiv.innerHTML= data;
  22. 							document.getElementById('content').appendChild(newDiv); 
  23.  
  24. 						});
  25. 			});
  26.  
  27.  
  28. 			</script>
[PHP] pobierz, plaintext


Ten post edytował Star 26.06.2016, 21:53:32
Go to the top of the page
+Quote Post
piotr485
post 29.06.2016, 16:25:38
Post #3





Grupa: Zarejestrowani
Postów: 292
Pomógł: 0
Dołączył: 10.07.2009

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

Mam coś takiego:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  6.     <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  7.     <link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  8.     <link rel="stylesheet" href="style.css" />
  9.     <script src="script.js"></script>
  10. </head>
  11.  
  12. <body>
  13.  
  14.     <div><a href="#myModal" data-toggle="modal" id="1" data-target="#edit-modal">Edit 1</a></div>
  15.     <div><a href="#myModal" data-toggle="modal" id="2" data-target="#edit-modal">Edit 2</a></div>
  16.     <div><a href="#myModal" data-toggle="modal" id="3" data-target="#edit-modal">Edit 3</a></div>
  17.  
  18.     <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  19.         <div class="modal-dialog">
  20.             <div class="modal-content">
  21.                 <div class="modal-header">
  22.                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  23.                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  24.                 </div>
  25.                 <div class="modal-body edit-content">
  26.                     ...
  27.                 </div>
  28.                 <div class="modal-footer">
  29.                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  30.                     <button type="button" class="btn btn-primary">Save changes</button>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </div>
  35.  
  36.     <script>
  37.         $('#edit-modal').on('show.bs.modal', function(e) {
  38.  
  39.             var $modal = $(this),
  40.                 esseyId = e.relatedTarget.id;
  41.  
  42.             $.ajax({
  43.                 cache: false,
  44.                 type: 'POST',
  45.                 url: 'content.php',
  46.                 data: 'EID='+essay_id,
  47.                 success: function(data) 
  48.                 {
  49.                     $modal.find('.edit-content').html(esseyId);
  50.                 }
  51.             });
  52.  
  53.         })
  54.     </script>
  55.  
  56. </body>
  57.  
  58. </html>
[HTML] pobierz, plaintext


Tylko pytanie co powinno być w pliku content.php bo teraz mam coś takiego:

[HTML] pobierz, plaintext 
  1. <?php
  2. $editId = $_POST['EID'];
  3. ?>
  4.   <div class="jumbotron">
  5.    <div class="container">
  6.     <h1>The ID Selected is <?php echo $editId ?></h1>
  7.    </div>
  8.   </div>
[HTML] pobierz, plaintext


niestety wogóle tak jak by niewczytywał tego pliku bo jest pusto w okienku sad.gif

Ten post edytował piotr485 29.06.2016, 22:05:13
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 20.04.2024 - 05:24
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn