Abrir um select em uma Lightbox com resultados em vários checkboxs
Olá pessoal, depois de recorrer à todos os fóruns , não consegui achar um exemplo do que eu quero, por se tratar de tecnologia mais atual, preciso que um resultado de uma combo box abra numa lightbox ou uma janela modal . eu cheguei a montar meu select com java e php , mas não estou conseguindo jogar o último resultado que seria bairros dentro do value vejam meus scripts com que estou quebrando a cabeça a semanas:
O 1º seria o arquivo onde contém o form junto com o java script que segue abaixo:
<?php
//CONECTA AO MYSQL
include_once("config.php");
include_once("combo_cidades.php");
?>
<script type="text/javascript">
function validarform(formulario){
if(formulario.negocio_.value == ''){
alert("O campo Finalidade é obrigatório.");formulario.negocio_.focus()
return false;
}
if(formulario.ct_tipo_ .value == ''){
alert("O campo Tipo é obrigatório.");formulario.ct_tipo_ .focus()
return false;
}
if(formulario.cidade_ .value == ''){
alert("O campo Cidade é obrigatório.");formulario.cidade_ .focus()
return false;
}
if(formulario.bairro_.value == ''){
alert("O campo Bairro é obrigatório.");formulario.bairro_.focus()
return false;
}
return true;
}
</script>
<div class="pagination_form">
<ul>
<li><a href="#" id="prev" class="prevnext">Busca por Cidade</a></li>
<li><a href="#" id="next" class="prevnext">Busca por Codigo</a></li>
</ul>
<br />
</div>
<div id="content">
<div><form name="busca" id="busca" onsubmit="return validarform(this);" method="post" action="busca-de-imoveis" enctype="multipart/form-data">
<fieldset><div class="search-property__search-box search-box"><div class="search-box__column search-box--action">
<select name="negocio_" id="negocio_" class="search-box__combo">
<option value="" >Finalidade</option>
<?php
$sql = $MySQLi->query("SELECT id, tipo FROM negocio_tipo WHERE ativo='S'");while( $linha = mysqli_fetch_array($sql)){
echo '<option class="item" value="'.$linha['id'].'">'.$linha['tipo'].'</option>';
}
?>
</select></div>
<div class="search-box__column search-box--what">
<select name="tipo_" id="tipo_" class="search-box__combo">
<option value="">Tipo</option>
<optgroup label="Residencial">
<?php
$sql = $MySQLi->query("SELECT id, tipo_nome FROM imoveis_tipo WHERE ativo='1'");while( $linha = mysqli_fetch_array( $sql ) ) {
echo '<option value="'.$linha['id'].'">'.$linha['tipo_nome'].'</option>';
}
?>
</optgroup>
</select>
</div>
<div class="search-box__column search-box--what">
<select name="cidade_" id="cidade_" onChange="valor(this.value);" class="search-box__combo">
<option value="todos">Cidades</option>
<optgroup label="Cidades">
<?php
$sql = $MySQLi->query("SELECT id, cidade, uf FROM cidades ORDER BY cidade ASC");while( $linha_1 = mysqli_fetch_array( $sql ) )
echo '<option value="'.$linha_1['id'].'">' . $linha_1['cidade'] .' / '.$linha_1['uf'].'</option>';
?>
</optgroup>
</select>
</div>
<div class="search-box__column search-box--what">
<select name="bairro_" id="bairro_" class="search-box__combo">
<option value="" id="opcoes">Bairro</option>
<optgroup label="Bairros">
</optgroup>
</select>
</div>
<div class="search-box__full search-box--now">
<input type="submit" class="icon-search search-property__button" id="btnEnviar" value="Buscar"/>
</div>
</div>
</fieldset>
</div>
<div class="ocultar">
<fieldset><div class="search-property__search-box search-box"><div class="search-box__column search-box--action">
</div>
<div class="search-box__full search-box--now"></div>
<div class="search-box__full search-box--where">
<input type="text" name="cod" id="cod" class="search-box__input" placeholder="Digite um Código"></div>
<div class="search-box__full search-box--now-2">
<input type="submit" name="verificar" id="btnenviar" class="icon-search search-property__button" value="Buscar"/>
</div></div>
</fieldset></form>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br />
<link rel="stylesheet" href="[http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css](http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css)">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
function valor(pag) {
alert(+pag);
$("#bairro_" ).click(function() {
var $lnk = document.getElementById("lnk-city");
$lnk.src = $lnk.src.replace(/id=(.*)/, 'id=') +cidade_.value;
$( "#dialog" ).dialog( "open" );
});resizable : true,
modal : true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
$(".ui-dialog-titlebar").hide();
}
</script>
Notem que no final do arquivo php logo abaixo montei um iframe para abrir uma janela modal na pagina acima e trazer os resultados recuperados pelo Id do select CIDADE, agora abaixo segue o arquivo php que busca e imprime os resultados através do id da cidade que irá trazer os bairros de cada cidade:
<?php//RECEBE PARÃMETRO
$idcidade = $_GET["id"];
//QUERY
$sql = $MySQLi->query("SELECT bairro FROM bairros AS inicial WHERE idcidade='".$idcidade."' ORDER BY id")or die (mysqli_error());//EXECUTA A QUERY
$row= mysqli_num_rows ($sql);
while($linha=mysqli_fetch_array($sql)){
$bairro=$linha['bairro'];
echo "<input type='checkbox' value='".$bairro."' name='bairro_' id='bairro_'/>".$bairro."<br />";//FECHA IF (row)
//PRINTA O RESULTADO
}
?>
<div id="dialog" style="display:none;" title="Dialog Title"><iframe frameborder="0" scrolling= "no" width="100%" height="100%" src="combo_cidades.php?id=" id="lnk-city"></iframe></div>
O que eu pretendo na verdade é que quando for escolhido o tipo de cidade , é feita uma requisição no arquivo php e seleciona os bairros apenas da cidade pretendida, e aí quando for clicado no select BAIRRO, abra uma janela modal ou lightbox e imprima esses resultados com cada bairro com suas checkbox para serem selecionadas pelo usuário, até aí eu consegui, mas não consigo jogar esses valores dentro o value, e sei que o iframe que montei não tem nada haver, mas só para tentar achar a lógica certa para chegar no resultado pretendido , e também vi que é possível fazer uma array dentro do select do tipo quando o usuário quizer a busca por mais bairros dentro do select, ele teria os resultados buscados de acordo com a seleção, que nem neste exemplo deste site [http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/](http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/) desde já fico grato.Discussão (1)
Carregando comentários...