Δυναμικά dropdowns με PHP/ MySQl

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Gringogr
Δημοσιεύσεις: 2
Εγγραφή: 23 Ιουν 2011 15:29

Δυναμικά dropdowns με PHP/ MySQl

Δημοσίευση από Gringogr » 23 Ιουν 2011 16:04

Γειά σας,
Δουλεύω ένα project εδώ και λίγες μέρες και πλέον χρειάζομαι λίγη βοήθεια.

Ο στόχος του project είναι να επιλέγει ο χρήστης την ομάδα και το 2ο dropdown να συμπληρώνετε αυτόματα και να εμφανίζει σχετικές πληροφορίες "teams".

Έχω ένα dropdown (με όνομα "cat") το οποίο εμφανίζει τις ομάδες (αν και όχι δυναμικά) και περνάει τα αποτελέσματα μέσω της $_REQUEST['subcat'] στο index8.php
(ουσιαστικά κάνει reload μεταφέροντας την τιμή της μεταβλητής).

Το επόμενο βήμα είναι η αναζήτηση στην Βάση για την ομάδα που έχει το ίδιο ID με $_REQUEST['subcat'] και να επιστρέφει τις πληροφορίες.
Το πρόβλημα είναι πως το 2ο dropdown δεν συμπληρώνετε αυτόματα όπως τηα έπρεπε... Μπορεί να βοηθήσει κάποιος?!?!?!?


The javascript

Κώδικας: Επιλογή όλων

<script>
function reload&#40;form1&#41;&#123;
var subcat= form1.cat.options&#91;form1.cat.options.selectedIndex&#93;.value;
self.location = 'index8.php?subcat='+subcat;
&#125;
</script> 
Main piece of code
Έχω επίτηδες παραλείψει τον κώδικα σύνδεσης με την βάση οπότε μην δώσετε σημασία.

Κώδικας: Επιλογή όλων

<body>
<form name="form1">
<select name="cat" onchange="reload&#40;this.form&#41;;">
<option value="0">- All Teams -</option>
<option value="1">Liverpool FC</option>
<option value="2">Manchester Fc</option>
<option value="3">Arsenal FC</option>
</select>
</form>

<?php
	if&#40;isset&#40;$_REQUEST&#91;'subcat'&#93;&#41;&#41;&#123;
		$pop=$_REQUEST&#91;'subcat'&#93;;
		//echo "request value= ".$_REQUEST&#91;'subcat'&#93;. "\n";
		//display your sub category select form here
		$query = mysql_query &#40;"SELECT * FROM teams WHERE id='$pop'"&#41;;
		if &#40;!$query&#41; &#123;
			echo 'Could not run query&#58; ' . mysql_error&#40;&#41;;
			exit;
		&#125;
		else&#123;
			//echo "elseif state= ".$pop. "\n";
			//dont forget to filter out bad strings!
			//$res=mysql_fetch_row&#40;$query&#41;;
			while&#40;$res=mysql_fetch_array&#40;$query&#41;&#41;;
			$rows = mysql_num_rows&#40;$query&#41;;
			if&#40;$rows > 0&#41;
				&#123;
					echo "hello";
					echo "inside while loop= $pop". "\n";
					echo $res&#91;id&#93;;
					echo  "<option value='$res&#91;id&#93;'>$res&#91;name&#93;</option>";
					echo "</select>";
				&#125;
			else echo 'Could not fill 2nd dropdown!!!';
			&#125;
	&#125;
	else echo 'Subcat is empty!!!';
	//echo mysql_result&#40;$res, 2&#41;. "\n";
	//mysql_close&#40;$link&#41;;

?> 
</body>
Σας ευχαριστώ εκ των προτέρων.
Καλή συνέχεια!!

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Δυναμικά dropdowns με PHP/ MySQl

Δημοσίευση από dpa » 23 Ιουν 2011 18:41

Για δες αυτό εδώ

jqueryui.com/demos/autocomplete/#combobox

Κατέβασε και βάλε στο head τις βιβλιοθήκες jquery kai juery ui themes

Κώδικας: Επιλογή όλων

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    <link href="js/jquery-ui-1.8/css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="js/jquery-ui-1.8/js/jquery-ui-1.8.10.custom.min.js" language="javascript"></script>  
    <script type="text/javascript" src="js/jquery-ui-1.8/js/jquery.ui.datepicker-el.js" language="javascript"></script>
    <script type="text/javascript" src="js/JS_ComboBox.js" language="javascript"></script>
Το αρχείο JS_ComboBox.js έχει τον παρακάτω κώδικα

Κώδικας: Επιλογή όλων

	&#40;function&#40; $ &#41; &#123;
		$.widget&#40; "ui.combobox", &#123;
			_create&#58; function&#40;&#41; &#123;
				var self = this,
					select = this.element.hide&#40;&#41;,
					selected = select.children&#40; "&#58;selected" &#41;,
					value = selected.val&#40;&#41; ? selected.text&#40;&#41; &#58; "";
				var input = this.input = $&#40; "<input>" &#41;
					.insertAfter&#40; select &#41;
					.val&#40; value &#41;
					.autocomplete&#40;&#123;
						delay&#58; 0,
						minLength&#58; 0,
						source&#58; function&#40; request, response &#41; &#123;
							var matcher = new RegExp&#40; $.ui.autocomplete.escapeRegex&#40;request.term&#41;, "i" &#41;;
							response&#40; select.children&#40; "option" &#41;.map&#40;function&#40;&#41; &#123;
								var text = $&#40; this &#41;.text&#40;&#41;;
								if &#40; this.value && &#40; !request.term || matcher.test&#40;text&#41; &#41; &#41;
									return &#123;
										label&#58; text.replace&#40;
											new RegExp&#40;
												"&#40;?!&#91;^&;&#93;+;&#41;&#40;?!<&#91;^<>&#93;*&#41;&#40;" +
												$.ui.autocomplete.escapeRegex&#40;request.term&#41; +
												"&#41;&#40;?!&#91;^<>&#93;*>&#41;&#40;?!&#91;^&;&#93;+;&#41;", "gi"
											&#41;, "<strong>$1</strong>" &#41;,
										value&#58; text,
										option&#58; this
									&#125;;
							&#125;&#41; &#41;;
						&#125;,
						select&#58; function&#40; event, ui &#41; &#123;
							ui.item.option.selected = true;
							self._trigger&#40; "selected", event, &#123;
								item&#58; ui.item.option
							&#125;&#41;;
						&#125;,
						change&#58; function&#40; event, ui &#41; &#123;
							if &#40; !ui.item &#41; &#123;
								var matcher = new RegExp&#40; "^" + $.ui.autocomplete.escapeRegex&#40; $&#40;this&#41;.val&#40;&#41; &#41; + "$", "i" &#41;,
									valid = false;
								select.children&#40; "option" &#41;.each&#40;function&#40;&#41; &#123;
									if &#40; $&#40; this &#41;.text&#40;&#41;.match&#40; matcher &#41; &#41; &#123;
										this.selected = valid = true;
										return false;
									&#125;
								&#125;&#41;;
								if &#40; !valid &#41; &#123;
									// remove invalid value, as it didn't match anything
									$&#40; this &#41;.val&#40; "" &#41;;
									select.val&#40; "" &#41;;
									input.data&#40; "autocomplete" &#41;.term = "";
									return false;
								&#125;
							&#125;
						&#125;
					&#125;&#41;
					.addClass&#40; "ui-widget ui-widget-content ui-corner-left" &#41;;

				input.data&#40; "autocomplete" &#41;._renderItem = function&#40; ul, item &#41; &#123;
					return $&#40; "<li></li>" &#41;
						.data&#40; "item.autocomplete", item &#41;
						.append&#40; "<a>" + item.label + "</a>" &#41;
						.appendTo&#40; ul &#41;;
				&#125;;

				this.button = $&#40; "<button type='button'>&nbsp;</button>" &#41;
					.attr&#40; "tabIndex", -1 &#41;
					.attr&#40; "title", "Show All Items" &#41;
					.insertAfter&#40; input &#41;
					.button&#40;&#123;
						icons&#58; &#123;
							primary&#58; "ui-icon-triangle-1-s"
						&#125;,
						text&#58; false
					&#125;&#41;
					.removeClass&#40; "ui-corner-all" &#41;
					.addClass&#40; "ui-corner-right ui-button-icon" &#41;
					.click&#40;function&#40;&#41; &#123;
						// close if already visible
						if &#40; input.autocomplete&#40; "widget" &#41;.is&#40; "&#58;visible" &#41; &#41; &#123;
							input.autocomplete&#40; "close" &#41;;
							return;
						&#125;

						// pass empty string as value to search for, displaying all results
						input.autocomplete&#40; "search", "" &#41;;
						input.focus&#40;&#41;;
					&#125;&#41;;
			&#125;,

			destroy&#58; function&#40;&#41; &#123;
				this.input.remove&#40;&#41;;
				this.button.remove&#40;&#41;;
				this.element.show&#40;&#41;;
				$.Widget.prototype.destroy.call&#40; this &#41;;
			&#125;
		&#125;&#41;;
	&#125;&#41;&#40; jQuery &#41;;
Στα css σου βάλε αυτά

Κώδικας: Επιλογή όλων

.ui-autocomplete-input &#123; margin&#58; 0; padding&#58; 4px; &#125;
.ui-autocomplete &#123; height&#58; 250px; overflow-y&#58; scroll; overflow-x&#58; hidden; &#125;

Στο head ακόμη βάλε αυτό

Κώδικας: Επιλογή όλων

<script type="text/javascript"> 
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

        $&#40;"#ComboBox"&#41;.combobox&#40;&#123;
            selected&#58; function&#40;event, ui&#41; &#123;
            	$&#40;"#ComboBoxValue"&#41;.val&#40; $&#40;"#ComboBox"&#41;.val&#40;&#41; &#41;;
            &#125;
        &#125;&#41;;
	/* ComboBox */
	
		
&#125;&#41;;
</script> 
Στο Body αυτό

Κώδικας: Επιλογή όλων

                                $sql = "SELECT * FROM categories WHERE UserID = '".$UserID."' AND TypeCategory = '1' ";
                                $db->query&#40;"SET NAMES 'utf8'"&#41;;
                    			$res_sql = $db->query&#40;$sql&#41;;
                                $num = $res_sql->num_rows;
                                
                                echo "<div class=\"ui-widget_CategoryEsodon\">";
                                    echo "<select name=\"ComboBox\" id=\"ComboBox\">";
                                    echo "<option value=\"0\">Επιλέξτε μια κατηγορία εσόδων</option>";
                                    while&#40; $r = $res_sql->fetch_assoc&#40;&#41; &#41; &#123;
                                        $CatID = $r&#91;"CategoryID"&#93;;
                                        $CategoryName = $r&#91;"CategoryName"&#93;;
                                        $Description = $r&#91;"Description"&#93;;
                                        echo "<option value=\"$CatID\">$CategoryName - $Description</option>";
      
                                    &#125;
                                    echo "</select>"; 
                                echo "</div>"; 
                        ?>
                        <input type="text" name="ComboBoxValue" id="ComboBoxValue"  />
Εκεί που έχω τα δικά μου query βάλε τα δικά σου.

Ελπίζω να βοήθησα.

Gringogr
Δημοσιεύσεις: 2
Εγγραφή: 23 Ιουν 2011 15:29

Δυναμικά dropdowns με PHP/ MySQl

Δημοσίευση από Gringogr » 29 Ιουν 2011 12:43

Σε ευχαριστώ πολύ dpa.
Το συγκεκριμένο tutorial ήταν πολύ καλή πρόταση.

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες