Author Topic: Ajax select help (Read 5843 times)

intefix · « **on:** May 07, 2010, 12:29:45 »

Φτιάχνω μια σελίδα που θα τη βάλω σαν wrap στο ελξις...
Έχω 2 dropdown list. Ενότητες , κατηγορίες ας πούμε (τραβάνε τα δεδομένα από πίνακες και τα χώνουν στα select της σελίδας).
Πως 1) η κατηγορία να δείχνει μόνο αυτές που είναι στην ενότητα αν έχει επιλεγεί πρώτα η ενότητα
2) η να δείχνει κενό και να σε προτρέπει να επιλέξεις πρώτα την ενότητα

Το κομμάτι ajax θέλω τα υπόλοιπα δουλεύουν οκ...

Ευχαριστώ

datahell · « **Reply #1 on:** May 07, 2010, 19:35:57 »

Το βασικό κομμάτι αυτού που θες δεν είναι AJAX αλλά Javascript DOM.
Θα πρέπει να "παίξεις" με τα: createElement, appendChild, removeChild

Κάτι παρόμοιο με αυτό που θες έχω φτιάξει στην αναζήτηση του IOS Eshop.

Το AJAX είναι το εύκολο της υπόθεσης.
Κάνω copy-paste ένα παράδειγμα για το πως φτιάχνω εγώ AJAX εφαρμογές:

Code: [Select]

