Script Jquery in file esterno non funziona.

[Legolas84]

Ciao, sto iniziando a muovere i primi passi con Jquery, iniziando gradualmente.... ho già incontrato una difficoltà, perchè vorrei inserire tutti i miei script in un file esterno.

Praticamente ho il seguente script:

$("#bottone1").on("click", function() {
                $("#campo1").addClass("bg-dark");
            });

Una cosa molto semplice, quando premo il bottone1 il campo1 assume la classe bg-dark di bootstrap e diventa scuro.

Se lo script lo includo nel file html tra i tag script funziona, se lo metto in un file esterno (collegato con un link nell'header ovviamente) invece no.

Come devo modificarlo per farlo andare dall'esterno?

PS
Può influire il fatto che nel file esterno ho anche una funzione per l'orologio scritta in javascript classico? Quella li funziona perfettamente...

Grazieeeeeee

[KillerWorm]

Come devo modificarlo per farlo andare dall'esterno?

Ciao, dipende da cosa sta succedendo.

In qualunque caso quando riscontri dei problemi di script verifica sempre nella console del tuo browser (F12 per aprirla, quindi vai alla scheda Console) se ti saltano fuori degli errori nello script.

Se trovi qualcosa del tipo "$ is not defined" allora assicurati di includere la libreria jQuery posizionando l'inclusione prima di quella dei tuoi script in cui usi tale libreria. Solitamente questo è uno degli errori più comuni commessi da chi si avvicina all'uso di librerie/framework JavaScript.

PS
Può influire il fatto che nel file esterno ho anche una funzione per l'orologio scritta in javascript classico? Quella li funziona perfettamente...

In genere, no a meno che non ci siano conflitti a livello di variabili utilizzate per la libreria in questione

[Legolas84]

In effetti ora che mi ci fai riflettere, ho fatto alcune prove e c'è un comportamento anomalo. il mio header ha i seguenti file esterni importati:

      <link href=\"bootstrap/bootstrap.css\" rel=\"stylesheet\" media=\"screen\">
      <link href=\"bootstrap/sidebar.css\" rel=\"stylesheet\" media=\"screen\">
      <link href=\"bootstrap/all.css\" rel=\"stylesheet\">
      <script type=\"text/javascript\" src=\"bootstrap/jquery.js\"></script>
      <link href=\"bootstrap/bootstrap.css\" rel=\"stylesheet\" media=\"screen\">
      <link href=\"bootstrap/sidebar.css\" rel=\"stylesheet\" media=\"screen\">
      <link href=\"bootstrap/all.css\" rel=\"stylesheet\">
      <script type=\"text/javascript\" src=\"bootstrap/jquery.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/custom1.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/bootstrap.min.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/all.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/bootstrap.min.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/all.js\"></script>

il file Jquery.js in pratica contiene Jquery scaricato dal sito ufficiale, ho copiato il codice e l'ho inserito in quel file.

Nel sito ho implementato una sidebar a scomparsa (presa da internet) la cui animazione con questo ordine di importazione funziona. Il file custom.js contiene la funzione javascript dell'orologio e anch'essa funziona senza problemi.

Se inverto nell'ordine Jquery.js con custom.js la barra non mi fa più l'animazione e non capisco perchè visto che non ho nulla di jquery in custom.js per ora.

Inoltre se copio il codice del primo post in custom.js comunque non mi funziona.... mah....


La cosa veramente assurda poi è che se cambio nome a custom.js con uno diverso che non corrisponde a nessun file, l'animazione della barra laterale non va comunque....

[KillerWorm]

il mio header ha i seguenti file esterni importati:

Quello che noto è il fatto che sono inclusi più volte gli stessi file... non ha molto senso. Questo presumibilmente può creare problemi.

Non mi è chiaro se i file nell'header vengono inclusi automaticamente in qualche modo o se li inserisci manualmente. Puoi chiarire?

Ad ogni modo la libreria jQuery sembra essere inclusa prima degli altri script, il che è giusto (a parte che tutti gli script sono inclusi 2 volte).

il file Jquery.js in pratica contiene Jquery scaricato dal sito ufficiale, ho copiato il codice e l'ho inserito in quel file.

Ok, potrebbe andare bene.

Se inverto nell'ordine Jquery.js con custom.js la barra non mi fa più l'animazione e non capisco perchè visto che non ho nulla di jquery in custom.js per ora.

Molto probabilmente si tratta di un conflitto tra variabili, ma senza vedere la pagina in azione non è possibile capirlo.

Se puoi postare il link della pagina in questione gli si può dare uno sguardo.

Ad ogni modo ti ripeto:

In qualunque caso quando riscontri dei problemi di script verifica sempre nella console del tuo browser (F12 per aprirla, quindi vai alla scheda Console) se ti saltano fuori degli errori nello script.

Il primo passo è verificare attraverso la console del tuo browser se si riscontra qualche errore di script?
Lo hai fatto?

[Legolas84]

No allora ho sbagliato... devo aver fatto casino con il copia incolla.... questo è precisamente l'head delle pagine del sito:

<head>
      <meta charset=\"utf-8\">
      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
      <title>sysArm - $a</title>
      <link href=\"bootstrap/bootstrap.css\" rel=\"stylesheet\" media=\"screen\">
      <link href=\"bootstrap/sidebar.css\" rel=\"stylesheet\" media=\"screen\">
      <link href=\"bootstrap/all.css\" rel=\"stylesheet\">
      <script type=\"text/javascript\" src=\"bootstrap/jquery.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/bootstrap.min.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/all.js\"></script>
      <script type=\"text/javascript\" src=\"bootstrap/custom.js\"></script>
</head>

custom.js contiene esattamente questo codice:

        function Time() {
            var today=new Date();
            var h=today.getHours();
            var m=today.getMinutes();
            var s=today.getSeconds();
            m=checkTime(m);
            s=checkTime(s);
            document.getElementById('clock').innerHTML=h+":"+m+":"+s;
            t=setTimeout('Time()',500);
        };
        function checkTime(i) {
            if (i<10) {
                i="0" + i;
            }
        return i;
        };
        
        
        $("#bottone1").on("click", function() {
                $("#campo1").addClass("bg-dark");
            });

Mi riesce difficile girarti la pagina perchè per ora sto facendo solo test in locale.


Comunque a prescindere da ciò ho fatto la prova che mi hai indicato con F12 sulla pagina e forse ho individuato l'errore:

index.js:9 Uncaught (in promise) TypeError: Cannot read property 'logins' of undefined
    at t.setDisabledEntries (index.js:9)
    at index.js:1

E poi due avvisi:

DevTools failed to parse SourceMap: http://localhost/sysarm/bootstrap/bootstrap.min.js.map
DevTools failed to parse SourceMap: http://localhost/sysarm/bootstrap/bootstrap.css.map

[Legolas84]

un amico che ha visto il codice mi ha aiutato a risolvere.... in pratica lo script sul file esterno ha bisogno di una riga aggiuntiva:

$(document).ready(function () {
           $("#bottone1").on("click", function() {
            $("#campo1").addClass("bg-dark");
        });
        });

Spero possa essere utile anche ad altri

[KillerWorm]

un amico che ha visto il codice mi ha aiutato a risolvere.... in pratica lo script sul file esterno ha bisogno di una riga aggiuntiva:

$(document).ready(function () {

Il tuo amico ti ha suggerito bene; questo in effetti è l'altro errore più comune tra quelli commessi da chi si avvicina all'uso di JavaScript (a prescindere dalla libreria utilizzata).

Chiaramente quando si seleziona un elemento del DOM, è necessario assicurarsi che sia già stato creato sulla pagina. Il ready non è altro
che una sorta di evento load della pagina che esegue la funzione di callback quando tutto il contenuto della pagina è disponibile alla manipolazione tramite JavaScript.

Spero possa essere utile anche ad altri

Sicuramente può esserlo. Grazie per aver postato la soluzione

Buon proseguimento