<Actualizar DropDownList utilizando Ajax ⁄ >

7633

2007-11-24

mySnippets php

Download

Bookmark This

Bem lá vai mais um snippet sobre uma das buzzwords do momento, Ajax. Praticamente o snippet todo será baseado no J de Ajax. Este será composto por várias classes. Para troca de informação com o servidor vou usar JSON (JavaScript Object Notation).
Já tinha falado sobre JSON num snippet anterior, podem dar uma vista de olhos ou então pelo Google acha-se um pouco de tudo ou ainda consultar o site oficial.

Iremos ter uma abordagem OOP no Javascript e recorrer também a Unobtrusive JavaScript, bem com tanta buzzword, espero que isto corra bem!

Basicamente o que este snippet irá exemplificar é uma situação em que temos 2 dropdowns encadeadas, em que a 2ª é baseada na escolha da 1ª, isto é, ao selecionarmos um item na 1ª dropdown, a 2ª vai ser preenchida com informação proveniente do servidor, baseada na opção escolhida. No código server-side não vou alongar-me muito, nem vai ser muito dinâmico, porque tenho as respostas hard-coded, este não era o principal objectivo do snippet e como tal iria só alongar ainda mais o texto. Mas geralmente comunica-se com a BD, vai-se buscar uns valores, etc, etc e devolve-se a resposta pretendida. Os pedidos são respondidos por um script PHP, mas podia ser outra coisa qualquer, desde que respeite o formato json aceite pelo script.

Vamos separar o código (essencialmente javascript) por vários ficheiros, para tentar uma maior aproximação a OOP.

Mas despachemos já o css, nada de especial, apenas mais do mesmo, como sempre:

body{
  font-family: Tahoma, Verdana, Arial;font-size: 8pt;
  color: #000;background: #fff;
}
 
#div_main{float: left}
 
#div_loading{}
 
h3{font-family: Consolas, Tahoma, Arial;font-size: 10pt;font-weight: bold;}
 
select, textarea, input{
  background-color: #FFFFD4;color: #000000;font-size: 8pt;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  border: 1px solid #004080;
}

-> Events.js - este ficheiro será responsável por adicionar ou remover eventos a elementos/ objectos da página, por ex. load da página, quanto um elemento é actualizado, etc, etc.

/**
 * Class Events - possui vários métodos/ propriedades estáticos comuns
 */
Events = function(){
}
 
/**
 * Adicionar Event
 *
 * Adaptada do seguinte URL
 * http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
 *
 * @param Object
 * @param Object
 * @param Object
 */
Events.AddEvent = function(obj, type, fn){
    if(!obj) return;
 
    this.RemoveEvent(obj, type, fn);
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
    }
    else {
        if (obj.attachEvent) {
            obj["e" + type + fn] = fn;
            obj[type + fn] = function(){
                obj["e" + type + fn](window.event);
            }
            obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
}
/**
 * Remover Event
 *
 * Adaptada do seguinte URL
 * http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
 *
 * @param Object
 * @param Object
 * @param Object
 */
Events.RemoveEvent = function(obj, type, fn){
    if (obj.removeEventListener) {
        try{obj.removeEventListener(type, fn, false);} catch(e){}
    }
    else{ 
        if (obj.detachEvent) {
            obj.detachEvent("on" + type, fn);
            obj[type + fn] = null;
            obj["e" + type + fn] = null;
        }
    }
}

-> Misc.js - Class estática, possui vários métodos de uso comum, como por ex. a criação do HttpRequest

/**
 * Class Misc - possui vários métodos/ propriedades estáticos comuns
 */
Misc = function(){
}
 
// ficheiro que vai responder aos pedidos
Misc.ServerFile = "ajax.php";
 
/**
 * Hack IE para ultrapassar problema cache pedidos get
 *
 * @param String
 */
Misc.AntiCacheRand = function(aurl){
    var rnd = encodeURI(Math.random());
    aurl += (aurl.indexOf("?") >= 0) ? "&foo=" + rnd : "?foo=" + rnd;
 
    return aurl;
};
 
/**
 * Mensagem a mostrar ao utilizador enquanto
 * a informação estiver a ser carregada
 *
 * @param String
 */
Misc.MsgLoading = function(div_name){
    var div = $(div_name);
 
    if (div.style.display != "block") {
        var msg_loading = "A carregar informação ...";
        var img = new HTMLControl("loading_animation");
        div.innerHTML = img.DoImage("loading.gif", msg_loading, 16, 16);
        div.style.display = "block";
    }
    else {
        div.style.display = "none";
    }
};
 
/**
 * Criar request
 */
Misc.CreateHttpRequest = function(){
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
 
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/html');
        }
    }
    else 
        if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } 
            catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch (e) {
                }
            }
        }
 
    if (!http_request) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
 
    return http_request;
};
//fim class Misc

-> HtmlControl.js - Class que permite criar/ actualizar alguns elementos Html, para este snippet apenas adicionei os métodos necessários

/**
 * Class responsável pela criação de objectos html
 *
 * @param String id -> nome do objecto
 */
function HTMLControl(id){
    this.id = id;
 
    /**
     * Método Privado
     *
     * Gerar atributos name e id
     *
     * @return String
     */
    var _GenerateID = function(){return " name='" + id + "' id='" + id + "' ";};
 
    /**
     * Método Privado
     *
     * Adicionar elemento option à dropdown
     *
     * @param String
     * @param String
     *
     */
    var _DropdownListAddOption = function(value, description){
        $(id).options.add(_DropdownListCreateOption(value, description));
    }
 
    /**
     * Criar element option
     *
     * @param String
     * @param String
     */
    var _DropdownListCreateOption = function(value, description){
        var ddlOption = document.createElement("option");
        ddlOption.value = value;
        ddlOption.text = description;
 
        return ddlOption;
    }
    /**
     * Método Privado
     *
     * Limpar itens da dropdown
     */
    var _DropdownListClear = function(){$(id).options.length = 0;}
 
    /**
     * Construir imagem
     *
     * @param String src
     * @param String title
     * @param int width
     * @param int height
     * @return String
     */
    this.DoImage = function(src, title, width, height){
        title = " title='" + title + "' alt='" + title + "' ";
        return "<img src='" + src + "' width='" + width + "' height='" + height + "' " + _GenerateID() + title + " />";
    };
 
    /**
     * Construir dropdown list
     *
     * @param Object
     *
     */
    this.DoDropdownList = function(arrOptions){
        var arr = eval(arrOptions);
 
        _DropdownListClear();
        var ddl = $(this.id);
        var i, value, description;
        var count = arr.options.length;
 
        for (i = 0; i < count; i++) {
            value = arr.options[i].value;
            description = arr.options[i].description;
 
            _DropdownListAddOption(value, description);
        }
    }
};
//fim class HTMLControl
 
/**
 * Obter um elemento
 *
 * nota: para usar este método a class HtmlControl
 * não precisa de estar instanciada
 *
 * @param String
 */
$ = function(element){return document.getElementById(element);};

-> Ajax.js - A class responsável para que o processo de actualização seja executado, vai fazer uma chamada ao servidor e vai processar a sua resposta, chamando os métodos necessários para tal. Recebe a resposta no formato json, para que o javascript consiga "perceber" o que é a resposta, vamos recorrer ao eval.

/**
 * Class Ajax
 */
Ajax = function(){};
 
Ajax.DivLoadingName="div_loading";
 
/**
 * Actualizar dropdown
 */
Ajax.UpdateDropdownList = function(ddListName,ddSubListName){
    Misc.MsgLoading(this.DivLoadingName); //iniciar loading
 
    var ddListValue = $(ddListName).value;
    var url = Misc.AntiCacheRand(Misc.ServerFile + "?accao=get_options&value=" + ddListValue);
 
    var http_request = Misc.CreateHttpRequest();
 
    http_request.onreadystatechange = function(){
        var state = http_request.readyState;
 
        //pedido completo e respondido com sucesso
        if (state == 4 && http_request.status == 200) {
            var result = http_request.responseText;
 
            var ddSubList = new HTMLControl(ddSubListName);
 
            ddSubList.DoDropdownList(eval(result));
 
            //voltar a adicionar o event na dropdown "principal"
            Events.AddEvent(ddListName, "change", function (){Ajax.UpdateDropdownList(ddListName,ddSubListName);});
            Misc.MsgLoading(Ajax.DivLoadingName); //finalizar loading
        }
    }
 
    http_request.open("GET", url, true);
    http_request.send(null);
}

-> ajax.php - vai receber o pedido, processá-lo e devolver uma resposta, como tinha dito anteriormente, neste snippet esta parte não está elaborada, como poderão ver as respostas estão hard-coded, mas aqui podem por ex. ir buscar os valores a uma base de dados, xml, txt, [you name it] ...; porém coloquei-o só para que possam ver o formato com que terá de ser retornado o objecto json

