Elxis CMS Forum
Ελληνικό Forum => Πρόσθετα => Topic started by: intefix on May 07, 2010, 12:29:45
-
Φτιάχνω μια σελίδα που θα τη βάλω σαν wrap στο ελξις...
Έχω 2 dropdown list. Ενότητες , κατηγορίες ας πούμε (τραβάνε τα δεδομένα από πίνακες και τα χώνουν στα select της σελίδας).
Πως 1) η κατηγορία να δείχνει μόνο αυτές που είναι στην ενότητα αν έχει επιλεγεί πρώτα η ενότητα
2) η να δείχνει κενό και να σε προτρέπει να επιλέξεις πρώτα την ενότητα
Το κομμάτι ajax θέλω τα υπόλοιπα δουλεύουν οκ...
Ευχαριστώ
-
Το βασικό κομμάτι αυτού που θες δεν είναι AJAX αλλά Javascript DOM.
Θα πρέπει να "παίξεις" με τα: createElement, appendChild, removeChild
Κάτι παρόμοιο με αυτό που θες έχω φτιάξει στην αναζήτηση του IOS Eshop (http://eshop.isopensource2.com/el/eshop/search.html).
Το AJAX είναι το εύκολο της υπόθεσης.
Κάνω copy-paste ένα παράδειγμα για το πως φτιάχνω εγώ AJAX εφαρμογές:
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{}
}
-
Πάρα πολύ ωραίο...μπορούμε να έχουμε όλο τον κώδικα;
Ευχαριστώ...
Έβαλα ένα κομμάτι στο head της πχ Section_Categories.php σελίδας <!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...
<body>
<?php
require 'config.php';
?>
<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='-1'>Select a Section</option>\n";
while($row=@mysql_fetch_array($result, MYSQL_BOTH))
{
if($row['Section_id']==$data['Section_id']) $SELECTED="SELECTED";
else $SELECTED="";
echo "<option value='".$row['Section_id']."' $SELECTED>".$row['Section']."</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
<?php
if(isset($_GET['category'])){
switch($_GET['category']){
case "1":
echo "obj.options[obj.options.length] = new Option('VW','1');\n";
echo "obj.options[obj.options.length] = new Option('BMW','2');\n";
echo "obj.options[obj.options.length] = new Option('AUDI','3');\n";
echo "obj.options[obj.options.length] = new Option('OPEL','4');\n";
break;
case "2":
echo "obj.options[obj.options.length] = new Option('Βάρκα','11');\n";
echo "obj.options[obj.options.length] = new Option('Ταχύπλοο','12');\n";
echo "obj.options[obj.options.length] = new Option('Θαλαμηγός','13');\n";
break;
case "3":
echo "obj.options[obj.options.length] = new Option('Boing','21');\n";
echo "obj.options[obj.options.length] = new Option('Airbus','22');\n";
break;
}
}
?>
πως μπορεί να γίνει δυναμικό είτε με case η με while?
-
Μπορώ να σου δώσω γενικότερες οδηγίες για το πως να δουλέψεις σε τέτοιες περιπτώσεις όχι όμως έτοιμο 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)"';
-
Σωστά φαίνεται εξάλλου το λάθος...
Σε ευχαριστώ πάντως...