Ajax, Combobox, jCombo Plugin

Schmakus · 22. Februar 2015

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 · 22. Februar 2015

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

Schmakus · 23. Februar 2015

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 · 23. Februar 2015

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 · 24. Februar 2015

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

Ajax, Combobox, jCombo Plugin

Jetzt mitmachen!

Teilen