<?php
// ficheiro responsável pela comunicação com a base de dados
// e devolve as respostas aos pedidos
$accao=$_GET["accao"];
 
if($accao=="get_options"){
  $value=$_GET["value"];
 
  if($value=="japao"){
    $result = "
      ({ 
    		\"options\": [
          {\"value\": \"\",\"description\": \"(escolha um item)\"}, 
          {\"value\": \"aikido\",\"description\": \"Aikido\"}, 
          {\"value\": \"kendo\",\"description\": \"Kendo\"},
          {\"value\": \"sumo\",\"description\": \"Sumo\"},
          {\"value\": \"shurikenjutsu\",\"description\": \"Shurikenjutsu\"}
          ]
      });
    ";
  }
 
  else if($value=="china"){
    $result = "
      ({ 
        \"options\": [
          {\"value\": \"\",\"description\": \"(escolha um item)\"}, 
          {\"value\": \"tai_chi_chuan\",\"description\": \"Tai chi chuan\"}, 
          {\"value\": \"shaolin_kung_fu\",\"description\": \"Shaolin kung fu\"},
          {\"value\": \"shuai_jiao\",\"description\": \"Shuai Jiao\"},
          {\"value\": \"wing_chun\",\"description\": \"Wing Chun\"}
          ]
      });
    ";
  }
 
  else if($value=="korea"){
    $result = "
      ({ 
        \"options\": [
          {\"value\": \"\",\"description\": \"(escolha um item)\"}, 
          {\"value\": \"taekwondo\",\"description\": \"Taekwondo\"}, 
          {\"value\": \"hapkido\",\"description\": \"Hapkido\"},
          {\"value\": \"taekyon\",\"description\": \"Taekyon\"},
          {\"value\": \"soobak\",\"description\": \"Soobak\"}
          ]
      });
    ";
  }
  else{
    $result = "
      ({ 
        \"options\": [
          {\"value\": \"\",\"description\": \"(escolha um pais)\"} 
          ]
      });
    ";
    }
}
 
echo $result; //imprimir/devolver resposta
?>

-> Init.js - como o nome indica é aqui que tudo começa, neste snippet tem várias funcionalidades: vai preencher a 1ª dropdown, tal não seria necessário, podiamos ter criado a dropdown normalmente com html ou por ex. dinamicamente, porém aqui vamos recorrer à class HtmlControl para a construir, as opções terão de satisfazer um formato json da mesma forma que o fazemos aquando da actualização da 2ª dropdown; serve também igualmente de exemplo, que não é preciso saber Html para construir uma dropdown, apesar do muito fácil que isso seja :); terá também a função de criar o evento "onchange" na dropdown, para que aquando de uma alteração na opção a 2ª dropdown seja actualizada, neste snippet escolhi unicamente o evento "onchange" como exemplo, mas claro que poderão ser outras.

init = function (){
  var arrOptions = {
	  "options": [
	    {"value": "","description": "(escolha uma opção)"}, 
	    {"value": "japao","description": "Japão"}, 
	    {"value": "china","description": "China"},
	    {"value": "korea","description": "Korea"}
	  ]
  };
 
  var dropdownlist = "ddList";
  var dropdown_sublist = "ddSubList";
 
  var ddList = new HTMLControl(dropdownlist);
  ddList.DoDropdownList(arrOptions);
  Events.AddEvent($(dropdownlist), "change", function (){Ajax.UpdateDropdownList(this.id,dropdown_sublist);});
}
 
Events.AddEvent(window, "load", init);

-> index.htm - guess ^_-

<html>
    <head>
        <script type="text/javascript" src="Misc.js"></script>
        <script type="text/javascript" src="HtmlControl.js"></script>
        <script type="text/javascript" src="Events.js"></script>
        <script type="text/javascript" src="Ajax.js"></script>
        <script type="text/javascript" src="Init.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    </head>
    <body>
        <h3>Escolha um país e saiba algumas das suas artes marciais</h3>
 
        <div id="div_main">
	        País:
	         <select name="ddList" id="ddList"></select>
	        Arte Marcial:
	         <select name="ddSubList" id="ddSubList">
	           <option>(escolha um país)</option>
           </select>
        </div>
        <div id="div_loading"></div>
    </body>
</html>

Ficam aqui 2 screenshots:

Qualquer erro/ dúvida é só dizer!

7633

2007-11-24

mySnippets php

Download

Bookmark This