function iosajaxobj() {
    var xo;
    if(window.XMLHttpRequest){
        xo = new XMLHttpRequest();
    } else if (window.ActiveXObject){
        xo=new ActiveXObject("Msxml2.XMLHTTP");
        if (!xo) {
            xo=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xo;
}

var ioshttp = iosajaxobj();

function iosajaxquery() {
    var rnd = Math.random();
    try {
        ioshttp.open('POST', 'index2.php');
        ioshttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        ioshttp.setRequestHeader('charset', 'utf-8');
        ioshttp.onreadystatechange = function () {
			if (ioshttp.readyState == 4) {
				if (ioshttp.status!=200) {
					alert('Error, please retry');
				} else {
					alert(ioshttp.responseText);
				}
			}
		};
        ioshttp.send('option=com_test&task=mytask&id=xx&rnd='+rnd);
    }
    catch(e){}
    finally{}
}

intefix · « **Reply #2 on:** May 08, 2010, 11:10:00 »

Πάρα πολύ ωραίο...μπορούμε να έχουμε όλο τον κώδικα;

Ευχαριστώ...

Έβαλα ένα κομμάτι στο head της πχ Section_Categories.php σελίδας

Code: [Select]

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<style type="text/css">
body{
	background-repeat:no-repeat;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	height:100%;
	background-color: #FFF;
	margin:0px;
	padding:0px;
}
select{
	width:150px;
}
</style>
<script type="text/javascript">
var ajax = new Array();

function getCategoryList(sel)
{
	var section_id = sel.options[sel.selectedIndex].value;                                   // Το κλειδί section_id στον πίνακα categories
	document.getElementById('category').options.length = 0;	                        // Άδειασμα του select box categories
	if(section_id.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCategory.php?section_id='+section_id;	// Επιλογή σε ποιό αρχείο να πάει. 
		ajax[index].onCompletion = function(){ createTmima(index) };	        // Επιλέγει ποια function θα εκτελεσθεί όταν βρεί το αρχείο
		ajax[index].runAJAX();		                                                        // Εκτελεί την AJAX function
	}
}

function createCategory(index)
{
	var obj = document.getElementById('category');
	eval(ajax[index].response);	                                                                        // Executing the response from Ajax as Javascript code	
}
</script>

και συνεχίζει με το body τη φόρμα και τα select...

Code: [Select]

<body>
<?php
require &#39;config.php&#39;;
?>

<form action="" method="post">
<table>
		<tr>
		<td colspan="2"><b>Section - Category Select example</b></td>
	</tr>
	<tr>
		<td>Section: </td>
		<td><?php
                        $link = mysql_connect($dbhost, $dbuser, $dbpass);
                        $query="SELECT * FROM categories";
                        $result = mysql_query ($query);
                        echo "<select id="Section" name="Section" onchange="getCategoryList(this)";
                        echo "<option value=&#39;-1&#39;>Select a Section</option>\n";
							
                        while($row=@mysql_fetch_array($result, MYSQL_BOTH))
							{
								if($row[&#39;Section_id&#39;]==$data[&#39;Section_id&#39;]) $SELECTED="SELECTED";
								else $SELECTED="";
								echo "<option value=&#39;".$row[&#39;Section_id&#39;]."&#39; $SELECTED>".$row[&#39;Section&#39;]."</option>\n";
							}
							echo "</select>";                                               // Closing of list box
		        ?>
                  </td>
	</tr>
	<tr>
		<td>Category: </td>
		<td><select id="category" name="category">
		
		</select>
		</td>
	</tr>
</table>
</form>
</body>
</html>

το αρχείο τώρα που καλεί ...getCategory.php

Code: [Select]

<?php

if(isset($_GET[&#39;category&#39;])){
  
  switch($_GET[&#39;category&#39;]){
    
    case "1":
      echo "obj.options[obj.options.length] = new Option(&#39;VW&#39;,&#39;1&#39;);\n";
      echo "obj.options[obj.options.length] = new Option(&#39;BMW&#39;,&#39;2&#39;);\n";
      echo "obj.options[obj.options.length] = new Option(&#39;AUDI&#39;,&#39;3&#39;);\n";
      echo "obj.options[obj.options.length] = new Option(&#39;OPEL&#39;,&#39;4&#39;);\n";
      
      break;
    case "2":
      
      echo "obj.options[obj.options.length] = new Option(&#39;Βάρκα&#39;,&#39;11&#39;);\n";
      echo "obj.options[obj.options.length] = new Option(&#39;Ταχύπλοο&#39;,&#39;12&#39;);\n";
      echo "obj.options[obj.options.length] = new Option(&#39;Θαλαμηγός&#39;,&#39;13&#39;);\n";
      
      break;
    case "3":
      
      echo "obj.options[obj.options.length] = new Option(&#39;Boing&#39;,&#39;21&#39;);\n";
      echo "obj.options[obj.options.length] = new Option(&#39;Airbus&#39;,&#39;22&#39;);\n";
            
      break;
  }  
}

?>

πως μπορεί να γίνει δυναμικό είτε με case η με while?

datahell · « **Reply #3 on:** May 08, 2010, 11:48:57 »

Μπορώ να σου δώσω γενικότερες οδηγίες για το πως να δουλέψεις σε τέτοιες περιπτώσεις όχι όμως έτοιμο copy-paste κώδικα για δική σου περίπτωση ακριβώς γιατί όπως καταλαβαίνεις πρέπει να κάτσω να το φτιάξω. Το AJAX που έγραψα είναι γενικός τρόπος. Δουλεύει παντού. Εσύ πρέπει μόνο να αλλάξεις τις παραμέτρους του query και το τι θα κάνεις όταν ολοκληρώνεται η κλήση. Βλέπω ότι χρησιμοποιείς το ajax sack αντί αυτού. ΟΚ, και έτσι, απλά με αυτό που σου έγραψα δεν χρειάζεσε καθόλου τη χρήση εξωτερικών βιβλιοθηκών.

Ο τρόπος που το κάνεις είναι σωστός, μου αρέσει το new Option που χρησιμοποίησες.

Επίτρεψέ μου μερικές γενικές οδηγίες για το πως γράφουμε σωστά κώδικα:

1. Τα query προς τη βάση και η επεξεργασία των δεδομένων γίνεται πριν κάνουμε echo το οτιδήποτε.
2. Βάζουμε brackets "{ και }" στα if statements.
3. Κάνουμε validation πριν χρησιμοποιήσουμε οποιοδήποτε παράμετρο προέρχεται από τους επισκέπτες. Σκέψου ότι το ajax/javascript είναι clear text και μπορεί να διαβαστεί από τον οποιοδήποτε η μορφή των query που κάνεις αλλά και το που τα κατευθύνεις.
4. Κάνε escape τα quotes όπου χρειάζεται ή χρησιμοποίησε μονά quote αντί για διπλά.
Πχ αντί για:
echo "<select id="Section" name="Section" onchange="getCategoryList(this)";
χρήση:
echo '<select id="Section" name="Section" onchange="getCategoryList(this)"';

intefix · « **Reply #4 on:** May 08, 2010, 13:58:08 »

Σωστά φαίνεται εξάλλου το λάθος...
Σε ευχαριστώ πάντως...

Author Topic: Ajax select help (Read 5843 times)

intefix

Ajax select help

datahell

Re: Ajax select help

intefix

Re: Ajax select help

datahell

Re: Ajax select help

intefix

Re: Ajax select help