Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][PHP] Formularz i lista rozwijana ze zmieniającą się zawartością
--malina--
post 8.06.2013, 08:24:18
Post #1





Goście
cześć. może ktośz Was mnie nakieruje na dobre tory.
Mam takie pliki:
info1.htm
info2.htm
i jest ich 21.
mam też listę rozwijaną ale chcę by wraz z wyborem z tej listy rozwijanej pojawiały się informacje includowane z tych plików.
Czyli ktoś wybiera z listy INFO 1 i bez przeładowania pojawiają się informacje z pliku info1.htm

może ktoś pomoże lub chociaż naprowadzi na coś...
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 11:11:43
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

To jest bardzo proste do osiągnięcia.

Robisz sobie listę rozwijaną na przykład tak:
[PHP] pobierz, plaintext 
  1. <select id="file">
  2. 	<?php for($i = 1; $i <= 21; ++$i): ?>
  3. 		<?php $fileName = 'info' . $i . '.html' ?>
  4. 		<option value="<?php echo htmlspecialchars($fileName) ?>"><?php echo htmlspecialchars($fileName) ?></option>
  5. 	<?php endfor ?>
  6. </select>
[PHP] pobierz, plaintext

Masz jakiś element, który będzie trzymał zawartość, na przykład:
[HTML] pobierz, plaintext 
  1. <div id="content"></div>
[HTML] pobierz, plaintext

I w końcu, na przykład z użyciem jQuery, ładujesz zawartość pliku do elementu:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#file").change(function() {
  2. 	$("#content").html("Proszę czekać...");
  3. 	$.get(
  4. 		$(this).val(),
  5.         	function(fileContent) {
  6.             		$("#content").html(fileContent);
  7.         	},
  8.         	"html"
  9. 	);
  10. });
[JAVASCRIPT] pobierz, plaintext


Ten post edytował SmokAnalog 8.06.2013, 11:14:33
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 11:59:23
Post #3





Goście
zrobiłam tak:
Kod
<html><head></head>
<body>  
        <select id="file">
    <?php for($i = 1; $i <= 21; ++$i): ?>
    <?php $fileName = 'info' . $i . '.htm' ?>
    <option value="<?php echo htmlspecialchars($fileName) ?>"><?php echo htmlspecialchars($fileName) ?></option>
    <?php endfor ?>
    </select>
    
        <div id="content"></div>
        <script type="text/javascript" language="JavaScript">
            $("#file").change(function() {
    $("#content").htm("Proszę czekać...");
    $.get(
    $(this).val(),
    function(fileContent) {
    $("#content").htm(fileContent);
    },
    "htm"
    );
    });
    </script>
    </body>
    </html>

ale nic się nie dzieje.
niby jest strzałka w której powinny się znaleźć "odnośniki" z tytułami, ale nic nie ma sad.gif
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 12:17:36
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

