PHP & jQuery

  • Creatore Discussione Creatore Discussione edo64
  • Data di inizio Data di inizio

edo64

Nuovo Utente
6 Ago 2016
10
0
1
Salve a tutti.
Ho un progetto di una RUBRICA. Il file principale si chiama "rubrica.php". Esso ha dentro tutta una serie di chiamate ajax a script php
Qui sotto metto il codice di "rubrica.php". In verde le funzioni AJAX e in blu il codice PHP

PHP:
[COLOR=rgb(41, 105, 176)]
<!DOCTYPE html>
<head>
    <link rel='stylesheet' href='bootstrap-3.3.7-dist/css/bootstrap.css'>
    <link rel='stylesheet' href='bootstrap-3.3.7-dist/css/bootstrap-theme.min.css'>
    <script src='bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js'></script>
    <script src='bootstrap-3.3.7-dist/js/bootstrap.min.js'></script>
[/COLOR]
[COLOR=rgb(65, 168, 95)]
// Qui iniziano gli script    
    <script type="text/javascript">
<?php
    if(isset($_GET['ID'])){
        echo "var id_contact = ".$_GET['ID'].";";
    } else {
        echo "var id_contact = '';";
    }
?>
   
function aggiornadati(inizio) {
        $.ajax({
          type: "POST",
          url: "script_giallo/rubrica_fornitori_contact_load.php",
          async:false,
          data: {inizio:inizio,id_contact:id_contact},
          dataType: "html",
          success: function(msg)
          {
            $("#tabella").html(msg);
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Status: " + textStatus); alert("Error: " + errorThrown);
        }
        });
                   
  }

</script>
[/COLOR]
[COLOR=rgb(41, 105, 176)]
</head>
<body>
<div class="container-fluid" style="margin-top: 20px";></div>
<div class="container-fluid">
<div class='row'><span><strong><h1 style="color:#fd7e14;font-size: xxx-large ;margin-top: 20px;">Rubrica Fornitori</h1></strong></span>
    <!-- FORM DI RICERCA E FUNZIONI -->
        <div class='col-xs-12 col-md-3'>
        <div class='panel panel-default'>
            <div class='panel-heading'>
                <h1><i class='fa fa-address-book text-primary' aria-hidden='true'></i>  Fornitori & Contatti</h1>
            </div>
            <div class='panel-body'>
                <div class='input-group input-group-sm'>
                  <input type='text' class='form-control' id='testo_da_cercare' placeholder='Cerca'>
                  <span class='input-group-btn'>
                      <button type='button' class='btn btn-primary' onclick='cerca()' id='btn_cerca'><span class='glyphicon glyphicon-search'></span
                     </button>
                      <button class='btn btn-success' type='button' onclick='new_contact()' title='Nuovo'><i class='fa fa-user-plus' aria-hidden='true'></i>                                            </button>
                      <button class='btn btn-primary' type='button' onclick='pdf_book()' title='Book'><i class='fa fa-address-book' aria-hidden='true'></i>                                            </button>
                      <a class='btn btn-success' href='script_giallo/rubrica_fornitori_excel.php' target='_new' title='Esporta in excel'><i class='fa fa-file-                                                  excel-o' aria-hidden='true'></i>
                     </a>
                    </span>
                </div>                      
            </div>
        </div>
        </div>
    </div>
    <!-- fine FORM DI RICERCA E FUNZIONI -->
    <!-- TABELLA VERA E PROPRIA -->
    <div class="row text-center" id='row_elenco'>
        <div class='col-md-12' id="elenco">
            [B]<span id="tabella">....</span>[/B]
            <a name='giu' href="#"><i class="fa fa-arrow-circle-o-up" aria-hidden="true">Torna Su</i></a>
        </div>
    </div>
    <!-- FINE TABELLA VERA E PROPRIA -->
    <!-- TABELLA NUOVO CONTATTO -->
    <div class="row">
        <div class="col-md-3 col-md-offset-3 hidden" id='new_contact'>
            <div class='panel panel-default'>
                <div class='panel-heading'>
                    <div class='row'>
                    <div class="col-md-6">
                        <h1>Nuovo Contatto</h1>
                    </div>
                    <div class="col-md-6">
                        <button class='btn btn-primary pull-right' onclick='back()' title='Close'><i class="fa fa-times-circle" aria-hidden="true"></i>                                                            </button>
                    </div>
                    </div>
                </div>
                <div class='panel-body'>
                    <div class="col-md-12">
                        <div class='form-group form-group-sm'>
                            <span class="label label-success" style="margin-top:5px;">Cod.Forn.Gim.</span>
                            <input type='text' class='form-control' name="cod_fornitore_gimar"  id='cod_fornitore_gimar' placeholder="cod_fornitore_gimar"                                                style="margin-top:5px;">
                        </div>
                        <div class='form-group form-group-sm'>
                            <span class="label label-success" style="margin-top:5px;">Ragione Sociale</span>
                            <input type='text' class='form-control' name="ragione_sociale" placeholder="ragione_sociale"  id='ragione_sociale'  style="margin-top:5px;">
                        </div>
                        <div class='form-group form-group-sm'>
                            <span class="label label-success">Indirizzo</span>
                            <input type='text' class='form-control' name="indirizzo" placeholder="indirizzo" id='indirizzo' style="margin-top:5px;">
                        </div>
                        <div class='form-group form-group-sm'>
                            <span class="label label-success">Localita</span>
                            <input type='text' class='form-control' name="localita" placeholder="localita" id='localita' style="margin-top:5px;">
                        </div>
                        <div class='form-group form-group-sm'>
                            <span class="label label-success">Provincia</span>
                            <input type='text' class='form-control' name="prov" placeholder="prov" id='prov' style="margin-top:5px;">
                        </div>
                        <div class='form-group form-group-sm'>
                            <span class="label label-success">CAP</span>
                            <input type='text' class='form-control' name="cap" placeholder="cap" id='cap' style="margin-top:5px;">
                        </div>
                        <div class='form-group form-group-sm'>
                            <span class="label label-success">Telefono</span>
                            <input type='text' class='form-control' name="telefono" placeholder="telefono" id='telefono' style="margin-top:5px;">
                        </div>
                        <div class='form-group form-group-sm'>
                            <span class="label label-success" >Az.</span>
                            <input type='text' class='form-control' name="ID_azienda"  placeholder="ID_azienda" id='ID_azienda' style="margin-top:5px;">
                        </div>
                        <button type='button' class='btn btn-success btn-lg' onclick="save_contact()" title='Save'>Salva</button>
                    </div>    <!-- FINE DIV class="col-md-12"-->
                </div> <!-- FINE DIV class='panel-body'-->
            </div>  <!-- FINE DIV class='panel panel-default'-->
        </div>  <!-- FINE DIV class="col-md-6 col-md-offset-3 hidden" id='new_contact'-->
    </div> <!-- FINE DIV class="row' -->
    <div class='row'>
        <div class='col-md-12'>
            <span id="form_modifica"></span>
        </div>
    </div>
</div>
</body>
</html>[/COLOR]

Vorrei capire bene la funzione "aggiornadati()" (per poi capire le altre). In particolare non capisco la parte di codice: .html(msg);
Allora...io ho capito che "success" è il ritorno dei dati dal file chiamato "rubrica_fornitori_contact_load.php" ...che è qua sotto nel secondo messaggio, perchè non ci stava in uno solo.
La prima parte fino alla 1° riga orizz. e le ultime righe non riguardano sta cosa.
 


PHP:
<?php
        include "../db_conn.php";
    $id_contact = $_POST['id_contact']; // Praticamente mette a NULL questo "$id_contact" (Vedi funzione "aggiornadati()" in index.php

