Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery] Zmiana treści DIV'a bez przeładowania, A Simple AJAX Driven Website with jQuery + PHP
Syri
post 23.02.2013, 00:01:38
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.02.2013

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

Witam. Próbuję wykorzystać skrypt http://www.queness.com/post/328/a-simple-a...-with-jqueryphp jednak w efekcie w miejscu w którym powinien być żądany przeze mnie tekst widzę coś takiego:

TEEEKST 2'; break; case '#page3' : $page = 'Tekst 3'; break; case '#page4' : $page = 'Tekst 4'; break; } echo $page; ?>

Mój plik index.php wygląda tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  2. 	"http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Dokument bez tytułu</title>
  7. <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen">
  8. 	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  9. 	<script type="text/javascript" src="js/jquery.history.js"></script>
  10. 	<script type="text/javascript">
  11. $(document).ready(function () {
  12.  
  13. 	//Check if url hash value exists (for bookmark)
  14. 	$.history.init(pageload);	
  15.  
  16. 	//highlight the selected link
  17. 	$('a[href=' + document.location.hash + ']').addClass('selected');
  18.  
  19. 	//Seearch for link with REL set to ajax
  20. 	$('a[rel=ajax]').click(function () {
  21.  
  22. 		//grab the full url
  23. 		var hash = this.href;
  24.  
  25. 		//remove the # value
  26. 		hash = hash.replace(/^.*#/, '');
  27.  
  28. 		//for back button
  29. 	 	$.history.load(hash);	
  30.  
  31. 	 	//clear the selected class and add the class class to the selected link
  32. 	 	$('a[rel=ajax]').removeClass('selected');
  33. 	 	$(this).addClass('selected');
  34.  
  35. 	 	//hide the content and show the progress bar
  36. 	 	$('#content').hide();
  37. 	 	$('#loading').show();
  38.  
  39. 	 	//run the ajax
  40. 		getPage();
  41.  
  42. 		//cancel the anchor tag behaviour
  43. 		return false;
  44. 	});	
  45. });
  46.  
  47.  
  48. function pageload(hash) {
  49. 	//if hash value exists, run the ajax
  50. 	if (hash) getPage();    
  51. }
  52.  
  53. function getPage() {
  54.  
  55. 	//generate the parameter for the php script
  56. 	var data = 'page=' + encodeURIComponent(document.location.hash);
  57. 	$.ajax({
  58. 		url: "loader.php",	
  59. 		type: "GET",		
  60. 		data: data,		
  61. 		cache: false,
  62. 		success: function (html) {	
  63.  
  64. 			//hide the progress bar
  65. 			$('#loading').hide();	
  66.  
  67. 			//add the content retrieved from ajax and put it in the #content div
  68. 			$('#content').html(html);
  69.  
  70. 			//display the body with fadeIn transition
  71. 			$('#content').fadeIn('slow');		
  72. 		}		
  73. 	});
  74. }
  75. 	</script>
  76. </head>
  77.  
  78. <body>
  79. <div id="lewy_panel">
  80. 	<div id="logo">
  81. 	Logo
  82. 	</div>
  83.     <div id="menu2">
  84. <ul id="menu">
  85. 	<li><a href="#page1" rel="ajax">Page 1</a></li> 
  86. 	<li><a href="#page2" rel="ajax">Page 2</a></li> 
  87. 	<li><a href="#page3" rel="ajax">Page 3</a></li>
  88. 	<li><a href="#page4" rel="ajax">Page 4</a></li>
  89. </ul>
  90.     </div>
  91.     <div id="stopka">
  92.     Stopka
  93.     </div>
  94.  </div>
  95.  
  96. <div id="loading"></div>
  97.  
  98. <div id="content">
  99. <!-- Ajax Content -->
  100. </div>
  101.  
  102. </body>
  103. </html>
[HTML] pobierz, plaintext


Styl CSS natomiast tak:

[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body {
  4. 	color:#FFF
  5. }
  6. #lewy_panel {
  7. 	position: absolute;
  8. 	display: inline-block;
  9. 	width: 294px;
  10. 	height: 100%;
  11. 	background-color:#000;
  12.  
  13. }
  14.  
  15.  
  16. #logo {
  17. 	position: relative;
  18. 	height: 160px;
  19. 	width: 100%;
  20. }
  21.  
  22. #menu2 {
  23. 	position: relative;
  24. 	display: inline-block;
  25. 	padding: 188px 0 0 48px;
  26. 	color:#FFF;
  27. }
  28.  
  29. #stopka {
  30. 	position: absolute; bottom: 5px;
  31. 	margin-top: 10px;
  32. }
  33.  
  34. #prawy_panel {
  35. 	width: 660px;
  36. 	left: 294px;
  37. 	position: absolute;
  38. 	height: 100%;
  39. 	background-color:#C30;
  40.  
  41. }
  42.  
  43. 	#loading {
  44. 	background: url(img/load.gif) no-repeat;
  45. 	display:none;
  46. 	}
  47.  
  48. 	#content {
  49. 	width: 660px;
  50. 	left: 294px;
  51. 	position: absolute;
  52. 	height: 100%;
  53. 	background-color:#C30;
  54. 	font-family:arial;
  55. 	font-size:11px;
  56. 	}	
