• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z uruchomieniem kodu jQuery w php

0 głosów
50 wizyt
pytanie zadane 5 dni temu w JavaScript, jQuery, AJAX przez GracjanDogg Użytkownik (800 p.)

Mam taki kod jQuery w pliku HTML:

            <script>
                $(document).ready(function(){
                    $("#glowny").click(function(){
                        $(".item2").load("przechwyt.php #eh");
                        event.preventDefault();
                    });
                });
            </script>

Gdy kliknę butona strona prawidłowo zmienia się na przechwyt.php i dokładnie na div #eh. Jednakże skrypt na stronie php już nie działa jak powinien

<script language="JavaScript">
 $(document).ready(function(){
    $(".poboczny").click(function(){
        $(".item2").load("przechwyt.php #eh2");
        event.preventDefault();
    });           
});
</script>
<div id="eh">
<?php
    $conn = mysqli_connect("localhost", "root", "", "quiz");
    $conn -> query ('SET NAMES utf8');
    $conn -> query ('SET CHARACTER_SET utf8_unicode_ci');
        
    $sql1 = "SELECT id,pytanie, odpa, odpb FROM pytania WHERE id = 1";
    $result = mysqli_query($conn, $sql1);
        while($row = mysqli_fetch_assoc($result)) {
                print_r($row['id']);
                    echo "<p id='para'>" ."Pytanie: " . $row["pytanie"]. "</p>"."<br>";
                    echo "<button class='poboczny'>" . $row["odpa"]. "</button>";
                    echo "<button class='poboczny'>" . $row["odpb"]. "</button>";
        }
?>
</div>
<div id="eh2">
<?php
    $sql2 = "SELECT id,pytanie, odpa, odpb FROM pytania WHERE id = 2";
    $result = mysqli_query($conn, $sql2);
        while($row = mysqli_fetch_assoc($result)) {
                print_r($row['id']);
                    echo "<p id='para'>" ."Pytanie: " . $row["pytanie"]. "</p>"."<br>";
                    echo "<button>" . $row["odpa"]. "</button>";
                    echo "<button>" . $row["odpb"]. "</button>";
        }
?>
</div>

Żaden gdy kliknę buttona nie załadowuje się część z divem #eh2. Dodam, że skrypt działa, jeśli pierwszy przechwyt nie jest konkretnie skierowany na div #eh, tylko cały plik. Podejrzewam, że winowajcą jest to, że wczytuje tylko dane z diva #eh, bez skryptu js na górze i dlatego buttony nie reagują, ale gdy wklejałem skrypt js, żeby był w divie również nie działa. Co może być przyczyną więc? Jeśli się nieprecyzyjnie wysłowiłem to oczywiście mogę spróbować to zrobić jaśniej, jeśli zajdzie taka potrzeba.

komentarz 4 dni temu przez GracjanDogg Użytkownik (800 p.)

Jest w formularzu, między <form>

<button id="glowny" type="submit">Rozpocznij test</button>

Czy możesz opisać całe flow po kolei w punktach?

Oczywiście:
1. Klikam w guzik z id #glowny
2. Część grida z klasą ".item2" zamienia się na fragment pliku przechwyt.php, tym fragmentem jest div #eh
3. Na stronie pojawia się tekst załadowany z bazy danych, a pod nim 2 guziki, z klasą ".poboczny"
4. Gdy klikam na jeden z guzików nic się nie dzieje, a powinno, strona powinna się załadować wedle poniższego skryptu

$(document).ready(function(){
    $(".poboczny").click(function(){
        console.log('test');
        $(".item2").load("przechwyt.php #eh2");
        event.preventDefault();
    });           
});

Gdy patrze do konsoli do tego skryptu to tam go nie ma. Jestem prawie pewien, że być tam powinien.
Dodam, że gdy skrypt z HTML zrobimy tak (bez wczytania konkretnie diva #eh)

<script>
    $(document).ready(function(){
        $("#glowny").click(function(){
            $(".item2").load("przechwyt.php");
            event.preventDefault();
        });
    });
</script>

Wszystko działa, strona ładuje oba zapytania z bazy i gdy klikne na guziki z klasą .poboczny to kod jQuery działa, a w samej konsoli również jest skrypt jQuery, tak więc nie czyta tego kodu na szczycie w pliku przechwyt.php, ale nie działa on również gdy go wsunę pod diva. 

komentarz 4 dni temu przez GracjanDogg Użytkownik (800 p.)
Gdyby problem wciąż był nierozwiązany, bądź niezrozumiany to wrzucę kod do jakiegoś edytora w necie.
komentarz 4 dni temu przez JSHolic Maniak (72,090 p.)

Według dokumentacji jQuery metoda load, gdy podasz tam selektor, umieści w elemencie w kontekście którego użyłeś tej metody (u Ciebie .item2) tylko zawartość znalezionego przez selektor elementu, a nie całą treść zasobu - fragment kodu źródłowego metody w jQuery. Dedukuję, że W Twoim przypadku plik przechwyt.php nie jest wczytany w całości, co potwierdza Twoja obserwacja:

Gdy patrze do konsoli do tego skryptu to tam go nie ma. Jestem prawie pewien, że być tam powinien. 

Pytanie - dlaczego używasz dodatkowego selektora przy wczytywaniu pliku?

komentarz 4 dni temu przez GracjanDogg Użytkownik (800 p.)
Taką metodę wymyśliłem na potrzeby quizu. Jest strona, gdy klikam guzik ładuje się podstrona w okienku .item2 na tej stronie, następny guzik – następna strona. Oczywiście mógłbym zrobić 40 plików html i je wywoływać a hrefem, ale bądźmy poważni, nie będzie to ani wygodne, ani nie da takiego ładnego efektu jak przy ajaxie.
komentarz 4 dni temu przez JSHolic Maniak (72,090 p.)

tak więc nie czyta tego kodu na szczycie w pliku przechwyt.php, ale nie działa on również gdy go wsunę pod diva. 

Kod jQuery nie działa Ci też, jeśli znajduje się wewnątrz elementu, którego selektor podajesz do metody load? Jeśli wtedy jednak działa, to może serwuj podstronę ze skryptem, albo skorzystaj z event delegation - podepnij klik na wrapper, w którym ładujesz te podstrony i będziesz mieć jeden skrypt do obsługi zdarzeń na elemencie, którego treść zmieniasz dynamicznie.

P.S. Już @pablop76 podpowiedział Ci, żebyś skorzystał z event delegation.

Powinieneś mieć wszystkue skrypty w pliku głównym i wykorzystać event delegation on()

1 odpowiedź

+1 głos
odpowiedź 5 dni temu przez pablop76 Maniak (56,580 p.)
Ponieważ ładujesz tylko konkretny fragment strony przechwyt.php bez przeładowania, więc ten skrypt się nie ładuje. Powinieneś mieć wszystkue skrypty w pliku głównym i wykorzystać event delegation on()
komentarz 4 dni temu przez GracjanDogg Użytkownik (800 p.)
Wrzuciłem wszystko do head'a. Nie wiem czy dobrze używam tego eventu, w jaki sposób ty byś go użył?
komentarz 3 dni temu przez pablop76 Maniak (56,580 p.)
edycja 3 dni temu przez pablop76
Ja też nie wiem. Ale jak nie działa to znaczy, że coś jest źle.

Łapiesz za element, który bedzie zawierał treść ładowaną dynamicznie i przekazujesz zdarzenie do tych obiektów

Podobne pytania

0 głosów
1 odpowiedź 55 wizyt
0 głosów
1 odpowiedź 58 wizyt
0 głosów
1 odpowiedź 117 wizyt
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

51,903 zapytań

94,668 odpowiedzi

192,980 komentarzy

25,303 pasjonatów

Przeglądających: 317
Pasjonatów: 26 Gości: 291

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...