[AJAX]Aggiorna select

**rasega** · 19-06-2007, 15:32

Ciao,
vorrei fare in modo che una select venga aggiornata nel momento in cui da una finestra aperta in pop-up inserisco un nuovo elemento nel db.
Il problema credo sia un tipico caso di Ajax su cui sto sbattendo la testa, avrei altre soluzioni possibili ma questa mi pare la più bella...ma finora non ne sono andato fuori,
avete consigli please ??

Le basi di Ajax le ho...ma non oltre

**pietro09** · 19-06-2007, 15:47

Originariamente inviato da rasega
Ciao,
vorrei fare in modo che una select venga aggiornata nel momento in cui da una finestra aperta in pop-up inserisco un nuovo elemento nel db.
Il problema credo sia un tipico caso di Ajax su cui sto sbattendo la testa, avrei altre soluzioni possibili ma questa mi pare la più bella...ma finora non ne sono andato fuori,
avete consigli please ??

Le basi di Ajax le ho...ma non oltre

Ajax è una moda

. In questo caso io non lo userei di certo. Con ajax devi fare due chiamate al server: una nel popup per immettere i dati nel database; una nella finestra madre per aggiornare la lista.

Io farei così: quando aggiorno il popup, dal server mi costruisco un vettore javascript, formato json, del tipo [[value, text], [value, text], ... ]
Con questo vettore adesso è facile aggiornare la lista.

**rasega** · 19-06-2007, 15:50

JSON = zero x me al momento

Ne ho letto qualcosa ma non ne ho minimamente le nozioni...

**pietro09** · 19-06-2007, 15:54

Originariamente inviato da rasega
JSON = zero x me al momento

Ne ho letto qualcosa ma non ne ho minimamente le nozioni...

json

non dirmi che non sai produrre dal server (php, asp, asp.net) una stringa del genere?

[ ["a", "b"], ["c", "d"], ["e", "f"] ]

questo è un vettore javascript, in notazione json, di 3 elementi, ognuno di 2 elementi; insomma, quello che occorre per fare una select

**rasega** · 19-06-2007, 16:01

Il mio problema sta anche nel fatto che non saprei come aggiornare la pagina:
- come realizzo l'evento di chiusura del popup sulla pagina "madre" ?
- come aggiorni la select senza fare un refresh ? usi DOM e distruggi e ricrei l'elemento ?

**pietro09** · 19-06-2007, 16:04

Originariamente inviato da rasega
Il mio problema sta anche nel fatto che non saprei come aggiornare la pagina:
- come realizzo l'evento di chiusura del popup sulla pagina "madre" ?
- come aggiorni la select senza fare un refresh ? usi DOM e distruggi e ricrei l'elemento ?

esattamente come hai detto te. Adesso debbo chiudere. Se va bene riaccendo questa sera, meglio domani mattina

e se vuoi proseguiamo con un esempio.

**rasega** · 19-06-2007, 16:07

OK grazie, l'esempio mi sarebbe molto gradito, anche perchè la mia prima domanda al momento non ha risposta...ed è quella più cruciale

Grazie

**pietro09** · 20-06-2007, 13:22

Scusa del ritardo, ma... altri impegni

Allora, nell'esempio che ho, la pagina A ha una lista di nomi, e un link che apre un popup.

Il popup inserisce nomi nel database e aggiorna la lista di A

In A scrivo una procedura, popup_callbck(v) che si occupa, quando invocata, di aggiornare la lista. Il parametro v ricevuto è un vettore del tipo:
[ ["value", "text"], ["value", "text"], ["value", "text"] ]

la pagina è:

codice:

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Pagina senza titolo</title>

    <script language="javascript" type="text/javascript">
// <!CDATA[
var w_popup = null;
function apri_popup()
{
    w_popup = window.open('popup.aspx','popup','width=500px,height=500px,top=100px,left=400px');
}


//--------------------------------------------------------
// mi aspetto di ricevere un vettore del tipo
// [ ["value", "text"], ["value", "text"], ["value", "text"] ] 
//--------------------------------------------------------
function popup_callbck(v)
{
    //cancello la lista
    $("Select1").options.length = 0;
    
    //creo la lista
    for(var i = 0; i < v.length; i++)
    {
        lista_push($("Select1"), v[i][1], v[i][0]);
    }

}

//al posto di mettere document.getElementById("div1"), mettere $("div1")
//da prototype.js
function $() 
{
    var elements = new Array();

    for (var i = 0; i < arguments.length; i++) 
    {
        var element = arguments[i];
        if (typeof element == 'string')
            element = document.getElementById(element);

        if (arguments.length == 1)
            return element;

        elements.push(element);
    }

    return elements;
}

function lista_push(lista, testo, valore)
{
	lista.options[lista.options.length] = new Option(testo, valore);
}

// ]]>
    </script>

</head>
<body>
    

Apri popup</p>
    <select id="Select1" style="width: 216px; height: 314px" size="10"></select>
</body>
</html>

<script runat="server">

</script>

Il popup, quando aggiorna il database, nell'evento load può invocare quella funzione con qualcosa del genere:

if(dati && opener && opener.popup_callbck)
opener.popup_callbck(dati);

la variabile dati deve contenere il vettore di prima; come farlo dipende dal server, php, asp o altro

**rasega** · 20-06-2007, 14:32

Grazie x l'esempio, troppo gentile !!
Credo però di non capire o forse non ho idea di come funzioni questa idea:
come esegui una funzione presente in una pagina A (quella della select) da una pagina B (il popup) ?
La mia prima idea era quella di utilizzare l'evento onFocus sulla pagina A per eseguire l'aggiornamento della select nel momento in cui il popup lascia il focus, ma rischia di creare un po' di problemi.
C'è da dire che potrei risolvere il problema così:
invece di aprire un popup metto un layer nascosto con la form di registrazione dei dati, registro i dati usando Ajax (ma dovrei capire come...!!

) e poi aggiorno la select e ri-nascondo il layer.
L'uso del layer eviterebbe anche i noti problemi dei blocchi popup...

**pietro09** · 20-06-2007, 14:54

Originariamente inviato da rasega
Grazie x l'esempio, troppo gentile !!
Credo però di non capire o forse non ho idea di come funzioni questa idea:
come esegui una funzione presente in una pagina A (quella della select) da una pagina B (il popup) ?
La mia prima idea era quella di utilizzare l'evento onFocus sulla pagina A per eseguire l'aggiornamento della select nel momento in cui il popup lascia il focus, ma rischia di creare un po' di problemi.
C'è da dire che potrei risolvere il problema così:
invece di aprire un popup metto un layer nascosto con la form di registrazione dei dati, registro i dati usando Ajax (ma dovrei capire come...!!

) e poi aggiorno la select e ri-nascondo il layer.
L'uso del layer eviterebbe anche i noti problemi dei blocchi popup...

Dunque, io ho usato un popup, dato che si parlava di popup. Dopotutto non disturba i browser perchè il blocco, in maniera predefinita, si verifica solo quando si tenta di aprire i popup in automatico, e non al click dell'utente.

Io, nel popup, ho utilizzato ajax. Il pulsante che fa l'aggiornamento fa:

codice:

function Button1_onclick() 
{
    var url_action = "?comando_ajax=archivia_dati";
    var parametri = "p_nome=" + encodeURIComponent($("Text1").value);
    
    new Ajax.Request(url_action, { onComplete:showResponse, parameters:parametri } );
    function showResponse(originalRequest)
    {
        var t = originalRequest.responseText;
		$("TextArea1").value = t;
		
		//parseJSON
        try
        {
		    var j = eval("(" + t + ")");
            if(j.record.errore)
            {
                alert(j.record.messaggio);
            }
            else
            {
                if(j.record.dati && opener && opener.popup_callback)
                    opener.popup_callback(j.record.dati);
                    
                $("Text1").value = "";
                $("Text1").focus();
            }

        }
        catch(e)
        {
	        alert(e.name + ": " + e.message);
        }
		
		
    }

}

ho utilizzato prototype. Se vuoi ti passo la pagina intera, se serve

comunque, non è necessario ajax. Basta, al submit della pagina, scrivere col linguaggio server usato, per esempio in asp: var dati = <%=dati%>; nell'evento load della pagina***

Discussione: [AJAX]Aggiorna select

Strumenti discussione

Ricerca discussione

Visualizza

[AJAX]Aggiorna select

Re: [AJAX]Aggiorna select

Permessi di invio