jquery się wczytuje, ale nie wykonuje

0

Mam taki problem mam projekt w laravelu i teraz bibliiteka jquery się dobrze wczytuje, ale już kod jquery nie wykonuje zwykły kod javascript wykonuje, w konsoli nieczewgo nie ma, ale jak umyślnie zrobie błąd np. w naziwe funkcji to wtedy jest ten błąd w konsoli, daje kod źródłowy.

	      <div id=edytuj1>
	      
	      	      <form method=get>
	   <span class=normalna3>Nazwa substancji</span><select id=nazwa1{{$i}}>
	      </form>
	      </select>
	      </div>
        </div></div>
        <div id=edytujd>tomek</div>
  <div class="col-md-2 col-xs-2"></div>

plik js.

var i = 1;
var pasek;
//$("#opis_a").hide();
while (i < 4000 ) {
  pasek = "#dodaj1" + i;
  edytuj = "#edytuj1" + i;
  opis = "#opis" + i;
  opisz = "#opisz" + i;
  $(pasek).hide();
  $(edytuj).hide();
  $(opis).hide();
  $(opisz).hide();
  i++;
  
}
//tego kodu nie wykonuje.
  $('#edytujd').click(function() {
    
    alert("dobrze");
    
  });

Plik szablonu

<link href="{{ asset('./style.css') }}" rel="stylesheet"> 
<link href="{{ asset('./bootstrap-3/css/bootstrap.min.css') }}" rel="stylesheet"> 
<script src="{{asset('./jquery.js')}}"></script>
<script src="{{asset('./funkcje.js')}}"></script>
0

Nie używam Laravela, ale:

  1. Czemu w HTMLu nie masz cudzysłowów? Np. <div id=edytujd>tomek</div> zamiast <div id="edytujd">tomek</div>
  2. Zdefiniuj porządnie zmienne w JS
  3. Zmień $('#edytujd').click(function() {} na $(document).on("click", "#edytujd", function(){alert("dobrze");} . Jeśli ładujesz/generujesz HTML dynamicznie, być może jQuery uruchamia się kiedy ten element jeszcze nie jest w DOMie
0

Zmieniłem na to co podałaś i nadal to samo.

0

Co to znaczy nie wykonuje? Bo moim zdaniem kod się wykonuje (odbywa się bindowanie eventy), ale źle podpinasz event, więc po kliku się nic nie dzieje.

Można to prosto zdebugowac. Zastąp niedziałający kod tym:

$(document).click(function() {
  alert('jquery działa');
});

W zasadzie tylko potwierdzimy, że źle bindujesz, albo masz kilka elementów o tym samym id. Gdyby jQuwry nie było, to byś miał error w konsoli w stylu: reference error $ is not a function

0

Teraz działa, ale jak mam inaczej podpiąć kod ?

0

Masz kilka takich samych id na stronie, albo podpinasz event pod zły selektor.

W tym Twoim kodzie widać jakieś id tworzone z użyciem {{ $i }}, pętli nie widać, więc caly ten kod jest pewnie wewnątrz bloku for, z czego wynika, że masz co najmniej kilkanaście takich samych id :P bo button, który Ci nie działa ma stały id, tzn. nie tworzysz go dynamicznie z użyciem zmiennej iteracyjnej.

0

To musi mieć związek z laravelem, ponieważ jak wstawiłem

tomek
poza sekcją @endsection to wtedy to działa.
0

Otwórz źródło strony ctrl + u w Chrome i policz ile masz elementów o id="edytujd"

0

Jeden element.

0

Ok to teraz zmień id na klasę i zobacz co się stanie.

0

To samo.

1

Dodaj console.log w JavaScript i upewnij się, że się nie cachuje. Laravel wersjonuje assety i może się okazać że mimo że zmieniłeś na klasę, to się nie odświeżyło.

Jeżeli console.log się pojawią to przesuń ładowanie skryptu na koniec strony, przed zamknięciem tagu body.

Jeżeli to nie pomoże owin ten fragment kodu w

$(document).ready(function () {});

Jeżeli dalej nic wklej kompletny kod strony (LADNIE sformatowany, bo nie przeczytam) na pastebina plus OSOBNO plik javascript

0

Dodaj console.log w JavaScript i upewnij się, że się nie cachuje. Laravel wersjonuje assety.

Właśnie nie wiem dokłądnie o co w tym chodzi.

0

Proszę wykonaj te kroki i odpisz rezultaty.

Przeglądarka może zapamiętać pobrany plik CSS. Możesz ustawić czas wygasania na np. miesiąc. Czyli co miesiąc przeglądarka pobierze nowy plik CSS. Możesz też też ustawić że nigdy nie wygaśnie. To wszystko po to, żeby nie pobierać plików CSS przy każdym ładowaniu strony.

Wszystko fajnie, ale co jak zmienisz coś w pliki CSS, a przeglądarka już go zapamiętała na zawsze? Wystarczy, że zmieni się URL. Mozesz np. dopisać aktualną datę. Laravel akurat dopisuje hash, czyli jakiś ciąg znaków do nazwy pliku. Jak zmienisz zawartość pliku to zmienia się hash i przeglądarka dzięki temu pobiera plik CSS ponownie.

To się nazywa cache busting.

Ten console.log jest po to, żeby sprawdzić czy przypadkiem z jakiegoś powodu nie odświeża Ci się plik .js.

0
Desu napisał(a):

Dodaj console.log w JavaScript i upewnij się, że się nie cachuje. Laravel wersjonuje assety i może się okazać że mimo że zmieniłeś na klasę, to się nie odświeżyło.

Jeżeli console.log się pojawią to przesuń ładowanie skryptu na koniec strony, przed zamknięciem tagu body.

Jeżeli to nie pomoże owin ten fragment kodu w

$(document).tradycji(function () {});

Jeżeli dalej nic wklej kompletny kod strony (LADNIE sformatowany, bo nie przeczytam) na pastebina plus OSOBNO plik javascript

Dałem console.log i nadal to samo nic nie przyniosło rezultatu, będę musiał dać kod strony.
Plik szkieltu szablonu

<body>
<script src="{{asset('./jquery.js')}}"></script>
<link href="{{ asset('./style.css') }}" rel="stylesheet"> 
<link href="{{ asset('./bootstrap-3/css/bootstrap.min.css') }}" rel="stylesheet"> 

<script src="{{asset('./funkcje.js')}}"></script>
</bodY>
<div id="center">

  <div id="menu">
    <div class="row">
      <div class="col-md-12"><div align=center><span class=menu2>MENU</span></div></div>
    </div>
    <div class="row">
      <div class="col-md-12"><div align=center><a href={{ url('/login') }} class=menu>kalenadarz</a></div></div>
    </div>
    <div class="row">
      <div class="col-md-12"><div align=center><a href={{ url('/logout') }} class=menu>Wyloguj {{Auth::User()->login}}</a></div></div>
    </div>
  </div>
  <div id="center2">
  
  &nbsp;
  </div>
  <div id="page">
    @yield('content')
  </div>

</div>


plik html

@extends('layout.index')

@section('content')

	<table border=0 width=500 height=200 align=center>
	  <tr>
	    <td colspan=7><div align=center><span class=pogrubiona>{{$month1}} {{$years}}</span></div></td>
	  </tr>
	  <tr>
	  </tr>
	    <td><div align=center><span class=normalna2>Pon</span></div></td>
	    <td><div align=center><span class=normalna2>Wto</span></div></td>
	    <td><div align=center><span class=normalna2>śro</span></div></td>
	    <td><div align=center><span class=normalna2>Czwa</span></div></td>
	    <td><div align=center><span class=normalna2>Pią</span></div></td>
	    <td><div align=center><span class=normalna2>Sob</span></div></td>
	    <td><div align=center><span class=normalna2>Nie</span></div></td>
	  </tr>
	  <tbody>




  @for ($row=0;$row < 7;$row++) 

    <tr>
    
    @for ($column=0;$column < 7;$column++) 

      @if ($day2 <= $how_day_month ) 
	<td>
	
	@if ($day1 >= $day_week )
	  @if ( $day2 == $day3 ) 
	    <div align=center><span class=wieksza>{{$day2}}</span></div>

	  @elseif ( $day2 == $day ) 
	    <div align=center><span class=wieksza>{{$day2}}</span></div>
	  

	  @else 
	   <div align=center><a class=kalendarz href={{   url('login')}}/{{$years}}/{{$month}}/{{$day2}}  }}>{{$day2}}</a></div>
	  @endif
	  @php
	  $day2++;
	  @endphp
       
	@endif
	@php 
	$day1++;
	@endphp
	</td>
      @endif
    @endfor
    </tr>"

  @endfor;
  <tr>

</table>
<div class="row">
  <div class="col-md-2 col-xs-2"></div>
  <div class="col-md-4 col-xs-4"><a class=przycisk href={{ url('login')}}/{{$back[0]}}/{{$back[1]}}/1/wstecz>Wstecz</a></div>
  <div class="col-md-4 col-xs-4"><div align=right><a class=przycisk href={{ url('login')}}/{{$next[0]}}/{{$next[1]}}/1/dalej>dalej</a></div></div>
  
</div>




@for ($i=0;$i < count($select_drugs2);$i++) 
<div class=row>

  <div class="col-md-2 col-xs-2"></div>
    <{{$color[$i]}}>
  <div class="col-md-8 col-xs-8"><div align=center>
        @if ($name_drugs[$i][0] == "") <br><span class=usunieta>Substancja tego wpisu została usunięta</span><br>
        @else 
	  <br>
	      Wziąłeś {{$name_drugs[$i][0]}} w dawce {{$select_drugs2[$i][1]}} {{$type[$i]}} <br>
	      Wziąłeś to w  {{$data[$i]}}  <br>
	      Wydałeś na to {{$price[$i]}} <br>
	      <a class=normalna2 onclick=dodaj_opis('{{$i}}')>Dodaj opis</a>
	      <a class=normalna2 onclick=edytuj_wpis('{{$i}}')>Edytuj wpis</a><br>
	      <a class=normalna2 onclick=pokaz_srednia('./srednia.php?id={{$select_drugs2[$i][5]}}&data={{$select_drugs2[$i][4]}}','{{$i}}')>pokaż średnią</a>
	      <a class=normalna2 onclick=oblicz_roznice('{{$sum[$i]}}','{{$i}}')>Od tej daty</a><br>
	
        @endif
        
        <a class=normalna2 onclick=usun_wpis('./usun_wpis.php?id={{$select_drugs2[$i][5]}}','{{$i}}')>
	      usuń wpis</a>
	      <a class=normalna2 onclick=zaladuj('pokaz_opis.php?id_wpisu={{$select_drugs2[$i][5]}}','{{$i}}') id=m >pokaż opis</a>
	      <div id=edytuj1>
	      
	      	      <form method=get>
	   <span class=normalna3>Nazwa substancji</span><select id=nazwa1{{$i}}>
	      </form>
	      </select>
	      </div>
        </div></div>
        
  <div class="col-md-2 col-xs-2"></div>
</div>
@endfor
<div class="edytujddd">tomek</div>
@endsection

plik js

var i = 1;
var pasek;
//$("#opis_a").hide();
while (i < 4000 ) {
  pasek = "#dodaj1" + i;
  edytuj = "#edytuj1" + i;
  opis = "#opis" + i;
  opisz = "#opisz" + i;
  $(pasek).hide();
  $(edytuj).hide();
  $(opis).hide();
  $(opisz).hide();
  i++;
  
}
$('.edytujddd').click(function() {
  alert('jquery działa');
});

  //$(document).on("click", "#edytujd", function(){alert("dobrze");}


0

Dobra, wyrzuć na sam początek pliku .js (tego, w którym jest niedziałający kod) taki kod:

console.log('jQuery załadowane prawidłowo: ' + (typeof jQuery === "function" && $ === jQuery));

console.log('[jQuery] Znalazłem ' + $('.edytujddd').length + ' elementów pasujących do selektora .edytujddd');
console.log('[JavaScript] Znalazłem ' + document.querySelectorAll('.edytujddd').length + ' elementów pasujących do selektora .edytujddd');

$('.edytujddd').click(function() {
    console.log('[jQuery] Hello from the other side');
});
console.log('[jQuery] Podpiąłem click do elementów pasujących do selektora .edytujddd');

Array.prototype.forEach.call(document.querySelectorAll('.edytujddd'), function(element) {
    element.addEventListener('click', function() {
        console.log('[JavaScript] Hello from the other side');
    });
});
console.log('[JavaScript] Podpiąłem click do elementów pasujących do selektora .edytujddd');

console.log('[jQuery] Wywołuję click...');
$('.edytujddd').click();

console.log('[JavaScript] Wywołuję click...');
Array.prototype.forEach.call(document.querySelectorAll('.edytujddd'), function(element) {
    element.click();
});

console.log('Koniec, teraz możesz kliknąć Ty.');

I daj dokładny output z konsoli. Nie zapomnij na końcu kliknąć sam i sprawdzić, czy działa.

0

Z takim rezultatem

jQuery załadowane prawidłowo: true
funkcje.js (wiersz 22)
[jQuery] Znalazłem 0 elementów pasujących do selektora .edytujddd
funkcje.js (wiersz 24)
[JavaScript] Znalazłem 0 elementów pasujących do selektora .edytujddd
funkcje.js (wiersz 25)
[jQuery] Podpiąłem click do elementów pasujących do selektora .edytujddd
funkcje.js (wiersz 30)
[JavaScript] Podpiąłem click do elementów pasujących do selektora .edytujddd
funkcje.js (wiersz 37)
[jQuery] Wywołuję click...
funkcje.js (wiersz 39)
[JavaScript] Wywołuję click...
funkcje.js (wiersz 42)
Koniec, teraz możesz kliknąć Ty.
0

No i gitara, mamy już sporo informacji. (@pol90, kazałem Ci wkleić ten kod na samą górę, więc dlaczego console.log jest z linijki 22, a nie z 1... ?)
Znalazłem 0 elementów pasujących do selektora .edytujddd

Teraz mamy dwa wyjścia:

  • albo tych elementów nie ma wcale - z jakiegoś powodu się nie renderują
  • albo ich nie ma w momencie wywołania tego kodu - czyli kod się wykonuje prawidłowo, ale nie ma do czego podpiąć zdarzenia click.

Upewnij się, że plik zawierający ten kod jest na samym dole strony, tuż przed zamykającym tagiem </body> Bo wydaje mi się, że mnie nie słuchasz. Na 99% jestem przekonany, że nie przesunąłeś skryptu we właściwe miejsce.

Teraz poczyń kroki, które opisałem poniżej i ponownie wklej output z konsoli.

Przesuń kod we właściwe miejsce, albo lepiej zrób tak:

console.log('jQuery załadowane prawidłowo: ' + (typeof jQuery === "function" && $ === jQuery));

$(document).ready(function() { // TEN KOD ODPALI SIĘ DOPIERO JAK WSZYSTKIE ELEMENTY DRZEWA BĘDĄ DOSTĘPNE - TO JEST KLUCZ!

    console.log('[jQuery] Znalazłem ' + $('.edytujddd').length + ' elementów pasujących do selektora .edytujddd');
    console.log('[JavaScript] Znalazłem ' + document.querySelectorAll('.edytujddd').length + ' elementów pasujących do selektora .edytujddd');

    $('.edytujddd').click(function() {
        console.log('[jQuery] Hello from the other side');
    });
    console.log('[jQuery] Podpiąłem click do elementów pasujących do selektora .edytujddd');

    Array.prototype.forEach.call(document.querySelectorAll('.edytujddd'), function(element) {
        element.addEventListener('click', function() {
            console.log('[JavaScript] Hello from the other side');
        });
    });
    console.log('[JavaScript] Podpiąłem click do elementów pasujących do selektora .edytujddd');

    console.log('[jQuery] Wywołuję click...');
    $('.edytujddd').click();

    console.log('[JavaScript] Wywołuję click...');
    Array.prototype.forEach.call(document.querySelectorAll('.edytujddd'), function(element) {
        element.click();
    });

    console.log('Koniec, teraz możesz kliknąć Ty.');
});

niedziala.png
2017-06-18_1531.png

0

Dobra teraz wszystko działa. musiałem tylko umieścić ten plik na końcu strony tylko wtedy ciebie źle zrozumiałem i zamiast przerzucić plik na koniec strony to przurzuciłem plik z juery na koniec strony.

1

A wykonałeś krok z $(document).ready(function () {});? Gdybyś go wykonał, to też by zadziałało.. Eh..

Mam nadzieję, że chociaż wyniosłeś coś z tej lekcji i wiesz już jak się powinno debuggować.

1 użytkowników online, w tym zalogowanych: 0, gości: 1