staram się przerobić funkcje http://codeassembly.com/Simple-chained-com...gin-for-jQuery/ na swoje potrzeby.
Generalnie ma to działać tak, że po wybraniu kategorii pojawia się kolejny combobox z podkategoria (i tak w kółko).
W związku z tym musze dokonać modyfikacji:
- dynamiczne przekazywanie danych z BD - z tym nie mam problemów
- zamiast ukrywać pola formularza, dynamicznie je dodawać - z tym też powinienem sobie poradzić
- wywoływać funkcje z powyższego linku rekurencyjnie. Obecnie działa to tak, że w sekcji head funkcja ta jest wywoływana 2 razy - dla każdego z pół formularza z podkategoriami. Tutaj mam problem - nie wiem za bardzo jak to rozwiązać. Wyobrażam to sobie tak, że wewnątrz wywołania funkcji w momencie wybrania kategorii, funkcja wywoływana jest z kolejnymi atrybutami.
Czy takie rozwiązanie zadziała?
Oryginalne wywołanie:
<script language="JavaScript" type="text/javascript"> $(function() { $('#country').chainSelect('#state','/examples/jquerycombo/combobox.php', { before:function (target) //before request hide the target combobox and display the loading message { $("#loading").css("display","block"); $(target).css("display","none"); }, after:function (target) //after request show the target combobox and hide the loading message { $("#loading").css("display","none"); $(target).css("display","inline"); } }); $('#state').chainSelect('#city','/examples/jquerycombo/combobox.php', { before:function (target) { $("#loading").css("display","block"); $(target).css("display","none"); }, after:function (target) { $("#loading").css("display","none"); $(target).css("display","inline"); } }); }); </script>
Czy zmodyfikowanie definicji funkcji tak, żeby parametry before i after były predefiniowane i parametr after wywoływał rekurencyjnie tą funkcje, będzie działac?
Definicja funkcji:
/** * Chained Selects for jQuery * Copyright (C) 2008 Ziadin Givan www.CodeAssembly.com * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see http://www.gnu.org/licenses/ * * * settings = { usePost : true, before:function() {}, after: function() {}, default: null, parameters : { parameter1 : 'value1', parameter2 : 'value2'} } * if usePost is true, then the form will use POST to pass the parameters to the target, otherwise will use GET * "before" function is called before the ajax request and "after" function is called after the ajax request. * If defaultValue is not null then the specified option will be selected. * You can specify additional parameters to be sent to the the server in settings.parameters. * */ jQuery.fn.chainSelect = function( target, url, settings ) { return this.each( function() { $(this).change( function( ) { settings = jQuery.extend( { after : null, before : null, usePost : false, defaultValue : null, parameters : { '_name' : $(this).attr('name'), '_id' : $(this).attr('id') } } , settings); settings.parameters._value = $(this).val(); if (settings.before != null) { settings.before( target ); } ajaxCallback = function(data, textStatus) { $(target).html("");//clear old options data = eval(data);//get json array for (i = 0; i < data.length; i++)//iterate over all options { for ( key in data[i] )//get key => value { $(target).get(0).add(new Option(data[i][key],[key]), document.all ? i : null); } } if (settings.defaultValue != null) { $(target).val(settings.defaultValue);//select default value } else { $("option:first", target).attr( "selected", "selected" );//select first option } if (settings.after != null) { settings.after(target); } $(target).change();//call next chain }; if (settings.usePost == true) { $.post( url, settings.parameters, ajaxCallback ); } else { $.get( url, settings.parameters, ajaxCallback ); } }); }); };
Wiem, że dosyć chaotycznie to opisałem - JS znam niestety tylko na tyle, żeby wstawić skrypt na strone i pierwszy raz musze coś bardziej zmodyfikować.
Czy ustawienie takich parametrów funkcji zadziała?
jQuery.fn.chainSelect = function( target, url, settings ) { return this.each( function() { $(this).change( function( ) { settings = jQuery.extend( { after : function(){ $("#loading").css("display","block"); //$(target).css("display","inline"); addComboBox(target,target,"comboBoxSpan"); //recursive call $("#"+target).chainSelect($_GET['_value'],url); },
jako target bedzie przekazywany integer ze zmiennej tablicy: $_GET['_value']