Filtro de busca

Caio Vargas · Novembro 8, 2021

Fala pessoal todo tranquilo?

Estou com um pequeno problema em um filtro que estou desenvolvendo para uma imobiliária.

Seguinte eu tenho 3 checkbox venda mensal diária .

E tenho 3 selects com cidade balneário e tipo de imóvel

O meu filtro funciona da seguinte forma o primeiro checkbox sempre vem marcado que e o venda aí quando eu clicar no botão buscar ele vai buscar os imóveis venda

Aí se o cara clicar em select cidade ele vai buscar no banco via ajax e me trás o resultado via sessão montando a query

Porém ele só vai sentar no Ajax quanto eu selecionar um checkbox a dúvida e como eu posso fazer isso já que eu tô usando http build query

violin101 · Novembro 11, 2021

Caio Vargas, saudações...

Select Box Dinamico usando Ajax

<?php
/*
 *
 * Codeigniter Dynamic Dependent Select Box using Ajax
 *
 /*
	--
	-- Database: `country_state_city`
	--
	-- --------------------------------------------------------
	--
	-- Table structure for table `country`
	--

	CREATE TABLE `country` (
	  `country_id` int(11) NOT NULL,
	  `country_name` varchar(250) NOT NULL
	) ENGINE=InnoDB DEFAULT CHARSET=latin1;

	--
	-- Dumping data for table `country`
	--

	INSERT INTO `country` (`country_id`, `country_name`) VALUES
	(1, 'USA'),
	(2, 'Canada'),
	(3, 'Australia'),
	(4, 'India');

	--
	-- Indexes for dumped tables
	--

	--
	-- Indexes for table `country`
	--
	ALTER TABLE `country`
	  ADD PRIMARY KEY (`country_id`);

	--
	-- AUTO_INCREMENT for dumped tables
	--

	--
	-- AUTO_INCREMENT for table `country`
	--
	ALTER TABLE `country`
	  MODIFY `country_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

	  
	  
	--
	-- Database: `country_state_city`
	--
	-- --------------------------------------------------------
	--
	-- Table structure for table `state`
	--

	CREATE TABLE `state` (
	  `state_id` int(11) NOT NULL,
	  `country_id` int(11) NOT NULL,
	  `state_name` varchar(250) NOT NULL
	) ENGINE=InnoDB DEFAULT CHARSET=latin1;

	--
	-- Dumping data for table `state`
	--

	INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
	(1, 1, 'New York'),
	(2, 1, 'Alabama'),
	(3, 1, 'California'),
	(4, 2, 'Ontario'),
	(5, 2, 'British Columbia'),
	(6, 3, 'New South Wales'),
	(7, 3, 'Queensland'),
	(8, 4, 'Karnataka'),
	(9, 4, 'Telangana');

	--
	-- Indexes for dumped tables
	--

	--
	-- Indexes for table `state`
	--
	ALTER TABLE `state`
	  ADD PRIMARY KEY (`state_id`);

	--
	-- AUTO_INCREMENT for dumped tables
	--

	--
	-- AUTO_INCREMENT for table `state`
	--
	ALTER TABLE `state`
	  MODIFY `state_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;



	--
	-- Database: `country_state_city`
	--
	-- --------------------------------------------------------
	--
	-- Table structure for table `city`
	--

	CREATE TABLE `city` (
	  `city_id` int(11) NOT NULL,
	  `state_id` int(11) NOT NULL,
	  `city_name` varchar(250) NOT NULL
	) ENGINE=InnoDB DEFAULT CHARSET=latin1;

	--
	-- Dumping data for table `city`
	--

	INSERT INTO `city` (`city_id`, `state_id`, `city_name`) VALUES
	(1, 1, 'New York city'),
	(2, 1, 'Buffalo'),
	(3, 1, 'Albany'),
	(4, 2, 'Birmingham'),
	(5, 2, 'Montgomery'),
	(6, 2, 'Huntsville'),
	(7, 3, 'Los Angeles'),
	(8, 3, 'San Francisco'),
	(9, 3, 'San Diego'),
	(10, 4, 'Toronto'),
	(11, 4, 'Ottawa'),
	(12, 5, 'Vancouver'),
	(13, 5, 'Victoria'),
	(14, 6, 'Sydney'),
	(15, 6, 'Newcastle'),
	(16, 7, 'City of Brisbane'),
	(17, 7, 'Gold Coast'),
	(18, 8, 'Bangalore'),
	(19, 8, 'Mangalore'),
	(20, 9, 'Hydrabad'),
	(21, 9, 'Warangal');

	--
	-- Indexes for dumped tables
	--

	--
	-- Indexes for table `city`
	--
	ALTER TABLE `city`
	  ADD PRIMARY KEY (`city_id`);

	--
	-- AUTO_INCREMENT for dumped tables
	--

	--
	-- AUTO_INCREMENT for table `city`
	--
	ALTER TABLE `city`
	  MODIFY `city_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;  
*/
?>

//--------------------------------------------------------------------------

/*
 * Dynamic_dependent.php(Controller)
*/
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

	class Dynamic_dependent extends CI_Controller {
	 
		public function __construct()
		{
		    parent::__construct();
			$this->load->model('dynamic_dependent_model');
		}

		function index()
		{
			$data['country'] = $this->dynamic_dependent_model->fetch_country();
			$this->load->view('dynamic_dependent', $data);
		}

		function fetch_state()
		{
			if($this->input->post('country_id'))
			{
			   echo $this->dynamic_dependent_model->fetch_state($this->input->post('country_id'));
			}
		}

		function fetch_city()
		{
			if($this->input->post('state_id'))
			{
			   echo $this->dynamic_dependent_model->fetch_city($this->input->post('state_id'));
			}
		}
	  
	}
?>

//--------------------------------------------------------------------------

/*
 * Dynamic_dependent_model.php(Model)
*/
<?php
class Dynamic_dependent_model extends CI_Model
{
	function fetch_country()
	{
	    $this->db->order_by("country_name", "ASC");
		$query = $this->db->get("country");
		return $query->result();
	}

	function fetch_state($country_id)
	{
		$this->db->where('country_id', $country_id);
		$this->db->order_by('state_name', 'ASC');
		$query = $this->db->get('state');
		$output = '<option value="">Select State</option>';
			foreach($query->result() as $row)
			{
			   $output .= '<option value="'.$row->state_id.'">'.$row->state_name.'</option>';
			}
		return $output;
	}

	function fetch_city($state_id)
	{
		$this->db->where('state_id', $state_id);
		$this->db->order_by('city_name', 'ASC');
		$query = $this->db->get('city');
		$output = '<option value="">Select City</option>';
			foreach($query->result() as $row)
			{
			   $output .= '<option value="'.$row->city_id.'">'.$row->city_name.'</option>';
			}
		return $output;
	}
}
?>

//--------------------------------------------------------------------------

/*
 * dynamic_dependent.php(View)
*/
<html>
	<head>
		<title>Codeigniter Dynamic Dependent Select Box using Ajax</title>
		
	 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	 <style>
	 .box
	 {
	  width:100%;
	  max-width: 650px;
	  margin:0 auto;
	 }
	 </style>
	</head>
	<body>
	 <div class="container box">
	  <br />
	  <br />
	  <h3 align="center">Codeigniter Dynamic Dependent Select Box using Ajax</h3>
	  <br />
	  <div class="form-group">
	   <select name="country" id="country" class="form-control input-lg">
		<option value="">Select Country</option>
		<?php
		foreach($country as $row)
		{
		 echo '<option value="'.$row->country_id.'">'.$row->country_name.'</option>';
		}
		?>
	   </select>
	  </div>
	  <br />
	  <div class="form-group">
	   <select name="state" id="state" class="form-control input-lg">
		<option value="">Select State</option>
	   </select>
	  </div>
	  <br />
	  <div class="form-group">
	   <select name="city" id="city" class="form-control input-lg">
		<option value="">Select City</option>
	   </select>
	  </div>
	 </div>
	</body>
</html>

<script>
	$(document).ready(function(){
		$('#country').change(function(){
			var country_id = $('#country').val();
			if(country_id != ''){
			    $.ajax({
					url:"<?php echo base_url(); ?>dynamic_dependent/fetch_state",
					method:"POST",
					data:{country_id:country_id},
					success:function(data){
					    $('#state').html(data);
					    $('#city').html('<option value="">Select City</option>');
					}
			   });
			} else {
			   $('#state').html('<option value="">Select State</option>');
			   $('#city').html('<option value="">Select City</option>');
			}
		});

		$('#state').change(function(){
			var state_id = $('#state').val();
			if(state_id != ''){
			    $.ajax({
					url:"<?php echo base_url(); ?>dynamic_dependent/fetch_city",
					method:"POST",
					data:{state_id:state_id},
					success:function(data){
					    $('#city').html(data);
				    }
			   });
			} else {
			   $('#city').html('<option value="">Select City</option>');
			}
		});
	 
	});
</script>

Espero ter ajudado.

Atenciosamente,

Cesar

Caio Vargas · Novembro 12, 2021

Cara muito obrigado ... Então na verdade o meu sistema ta funcionando redondinho a única coisa que eu tô tendo problema e que o meu checkbox já está checado com o valor 2 que seria venda e quando eu clico em buscar ele não pega os resultados pq no meu arquivo filtro ele monta a query de acordo com os campos que eu busco

Omar~ · Novembro 14, 2021

Sabia que se você usar as ferramentas corretas uma parte do problema é resolvido?

Ao invés de usar um input checkbox use o radio que serve para esse tipo de situação.

Bom, não de para eu entender o real problema, mas o que me aparenta é que você precisa envia um cabeçalho HTTP como POST.

Se for esse o caso:

Spoiler


<p>venda<input type="radio" name="periodo" value="a" /></p>
<p>mensal<input type="radio" name="periodo" value="b" /></p>
<p>diária<input type="radio" name="periodo" value="c" /></p>

<select name="tipo" id="seletor">
    <option value="a">cidade</option>
    <option value="b">balneário</option>
    <option value="c">imóvel</option>
</select>

<div id="resposta"></div>

<script>
    document.getElementById('seletor').addEventListener('change', executaAjax, false);

    function executaAjax(s) {
        var seletor = s.target,
            executar = false,
            url = '',
            periodo = document.querySelectorAll('input[name="periodo"]'),
            xhttp = new XMLHttpRequest();

        periodo.forEach(function (p) {
            if (p.checked) {
                executar = true;
                url += p.name + '=' + p.value;
            }
        });
        
        if (executar) {
            url += '&' + seletor.name + '=' + seletor.value;

            xhttp.onload = function () {
                document.getElementById('resposta').innerHTML = this.responseText;
            };
            xhttp.open('POST', 'arquivo.php', true);
            xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhttp.send(url);
        }
    }
</script>

Caio Vargas · Novembro 14, 2021

Basicamente e isso .... O único problema e que o primeiro campo sempre vem checado que e o venda

Aí quando eu clicar em buscar ele vai pra página filtro onde me trás o imóvel e lá eu monto a query conforme o campo

Tipo selec from tabela where venda

Ele não pega pq como estou trabalhando via Ajax nós botões ele tem que ser obrigado a ser clicado para entrar na case e ativar a sessão pra montar a query ou seja se eu mandar via post e tentar montar a query e o campo tiver vazio ele não me dá resultado

Caio Vargas · Novembro 14, 2021

5 horas atrás, Omar~ disse:

Sabia que se você usar as ferramentas corretas uma parte do problema é resolvido?

Ao invés de usar um input checkbox use o radio que serve para esse tipo de situação.

Bom, não de para eu entender o real problema, mas o que me aparenta é que você precisa envia um cabeçalho HTTP como POST.

Se for esse o caso:

Mostrar conteúdo oculto



<p>venda<input type="radio" name="periodo" value="a" /></p>
<p>mensal<input type="radio" name="periodo" value="b" /></p>
<p>diária<input type="radio" name="periodo" value="c" /></p>

<select name="tipo" id="seletor">
    <option value="a">cidade</option>
    <option value="b">balneário</option>
    <option value="c">imóvel</option>
</select>

<div id="resposta"></div>

<script>
    document.getElementById('seletor').addEventListener('change', executaAjax, false);

    function executaAjax(s) {
        var seletor = s.target,
            executar = false,
            url = '',
            periodo = document.querySelectorAll('input[name="periodo"]'),
            xhttp = new XMLHttpRequest();

        periodo.forEach(function (p) {
            if (p.checked) {
                executar = true;
                url += p.name + '=' + p.value;
            }
        });
        
        if (executar) {
            url += '&' + seletor.name + '=' + seletor.value;

            xhttp.onload = function () {
                document.getElementById('resposta').innerHTML = this.responseText;
            };
            xhttp.open('POST', 'arquivo.php', true);
            xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhttp.send(url);
        }
    }
</script>

$WcImobiFilter = (!empty($_SESSION['wc_imobi_filter']) ? $_SESSION['wc_imobi_filter'] : null);
// $WcImobiFilter = (!empty($filter) ? $filter : $filter);
$FilterValues = (!empty($WcImobiFilter) ? http_build_query($WcImobiFilter) : null);
$FilterAdd = null;
if ($WcImobiFilter):
foreach ($WcImobiFilter as $fKey => $fValue):
$FilterAdd .= " AND {$fKey} = :{$fKey}";
endforeach;
endif;
$Page = (!empty($URL[1]) ? $URL[1] : 1);
$Pager = new Pager(BASE . "/filtro/", "<<", ">>", 3);
$Pager->ExePager($Page, 5);
$Read->ExeRead(DB_IMOBI, "WHERE realty_status = 1 {$FilterAdd} LIMIT :limit OFFSET :offset", "{$FilterValues}&limit={$Pager->getLimit()}&offset={$Pager->getOffset()}");

if ($Read->getResult()):
foreach ($Read->getResult() as $IMOBI):
extract($IMOBI);
$BOX = 3;
require REQUIRE_PATH . '/inc/moveis_lista.php';
endforeach;

$Pager->ExePaginator(DB_IMOBI, "WHERE realty_status = 1 {$FilterAdd}", "{$FilterValues}");
echo $Pager->getPaginator();
else:
$Pager->ReturnPage();
Erro("<div style='text-align: center'>Desculpe, mas não encontramos imóveis cadastrados nos termos desta consulta!</div>", E_USER_NOTICE);
endif;

Entrar

Filtro de busca

Recommended Posts

Caio Vargas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

violin101 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Caio Vargas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Caio Vargas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Caio Vargas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante