Home / Tutoriale

Actualizare selecturi dependente cu Ajax

Sunt aplicatii in care utilizatorul avand la dispozitie o multitudine de posibilitati acesta  este pus s a minimize acesta multime de posibilitati prin selectarea succesiva a unor criterii.
In exemplu de fata vreau ca utilizatorui sa isi specifice judetul , orasul si strada unde se afla.Pentru acesta , eu am la dispozitie in baza mea de date un tabel cu toate judetele din Romania , cu toate orasele
si judetele de care apartin si nu in ultimul rand cu toate strazile si orasele de care apartin acele strazi.

index.html

In pagina xhtml avem ca de obicei incluse cele 3 fisere javascript , primul inlcuzand libraria jQuery cel de al doilea fiind preloader ul si cel de al  treilea fisierul in care tin codul din spatele aplicatiei noastre.
Nu lipseste div ul cu preloader ul initial ascus si div ul cu id ul container in care avem 3 selecturi goale care au id urile judet , oras si strada.Acestea vor fi modificate dinamic in functie de alegerile utilizatorului.Ultimul div va afisa id urile din tabelele Mysql ce corespuns judetul , orasului si respectiv strazii alese.

<html>
<head>
<title> Pagina Index </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript" src="js/preloader.js"></script>
</head>
<body>
     <div style="display:none;" id="loading">
        <img alt="prealoder" title="Se incarca" src='images/preloader.gif'/>        
     </div>    
     <div id="container">        
          <select id="judet"></select>
          <select id="oras"></select>
          <select id="strada"></select>    
     </div>  
     <div id="rezultat" />
</body>
</html>        
           

 

preloader.js

Script-ul care se ocupa cu prealoader-ul

//Pt centrarea preloader-ului
var Page = new Object();
Page.width;
Page.height;
Page.top;
Page.getPageCenterX = function ()
{
       var fWidth;
       var fHeight; 
       //For old IE browsers 
       if(document.all) 
       { 
              fWidth = document.body.clientWidth; 
              fHeight = document.body.clientHeight; 
       } 
       //For DOM1 browsers 
       else if(document.getElementById &&!document.all)
       { 
              fWidth = innerWidth; 
              fHeight = innerHeight; 
       } 
       else if(document.getElementById) 
       { 
              fWidth = innerWidth; 
              fHeight = innerHeight; 
       } 
       //For Opera 
       else if (is.op) 
       { 
              fWidth = innerWidth; 
              fHeight = innerHeight; 
       } 
       //For old Netscape 
       else if (document.layers) 
       { 
              fWidth = window.innerWidth; 
              fHeight = window.innerHeight; 
       }

       Page.width = fWidth;
       Page.height = fHeight;
       Page.top = window.document.body.scrollTop;
}
jQuery().ajaxStart(showPreloader);
jQuery().ajaxStop(hidePreloader);

function showPreloader()
{
       Page.getPageCenterX();
       $('#loading').show(); 
       $('#loading').css('top' ,(Page.top + Page.height/2)-100);
       $('#loading').css('left',Page.width/2-75); 
       $('#loading').css('position','absolute');
}
function hidePreloader()
{
       $('#loading').hide();
}

code.js

<h3>code.js</h3>

In prima faza atunci cand utilizatorul intra pentru prima oara pe pagina se face o cerere Ajax catre scrip ul getData.php
care primind  ca parametru 'ce=judet' va returna toate optiunile pentru select - ul cu judete

Urmatoarele blocuri de cod vor realiza cereri Ajax catre acelasi script php atunci cand utilizatorul alege o optiune din cele
disponibile. 
$("select#judet").change(function()  Acest bloc de cod realizeaza apelul unei functii callback atunci cand se schimba select ul cu
  id ul judet.  
  Am fi putut foarte bine ca in loc de $("select#judet").change(function() sa avem  $("#judet").change(function() dar pentru aplicatii
  mai mare este bine sa optimizam codul astfel avand select in fata# vom limita numarul de obiect DOM pe care jQuery il va parcurge pentru
  a detecta evenimentul.
Ajax ul va trimite ca parametrii ce anume s-a modificat si care este voloare nou aleas iar in functie de alegerile dorite se vor popula anumite
  selecturi.
In final div-ul cu id ul rezultat va contine id urile judetului , orasului si strazii alese de catre utilizator..
$(document).ready(function(){
    //atunci cand dom ul este pregatit populam primul select cu toate judetele care le avem in tabelul tbl_judete          
  $.ajax({
      method:'GET',  
      data : 'ce=judet',
    url: "php/getData.php",          
    success: function(select)
     {
            $('select#judet').html(select);            
     },
    error : function(mesaj){
         alert('eroare'+mesaj);      
    }
    
  });  
 });
 
 // $(function() este echivalent cu $(document).ready(function() , un mod de a scrie mai putin cod
$(function(){
       
    
    //Atunci cand utilizatorul alege un judet  Ajax ul trimite o cerere catre  script ul getData
    // cu avand ca paramentru id ul judetului selectat care este luat din valoarea optiunii judetului selectat
    // Scriptul va returna optiunele cu toate orasele din respectivul judet ales si va goli select ul cu strazi    
 
    $("select#judet").change(function(){
       var judet_id = $(this).val();                 
       $.ajax({  
         method:'GET',
         data : 'ce=oras&judet_id='+judet_id,              
       url: "php/getData.php",     
        success: function(select)
         {           
           $('#oras').html(select);
           $('#strada').html('');
         }   
      });        
    })
    
    
    //Atunci cand utilizatorul alege un oras Ajax ul trimite o cerere catre  script ul getData
    // cu avand ca paramentru id ul orasului selectat iar scrip ul va popula selectul cu strazile respectivului oras    

    $("select#oras").change(function(){     
       var oras_id = $(this).val();
       $.ajax({  
         method:'GET',
         data : 'ce=strada&oras_id='+oras_id,              
       url: "php/getData.php",     
        success: function(select)
         {    
           $('#strada').html(select);    
         }   
      });
        
    })
    
    //Atunci cand utilizatorul modifica si strada vom afisa in div ul cu id ul rezultat Id urile judetului , orasului si respectiv strazii
    //alese de catre acesta

    $("select#strada").change(function(){        
             var rezultat = 'Id Judet = '+$('#judet').val()+'<br/> Id Oras ='+$('#oras').val()+'<br/> Id Strada = '+$('#strada').val();           
           $('#rezultat').html(rezultat);               
      });
        
    
    
 })

creare.sql

Script-ul Mysql de creare a tabelelor

CREATE TABLE `tbl_judete` (                                                       
              `id` int(10) unsigned NOT NULL auto_increment,                                  
              `name` varchar(50) ,
              PRIMARY KEY  (`id`)                                                             
            )
    CREATE TABLE `tbl_orase` (                                                         
             `id` int(10) unsigned NOT NULL auto_increment,                                   
             `name` varchar(50) ,
             `judet_id` int(10) ,
             PRIMARY KEY  (`id`)                                                              
           )       
    CREATE TABLE `tbl_strazi` (                                                        
              `id` int(10) unsigned NOT NULL auto_increment,                                   
              `name` varchar(50) ,
              `orase_id` int(10) ,
              PRIMARY KEY  (`id`)                                                              
            )

 

conectare.php

Acest script realizeaza conectarea la baza de date

<php
   $host       = "localhost";  
   $user       = "root";
   $parola     = "parola";
   $bazadedate = "ajax";
   
   
   
   global $conexiune;
    $conexiune = mysqli_connect($host,$user,$parola)  or die("Conectare esuata,  " . mysqli_error($conexiune)); 
    mysqli_select_db($conexiune,$bazadedate)  or die("Selectare baza de date esuata.");  
?>

getData.php

Script ul care returneaza optiune in functie de parametrii primiti prin $_GET de Ajax.

<?php
 include('conectare.php');
      
       //in functie de cererea primita aleg tabelul dorit si conditia
  switch ($_GET['ce']) {
        case 'judet' :  {  $content = '<option selected="selected" value="">-judet-</option>';  $tabel = 'tbl_judete';   break;}
        case 'oras'  :  {  $content = '<option selected="selected" value="">-oras-</option>';   $tabel = 'tbl_orase';    $conditie = "WHERE judet_id={$_GET['judet_id']}";  break;}
        case 'strada':  {  $content = '<option selected="selected" value="">-strada-</option>'; $tabel = 'tbl_strazi';   $conditie = "WHERE orase_id={$_GET['oras_id']}";   break;}
        default:
            break;
      }
       
      $sql = "SELECT id,name FROM $tabel $conditie";         
      $result = $conexiune->query($sql);     
      if (!$result)  echo mysqli_error($conexiune);     
      while ($option = mysqli_fetch_array($result))
       {
         $content .= '<option value="'.$option['id'].'">'.$option['name'].'</option>';        
       }
     
       echo $content;
?>
Demo cod sursa

Nume:David
Comentariu:Am incercat sa rulez exemplul de mai sus pe pc pesonal si imi spune ca nu se poate conecta la baza de date. Mentionez ca nu am instalat mysqli_* ci doar mysql_*. Se poate sa fie vreo problema asta.Sau poate in sursa este vreo sintaxa gresita?
Nume:FrEeBoY
Comentariu:foarte tare frate , acum invat php , cand o sa trec la ajax o sa dau si pe aici ;) bafta
Nume:ppp
Comentariu:ppp
Nume:Alexandra
Comentariu:Sfat pentru cand ai timp: pana cand le traduci in limba romana, poti sa lasi aici pur si simplu un mesaj de genul: "Come back soon, page under construction. Choose 'romana' for the Romanian version of the tutorials." si poti sa scoti partea cu comentariile pana e gata.
Nume:emil
Comentariu:dchub://spacempire.zapto.orgdchub://c-zone.hopto.orgdchub://Xperts.dyndns.dkintrati si voi si dati /fav sunt cele mai sucare huburi... add hub in favorite
Adauga comentariu
*nu va fi afisat pe site
 
  • Hosting in timp real pe servere Linux si Windows
  • US 400

    Trafic / luna : 10 GB
    Conturi E-mail : 1000
    Subdomenii : 40
    Baze de date MySQL : 1
    Domenii parcate : 2
    Spatiu stocare : 400MB
    Pret : 6 euro/luna
    Cumpara
  • US 600

    Trafic / luna : 15 GB
    Conturi E-mail : 1000
    Subdomenii : 50
    Baze de date MySQL : 4
    Domenii parcate : 4
    Spatiu stocare : 600MB
    Pret : 8 euro/luna
    Cumpara
  • US 800

    Trafic / luna : 20 GB
    Conturi E-mail : 1000
    Subdomenii : 60
    Baze de date MySQL : 20
    Domenii parcate : 6
    Spatiu stocare : 800MB
    Pret : 10 euro/luna
    Cumpara
  • US 1000

    Trafic / luna : 25 GB
    Conturi E-mail : 1000
    Subdomenii : 80
    Baze de date MySQL : 20
    Domenii parcate : 10
    Spatiu stocare : 1000MB
    Pret : 14 euro/luna
    Cumpara
  • US 1200

    Trafic / luna : 35 GB
    Conturi E-mail : 1000
    Subdomenii : 100
    Baze de date MySQL : 20
    Domenii parcate : 15
    Spatiu stocare : 1200MB
    Pret : 20 euro/luna
    Cumpara