Query MySQL tramite valore campo input

Buongiorno a Tutti,
sono a chiedervi un aiuto con un codice che non ho la più pallida idea su come possa realizzarlo

vi spiego in breve...
io ho un campo (HTML semplice)
che ha il seguente codice:

<input type="text" name="title" class="form-control" id="id" placeholder="Title">

Questo campo è auto compilante tramite uno script in JS in base al suo ID

io ho la necessità di effettuare una QUERY di SELECT nel mio DB in base al value del campo sopra citato.
Questo però deve essere fatto in tempo reale, nel senso che al variare del value deve essere (ri)effettuata la query con con il nuovo valore...

qualcuno mi potrebbe aiutare a capire come trasferire il VALUE del capo all'interno della query??

Grazie in anticipo
Fabio

[mzanella]

Associa un event listener che, a ogni cambiamento del valore del campo, effettui una chiamata AJAX verso una pagina PHP, passandole il valore aggiornato come parametro. La pagina PHP eseguirà la query e ne restituirà il risultato alla pagina chiamante.

riusciresti gentilmente a farmi un esempio di codice?

grazie

[mzanella]

Usando jQuery:

page.html

...
<input type="text" name="title" class="form-control" id="id" placeholder="Title">
...
<script>
$(function () {
    $('#id').change(function () {
        var value = $(this).val();

        $.get('service.php', { title: value }, function (data) {
            console.log(data);
        }
    });
});
</script>

service.php

<?php
...

$title = $_REQUEST['title'];
$result = $database->query("SELECT * FROM tabella WHERE title = '$title'");
$data = [];
... // i risultati vengono inseriti nel vettore $data

header('Content-Type: application/json');
echo json_encode($data);

La pagina service.php, quando interrogata passandole un parametro (tramite GET) title effettua una query restituendone i risultati in formato JSON.
La pagina page.html, ogni qualvolta viene modificato il valore presente nel campo il cui id è id, interroga la pagina service.php. Non sapendo cosa deve fare con i risultati della query ho usato un console.log per stamparli nella console.

quindi se io dopo devo fare un "echo" di tutti i valori ottenuti dal database
basta che faccio un echo $data['colonna_db']

giusto?

[mzanella]

Nella pagina chiamante i dati verranno recuperati tramite JavaScript. Niente echo o altre istruzioni PHP.

Ok, quindi come le stampo a video?
Scusa ma di JS non ne capisco praticamente nulla

[mzanella]

Hai varie possibilità, la più semplice è predisporre un contenitore in cui inserire le informazioni creando dinamicamente elementi DOM.
Per esempio:

<div id="result-container"></div>
...
<script>
$(function () {
    $('#id').change(function () {
        var value = $(this).val();

        $.get('service.php', { title: value }, function (data) {
            var container = $('#results-container');
            for (var i = 0; i < data.length; ++i) {
                var item = $('<span>').html(data[i].nome_campo);
                container.append(item);
            }
        }
    });
});
</script>

O qualcosa del genere.

Ho provato anche così:

		<div id="result-container"></div>
								<script>
								$(function () {
									$('#id').change(function () {
										var value = $(this).val();

										$.get('service.php', { title: value }, function (data) {
											var container = $('#results-container');
											for (var i = 0; i < data.length; ++i) {
												var item = $('<span>').html(data[i].id);
												container.append(item);
												
											}
										}
									});
								});
								</script>

Ma non riesco a venirne fuori
service.php

<?php


$title = $_REQUEST['title'];
$result = $database->query("SELECT * FROM SELECT * FROM `events` WHERE title = '$title'");
$data = [];
 // i risultati vengono inseriti nel vettore $data

header('Content-Type: application/json');
echo json_encode($data);

?>

se vuoi dare un occhio alla pagina è la segeunte:
http://contabilitavergotti.altervista.org/calendario2/

tutto il mio codice:
https://www.dropbox.com/s/vgzm6luykg...index.php?dl=0

nome DB:
my_contabilitavergotti
Tabella: events
colonnre:

• id
• title
• Descrizione
• color
• start
• end

ho la necessità di fare un print dopo i due input alla riga 176

[mzanella]

Usa la console degli errori, nel JavaScript che avevo indicato manca una parentesi chiusa. Capita .

niente da fare...nemmeno così

<div id="result-container"></div>
								<script>
								$(function () {
									$('#id').change(function () {
										var value = $(this).val();

										$.get('service.php'), { title: value }, function (data) {
											var container = $('#results-container');
											for (var i = 0; i < data.length; ++i) {
												var item = $('<span>').html(data[i].nome_campo);
												container.append(item);
												
											}
										}
									});
								});
								</script>

[mzanella]

Usa la console degli errori:

(index):177 Uncaught ReferenceError: $ is not defined at (index):177
(index):417 Uncaught SyntaxError: missing ) after argument list

Stai usando un codice jQuery prima di includere jQuery, e manca un'altra parentesi.

Usa la console degli errori:

(index):177 Uncaught ReferenceError: $ is not defined at (index):177
(index):417 Uncaught SyntaxError: missing ) after argument list

Stai usando un codice jQuery prima di includere jQuery, e manca un'altra parentesi.

ok, adesso non visualizzo più alcun errore in console
però continuo a non visualizzare nulla :(

[mzanella]

Manca una "s" nell'id del contenitore:

<div id="results-container"></div>

Devi modificare il codice in base alle tue necessità, è chiaro che in questa riga non ci va "nome_campo", ma il nome del campo che vuoi mostrare (ammesso e non concesso che sia questo il formato in cui hai scelto di restituire le informazioni da service.php):

    var item = $('<span>').html(data[i].nome_campo);

ok corretti questi errori
ho notato che la pagina service andava in errore restituendo:
"Fatal error: Call to a member function query() on null in /membri/contabilitavergotti/calendario2/service.php on line 6"
surce.php

<?php


//$title = $_REQUEST['title'];
$title = "15";
$result = $database->query("SELECT * FROM `events` WHERE id = '$title'");
$data = [];
 // i risultati vengono inseriti nel vettore $data

header('Content-Type: application/json');
echo json_encode($data);

?>

l'ho modificata così:

<?php


$database = mysql_connect('localhost', 'contabilitavergotti', '') 
or die('Could not connect: ' . mysql_error()); 
mysql_select_db('my_contabilitavergotti') or die('Impossibile selezionare il database database'); 




//$title = $_REQUEST['title'];
$title = "15";

									
$query = "SELECT * FROM `events` WHERE id = '".$title."'"; 
$result = mysql_query($query); 




$data = [];
 // i risultati vengono inseriti nel vettore $data

header('Content-Type: application/json');
echo json_encode($data);

?>

però continua a restituire $data vuoto

vedi http://contabilitavergotti.altervist...o2/service.php
il mio scopo è:
dalla pagina http://contabilitavergotti.altervista.org/calendario2/
al click sopra l'evento
nel modal che si apre, sotto al campo i input ho la necessità di stampare a video il contenuto dei campi

• id
• title
• Descrizione
• color
• start
• end

(tabelle del mio db)

[mzanella]

però continua a restituire $data vuoto

Questo perché nel codice hai scritto che $data deve essere vuoto .

$data = []; 

Devi inserirci dentro le informazioni lette dal database.

Le funzioni mysql_* non sono più supportate, dovresti valutare di passare a mysqli o PDO.

dichiarando che

$data = mysql_result($result,0,'color');

e per fare una prova locale che

$title = "15"; 

e modificando il codice su index in:

<div id="results-container"></div>
                                <script>
                                $(function () {
                                    $('#id').change(function () {
                                        var value = $(this).val();

                                        $.get('service.php'), { title: value }, function (data) {
                                            var container = $('#results-container');
                                            for (var i = 0; i < data.length; ++i) {
                                                var item = $('<span>').html(data[i].color);
                                                container.append(item);
                                                
                                            }
                                        }
                                    });
                                });
                                </script> 

sulla pagina surce.php mi appare il colore giusto
ma sulla index no :(

[mzanella]

Questo perché hai cambiato formato delle risposte. Anziché restituire u oggetto JSON con coppie chiave-valore stai restituendo solo il colore.
Di conseguenza il JavaScript si modifica così:

$(function () {
    $('#id').change(function () {
        var value = $(this).val();
        $.get('service.php'), { title: value }, function (data) {
            var container = $('#results-container');
            var item = $('<span>').html(data);
            container.append(item);
        }
    });
});

ancora nulla

adesso il mio codice è questo:
index:

							<input type="text" name="title" class="form-control" id="id" placeholder="Title">

						

					
						
								<div id="results-container"></div>
								<script>
								$(function () {
									$('#id').change(function () {
										var value = $(this).val();
										$.get('service.php'), { title: value }, function (data) {
											var container = $('#results-container');
											var item = $('<span>').html(data);
											container.append(item);
										}
									});
								});
								</script>
						

service:

<?php


$database = mysql_connect('localhost', 'contabilitavergotti', '') 
or die('Could not connect: ' . mysql_error()); 
mysql_select_db('my_contabilitavergotti') or die('Impossibile selezionare il database database'); 




//$title = $_REQUEST['title'];
$title = "15";

									
$query = "SELECT * FROM `events` WHERE id = '".$title."'"; 
$result = mysql_query($query); 




$data = mysql_result($result,0,'color');
 // i risultati vengono inseriti nel vettore $data

header('Content-Type: application/json');
echo json_encode($data);

?>

sto impazzendo

[mzanella]

Adesso il service.php restituisce false. Hai modificato qualcosa?

Adesso il service.php restituisce false. Hai modificato qualcosa?

Avevo riabilitato il "$title = $_REQUEST['title'];" e commentato la dichiarazione "$title = "15";"

[mzanella]

Nel JavaScript c'è una parentesi chiusa nel posto sbagliato. Inoltre, per quello che devi fare, forse un keyup è più adatto di un change.

<script>
$(function () {
    $('#id').keyup(function () {
        var value = $(this).val();
        $.get('service.php', { title: value }, function (data) {
            var container = $('#results-container');
            var item = $('<span>').html(data);
            container.append(item);
        });
    });
});
</script>

ok adesso mi stampa a video il risultato
però si verifica un nuovo problema, che onestamente pensavo di risolvere così ma non è stato...

cliccando un un evento differente il contenuto del campo input varia (con l'ID del nuovo evento) ma sfruttando il codice da te riportato non esegue la query fin quando non vado a modificare manualmente il valore....come posso automatizzare la cosa (già dalla prima apertura della schermata dei dettagli?

[mzanella]

Puoi aggiungere un event listener ai "pulsanti" che, quando cliccati due volte, pulisce il contenuto del container e carica il valore associato all'id:

$(function() {
    $('.fc-content').dblclick(function () {
        var value = $('#id').val();
        //console.log(value);
        var container = $('#results-container');
        container.empty();
        $.get('service.php', { title: value }, function (data) {
            var item = $('<span>').html(data);
            container.append(item);
        });
    });
});

Puoi aggiungere un event listener ai "pulsanti" che, quando cliccati due volte, pulisce il contenuto del container e carica il valore associato all'id:

$(function() {
    $('.fc-content').dblclick(function () {
        var value = $('#id').val();
        //console.log(value);
        var container = $('#results-container');
        container.empty();
        $.get('service.php', { title: value }, function (data) {
            var item = $('<span>').html(data);
            container.append(item);
        });
    });
});

sostituendo il codice precedente con questo non mi stampa più a video il valore pescato dalla pagina surce :(

[mzanella]

Avevo detto "aggiungere", non "sostituire"...

Ok,
ho ripristinato il codice modificandolo in

						<script>
								$(function () {
									$('#id').keyup(function () {
										var value = $(this).val();
										$.get('service.php', { title: value }, function (data) {
											var container = $('#results-container');
											var item = $('<span>').html(data);
											container.append(item);
										});
									});
								});
							
								$(function() {
									$('.fc-content').dblclick(function () {
										var value = $('#id').val();
										//console.log(value);
										var container = $('#results-container');
										container.empty();
										$.get('service.php', { title: value }, function (data) {
											var item = $('<span>').html(data);
											container.append(item);
										});
									});
								});
						</script> 

però al doppio click sull'evento non mi restituisce i valori :/

[mzanella]

I pulsanti con la classe fc-content esistono già quando il documento viene costruito, o vengono generati dinamicamente?

Esistono già al caricamento di una pagina (sono scritti nel db e caricati nella pagina tramite PHP


può centrare il fatto che il calendario non è costruito dalla pagina index.php ma viene elaborata da un'altra pagina e chiamata dalla index nel seguente modo:

 <div class="col-lg-12 text-center">
                <h1>FullCalendar BS3 PHP MySQL</h1>
                <p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
                <div id="calendar" class="col-centered">
                </div>
            </div>

E VIENE CARICATO NEL DIV CON ID "CALENDAR"

[mzanella]

parlo dei pulsanti che fanno parte del DOM, non delle informazioni a essi associati.
Materialmente i <div class="fc-content">...</div> sono creati contestualmente alla pagina, o dinamicamente in un secondo momento, per esempio da qualche libreria?

Di solito il motivo più probabile per cui un event listener non funziona è che l'elemento a cui dovrebbe essere associato è stato creato dopo il tentativo di associazione.