Korzystasz z jQuery, ale nie dołączyłaś go do kodu smile.gif
[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery.min.js"></script>
[HTML] pobierz, plaintext

Musisz dodać tę linię zanim wykonujesz skrypty.

Miałaś też kilka innych błędów, przeanalizuj poniższy kod i napisz mi czy działa, bo piszę z palucha:
[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head></head>
  3. 	<body>
  4. 		<select id="file">
  5. 			<?php for($i = 1; $i <= 21; ++$i): ?>
  6. 				<?php $fileName = 'info' . $i . '.htm' ?>
  7. 				<option value="<?php echo htmlspecialchars($fileName) ?>"><?php echo htmlspecialchars($fileName) ?></option>
  8. 			<?php endfor ?>
  9. 		</select>
  10.  
  11. 		<div id="content"></div>
  12.  
  13. 		<script src="http://code.jquery.com/jquery.min.js"></script>
  14. 		<script>
  15. 			$("#file").change(function() {
  16. 				$("#content").html("Proszę czekać...");
  17. 				$.get(
  18. 					$(this).val(),
  19. 					function(fileContent) {
  20. 						$("#content").htm(fileContent);
  21. 					},
  22. 					"html"
  23. 				);
  24. 			});
  25. 		</script>
  26. 	</body>
  27. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 12:43:49
Post #5





Goście
sad.gif niestety, nawet zmiana atrybutów plików (pliki info1.htm-info21.htm są na serwerze) nic nie dała
ja myślę że czegoś tu brakuje to znaczy że cały ten plik nie widzi plików info1.htm-info21.htm bo skąd ma wiedzieć gdzie i czy one są ? a są na 100%
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 12:51:02
Post #6





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

A są na pewno w tym samym folderze?

Nie musi wiedzieć gdzie i czy one są, bo to on wysyła zapytanie o te pliki. W moim przykładzie, funkcja $.get usiłuje łączyć się z plikiem o nazwie podanej jako wartość listy rozwijanej. A wartości listy rozwijanej to kolejno: info1.htm, info2.htm itd. Powinno działać. Upewnij się czy:
  • Pliki info1.htm, info2.htm itd. są w tym samym folderze co plik z kodem
  • Plik z kodem źródłowym ma rozszerzenie .php
  • Masz włączony JavaScript w przeglądarce
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 13:00:00
Post #7





Goście
no tak, ja zamiast kod źródłowy zrobić jako php zrobiłam htm :|
już poprawiłam (działa smile.gif ), ale mimo tego że wybieram np. info2.htm to nie pokazuje jego zawartości
a to są takie zwykłe narazie napisy na przykład "test wyboru nr3"
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 13:05:55
Post #8





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

A co się dzieje? Pojawia się napis Proszę czekać... czy nic się nie pojawia?

EDIT

Zapomniałem poprawić jeden Twój błąd. Zamień tę linię:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#content").htm(fileContent);
[JAVASCRIPT] pobierz, plaintext

Na tę:
[JAVASCRIPT] pobierz, plaintext 
  1. $("#content").html(fileContent);
[JAVASCRIPT] pobierz, plaintext


A przy okazji korzystaj z konsoli, bo ona wyświetla informacje o błędach, dzięki czemu o wiele łatwiej je naprawiać bez zgadywania dlaczego nie działa.

Ten post edytował SmokAnalog 8.06.2013, 13:07:40
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 13:13:17
Post #9





Goście
chciałam by to pole wyboru było stale widoczne (i jest) ale pod nim żeby pozywały się napisy z aktualnie wybranego pliku na przykład jak wybiorę info3.htm to żeby się pod tym polem wyboru pojawił napis który jest w pliku info3.htm czyli "test wyboru nr3".
teraz mimo że wybieram jakieś info...htm to pod tym polem wyboru nie pojawiają się żadne napisy. nie ma też "proszę czekać" - widać że przeładowuje się ale poza tym nic się nie dzieje, że tak powiem "brak zawartości plików"
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 13:17:28
Post #10





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

Co mówi konsola?
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 13:19:55
Post #11





Goście
hm. to nie konsola tylko komputer
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 13:31:02
Post #12





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

Chodzi o konsolę błędów JavaScript. Poczytaj o tym.

Sprawdziłem skrypt i u mnie działa, więc coś robisz nie tak.
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 13:40:58
Post #13





Goście
z tego co czytam to ma się pojawić jakieś okienko popup - ja takiego nie mam.
mam firefox 21 i operę 12.15 - i tu i tu nic nie wyskakuje

//wyszłam na idiotkę z tą kosolą, a wy pewnie macie niezły ubaw sad.gif
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 14:18:51
Post #14





Goście
[15:16:49.885] TypeError: $(...).htm is not a function @ http://127.0.0.1/TEST.php:18
o to chodziło?
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 14:26:18
Post #15





Goście
przepraszam, że post pod postem - ale już doszłam co jest nie tak.
otóż jak dam wcześniej htm to nie działa, a jak wcześniej dam html to wszystko jest w porządku.
powiedzcie mi tylko dlaczego tak się dzieje (musiałam wszystkie pliki htm zmienić na html)
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 15:17:59
Post #16





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

Cytat(-malina- @ 8.06.2013, 14:40:58 ) *
//wyszłam na idiotkę z tą kosolą, a wy pewnie macie niezły ubaw sad.gif

Nie przejmuj się, chwilę się pośmiałem DO Ciebie, a nie Z Ciebie ;)To było takie słodkie.

Jak rzucisz okiem na moje poprzednie wpisy to zauważysz, że wspomniałem o tej zamianie .htm() na .html(). Śpieszę wyjaśnić: to nie ma nic wspólnego z nazwami Twoich plików. .html() to metoda z jQuery. Możesz spokojnie mieć pliki z rozszerzeniem .htm.

Nazwę plików określasz w tej linii i mogą mieć dowolne rozszerzenie - ważne, żeby nazwy zgadzały się z tym wzorcem:
[PHP] pobierz, plaintext 
  1. <?php $fileName = 'info' . $i . '.htm' ?>
[PHP] pobierz, plaintext


Natomiast funkcja .html() musi zostać jako .html(), bo to nie ma nic wspólnego z jakimikolwiek nazwami plików.
[JAVASCRIPT] pobierz, plaintext 
  1. $("#content").html(fileContent);
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 16:02:41
Post #17





Goście
Smoku dziękuję bardzo za wyjaśnienie . ja jestem na etapie żłobka, ale takiego działu tu nie ma wink.gif

jeszcze jedna sprawa mnie dręczy-męczy. otóż jak tylko wejdę na tę testową stronę to nic się nie pokazuje - dopiero po wyborze z listy. chciałam dać selected do jednego z optionów tak by pokazywało od razu po wejściu na tą stronę (że tak powiem) defaultowy napis - czyli żeby pobierało defaultowo z pliku info1.html
ale samo dodanie selected nie pomogło. czy da radę coś takiego?
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 16:11:37
Post #18





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

Można zrobić to elegancko z JavaScriptem, zamykając funkcjonalność w funkcji i odpalać ją zarówno przy zmianie stanu <select> oraz przy załadowaniu się strony, ale to póki co trochę zbyt skomplikowane. Możesz wczytać plik bezpośrednio, w ten sposób - zamiast:
[HTML] pobierz, plaintext 
  1. <div id="content"></div>
[HTML] pobierz, plaintext

Daj:
[PHP] pobierz, plaintext 
  1. <div id="content"><?php echo file_get_contents('info1.htm') ?></div>
[PHP] pobierz, plaintext

W ogóle to można by pomyśleć o dopieszczenie tego tak, żeby lista nie pokazywała zawsze na sztywno plików info1.htm aż do info21.htm, ale na przykład wszystkie pliki z danego folderu. Wtedy mogłabyś sobie dodawać / usuwać / zmieniać nazwy wszystkiego w tym folderze, a lista zawsze pokazywałaby aktualne pliki. smile.gif Cuda można w PHP robić.
Go to the top of the page
+Quote Post
--malina--
post 8.06.2013, 16:27:40
Post #19





Goście
bardzo tu miło. założe chyba tu jednak konto (konto malina (imię) jest zajęte - będę musiala coś innego wymyśleć. Ale jakby co to w podpisie będzie "malina - ta od "konsoli" - i wszystko będzie jasne wink.gif
Smoku - o to chodziło właśnie :-*

nie wszędzie jest tak że "zielonym" w jakimś temacie (dla niektórych może to błahostka, ale dla wielu jak i dla mnie to naprawdę DUŻO) się pomaga "ot tak".

Smoku - jeszcze raz dziękuję bardzo smile.gif
pozdrawiam!

najlepszego wszystkim Forumowiczom!
Go to the top of the page
+Quote Post
SmokAnalog
post 8.06.2013, 16:39:06
Post #20





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

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

Proszę bardzo i cieszę się, że mogłem pomóc.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 23.05.2025 - 07:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn