Jquery AutoComplete

[GANDULE]

Ciao a tutti...

Sto cercando di utilizzare una textbox, stile facebook, quindi con il suggerimento delle informazioni da inserire.

In precedenza utilizzavo l'AjaxControlToolkit di Asp.NET poi però mi è stato suggerito di utilizzare JQuery.

ho trovato alcuni esempi, però nonostante credessi di aver impostato correttamente tutto il codice; non mi viene richiamato il WebService. Vi posto il mio codice...


Questa è la mia parte Jquery

<script type="text/javascript">
        $(document).ready(function () {
            $(".tb").autocomplete({ 
                source: function (request, response) { 
                    $.ajax({ 
                        type: "POST", 
                        contentType: "application/json; charset=utf-8",
                        url: "AutoCompleteDataSource.asmx/SuggestedCustomers", 
                        dataType: "json", 
                        data: "{'Value':'" + request.term + "'}", 
                        success: function (data) { 
                                response($.map(data.d, function (item) { 
                                    return { 
                                        label: item.Name + '(' + item.Value + ')', 
                                        value: item.Name 
                                    } 
                                })) 
                        } 
                    }); 
                }, 
                minLength: 2, 
                select: function (event, ui) { 
                     
                }, 
                open: function () { 
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
                }, 
                close: function () { 
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
                }, 
                error: function (XMLHttpRequest, textStatus, errorThrown) { 
                    alert(textStatus); 
                } 
            }); 
 
        }); 
    </script>

Questa la mia TextBox

<asp:TextBox ID="AutoCompleteText" runat="server" CssClass="tb"></asp:TextBox>

e infine il mio Web Method del Web Service...

[WebMethod]
    public string[] SuggestedCustomers(string q)
    {
        connStr = ConfigurationManager.ConnectionStrings["ACOConnectionString"].ConnectionString;
        conn = new SqlConnection(connStr);

        SqlCommand cmd = new SqlCommand();
        cmd.CommandText = "SELECT idGalleria, Titolo FROM Galleria WHERE Titolo LIKE '%" + q +"%'";
        cmd.Connection = conn;
        List<string> items = new List<string>();
        try
        {
            conn.Open();
            SqlDataReader reader = cmd.ExecuteReader();
            // Add items into string array
            
            while (reader.Read())
            {

                items.Add(reader["idGalleria"].ToString() + " " + reader["Titolo"].ToString());
            }

            // Return array
            return items.ToArray();
        }
        catch (Exception ex)
        {
            items.Add(ex.ToString());
            return items.ToArray();
        }
    }

Forse mi manca ancora qualche pezzo di codice da inserire?

[Vindav]

puoi provare ad aggiungere la proprietà statusCode per verificare perche non riesci a raggiungere il servizio:

statusCode: {
404: function() {
alert('page not found');
}
}

inserisci anche 500 server error e 503 accesso negato

p.s. la chiamata ajax necessita come dato di ritorno un oggetto json ma dal codice che hai postato mi sembra di capire che torna un array

p.p.s.
puoi aggiungere anche la funzione di callback error per gestire eventuali errori

error: function() { alert("error"); }

[GANDULE]

Mah... dove devo aggiungere questa porzione di codice?

[GANDULE]

Mamma che follia...

Ma come può non funzionare... cioè deve richiamare solo quel file... ho messo un break point sul webservice... quindi almeno il richiamo dovrebbe funzionare...

[Vindav]

$.ajax({ 
                        type: "POST", 
                        contentType: "application/json; charset=utf-8",
                        url: "AutoCompleteDataSource.asmx/SuggestedCustomers", 
                        dataType: "json", 
                        data: "{'Value':'" + request.term + "'}", 
                        success: function (data) { 
                                response($.map(data.d, function (item) { 
                                    return { 
                                        label: item.Name + '(' + item.Value + ')', 
                                        value: item.Name 
                                    } 
                                })) 
                        }, 
error: function() { alert("error"); },
statusCode: {
404: function() {
alert('page not found');
}
}
                    });

Cmq se dici che al webservice ci arriva significa che va in errore il "tratto di ritorno" quindi ti domando nuovamente

p.s. la chiamata ajax necessita come dato di ritorno un oggetto json ma dal codice che hai postato mi sembra di capire che torna un array

[GANDULE]

No scusa... forse mi sono spiegato male...

Ma al WEB SERVICE non ci arriva... è questo che mi domandavo... se almeno fosse il valore di ritorno... ma non effettua proprio la chiamata al servizio... non credo possa essere un problema di path...

[XWolverineX]

Non è così facile come pensi.
Comincia a capire il problema con http://www.fiddler2.com/fiddler2/

[GANDULE]

Mah... forse la cosa è troppo complicata?

Leggendo le guide JQuery tutto viene descritto in modo facile, come se bastasse inserire il codice, personalizzarlo... qui addirittura pensavo fosse proprio la base di ajax, cioè richiamare semplicemente un webservice...

mi pare di capire invece che non sia così...

Ad ogni modo con questo Fiddler2 dovrei debuggare la chiamata ajax?

[Vindav]

per debuggare io ti consiglio firebug(è un plugin di firefox)...

Hai provato ad inserire il codice che ti ho detto?

[GANDULE]

Si... Firebug si... infatti ho messo un break point sulla funzione autocomplete... che però non viene richiamata quando digito i caratteri sul campo di testo...

Ho inserito il tuo codice, ma dato che non viene richiamata la funzione autocomplete in teoria non viene eseguito... cioè non prova neanche a considerarlo il webservice... quindi non può restituire(eseguire) l'alert con l'errore...

giusto?


Quindi potrebbe essere che manca qualcosa che associ quella funzione alla textbox?