//-------------------------------------------------COMMENTI AL CODICE: ------------------------------------------------------------------------------------------------------

        $inizio     = $_POST['inizio'];

        $num_elementi_pagina = 15;
        
        if (!isset($inizio)) {
            $inizio = 0;
        }
        
        if($inizio == 0){
            $limite_inferiore = 0;
        } else {
            $limite_inferiore = ($inizio*$num_elementi_pagina);
        }


        if($id_contact){
            $query_string = "SELECT * FROM fornitori_gimar
            WHERE ID = ".$id_contact."
            GROUP BY fornitori_gimar.ID";
        }else {
            $query_string = "SELECT * FROM fornitori_gimar
            GROUP BY fornitori_gimar.ID";


;        }
    if(isset($mysqli)) {
        $result = $mysqli->query($query_string);
    }
        $num_rows = $result->num_rows;
        $pagine = ceil($num_rows/$num_elementi_pagina);
//-------------------------------------------------COMMENTI AL CODICE: ------------------------------------------------------------------------------------------------------
// quindi faccio un "if": se l' "id_contact" è definito faccio una query selettiva dove l' "id"= contatto che ti ho passato (cioè "$id_contact")
  //se $id_contact" è definito faccio una QUERY selettiva dove l'id è uguale all' $id_contact che ti ho passato, sennò una QUERY normale

        //echo '<strong><h1 style="color:#fd7e14;font-size: xxx-large">Rubrica Fornitori</h1></strong>';
        //var_dump($query_string);
        echo "<table class='table table-hover table-striped table-bordered table-sm' style='border-style: solid; border-width: 4px;'>";
        echo "<thead>";
        echo "<th><H6 style='color:#c69500'><strong>Cod.Fornit.Gim</strong></H6></th>";
        echo "<th><H6 style='color:#c69500'><strong>Ragione Sociale</strong></H6></th>";
        echo "<th><H6 style='color:#c69500'><strong>Indirizzo</strong></H6></th>";
        echo "<th><H6 style='color:#c69500'><strong>Localita</strong></H6></th>";
        echo "<th><H6 style='color:#c69500'><strong>Provincia</strong></H6></th>";
        echo "<th><H6 style='color:#c69500'><strong>Cap</strong></H6></th>";
        echo "<th><H6 style='color:#c69500'><strong>Telefono</strong></H6></th>";
        echo "<th><H6 style='color:#c69500'><strong>Az.</strong></H6></th>";
        echo "<th></th>";
        echo "</thead>";
//---------------------------------------------------------------------------------------------------------------------
//     INIZIA IL <BODY>
        $result = $mysqli->query($query_string);  // con $result mando in esecuzione la SELECT
        while($row = $result->fetch_assoc()){     // FACCIO UN CICLO "WHILE" PER PRENDERMI TUTTI LE RIGHE DEL RISULTATO DELLA QUERY
            
            echo "<tr>";
            echo "<td>";
                echo $row['cod_fornitore_gimar'];
            echo "</td>";
            echo "<td>";
                echo $row['ragione_sociale'];
            echo "</td>";
            echo "<td>";
                echo $row['indirizzo'];
            echo "</td>";
            echo "<td>";
                echo $row['località'];
            echo "</td>";
            echo "<td>";
                echo $row['prov'];
            echo "</td>";
            echo "<td>";
                echo $row['cap'];
            echo "</td>";
            echo "<td>";
                echo $row['telefono'];
            echo "</td>";
            echo "<td>";
                echo $row['ID_azienda'];
            echo "</td>";
            echo "<td>";
                //echo " <button type='button' class='btn btn-warning' onclick='singoloitem(".$row[id].")' title='Modifica'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></button>";
                echo "<button class='btn btn-warning' data-toggle='modal' data-target='#modal_modifica".$row['ID']."' title='Modifica'>";
                echo "<i class='fa fa-edit' aria-hidden='true'></i>";
                echo "</button>";
                echo "<button class='btn btn-info' onclick='vcard(".$row['ID'].")' title='Stampa Vcard'>";
                echo "<i class='fa fa-id-card-o' aria-hidden='true'></i>";
                echo "</button>";
                echo "<button class='btn btn-danger' onclick='delete_item(".$row['ID'].")' title='Elimina'>";
                echo "<i class='fa fa-trash' aria-hidden='true'></i>";
                echo "</button>";
            echo "</td>";
            echo "</tr>";
            //MODAL       
echo " <div class='modal fade' id='modal_modifica".$row['ID']."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel".$row['ID']. "'>
<div class='modal-dialog' role='document' >
<div class='modal-content' style='border-top-left-radius: 16px;border-top-right-radius: 16px;border-bottom-left-radius: 16px;border-bottom-right-radius: 16px'>
    <div class='modal-header' style='background-color:#97F3B7FF; border-top-left-radius: 16px;border-top-right-radius: 16px'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
        <h4 class='modal-title' id='myModalLabel" .$row['ID']."'><strong>".$row['ragione_sociale']."</strong></h4>
    </div>
<div class='modal-body' style='text-align: left'>
    <div class='form-group form-group-sm'>
        <span class='label label-success' >Cod.Forn.Gim.</span>
        <input type='text' class='form-control'  id='cod_fornitore_gimar_mod".$row['ID']."' value='".$row['cod_fornitore_gimar']."' style='margin-top:5px;'>
    </div>
    <div class='form-group form-group-sm'>
        <span class='label label-success'>Ragione Sociale</span>
        <input type='text' class='form-control' id='ragione_sociale_mod".$row['ID']."' value='".$row['ragione_sociale']."' style='margin-top:5px;'>
    </div>
    <div class='form-group form-group-sm'>
        <span class='label label-success'>Indirizzo</span>
        <input type='text' class='form-control' id='indirizzo_mod".$row['ID']."' value='".$row['indirizzo']."' style='margin-top:5px;'>
    </div>
    <div class='form-group form-group-sm'>
        <span class='label label-success'>Località</span>
        <input type='text' class='form-control' id='localita_mod".$row['ID']."' value='".$row['località']."' style='margin-top:5px;'>
    </div>
    <div class='form-group form-group-sm'>
        <span class='label label-success'>Provincia</span>
        <input type='text' class='form-control' id='prov_mod".$row['ID']."' value='".$row['prov']."' style='margin-top:5px;'>
    </div>
    <div class='form-group form-group-sm'>
        <span class='label label-success'>Cap</span>
        <input type='text' class='form-control' id='cap_mod".$row['ID']."' value='".$row['cap']."' style='margin-top:5px;'>
    </div>
    <div class='form-group form-group-sm'>
        <span class='label label-success'>Telefono</span>
        <input type='text' class='form-control' id='telefono_mod".$row['ID']."' value='".$row['telefono']."' style='margin-top:5px;'>
    </div>
    <div class='form-group form-group-sm'>
        <span class='label label-success'>Azienda</span>
        <input type='text' class='form-control' id='ID_azienda_mod".$row['ID']."' value='".$row['ID_azienda']. "' style='margin-top:5px;'>
    </div>
</div>
<div class='modal-footer' style='background-color:#97F3B7FF; border-bottom-left-radius: 16px;border-bottom-right-radius: 16px'>
    <button type='button' class='btn btn-success' data-dismiss='modal' onclick='update(" .$row['ID'].")'><strong>Salva</strong></button>
    <button type='button' class='btn btn-default' data-dismiss='modal'><strong>Chiudi</strong></button>
</div>";
echo "</div>";
            echo "</div>";
            echo "</div>";
//MODAL
        }
            echo "</table>";
            
            echo "<div class='text-center'>";
                    echo "<nav aria-label='Page navigation'>";
                        echo "<ul class='pagination pagination-sm'>";
                    $i = 0;
                    while($i < $pagine){
                                
                            if($i == $inizio){
                                echo "<li class='active'><a href='#' onclick='aggiornadati(".$i.")'>".($i+1)."</a></li>";
                            } else {
                                echo "<li><a href='#' onclick='aggiornadati(".$i.")'>".($i+1)."</a></li>";
                            }   
                            
                            $i++;
                    }
                    echo "</ul>";
                    echo "</nav>";
                echo "</div>";
                
                
/* close connection */
$mysqli->close();
 
Ragazzi ...so che siamo a 40° se va bene.
.....ma io non ho ricevuto alcun aiuto per il mio problema.

Mi permetto quindi di fare un "UP" per il problema (mio) che ho sollevato.
Grazie di cuore a chi mi potrà dare una mano.
Buon caldo a tutti.
 
Ciao
Vorrei capire bene la funzione "aggiornadati()" (per poi capire le altre). In particolare non capisco la parte di codice: .html(msg);
Parliamo di jquery (libreria javascript).

.html() è appunto un metodo di jquery, che in questo caso corrisponde grossomodo alla proprietà javascript "innerHTML". Per cui quella riga dentro il success non fa altro che sostituire al volo il contenuto html delll'elemento <span id="tabella">....</span>, applicando il risultato (come stringa html) restituito dal server per quella chiamata ajax.

L'intera chiamata ajax in questo script è realizzata attraverso i metodi jquery.
Ora la domanda è: ti serviva sapere solo queste informazioni oppure c'è qualcosa che non ti sta funzionando o che non ti torna?
 
Ciao WmbertSea e grazie per la risposta.
Quel che non ho capito è questo:
Tu scrvi :
Per cui quella riga dentro il success non fa altro che sostituire al volo il contenuto html delll'elemento <span id="tabella">....</span>, applicando il risultato (come stringa html) restituito dal server per quella chiamata ajax.


Questo l'ho capito ma....
Mi spiego meglio: Javascript e/o PHP sanno DOVE mettere il contenuto html restituito dal server - cioè al posto di "<span id="tabella">....</span>" - come infatti mi dici tu.

Ma come fanno a sapere COSA mettere ??
Tu mi dirai : "COSA deve mettere lo prende dall'istruzione" --> url: "script_giallo/rubrica_fornitori_contact_load.php"

Ma dentro al file "rubrica_fornitori_contact_load.php" non c'è nè l'id="tabella" nè altro riferimento che dica COSA mettere al posto di
<span id="tabella">....</span> . C'è , sì , una tabella (e sarà questa che metterà) ma ci sono mille altre cose.
Come fa a scegliere solo la parte di tabella??
 
Aggiungo per chiarezza:
insomma....
JavaScript:
 .html(msg);
.........il "msg" come fa a diventare una tabella
 
.........il "msg" come fa a diventare una tabella
Quella variabile è la risposta dello script php che è stato chiamato. Il php elabora i dati secondo le varie istruzioni e, attraverso il costrutto "echo" o funzioni equiparabili, restituisce una stringa che viene data in pasto al client. Questa può essere semplice testo o codice HTML, come in questo caso, ma è pur sempre una stringa testuale che arriva come argomento della funzione di callback definita per l'evento "success" di quella chiamata ajax.


Nel tuo caso, quel PHP restituisce il codice HTML che genera la tabella. Questo viene costruito attraverso richieste al database e varie condizioni. Fai attenzione perché alcune variabili, implicate nella costruzione della tabella, gli vengono passate via POST proprio attraverso la chiamata ajax

Vedi infatti che questi dati sono definiti nella proprietà "data" dell'oggetto ajax.
data: {inizio:inizio,id_contact:id_contact}
In particolare la variabile "id_contact" è definita preventivamente nella pagina a livello di javascript. Questo dato, alla pagina corrente, gli arriva via GET come parametro ID:
PHP:
    <script type="text/javascript">
<?php
    if(isset($_GET['ID'])){
        echo "var id_contact = ".$_GET['ID'].";";
    } else {
        echo "var id_contact = '';";
    }
?>

La chiamata ajax quindi lo rispedisce via post alla pagina php che restituisce la tabella. Per cui il php lo recupera in questo modo:
PHP:
$id_contact = $_POST['id_contact'];

Questo gli serve poi per costruire la query per il database:
PHP:
            $query_string = "SELECT * FROM fornitori_gimar
            WHERE ID = ".$id_contact."
            GROUP BY fornitori_gimar.ID";
Alla fine dei giochi, il php restituisce la stringa che rappresenta il codice html della tabella (riferito a quell'id_contact), che arriva quindi al success della chiamata ajax, attraverso quella variabile "msg".

A quel punto javascript/jquery si occupa di usare questo html (la variabile "msg") per sostituirlo a quello che sta dentro l'elemento #tabella
JavaScript:
$("#tabella").html(msg);

Spero di averti chiarito qualcosa
 
Cavolo....grazie. Mi hai chiarito , sì, le idee.
Certo, non è che adesso ho capito tutto, tutto, tutto.....ma le tue frasi:

a) "La chiamata ajax quindi lo rispedisce via post alla pagina php che restituisce la tabella."
b) "Alla fine dei giochi, il php restituisce la stringa che rappresenta il codice html della tabella (riferito a quell'id_contact), che arriva quindi al success della chiamata ajax, attraverso quella variabile "msg".

Ebbene
.....mi hanno abbastanza chiarito il meccanismo. Naturalmente ci dovrò ragionare sopra, ma ho un'inizio. Grazie ancora.
Un'ultima cosa; questo è un meccanismo stantard, che si usa ancora ? Oppure è sorpassato e puoi suggeriemi metodi migliori?
Te lo chiedo , perchè questo è una specie di "esercizio" per me , ma ha almeno 5-6 anni.

Ciao; grazie ancora e....ottimo forum.
 
questo è un meccanismo stantard, che si usa ancora ?
Prima di risponderti è necessario fare una precisazione. Finora hai parlato di jQuery e di AJAX come fossero una stessa cosa ma chiaramente non è così e non bisogna assolutamente confondere i due argomenti, specialmente in un forum tecnico, altrimenti è facile cadere in equivoci e fraintendimenti.

La prima, jQuery, è una libreria/framework javascript, usata per "semplificare" la stesura dello script.
La seconda, AJAX (Asynchronous JavaScript And XML), è una tecnica di comunicazione tra client e server, per la quale in genere viene usato un oggetto XMLHttpRequest, che permette la transizione di dati in maniera "silenziosa" (cioè senza bisogno di aggiornare l'intera pagina, come avviene invece per il metodo tradizionale).

Ora, jquery include anche diversi metodi con cui è possibile gestire le chiamate ajax. Il tuo script usa appunto il metodo ajax(). Tuttavia per applicare questa tecnica non è essenziale usare jquery. Un sistema ajax può essere infatti impostato usando solo "semplice" javascript, oltre al fatto che esistono attualmente altre tecniche similari.

l'uso stesso di jquery non è indispensabile, infatti tutto può essere scritto anche usando solo semplice javascript, o magari usando una tra le tante altre librerie javascript, comunque valide.

Oppure è sorpassato e puoi suggeriemi metodi migliori?
Arrivando al dunque, jquery è una libreria tuttora utilizzata e validissima perché si basata comunque su javascript standard (è perfettamente documentata ed aggiornata secondo gli standard attuali) ma non è indispensabile usarla.

Gli standard stessi di javascript sono stati implementati negli anni, per cui, ad oggi, la stesura dello script risulta comunque più "semplice" rispetto al passato.

Il metodo ajax() di jquery risulta tutt'oggi valido ed è possibile continuare ad usarlo per le applicazioni attuali e, direi, future. Tuttavia una "semplice" chiamata ajax può essere impostata in puro javascript, vedi esempi e documentazioni su w3schools.com.

Ancora, i browser moderni supportano altre tecniche simili, vedi Fetch API, che possono essere usate come valida alternativa alla più comune ajax.

Per quel che posso dirti, non c'è un metodo migliore di un altro, la scelta va valutata di volta in volta a seconda delle esigenze, del contesto e delle tecnologie che è possibile usare.
 

Discussioni simili