• 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

Konferencja JOIN! 2018
0 głosów
66 wizyt
pytanie zadane 11 lipca w JavaScript, jQuery, AJAX przez GracjanDogg Użytkownik (840 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 12 lipca przez GracjanDogg Użytkownik (840 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 12 lipca przez GracjanDogg Użytkownik (840 p.)
Gdyby problem wciąż był nierozwiązany, bądź niezrozumiany to wrzucę kod do jakiegoś edytora w necie.
komentarz 12 lipca przez JSHolic Maniak (74,210 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 12 lipca przez GracjanDogg Użytkownik (840 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 12 lipca przez JSHolic Maniak (74,210 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ź 12 lipca przez pablop76 Maniak (70,940 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 12 lipca przez GracjanDogg Użytkownik (840 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 13 lipca przez pablop76 Maniak (70,940 p.)
edycja 13 lipca 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ź 60 wizyt
0 głosów
1 odpowiedź 62 wizyt
0 głosów
1 odpowiedź 124 wizyt
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

55,133 zapytań

99,351 odpowiedzi

204,333 komentarzy

27,137 pasjonatów

Przeglądających: 358
Pasjonatów: 22 Gości: 336

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.

...