How do I load selects with jQuery, Ajax and Codeigniter

Question

How do I load selects with jQuery, Ajax and Codeigniter

Navigation

#1 by (1 votes)

0

As it does, this file is to load the library of jquery to be able to use ajax and the jquery code where we will say that when the select with id country changes of option, in the change event

table pp_countries
------------------
id
country_name

table pp_cities
---------------
id
country_ID
city_name

The home.php driver

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home extends CI_Controller {

    public function __construct(){
        parent::__construct();
        $this->ads = '';
        $this->ads = $this->ads_model->get_ads();
    }

    public function index()
    {

        //Comuna
        $data['cities_res'] = $this->cities_model->get_all_cities();

        //Cuidad
        $data['country_res'] = $this->countries_model->get_all_countries();

        $this->load->view('home_view',$data);
    }
}

the model cities_model.php

public function get_all_cities($id) {
        $this->db->select('*');
        $this->db->from('pp_cities');
        $this->db->order_by("sort_order", "ASC");
        $this->db->order_by("city_name", "ASC");
        $Q = $this->db->get();
        if ($Q->num_rows > 0) {
            $return = $Q->result();
        } else {
            $return = 0;
        }
        $Q->free_result();
        return $return;
    }

the countries_model.php model

public function get_all_countries() {
        $this->db->select('*');
        $this->db->from('pp_countries');
        $this->db->order_by("id", "ASC");
        $Q = $this->db->get();
        if ($Q->num_rows > 0) {
            $return = $Q->result();
        } else {
            $return = 0;
        }
        $Q->free_result();
        return $return;
    }

the view home_search.php

<?php echo form_open_multipart('buscador/search',array('name' => 'jsearch', 'id' => 'jsearch'));?>
    <div class="col-md-4">
          <!--<input type="text" required name="job_params" id="job_params" class="form-control" placeholder="Job title or Skill" />-->

      <select class="form-control" name="jcountry" id="jcountry">

        <option value="" selected>Select City</option>
        <?php if($country_res): foreach($country_res as $country):?>
          <option value="<?php echo $country->country_name;?>"><?php echo $country->country_name;?></option>
        <?php endforeach; endif;?>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" name="jcity" id="jcity">

        <option value="" selected>Select City</option>
        <?php if($cities_res): foreach($cities_res as $cities):?>
            <option value="<?php echo $cities->city_name;?>"><?php echo $cities->city_name;?></option>
        <?php endforeach; endif;?>
      </select>
    </div>

    <div class="col-md-2">
      <input type="submit" name="job_submit" class="btn" id="job_submit" value="Search"  />
    </div>
<?php echo form_close();?>

jquery php ajax codeigniter

asked by Diego Sagredo 30.03.2017 в 23:50

source

1 answer

mb_strtoupper () Does not work On server problem error query mysql delivery null values

score 1 · Answer 1

Based on a project that I have in the same way, your code would be as follows:

Driver:

class Home extends CI_Controller {
public function __construct(){
    parent::__construct();
    $this->ads = '';
    $this->ads = $this->ads_model->get_ads();
}

public function index()
{
    //Cuidad
    $data['country_res'] = $this->countries_model->get_all_countries();

    $this->load->view('home_view',$data);
}

public function get_cities(){

        $options = "";
        if ($this->input->post('id_country')) {
            $id_country = $this->input->post('id_country');
            $cities_res = $this->cities_model->get_all_cities($id_country);
            foreach ($cities_res as $fila) {
                ?>
                <option value="<?php echo $fila->id ?>"><?php echo $city_name ?></option>
                <?php
            }
        }
}

}

Cities_model:

public function get_all_cities($id) {
        $this->db->select('*');
        $this->db->from('pp_cities');
        $this->db->where('country_ID', $id);
        $this->db->order_by("sort_order", "ASC");
        $this->db->order_by("city_name", "ASC");
        $Q = $this->db->get();
        if ($Q->num_rows > 0) {
            $return = $Q->result();
        } else {
            $return = 0;
        }
        $Q->free_result();
        return $return;
    }

View:

<?php echo form_open_multipart('buscador/search',array('name' => 'jsearch', 'id' => 'jsearch'));?>
    <div class="col-md-4">
          <!--<input type="text" required name="job_params" id="job_params" class="form-control" placeholder="Job title or Skill" />-->

      <select class="form-control" name="jcountry" id="jcountry">

        <option value="" selected>Select City</option>
        <?php if($country_res): foreach($country_res as $country):?>
          <option value="<?php echo $country->id;?>"><?php echo $country->country_name;?></option>
        <?php endforeach; endif;?>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" name="jcity" id="jcity">

          <option value=""></option>
      </select>
    </div>

    <div class="col-md-2">
      <input type="submit" name="job_submit" class="btn" id="job_submit" value="Search"  />
    </div>
<?php echo form_close();?>

Via Ajax you bring the results from your controller.

Ajax:

$(document).ready(function(){
                $("#jcountry").change(function () {
                    $("#jcountry option:selected").each(function () {
                        id_country = $('#jcountry').val();
                        $.post("<?php echo base_url() ?>home/get_cities", {
                            id_country: id_country
                        }, function (data) {
                            $("#jcity").html(data);
                        });
                    });
                });
            });

For more information you can support the following tutorial:

link