[HTML] pobierz, plaintext


a loader.php tak:
[PHP] pobierz, plaintext 
  1. <?
  2.  
  3. switch($_GET['page'])  {
  4. 	case '#page1' : $page = 'Tekst 1 '; break;
  5.  
  6. 	case '#page2' : $page = '<b>TEEEKST 2</b>'; break;
  7.  
  8. 	case '#page3' : $page = 'Tekst 3'; break;
  9.  
  10. 	case '#page4' : $page = 'Tekst 4'; break;
  11.  
  12. }
  13.  
  14. echo $page;
  15. ?>
[PHP] pobierz, plaintext


Proszę o pomoc w prawidłowym użyciu skryptu.
Go to the top of the page
+Quote Post
viking
post 23.02.2013, 07:32:41
Post #2





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

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

A w jaki sposób osadziłeś PHP, bo wygląda że się nie wykonuje.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
Syri
post 23.02.2013, 07:36:10
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.02.2013

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

Oryginalnie w skrypcie jest fragment
[HTML] pobierz, plaintext 
  1. function getPage() {
  2.  
  3. 	//generate the parameter for the php script
  4. 	var data = 'page=' + encodeURIComponent(document.location.hash);
  5. 	$.ajax({
  6. 		url: "loader.php",	
  7. 		type: "GET",		
  8. 		data: data,		
  9. 		cache: false,
  10. 		success: function (html) {	
  11.  
  12. 			//hide the progress bar
  13. 			$('#loading').hide();	
  14.  
  15. 			//add the content retrieved from ajax and put it in the #content div
  16. 			$('#content').html(html);
  17.  
  18. 			//display the body with fadeIn transition
  19. 			$('#content').fadeIn('slow');		
  20. 		}	
[HTML] pobierz, plaintext


I to chyba on odpowiada za php.
Go to the top of the page
+Quote Post
mortus
post 23.02.2013, 10:28:14
Post #4





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Zakładam, że masz PHP "postawione"? Jeśli tak to Twój PHP ma wyłączoną opcję short_open_tag i zamiast <? powinieneś użyć <?php w pliku loader.php.
Go to the top of the page
+Quote Post
Syri
post 24.02.2013, 20:04:35
Post #5





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.02.2013

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

Cytat(mortus @ 23.02.2013, 10:28:14 ) *
Zakładam, że masz PHP "postawione"? Jeśli tak to Twój PHP ma wyłączoną opcję short_open_tag i zamiast <? powinieneś użyć <?php w pliku loader.php.

Dobrze prawisz mój przyjacielu. Dziękuję.

Teraz mam kolejny problem z tym samym skryptem. Otóż po jego użyciu nie mogę używać żadnych innych magicznych skryptów jQuery. Szukam czegoś do ładnego wyświetlania zdjęć w boxie jednak już trzy kolejne odpadły ponieważ albo nie działają one albo powodują awarie skryptu od przeładowania.
Go to the top of the page
+Quote Post
StrefaPi
post 2.03.2013, 10:17:47
Post #6





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

Używasz bardzo starego jquery... Tutaj może być problem z błędami w boxach... Zoptymalizuj skryptów do przeładowywania do nowego jquery i będzie git...


--------------------
https://studiostawki.com - studio fotograficzne i filmowe - ul. Inflancka 11, Warszawa
Go to the top of the page
+Quote Post
mortus
post 2.03.2013, 13:24:48
Post #7





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

Cytat(StrefaPi @ 2.03.2013, 10:17:47 ) *
Używasz bardzo starego jquery... Tutaj może być problem z błędami w boxach... Zoptymalizuj skryptów do przeładowywania do nowego jquery i będzie git...

Co ma piernik do wiatraka. Skrypt PHP się nie wykonuje, dlatego jego fragment pojawia się w odpowiedzi na żądanie AJAX. Wersja jQuery nie ma tutaj znaczenia.
Go to the top of the page
+Quote Post
StrefaPi
post 2.03.2013, 13:58:50
Post #8





Grupa: Zarejestrowani
Postów: 235
Pomógł: 50
Dołączył: 2.03.2013

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

Cytat(mortus @ 2.03.2013, 13:24:48 ) *
Co ma piernik do wiatraka. Skrypt PHP się nie wykonuje, dlatego jego fragment pojawia się w odpowiedzi na żądanie AJAX. Wersja jQuery nie ma tutaj znaczenia.


to, że się php nie wykonywał już zostało rozwiązane natomiast Syri zadał drugie pytanie...

przeczytałeś drugie pytanie Syri o boxach i zdjęciach, które się nie wyświetlają? bo chyba nie... i moja odpowiedź w tym wypadku jest prawidłowa i na temat...



--------------------
https://studiostawki.com - studio fotograficzne i filmowe - ul. Inflancka 11, Warszawa
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: 27.05.2025 - 22:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn