Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Strona z użyciem Ajax i skrypt Autocomplete
Forum PHP.pl > Forum > XML, AJAX > AJAX
_chris_
Witam wszystkich.

Mam zrobioną stronkę, która cała korzysta z technologii Ajax. Używam do obsługi Prototype. Przeładowuje mi się cały czas kontener main i wszystko gra:)

Chciałem teraz na jeden z podstron która tez jest generowana Ajaxowo wsadzić do jednego pola autocomplete z jQuery. Wcześniej już takie rzeczy robiłem, łatwe proste i przyjemne. Ale miałem wszystkie pola na stałe. Teraz jak użyję:

  1. $(document).ready(function()
  2. {
  3.  
  4. $('#wyszukaj').autocomplete(
  5. {
  6. source: "search.php",
  7. minLength: 2,
  8. select: function( event, ui ) {
  9.  
  10. }
  11. });
  12. });


No to tego elementu nie ma przy ładowaniu strony. Próbowałem w tym htmlu geenrowanym przez php (ajaxowo) wsadzić w znaczniki <script></script> to samo, ale nie odpala się ten skrypt w ogóle. Jak dałem tam alert('cos'); to sie nie wyswietla.

Czy mozecie mi pomoc gdzie wstawić kod JS do autocomplete aby zadziałało? Dzięki
kamil4u
Daj link do demo( uproszczona wersja strony ).
I link do drugiego demo z alertem.
_chris_
adres: http://chris.vot.pl/test/1.php

Pliki:
1.php:
  1. <a href="java script: generuj()">Generuj ajax</a>
  2.  
  3. <div id="main"></div>
  4.  
  5. <div id="cos"><input type="text" id="wyszukaj1"/></div>


2.php
  1. <script type="text/javascript" src="js1.js"></script>
  2. Wygenerowane ajaxowo!
  3. <br>
  4. <input type="text" id="wyszukaj2" />Tutaj już nie da się włączyć autocomplete
  5. <br><br><br>
  6. <script type="text/javascript">
  7. alert('alert');
  8. </script>


js.js
  1. function generuj(){
  2.  
  3. var pars = '';
  4.  
  5.  
  6. new Ajax.Updater(
  7. 'main',
  8. '2.php',
  9. {method: 'post'
  10. });
  11. }
  12.  
  13. jQuery(document).ready(function()
  14. {
  15.  
  16. jQuery('#wyszukaj1').autocomplete(
  17. {
  18. source: "search.php",
  19. minLength: 2,
  20. select: function( event, ui ) {
  21.  
  22. }
  23. });
  24.  
  25. });


js1.js
  1. // JavaScript Document
  2. jQuery(document).ready(function()
  3. {
  4.  
  5.  
  6. jQuery('#wyszukaj2').autocomplete(
  7. {
  8. source: "search.php",
  9. minLength: 2,
  10. select: function( event, ui ) {
  11.  
  12. }
  13. });
  14. });



Jak widać w 1.php ładnie autouzupełnia. Jak klikniemy, to pobiera ajaxowo tresc strony z drugim wyszukaj, ale tam to już nie działa. Dołożyłem jeszcze specjalnie wszystnie skrypty w tym 2.php ale i tak jest kicha;/ Nie wyświetla się ani alert ani nie działa autocomplete. Jak wejdziemy bezpośrednio w 2.php, to wyświetla się alert + autocomplete działa.

próbowałem jeszcze na zdarzeniu onComplete, ale tez nie z tego, bo to się wykonuje przed wysłaniem danych do okna, a wtedy nie ma jeszcze elementów na stronie, no to nie można się odwołać do elementu którego nie ma. Jeszcze próbowałem kilka innych sposobów, ale o to chodzi, że po załadowaniu strony pobranej z ajaxem żaden JS się nie wykonuje;/

Mam nadzieje że nie zamieszałem za dużo:)
kamil4u
Teraz na reszcie zrozumiałem problem smile.gif

Rozwiązania jednak nie znam. Znaczy muszę się pobawić metodą prób i błędów, bo tak najłatwiej. Jak możesz przygotuj jakiś plik zip czy rar i go gdzieś umieść, żebym tylko rozpakował i mógł się "bawić" - teraz nie mam pliku form.php .

Takie pomysły "na szybko", które możesz jeszcze wypróbować sam:
1. Usuń zdarzenie jQuery(document).ready(function() w 2.php
2. Wykorzystaj właśnie zdarzenie oncomplete w new Ajax.Updater( a w nim umieść kod z pliku 2.php -> JS oczywiście

Nie znam w ogóle Prototype, ale jeśli będę mógł się pobawić samemu w kodzie to myślę, że bez problemu nam się uda osiągnąć zamierzony efekt smile.gif
_chris_
http://chris.vot.pl/test.rar

1. próbowałem w sumie to dołożyłem przed samym wysłaniem, bo mi wpadło go głowy
2. onComlete jak pisałem wykonuje się przed wyświetleniem w przeglądarce, czyli te elementy jeszcze nie istnieją i nie mogę się do nich odwołać
kamil4u
Jeżeli zrobimy to za pomocą jQuery to działa od razu:
Kod
function generuj(){
    
var pars = '';
    
        
/*new Ajax.Updater(
            'main',
            '2.php',
            {method: 'post'
            });*/
    jQuery('#main').load('./2.php');        
}


Zaraz zobaczę, jak to zrobić w Prototype, bo nie znam tej biblioteki i wyedytuje post.

--edit--
Coś źle robiłeś, bo druga metoda działa:
Cytat
2. Wykorzystaj właśnie zdarzenie oncomplete w new Ajax.Updater( a w nim umieść kod z pliku 2.php -> JS oczywiście

Kod
new Ajax.Updater(
            'main',
            '2.php',
            {method: 'post', onComplete: function(){
                jQuery('#wyszukaj2').autocomplete(
                 {
                      source: "search.php",
                      minLength: 2,
                    select: function( event, ui ) {

                        }
                 });
            }
            });
}
_chris_
No działa. To nie wiem czemu mi przedtem nie działało ;/ Dzięki wielkie!
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.