Fórum Problema com framework Select2 #480039
24/05/2014
0
Olá...
Estou começando agora com desenvolvimento Web...
Toda ajuda é bem vinda!
Estou tendo problemas para mostrar o resultado da pesquisa do combo na pagina!
Meu cenário é:
Back-end JAVA
Front-end HTML + BootStrap + Jquery + Select2 3.4.5
Meu código está assim:
[img]http://arquivo.devmedia.com.br/forum/imagem/326242-20140524-162718.png[/img]
Código JavaScript:
Meu Json esta vindo assim:
A busca esta funcionando corretamente! porém não esta mostrando o resultado logo abaixa da pesquisa!
Estou começando agora com desenvolvimento Web...
Toda ajuda é bem vinda!
Estou tendo problemas para mostrar o resultado da pesquisa do combo na pagina!
Meu cenário é:
Back-end JAVA
Front-end HTML + BootStrap + Jquery + Select2 3.4.5
Meu código está assim:
<div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-label" for="departamento">Departamento</label> <form:input type="hidden" class="form-control bigdrop select2-select-00 full-width-fix" path="dep_id"></form:input> </div> </div> </div>
[img]http://arquivo.devmedia.com.br/forum/imagem/326242-20140524-162718.png[/img]
Código JavaScript:
$("#dep_id").select2({
placeholder: "Buscar um Departamento",
minimumInputLength: 1,
ajax: {
url: "departamento/list.json",
dataType: 'json',
data: function (term, page) {
return {
sSearch: term, // search term
iSortCol_0 :"1",
sSortDir_0:"ASC"
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
return {results: data.results};
}
},
initSelection: function(element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("departamento/list.json", {
data: {
iSortCol_0: "0",
sSortDir_0: "ASC",
sSearch: id,
iDisplayLength:1
},
dataType: "json"
}).done(function(data) {
callback(data.aaData[0]);
});
}
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
Meu Json esta vindo assim:
{"more":false,"results":[[1,"Desenvolvimento"]]}
A busca esta funcionando corretamente! porém não esta mostrando o resultado logo abaixa da pesquisa!
Alessandro Folk
Curtir tópico
+ 0
Responder
Posts
24/05/2014
Alessandro Folk
Consegui um certo avanço!
Fiz a seguinte alteração:
O Json esta da seguinte forma:
Meu JavaScript esta assim:
O problema agora é que não consigo selecionar o departamento!
Creio que o problema esteja no initSelection...
Fiz a seguinte alteração:
O Json esta da seguinte forma:
{"results":[{"dep_nome":"Desenvolvimento","dep_id":1}],"more":false}
Meu JavaScript esta assim:
function dataFormatResult(data) {
var markup = "<table class='data-result'><tr>";
markup += "<td class='data-info'><div class='data-title'>" + data.dep_nome + "</div>";
markup += "</td></tr></table>";
return markup;
}
function dataFormatSelection(data) {
return data.dep_nome;
}
$("#dep_id").select2({
placeholder: "Buscar um Departamento",
minimumInputLength: 1,
ajax: {
url: "departamento/list.json",
dataType: 'json',
data: function (term, page) {
return {
sSearch: term, // search term
iSortCol_0 :"1",
sSortDir_0:"ASC"
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
return {results: data.results};
}
},
initSelection: function(element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("departamento/list.json", {
data: {
iSortCol_0: "0",
sSortDir_0: "ASC",
sSearch: id,
iDisplayLength:1
},
dataType: "json"
}).done(function(data) {
callback(data.aaData[0]);
});
}
},
formatResult: dataFormatResult, // omitted for brevity, see the source of this page
formatSelection: dataFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
O problema agora é que não consigo selecionar o departamento!
Creio que o problema esteja no initSelection...
Responder
Gostei + 0
11/06/2014
Allan Tavares
Alessandro, estou passando exatamente o mesmo problema, solucionou?
não consigo selecionar a opção =(
não consigo selecionar a opção =(
Consegui um certo avanço!
Fiz a seguinte alteração:
O Json esta da seguinte forma:
Meu JavaScript esta assim:
O problema agora é que não consigo selecionar o departamento!
Creio que o problema esteja no initSelection...
Fiz a seguinte alteração:
O Json esta da seguinte forma:
{"results":[{"dep_nome":"Desenvolvimento","dep_id":1}],"more":false}
Meu JavaScript esta assim:
function dataFormatResult(data) {
var markup = "<table class='data-result'><tr>";
markup += "<td class='data-info'><div class='data-title'>" + data.dep_nome + "</div>";
markup += "</td></tr></table>";
return markup;
}
function dataFormatSelection(data) {
return data.dep_nome;
}
$("#dep_id").select2({
placeholder: "Buscar um Departamento",
minimumInputLength: 1,
ajax: {
url: "departamento/list.json",
dataType: 'json',
data: function (term, page) {
return {
sSearch: term, // search term
iSortCol_0 :"1",
sSortDir_0:"ASC"
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
return {results: data.results};
}
},
initSelection: function(element, callback) {
var id=$(element).val();
if (id!=="") {
$.ajax("departamento/list.json", {
data: {
iSortCol_0: "0",
sSortDir_0: "ASC",
sSearch: id,
iDisplayLength:1
},
dataType: "json"
}).done(function(data) {
callback(data.aaData[0]);
});
}
},
formatResult: dataFormatResult, // omitted for brevity, see the source of this page
formatSelection: dataFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
O problema agora é que não consigo selecionar o departamento!
Creio que o problema esteja no initSelection...
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)