AJAX: caricare 2 contenuti diversi con un solo click

[metatad]

É possibile, con un solo click (un unico link), caricare contenuti diversi in due differenti div ?
Sapete indicarmi qualche tutorial / esempio su cui studiiare?
Grazie,

[dvjack]

intendi con una sola chiamata asincrona? non ci sono problemi per questo...quando ti arriva il response della chiamata, sapendo come è fatto ti estrai in maniera opportuna i dati che andranno ad aggiornare 2 o + elementi....se invece intendi fare 2 chiamate ajax su un unico link, allora io proporrei una chiamata "normale" verso una pagina che aggiorna tutti gli elementi...
Sinceramente non saprei indicarti esempi/tutorial al riguardo, magari qualcun altro conosce qualche link...

[metatad]

premesso che uso AJAX in combinazione con PHP, quello che vorrei è, cliccando un link, cambiare il contenuto di due diversi div presenti nella pagina.
Quindi per me nella questione non è rilevante il come, ma il cosa - in questo caso, l'aggiornamento contemporaneo di due contenuti diversi.
Io uso questo JS:

function createRequestObject() { 
var ro; 
var browser = navigator.appName; 
if (browser == "Microsoft Internet Explorer") { 
ro = new ActiveXObject("Microsoft.XMLHTTP"); 
} else { 
ro = new XMLHttpRequest(); 
} 
return ro; 
} 
var http = createRequestObject(); 
function sndReq(action) { 
http.open('get', 'content.php?action='+action); 
http.onreadystatechange = handleResponse; 
http.send(null); 
} 
function handleResponse() { 
if (http.readyState == 4) { 
var response = http.responseText; 
document.getElementById("row1").innerHTML = response;
    } 
}
function handleResponse() {
if (http.readyState == 4) {
var response = http.responseText;
var el=document.getElementById("row1");
el.innerHTML = response;
el.scrollTop=0;
    }
} 

in combinazione con questo PHP (nella pagina 'content.php'):

switch($_REQUEST['action']) {
case 'art': $content = "art";break;
case 'bio': $content = "bio";break;
case 'client': $content = "client";break;
case 'pfolio': $content = "pfolio";break;
case 'mail': $content = "mail";break;
        } 

seguito poi dai vari if... else che definiscono il contenuto da caricare.
In questo modo, però, aggiorno il div row1, ma ne ho anche un'altro da aggiornare...
e quindi?

[dvjack]

avevo capito il concetto..forse però mi sono spiegato male, cmq visto che hai postato anche un pò di codice ci si spiega prima...
Quello che tu devi fare sostanzialmente è modificare la funzione handleResponse.
Se vuoi aggiornare due div con lo stesso testo che ricevi dalla chiamata ajax fai cosi:

function handleResponse() {
            if (http.readyState == 4) {
                                  var response = http.responseText;
                                  var el=document.getElementById("row1");
                                  var el2=document.getElementById("row2");
                                  el.innerHTML = response;
                                  el2.innerHTML = response;
                                  el.scrollTop=0;                      
                                                }
}

Se invece devi aggiornare con due testi diversi, dei trovare il modo di dividere la variabile response in due sottostringhe, magari dividendolole con una sequenza di caratteri strani (es. #!#!#!), cosi prima di fare l'innerHTML sui due elementi ti basta ricavarti le due sottostringhe con un substring()
Piccola Nota:
Hai postato due funzioni handleResponse...quindi io ho utlizzato l'ultima, visto che sostituisce la precedente...

[metatad]

ok, grazie...
provo (devo caricare 2 testi diversi, nei 2 div...)

[metatad]

Allora, ho provato così:

function handleResponse() {
if (http.readyState == 4) {
var response = http.responseText;

var splitString = response.split("§")

var text1 = splitString[0];
var text2 = splitString[1];
var el = document.getElementById("row1");
el.innerHTML = text1;
el.scrollTop=0;
var el2 = document.getElementById("row2");
el2.innerHTML = text2;
el2.scrollTop=0;
} 

mentre nel file content.php inserisco un segno § tra i due diversi blocchi di testo.
Però, quando faccio il test online, nel primo div non viene caricato niente, mentre nel secondo mi scrive undefined...
Dove sbaglio?

[pietro09]

prova a scaricarti questo:
http://webreflection.blogspot.com/20...asic-call.html

poi prova questo esempio

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim comando_ajax As String = Me.Request.QueryString("comando_ajax")
        If comando_ajax = "1" Then
            Dim testo1 As String = "xxxxxxxxxx"
            Dim testo2 As String = "yyyyyyyyyy"
            Dim testo As String = testo1 & "|" & testo2
            
            Me.Response.Write(testo)
            Me.Response.End()
        End If
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="../js/abc.js"></script>

<script language="javascript" type="text/javascript">
// <!CDATA[




function Button1_onclick() 
{
    //url richiesta ajax con parametro get
    var url = "a.aspx?comando_ajax=1";
    
    //parametri passati via post
    var parametri = {colore:"rosso", numero:999, vettore:[1,2,3,4]};
    
    //imposto funzione di ritorno
    parametri.onLoad = onload;
    parametri.onError = onerror;
    
    //richiesta ajax
    ABC(parametri, url);
    
    function onload(request, elapsedTime)
    {
        var r = request.responseText;
        var rs = r.split("|");
        
        document.getElementById("div1").innerHTML = rs[0];
        document.getElementById("div2").innerHTML = rs[1];
    }
    
    function onerror(xhr, elapsedTime)
    {
        alert("Errore di trasmissione: " + xhr.status);
    }

}

// ]]>
</script>

</head>
<body>
    <form id="form1" runat="server">
        http://webreflection.blogspot.com/20...asic-call.html
        


        <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
        


        <div id="div1"></div>
        <div id="div2"></div>
    </form>
</body>
</html>

[metatad]

Ok, ho risolto... il problema stava nel carattere usato per splittare...
così funziona:

function handleResponse() {
if (http.readyState == 4) {
var response = http.responseText;

var splitString = response.split("#####")
var text1 = splitString[0];
var text2 = splitString[1];
var el = document.getElementById("row1");
el.innerHTML = text1;
el.scrollTop=0;
var el2 = document.getElementById("row2");
el2.innerHTML = text2;
el2.scrollTop=0;
    }
} 

Grazie a tutti!