Organizare mai multe select-uri cu ajax

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
sterica
Mesaje:285

Organizare mai multe select-uri cu ajax

De cateva zile ma chinui la o modalitatea de organizare a codului. Vreau sa fac urmatorul lucru: am doua selecturi si doua grafice dinamice in functie de valorile selectate din selecturi. Am incercat diferite variante urmarind si citind tutoriale pe google dar tot in ceata sunt.

PRIMUL GRAFIC:

Cod: Selectaţi tot

<form>
	<select id="frm_nume_chest" onchange="fetch_select();">
		<option value="1"> test 1</option>
		<option value="2"> test 2</option>
	</select>
</form>
<div id="higtchart_medie_gen" style="min-width:300px; height:400px; margin:0 auto"></div>
Valorile din form sunt preluate cu ajax:

Cod: Selectaţi tot

function fetch_select(){
	val_frm_nume_chest = $('#frm_nume_chest').val();
	$.ajax({
		type: 'POST',
		url: 'include/get_db.inc.php',
		data: { 
			frm_nume_chest: val_frm_nume_chest 
		},
		success: function (response) {
      		document.getElementById('higtchart_medie_gen').innerHTML=response;
      		columnChart( JSON.parse(response));
    	}
	});
}

function columnChart(data_v){
....
fisierul php care aduce valorile din BD:

Cod: Selectaţi tot

$ret =[]; //Array-ul cu datele care vor fi returnate, in format json
		$frm_nume_chest = $_POST['frm_nume_chest'];

		$sql = "SELECT 	....
				ORDER BY MEDIE DESC";
				
		$result = $conn->query($sql);
		if ($result->num_rows > 0) {

			while($row = $result->fetch_assoc()) {

    			$ret [] = [$row['NUME'] . ' ' . $row['PRENUME'], floatval($row['MEDIE'])];
			}

			if (count($ret) >1){
				echo json_encode($ret);
			}
			else {
				echo 'Nu sunt valori pentru userul selectat';
			}
		}
AL DOILEA GRAFIC
valorile din al doilea grafic depind si de selectiile din primul form

Cod: Selectaţi tot

<form>
	<select id="frm_intrebare" onchange="fetch_select_2();">
		<option value="1"> intr 1</option>
		<option value="2"> intr 2</option>
	</select>
</form>
<div id="higtchart_medie_gen" style="min-width:300px; height:400px; margin:0 auto"></div>
Valorile din form sunt preluate cu ajax:

Cod: Selectaţi tot

function fetch_select_2(){
	val_frm_nume_chest = $('#frm_nume_chest').val();
    val_frm_intrebare = $('#frm_intrebare').val();
	$.ajax({
		type: 'POST',
		url: 'include/get_media_intrebare.inc.php',
		data: { 
			frm_nume_chest: val_frm_nume_chest,
            frm_intrebare: val_frm_intrebare,
		},
		success: function (response) {
      		document.getElementById('higtchart_medie_intrebare').innerHTML=response;
      		columnChart2( JSON.parse(response));
    	}
	});
}

function columnChart2(data_v){
....
fisierul php care aduce valorile din BD, seamana foarte mult cu primul, difera doar sql-ul

Cod: Selectaţi tot

$ret =[]; //Array-ul cu datele care vor fi returnate, in format json
		$frm_nume_chest = $_POST['frm_nume_chest'];

		$sql = "SELECT 	....
				ORDER BY MEDIE DESC";
				
		$result = $conn->query($sql);
		if ($result->num_rows > 0) {

			while($row = $result->fetch_assoc()) {

    			$ret [] = [$row['NUME'] . ' ' . $row['PRENUME'], floatval($row['MEDIE'])];
			}

			if (count($ret) >1){
				echo json_encode($ret);
			}
			else {
				echo 'Nu sunt valori pentru userul selectat';
			}
		}
Ce nelamuriri am:
- <form> mai este necesar in cazul meu daca am selecturi, sau este necesar numai cand am inputuri?
- graficele vor creste si nu vreau sa fac cate un fisier pentru fiecare grafic cu functiile ajax si fisiere separat pentru codurile sql.

In momentul de fata am:
- index.php - contin selecturile si graficele
- grafic_1.js - cod ajax si cod grafic
- grafic_2.js - cod ajax si cod grafic
- grafic_1.php - preluarea datelor din BD si inserarea lor in primul grafic
- grafic_2.php - preluarea datelor din BD si inserarea lor in al doilea grafic

Vreau sa limitez numarul de fisiere la:
- index.php
- ajax_grafice.js
- get_bd_grafice.php

Cum pot face acest lucru?

Multumesc!
MarPlo Mesaje:4343
1. Daca folosesti ajax, nu mai e nevoie de <form>.
2. Ca sa folosesti mai multe <select>-uri cu functiile: fetch_select() si fetch_select_2(), poti face asa:
- HTML (index.php)

Cod: Selectaţi tot

<select id="frm_nume_chest1" onchange="fetch_select(this.id, 'higtchart_medie_gen');">
  <option value="1"> test 1</option>
  <option value="2"> test 2</option>
</select>

<select id="frm_intrebare" onchange="fetch_select_2('frm_nume_chest1', this.id, 'higtchart_medie_intrebare');">
  <option value="1"> intr 1</option>
  <option value="2"> intr 2</option>
</select>
<div id="higtchart_medie_gen" style="min-width:300px; height:400px; margin:0 auto"></div>
- Javascript (ajax_grafice.js)

Cod: Selectaţi tot

// id_sel=id of onchange selected item, id_show=id of element for response
function fetch_select(id_sel, id_show){
  val_frm_nume_chest = $('#'+ id_sel).val();
  $.ajax({
    type: 'POST',
    url: 'include/get_bd_grafice.php',
    data: {
      frm_nume_chest: val_frm_nume_chest
    },
    success: function (response) {
      document.getElementById(id_show).innerHTML=response;
      columnChart( JSON.parse(response));
   }
});

// id_sel1=id of first select item, id_sel=id of onchange selected item, id_show=id of element for response
function fetch_select_2(id_sel1, id_sel, id_show){
  val_frm_nume_chest = $('#'+ id_sel1).val();
  val_frm_intrebare = $('#'+ id_sel).val();
  $.ajax({
    type: 'POST',
    url: 'include/get_bd_grafice.php',
    data: {
      frm_nume_chest: val_frm_nume_chest,
      frm_intrebare: val_frm_intrebare,
    },
    success: function (response) {
      document.getElementById(id_show).innerHTML=response;
      columnChart2( JSON.parse(response));
     }
  });
}

function columnChart2(data_v){
//...
}
- php (get_bd_grafice.php)

Cod: Selectaţi tot

$ret =[]; //Array-ul cu datele care vor fi returnate, in format json

if(isset($_POST['frm_nume_chest'])){
  $frm_nume_chest = $_POST['frm_nume_chest'];
  $sql ="SELECT    ....  ORDER BY MEDIE DESC";

  //change $sql if 'frm_intrebare'
  if(isset($_POST['frm_intrebare'])){
    $frm_intrebare = $_POST['frm_intrebare'];
    $sql ="SELECT $frm_intrebare ....  ORDER BY MEDIE DESC";
  }
        
  $result = $conn->query($sql);
  if($result->num_rows > 0){
    while($row = $result->fetch_assoc()) {
      $ret[] = [$row['NUME'] . ' ' . $row['PRENUME'], floatval($row['MEDIE'])];
    }
  }
}

if(count($ret) >1) echo json_encode($ret);
else echo 'Nu sunt valori pentru userul selectat';
sterica Mesaje:285
multumesc mult de ajutor si pentru rabdarea cu mine
sterica Mesaje:285
MarPlo, varianta propusa de tine, imi genereaza un singur grafic ce preia valori din doua sql-uri, sper ca nu am citit gresit codul.
Fisierul index.php contine 2-5 grafice care sunt afisate simultan. Strucutra mea de pana acum este cam asa:

Cod: Selectaţi tot

index.php
+-------------------------------------------+
| +------------+             +------------+ | 
| | <select 1> |             | <select 2> | |
| +------------+             +------------+ |
+-------------------------------------------+

grafic_1.js                grafic_2.js
+-----------------+       +-----------------+
| AJAX + grafic 1 |       | AJAX + grafic 2 |
+-----------------+       +-----------------+

grafic_1.php                grafic_2.php
+---------------+           +---------------+
|  SQL grafic 1 |           |  SQL grafic 2 |
+---------------+           +---------------+


index.php
+-------------------------------------------+
| +----------------+     +----------------+ | 
| | <div grafic 1> |     | <div grafic 2> | |
| +----------------+     +----------------+ |
+-------------------------------------------+
Ce nu stiu este cum sa comasez grafic_1/2.js si grafic_1/2.php in aceleasi fisiere si ulterior sa le pot apela.
Multumesc!
MarPlo Mesaje:4343
Depinde cum ai codul html (id-urie la <select>-uri) si cum apelezi functiile. Acele functii js date tin cont de id-urile transmise la parametri.
- Poti sa studiezi codul dat si faci cum stii, inspirat din el.

Subiecte similare