Includere javascript in una pagina html

**condor_uk** · 08-06-2017, 15:59

Un saluto a tutti,
sto effettuando il porting di un gestionale in bootstrap per renderlo responsive, ho un file javascript con all'interno diverse funzioni, una tra le tante è la funzione che al click del mouse su un'icona mi aggiunge delle righe ad un form. Da quando ho iniziato la migrazione non mi funziona più

codice:

<script>
$(document).ready(function(){
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
    
    $('body').on('click', '.add', function() {
    cindex++;
    
    if(cindex<=15){
    var newRow = '<tr class="righe"><td><input type="text" name="itr'+cindex+'" id="itr'+cindex+'" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49"></td><td><input type="text" name="for'+cindex+'" id="for'+cindex+'" class="t1" size="10"></td><td><input type="text" name="q'+cindex+'" class="t2 somma" id="q'+cindex+'" size="3" value="0.0" onkeyup="SommaRiga('+cindex+')" placeholder="0"></td><td><input type="text" name="iu'+cindex+'" class="t2 somma"  onBlur="Format('+cindex+')" onkeyup="SommaRiga('+cindex+')" id="iu'+cindex+'" size="6" value="0.00" placeholder="0.00"></td><td><input type="text" name="sc'+cindex+'" class="t2 somma" onkeyup="Virgola('+cindex+')" id="sc'+cindex+'" size="8" value="0.0" placeholder="sconto"></td><td><input type="text" name="imp_'+cindex+'" id="imp_'+cindex+'" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td><td><img src="images/add.png" name="add1" width="16" height="16" id="add'+cindex+'" class="add"></td></tr>'
    $("#commessa tbody tr").eq((cindex-1)).after(newRow)
    }else{
    alert('Non puoi inserire più di 15 righe');
    return false;
    }
        $('.add').not(':last').addClass( 'addisable' ).removeClass( 'add' )
        }).on('focus','.somma', function(){
    $(this).not('input[name^="imp_"]').val('')
    })
});
function Format(ele){
    var valore = ($("#iu"+ele).val()*1)
    $("#iu"+ele).val(valore.toFixed(2))
}

function Virgola(nele){
    var cambia = $("#sc"+nele).val().replace(/\,/g,'.')
    $("#sc"+nele).val(cambia)
    SommaRiga(nele)
}

function SommaRiga(num){
var tot = 0
    var qt = $("#q"+num).val()
    var unitario = $("#iu"+num).val()
    var sc = $("#sc"+num).val()
    var Tot = (qt*1*unitario*1)
    var impsc = (Tot/100*sc)
    var somma = (Tot-impsc)
    if(somma>0){
        $("#imp_"+num).val(somma.toFixed(2))
    }else{
        $("#imp_"+num).val('')
        $("#iu"+num).val('')
    }
    var elem = $('input[name^="imp_"]')
    for(i=0; i<elem.length;i++) {
    tot += (elem.eq(i).val()*1)
    };
    $("#totale").val(tot.toFixed(2))
    //alert(num)
}
</script>

questo script, insieme ad altri, è contenuto in un file che ho nominato myscript.js ed è presente in una cartella js

il file l'ho inserisco nella pagina index in questo modo:



	codice HTML:
	<!DOCTYPE html>
<html lang="it">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Mio Gestionale</title> 
    <meta name="description" content="" />
    <meta name="keywords" content="" /> 
    <meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />     
    <meta name="application-name" content="CMS GESTIONALE" />
    <meta name="author" content="" />
    <!-- ... FINE METATAG ... -->


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" media="screen" />
    <!-- ... FINE INCLUSIONE CSS ... -->

    <!--INIZIO SCRIPT-->
    <script type="text/javascript" src="js/myscript.js"></script>



<script type="text/javascript">
   $(function() {
   var date = $('#datepicker').datepicker({ dateFormat: 'dd/mm/yy' }).val();
   var date = $('#datepicker1').datepicker({ dateFormat: 'dd/mm/yy' }).val();
   var date = $('#datepicker2').datepicker({ dateFormat: 'dd/mm/yy' }).val();
   });
</script>

<script type="text/javascript">
   $(document).ready(function() {
   $('.timepicker').qcTimepicker();
   });
</script>
</head>
...

questo javascript, viene poi utilizzato in una pagina che si chiama
inserisci_commessa.php e in essa viene richiamato

codice:

<?php include("js/myscript.js"); ?>

<form method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data"> 
<fieldset>
<legend>Anagrafica Cliente</legend>
<table class= "table" id="add">
<tr>
<td></td>
<td></td>
<td><b>Data</b></td>
<td><input type="text" name="data" id="datepicker" required="required"></td>
</tr>
....
....

Mi dareste una mano a sistemare ?

**vic53** · 08-06-2017, 17:10

intanto lo start per jquery va messo dentro il body...non nella head, poi le librerie jquery ci sono?

codice:

<script type="text/javascript">
   $(document).ready(function() {
   $('.timepicker').qcTimepicker();
   });
</script>

....

**condor_uk** · 08-06-2017, 17:23

Ciao vic53,
anzitutto grazie per la risposta,

allora come da direttive bootstrap ho incluso le librerie jquery alla fine del file index.php prima della chiusura del tag body

codice HTML:

</div><!-- ... END WRAPPER ... -->

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

**vic53** · 09-06-2017, 08:53

Perchè usi la include per inserire uno script js anzichè usare il tag script con il riferimento al file esterno?
tipo l'esempio

codice:

<script language="javascript" src="nome_tuo_file_javascript.js">

...
che è come la include ma esegue il codice in linea...

**cavicchiandrea** · 09-06-2017, 12:14

@vic53

intanto lo start per jquery va messo dentro il body...non nella head

Io sapevo l'esatto contrario, dove hai letto questa regola

**vic53** · 09-06-2017, 12:34

Originariamente inviata da cavicchiandrea

@vic53
Io sapevo l'esatto contrario, dove hai letto questa regola

Forse hai ragione, ma io sono abituato a mettere solo le funzioni nella head ed eseguire gli script nel body che chiaramente a me serve per leggibilità e questa regola mi è dettata dal buon senso dato che se esegui codice nella head poi devi cercare di capire i flussi diversamente comunque funziona anche se lo metti nella head, ma a me risulta piu facile caapire il codice se lo trovo nel body...
grazie per la precisione ma io la penso cosi...
ciao

**condor_uk** · 09-06-2017, 12:35

ciao @cavicchianndrea,
probabilmente @vic53 si sarï¿½ confuso, infatti come correttamente fai notare tu
vale la regola esattamente opposta

Discussione: Includere javascript in una pagina html

Strumenti discussione

Ricerca discussione

Visualizza

Includere javascript in una pagina html

Permessi di invio