Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Ajax] Zmiana zawartości div.
Forum PHP.pl > Forum > Przedszkole
Salur
21.01.2015, 20:35:16
Witam, mam problem z dynamiczną zmianą zawartości div.

Chcę aby zawartość <div id="container"> zmianiała się na plik ładowany przez ajax. Po prostu klikam np. button [1] i znika obecna zawartość div (container) i pojawia się nowa wczytana w pliku.

Oto kod:

[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <head lang="en">
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  5. 	<meta charset="utf-8">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7.  
  8. 	<title>ghgh</title> 
  9. 	<meta property="og:title" content="">
  10.  
  11. 	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  12. 	<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
  13.     <link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
  14.  
  15. 	<link rel="stylesheet" type="text/css" href="css/style.css">	
  16.  
  17. 	<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  18.  
  19.  
  20. 	<link rel="prefetch" href="images/zoom.png">
  21.  
  22. </head>
  23.  
  24. <body>
  25. 	<div class="navbar navbar-fixed-top" data-activeslide="1">
  26. 		<div class="container">
  27.  
  28.  
  29. 			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  30. 				<span class="icon-bar"></span>
  31. 				<span class="icon-bar"></span>
  32. 				<span class="icon-bar"></span>
  33. 			</button>
  34.  
  35.  
  36. 			<div class="nav-collapse collapse navbar-responsive-collapse">
  37. 				<ul class="nav row">
  38. 					<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1" href="#slide-1" title="Next Section"><span class="icon icon-home"></span> <span class="text">Strona Główna</span></a></li>
  39. 					<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2" title="Next Section"><span class="icon icon-user"></span> <span class="text">1</span></a></li>
  40. 					<li data-slide="4" class="col-12 col-sm-2"><a id="menu-link-4" href="#slide-4" title="Next Section"><span class="icon icon-briefcase"></span> <span class="text">2</span></a></li>
  41. 					<li data-slide="6" class="col-12 col-sm-2"><a id="menu-link-6" href="#slide-6" title="Next Section"><span class="icon icon-briefcase"></span> <span class="text">3</span></a></li>
  42. 				</ul>
  43. 				<div class="row">
  44. 					<div class="col-sm-2 active-menu"></div>
  45. 				</div>
  46. 			</div>
  47. 		</div>
  48. 	</div>
  49. 	<div class="slide story" id="slide-1" data-slide="1">
  50. 		<div class="container">
  51. 			<div id="home-row-1" class="row clearfix">
  52. 				<div class="col-12">
  53. 					<h1 class="font-semibold">Spisujmy.pl</h1>
  54. 					<h4 class="font-thin">To Cię nic <span class="font-semibold">nie kosztuje!</h4>
  55. 					<br>
  56. 					<br>
  57. 				</div><!-- /col-12 -->
  58. 			</div><!-- /row -->
  59. 			<div id="home-row-2" class="row clearfix">
  60. 				<div class="col-12 col-sm-4"><div class="home-hover navigation-slide"><a href="#" onClick="$('#container').load('load1.html')"><img src="images/s02.png"></div></a><span>1</span></div>
  61. 				<div class="col-12 col-sm-4"><div class="home-hover navigation-slide"><a href="#" onClick="$('#container').load('load2.html')"><img src="images/s01.png"></div></a><span>2</span></div>
  62. 				<div class="col-12 col-sm-4"><div class="home-hover navigation-slide"><a href="#" onClick="$('#container').load('load3.html')"><img src="images/s03.png"></div></a><span>3</span></div>
  63. 			</div>
  64. 		</div>
  65. 	</div><
  66.  
  67. </body>
  68. </html>
  69.  
[HTML] pobierz, plaintext
Twist
21.01.2015, 21:45:19
Moze pomozesz nam troche i opiszesz problem?

przy okazji -

1) wrzuc kod JS do osobnego pliku
2) gdy widzisz ze uzywasz ten sam kod kilka razy - zrob funkcje i odpalaj ja za kazdym razem gdy chcesz wykonac to zadanie

Kishin
22.01.2015, 15:39:54
jquery:
[HTML] pobierz, plaintext 
  1. $('#container).html('nowa zawartosc diva');
[HTML] pobierz, plaintext

java script:
[HTML] pobierz, plaintext 
  1. document.getElementById('container').innerHTML = 'nowa zawartosc diva';
[HTML] pobierz, plaintext
ilidir
22.01.2015, 21:09:40
dodam może jeszcze czyszczenie twojego diva

[PHP] pobierz, plaintext 
  1. document.getElementById('container').value = '';
[PHP] pobierz, plaintext
Kishin
22.01.2015, 22:02:40
Cytat(ilidir @ 22.01.2015, 21:09:40 ) *
dodam może jeszcze czyszczenie twojego diva

[PHP] pobierz, plaintext 
  1. document.getElementById('container').value = '';
[PHP] pobierz, plaintext


operacje które podałem podmieniają wartosci w diviea, a nie dodają do aktualnej więc czyszczenie diva jest tutaj zbędne
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.