Ajax, Combobox, jCombo Plugin

Schmakus

Hi,

ich verwende das Ajax Plugin "jCombo" (https://github.com/cardeol/jCombo).
Hier wird für jede Selectbox eine eigene PHP-Datei verwendet.

Ich verwende aber mehrere Selectboxen mit unterschiedlichen Inhalten, wobei hier schnell die Übersicht über die vielen PHP-Dateien verloren geht.

Nun möchte ich gerne eine PHP-Datei mit den Scripten für jede Selecetbox.

Wie muss ich das Plugin anpassen, bzw. wie kann ich eine Variable mitgeben, sodass innerhalb der PHP das jeweilige Script ausgeführt wird.

z.B.: mit

PHP

if (isset($_POST['Select1']))

Viele Grüße
Schmakus

wolf

Ein bisschen mehr Code musst du schon zeigen.. (am besten den Code einer der php dateien)..

Schmakus

OK, ich verwende i.d.R. immer nur zwei voneinander abhängige DropDown's.
Nun hätte ich gerne alle SQL-Abfragen in einer PHP.

Selectbox1

JavaScript

$("#cat").jCombo({url: "script/getcrCat.php" });

Selectbox2

JavaScript

$("#subcat").jCombo({
		url: "script/getcrSubcat.php", 
		input_param: "id", 
		parent: "#cat"

});

getcrCat.php

PHP

require_once("../include/config.inc.php");




$query = "SELECT cat_id, cat FROM cat";
$result = mysql_query($query);
$items = array();
if($result && 
   mysql_num_rows($result)>0) {
	while($row = mysql_fetch_array($result)) {
		$option = array("id" => $row[0], "value" => htmlentities($row[1]));
		$items[] = $option;
	}        
}
mysql_close();
$data = json_encode($items);
// Konvertieren in JSON-Format und drucken
$response = isset($_GET['callback'])?$_GET['callback']."(".$data.")":$data;
echo($response);

Alles anzeigen

getcrSubcat.php

PHP

// Connect Database
require_once("../include/config.inc.php");




// Get-Parameter von Array
$catid = !empty($_GET['id'])
		  ?intval($_GET['id']):0;




// wenn es keine Stadt, die von GET gewählt, holen alle Zeilen    
$query = "SELECT subcat_id, subcat FROM subcat"; 

//  holen die Ergebnisse
$result = mysql_query($query);
$items = array();
if($result && mysql_num_rows($result)>0) {
	while($row = mysql_fetch_array($result)) {
		$option = array("id" => $row[0], "value" => htmlentities($row[1]));
		$items[] = $option;
	}        
}
mysql_close();
$data = json_encode($items);
$response = isset($_GET['callback'])?$_GET['callback']."(".$data.")":$data;
echo($response);

Alles anzeigen

Hier das Plugin:

JavaScript

/*
 * jQuery jCombo Plugin v3.0
 * Carlos De Oliveira
 * cardeol@gmail.com
 * Latest Release: Dic 2013
 */
;(function ( $, window, document, undefined ) {
    var pluginName = "jCombo",
		version = "3.0",
        defaults = {   
            url: null,         
            parent: null,
            first_optval : "0",
            input_param: null,
            data: null,
            selected_value : null,
			onLoad: null,
			onChange: null,
            initial_text: "-- Bitte Auswählen --",            
            method: "GET",
            dataType: "jsonp"
        };        
    function Plugin( element, options ) {
        this.options = $.extend( {}, defaults, options) ;        
        this.element = element;
        this.init();                        
    };    
    Plugin.prototype = {                      
        _addParameter: function(param,value) {
			if(param==null || value == null) return false;
            this.options.data = param + "=" + value;            
			return true;
        },
        _getJson: function(url,cback) {
            var self = this;           
			var dd = (self.options.orig_data!=null) ? self.options.orig_data : "";
			dd += (self.options.data!=null) ? self.options.data : "";		
			$.ajax({
				url: url,
				data: dd,
				type: self.options.dataType,                
				dataType: "jsonp",
				method: self.options.method,
				success: cback
			});   
        },
		_onLoadCall: function() {
			if(this.options.onLoad != null) {
				var f = this.options.onLoad;
				this.options.onLoad = null;
				f();
			}					
		},
        _getData: function(url,cback) {			
            var self = this;   
            window.__jcombo_data_cache = (typeof window.__jcombo_data_cache === "undefined") ? {} : window.__jcombo_data_cache;
            var cK = JSON.stringify(url + self.options.orig_data + "&" + self.options.data);  
            if (!window.__jcombo_data_cache[cK] || true ) {
                self._getJson(url,function(data) {
                    window.__jcombo_data_cache[cK] = data;   
                    cback(data);					
                });                
            } else setTimeout(function() { 			
				cback(window.__jcombo_data_cache[cK]); 
			},0);
        },
        _renderOption: function(v,t,s) {
            var sel = "";
            if(s==true) sel = ' selected ';
            return '<option value="' + v + '"' + sel + '>' + t + '</option>';
        },
        _firstOption: function() {
            if(this.initial_text == "") return "";
            return this._renderOption(this.options.first_optval,this.options.initial_text,false);
        },
        _renderSelect: function(data, selected_value) {
            var response = [];
            if(typeof selected_value == "undefined") selected_value = this.options.first_optval;
            response.push(this._firstOption());
            for(var index in data) {
                var option = data[index];
                response.push(this._renderOption(option.id,option.value,option.id == selected_value));                
            }
            return response.join("");
        },
		_bindSelect:function (id, value) {
			var self = this;
			var xurl = this.options.url;
			value = (value==null) ? id : value;
			if(this.options.input_param == null) xurl+= (id==null)?"":id;                          			
            else this._addParameter(this.options.input_param,value);
			var xid = $(self.element).attr("id");
			if(value==this.options.first_optval || id==this.options.first_optval) {
				$(this.element).html(this._firstOption());
				$(this.element).attr("disabled","disabled");				
				$(self.element).trigger("change");
				self._onLoadCall();
			} else {				
				this._getData(xurl, function(data) {					
					$(self.element).html(self._renderSelect(data,value));
					self._onLoadCall();					
					if(value!=null || id ==null) {
						$(self.element).trigger("change");
						if(self.options.onChange != null) self.options.onChange(value);												
					} 
					if(data.length>0) $(self.element).removeAttr("disabled");					
				});
			}
		},
        init: function() {                      
            var self = this;            
            this.options.orig_data = this.options.data;
            if(this.options.parent!=null) {
                $(this.options.parent).each(function(index,elem) {                                              
					var pvalue = $(elem).val();
					$(elem).bind("change",function() {
						self._bindSelect($(elem).val(),self.options.selected_value);							
					});
				});
           } else this._bindSelect(null,self.options.selected_value);
        }        
    };
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin( this, options ));
            }
        });
    };
})( jQuery, window, document );

Alles anzeigen

wolf

Du kannst Plugin eins mit der URL

Code

scriptName.php?select=1

aufrufen, Plugin zwei dann mit

Code

scriptName.php?select=2

...
Und die Datei scriptName.php

PHP

<?php
  //Ich weiß nicht wie die Daten übermittelt werden, deswegen einfach mal beides auslesen..
  $var = !empty($_POST['select']) ? $_POST['select'] : $_GET['select'];
  //Wenn $var leer, benutze '1' als standart
  $select = !empty($var) ? $var : '1';




  switch ($select) {
    case '1'://Wenn $select == '1'
      s_1();
      break;
    case '2'://Wenn $select == '2'
      s_2();
      break;
    case '3'://...
      s_3();
      break;




    default://Wenn select irgendwas anderes enthält.. 
      s_1();//Führe das von 1 aus
      break;
  }




  function s_1(){
    //hier der Code aus Datei eins (der für dein erstes Select benutz wird)
  }
  function s_2(){
    //hier der Code aus Datei zwei (der für dein zweite Select benutz wird)
  }
?>

Alles anzeigen

Ich hoffe du verstehst den Ansatz.

Schmakus

Vielen Dank! Werd das gleich mal testen und Feedback geben!

Jetzt mitmachen!