Problema com framework Select2

Java

24/05/2014

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:
										<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

Alessandro Folk

Curtidas 0

Respostas

Alessandro Folk

Alessandro Folk

24/05/2014

Consegui um certo avanço!

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...
GOSTEI 0
Allan Tavares

Allan Tavares

24/05/2014

Alessandro, estou passando exatamente o mesmo problema, solucionou?
não consigo selecionar a opção =(


Consegui um certo avanço!

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...
GOSTEI 0
Alessandro Folk

Alessandro Folk

24/05/2014

Consegui acertar!
Vou deixar aqui a solução para quem passar pelo mesmo problema!

HTML:
<form:input type="hidden" path="dep_id" name="dep_id" id="dep_id" value="" class="form-control bigdrop select2-select-00 full-width-fix"></form:input>


JAVASCRIPT:
		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,
			    allowClear: true,
			    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!=="0") {
			        	$.ajax("departamento/list.json", {
			                    data: {
					                id: id
			                    },
			                    dataType: "json"
			                }).done(function(data) {
			                		callback(data.results[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
			});


JSON:
{"more":false,"results":[{"id":1,"dep_nome":"Desenvolvimento","dep_id":1}]}

O detalhe esta no campo "id"! Ele é usado no momento da seleção e deve ser a PK da tabela!


É isso ai pessoal... qualquer dúvida é só falar! Bons códigos!
GOSTEI 0
POSTAR