Mam problem z wyświetlaniem kategorii, w przypadku gdy wywołam tylko
$('#shopDiv').catSelect({
(...)
}
pokazuje mi się lista z kategoriami w odpowiednim wierszu i wszystko działa ok
w przypadku gdy wywołam tylko
$('#allegroDiv').catSelect({
(...)
}
też wszystko jest ok - lista pokazuje się w odpowiednim wierszu (innym niż za pierwszym razem - pierwszy jest pusty - wiadomo)
Natomiast gdy wywołam obie naraz (tak jak w przykładzie) w drugim polu pokazuja mi sie 2 listy (poprawnie wygenerowane)i działaja wspólnie - tzn jeśli z pierwszej wybiore dowolną kategorie w drugiej wczytywana jest podkategoria kategori o id które wybrałem z pierwszej ale z listy drugiej - mam nadzieje że wiecie co mam na myśli?
Jak rozdzielić działania tych list? chciałbym mieć 2 niezależne listy do wyboru kategorii ale nie cholery nie mam pomysłu jak to zrobić...
Plugin zaczerpnięty z: http://blog.teamon.eu/2007/12/28/jquery-wybor-kategorii-jak-na-allegro/
przykładowa implementacja
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span3" for="shopDiv">
Kategoria Sklepu:
<span class="help-block">Wybierz kategorie z listy</span>
</label>
<div class="span9 controls">
<div class="span12" id="shopDiv"></div>
</div>
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span3" for="shopId">
Id kategori Sklepu:
<span class="help-block">Numer zostanie przyznany automatycznie</span>
</label>
<input class="span9 text disabled" type="text" name="shopId" id="shopId" readonly="readonly" placeholder="Wybierz kategorie z listy" />
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span3" for="allegroDiv">
Kategoria Allegro:
<span class="help-block">Wybierz kategorie z listy</span>
</label>
<div class="span9 controls">
<div class="span12" id="allegroDiv"></div>
</div>
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span3" for="allegroId">
Id kategori Allegro:
<span class="help-block">Numer zostanie przyznany automatycznie</span>
</label>
<input class="span9 text disabled" type="text" name="allegroId" id="allegroId" readonly="readonly" placeholder="Wybierz kategorie z listy" />
</div>
</div>
</div>
(function($) {
$.fn.catSelect = function(options){
var defaults = {
urlSub: '',
urlParent: '',
size: 10,
type: 'get',
container: $(this),
input: null,
start: 0
};
$.fn.catSelect.settings = $.extend(defaults, options);
$.fn.catSelect.reset();
$.fn.catSelect.settings.input.keyup(function(){
$.fn.catSelect.selectById(this.value);
});
if($.fn.catSelect.settings.start != 0){
$.fn.catSelect.selectById($.fn.catSelect.settings.start);
} else {
$.fn.catSelect.onChange();
}
}
$.fn.catSelect.cache = [];
$.fn.catSelect.pCache = [];
$.fn.catSelect.obj = null;
$.fn.catSelect.reset = function(){
$.fn.catSelect.settings.container.html('');
$.fn.catSelect.obj = $(document.createElement('select'));
}
$.fn.catSelect.onChange = function(){
var id = $.fn.catSelect.obj.val() || 0;
if($.fn.catSelect.cache[id]){
$.fn.catSelect.onSuccess($.fn.catSelect.cache[id]);
} else {
$.fn.catSelect.get(id);
}
}
$.fn.catSelect.selectById = function(id){
$.fn.catSelect.reset();
if($.fn.catSelect.pCache[id]){
$.fn.catSelect.selectByIdOnSuccess($.fn.catSelect.pCache[id]);
} else {
$.ajax({
url: $.fn.catSelect.settings.urlParent,
type: $.fn.catSelect.settings.type,
data: 'id='+id,
dataType: 'json',
success: function(data){
$.fn.catSelect.selectByIdOnSuccess(data);
$.fn.catSelect.pCache[id] = data;
}
});
}
}
$.fn.catSelect.selectByIdOnSuccess = function(data){
for(i in data){
$.fn.catSelect.cache[data[i].id] = data[i].data;
}
$.fn.catSelect.onChange()
for(var i=1,s=null;i<data.length;i++){
s = $.fn.catSelect.settings.container.children();
$(s[s.length-1]).val(data[i].id).change();
}
}
$.fn.catSelect.onSuccess = function(data){
$.fn.catSelect.obj.nextAll('.catSelect').remove();
if(data.length > 0){
var select = $(document.createElement('select'))
.attr('size', $.fn.catSelect.settings.size)
.addClass('catSelect span4 margin padding')
.change(function(){
$.fn.catSelect.obj = $(this);
$.fn.catSelect.onChange();
});
for(i in data){
select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>')
}
$.fn.catSelect.settings.container.append(select);
select.val(0);
} else {
$.fn.catSelect.settings.input.val($.fn.catSelect.obj.val());
}
if($.fn.catSelect.settings.columns != 0){
var cols = $.fn.catSelect.settings.container.children('select.catSelect').show();
if(cols.length > $.fn.catSelect.settings.columns){
for(var i=0, c=cols.length-$.fn.catSelect.settings.columns; i<c ; i++){
$(cols[i]).hide();
}
}
}
}
$.fn.catSelect.get = function(id){
$.ajax({
url: $.fn.catSelect.settings.urlSub,
type: $.fn.catSelect.settings.type,
data: 'id='+id,
dataType: 'json',
success: function(data){
$.fn.catSelect.onSuccess(data);
$.fn.catSelect.cache[id] = data;
}
});
}
})(jQuery)
$(document).ready(function(){
$('#shopDiv').catSelect({
urlSub: 'js/view/getCat.php?func=sub&from=shop',
urlParent: 'js/view/getCat.php?func=parent&from=shop',
input: $('#shopId'),
size: 5,
start: 0,
type: 'get',
columns: 3
});
$('#allegroDiv').catSelect({
urlSub: 'js/view/getCat.php?func=sub&from=allegro',
urlParent: 'js/view/getCat.php?func=parent&from=allegro',
input: $('#allegroId'),
size: 5,
start: 0,
type: 'get',
columns: 3
});
});