22. sept 2008

Das Hölle: Kuidas YUI 's teha andmede laadimine comboboxi dünaamiliselt JSON abil

YUI siis, mis ta on, ütleme komplekt visuaalseid vahendeid/komponente yahoo javascript failide abil. Täpsemalt lugemiseks soovitan lehte http://developer.yahoo.com/yui/

Nii, minul oli vaja teha dünaamiline andmete laadimine comboboxi. AJAXi inimestele väga tuttav teema, enamasti siis juba ajax vastab õige süntaksiga. JSON vastused natuke teine teema... Küll oli valida, autocomplete, datatablet, buttonit, aga mitte ühtegi korralikku dünaamiliste andmete laadimist.

Et vähendada teiste vaeva (sain pähklist jagu), panen JSON näite siia.


var ds = new YAHOO.util.DataSource("http://myserver.com/users.php?");
ds.responseType = YAHOO.util.DataSource.TYPE_JSON;

ds.responseSchema =
{
resultsList: "ResultSet.Result",
fields: [{key:"ID",parser:YAHOO.util.DataSource.parseNumber},"NAME"]
};


var oCallback = {
success: function(oRequest,oResponse,oPayload)
{

if (!oResponse.error)
{
var jsonresp=oResponse.results;
var dobject=document.getElementById("asyncdata");
if (typeof(dobject)!="undefined")
{

while (dobject.firstChild)
{
dobject.removeChild(dobject.firstChild);
}


for (var i=0;i<jsonresp.length; i++)
{
var newOpt = document.createElement("option");
var txt = document.createTextNode(jsonresp[i].NAME);
newOpt.setAttribute("value",jsonresp[i].ID);
newOpt.appendChild(txt);
dobject.appendChild(newOpt);
// alert(jsonresp[i].NAME+" "+jsonresp[i].ID);
}
}
}
},
failure: function(oRequest,oResponse,oPayload)
{
alert("Error "+oResponse.responseText);
},
argument: ""
}

ds.sendRequest("action=showusers", oCallback);

Kommentaare ei ole: