php - How to display data from code igniter model with AJAX request -
my codeigniter site has side panel , when click or select options in side panel appropriate content appear main panel.
home page url http://localhost/main/userinfo/allusers when click female button url http://localhost/main/userinfo/female
have following output when made ajax request. did mistake? 
controller(main.php)
class main extends ci_controller { public function __construct() { parent::__construct(); $this->load->model('userinfo_model'); } public function index() {} public function userinfo($gender) { $this->load->view('home/inc/header_view'); $usermain_data['user_info'] = $this->userinfo_model->get_data($gender); $this->load->view('home/main_view', $usermain_data); } model(userinfo_model.php)
class userinfo_model extends ci_model { function __construct() { // call model constructor parent::__construct(); } function get_data($gender) { $this->db->select('*'); if($gender == 'female'){ $this->db->where('gender', 0); } elseif($gender == 'male'){ $this->db->where('gender', 1); } elseif($gender == 'allusers'){ $gnames = array(0, 1); $this->db->where_in('gender', $gnames); } else { redirect(base_url() . 'main/userinfo/allusers'); } $query = $this->db->get('tble_userinfo'); //return $query->result(); echo(json_encode($query->result())); }} view(main_view.php)
<div class="container"> <div class="row"> <div class="col-md-3 side_menu"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default gender-label" id="lbl-female" onclick="displayfemale()"> <input type="radio" name="options" id="option1" autocomplete="off"> <span>female</span> </label> <label class="btn btn-default gender-label" id="lbl-male" onclick="displaymale()"> <input type="radio" name="options" id="option2" autocomplete="off"> <span>male</span> </label> </div> <br> <br> <label class="label nav-label">age</label> <select class="btn nav-age-select" id="ageselect1" autocomplete="off"> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21" selected="selected">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> </select> <label class="label nav-label label-to">to</label> <select class="btn nav-age-select" id="ageselect2" autocomplete="off"> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25" selected="selected">25</option> </select> </div> <div class="col-md-8 main-body"> <div id="userdata"> <?php //foreach ($user_info $info) { //confuse of adding date here ajax //echo $info->content . '<br />' . $info->added_date .'<br />'; //} ?> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { var ajaxurl = '<?php echo base_url(); ?>' + 'main/userinfo'; var gender = 'allusers'; // defual 1 female , male both getajax(ajaxurl, gender); $("#lbl-female").click(function () { gender = 'female'; getajax(ajaxurl, gender); }); $("#lbl-male").click(function () { gender = 'male'; getajax(ajaxurl, gender); }); }); function getajax(ajaxurl, gender){ ajaxurl = ajaxurl + '/' + gender; $.ajax({ url: ajaxurl, datatype: "json", type: "post", success: function (retdata) { $("#userdata").html(''); if(retdata.hasownproperty("error")){ $("#userdata").html('<div">' + retdata.msg + '</div>'); } else{ $.each(retdata, function(i){ $("#userdata").append(retdata[i].content + '<br>'); }); } } }); }
this answer have main load both genders initially. rather use several gender specific urls gender buttons return html of selected gender , dynamically change html of page.
main_view.php (with javascript included)
<div class="container"> <div class="row"> <div class="col-md-3 side_menu"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default gender-label" id="lbl-female"> <input type="radio" name="options" id="option1" autocomplete="off"> <span>female</span> </label> <label class="btn btn-default gender-label" id="lbl-male"> <input type="radio" name="options" id="option2" autocomplete="off"> <span>male</span> </label> </div> <br> <br> <label class="label nav-label">age</label> <select class="btn nav-age-select" id="ageselect1" autocomplete="off"> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21" selected="selected">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> </select> <label class="label nav-label label-to">to</label> <select class="btn nav-age-select" id="ageselect2" autocomplete="off"> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25" selected="selected">25</option> </select> </div> <div class="col-md-8 main-body"> <div id="userdata"> <?php foreach($user_info $info) { echo $info->content.'<br />'.$info->added_date.'<br />'; } ?> </div> </div> </div> </div> <script> $(document).ready(function () { var ajaxurl = '<?php echo base_url(); ?>' + 'main/userinfo'; $("#lbl-female").click(function () { getajax(ajaxurl, 'female'); }); $("#lbl-male").click(function () { getajax(ajaxurl, 'male'); }); }); function getajax(url, gender) { $.ajax({ url: url, data: {gender: gender}, datatype: "html", type: "post", success: function (retdata) { $("#userdata").html(retdata); } }); } </script> note in $.ajax options line
data: {gender: gender}, we "posting" data controller retrieved using $this->input->post("gender"); in ajax response function.
models should not return data controller use. controller's job determine happens based on data returned. redirect() call has been removed.
userinfo_model.php
class userinfo_model extends ci_model { function __construct() { // call model constructor parent::__construct(); } // note default value argument $gender. // means not have pass argument. // if don't pass one, !empty($gender) === false function get_data($gender = null) { $this->db->select('*'); //select based on gender. //if no $gender "where" clause not needed , both genders selected if(!empty($gender)) //an argument provided { if($gender == 'female') { $this->db->where('gender', 0); } else { $this->db->where('gender', 1); } } $query = $this->db->get('tble_userinfo'); return $query->result(); } } finally, controller. index() display both genders calling get_data() without passing argument model. after ajax responder userinfo() return html of desired gender ajax success function. success function replace existing html new html echoed userinfo().
class main extends ci_controller { public function __construct() { parent::__construct(); $this->load->model('userinfo_model'); } public function index() { $usermain_data['user_info'] = $this->userinfo_model->get_data(); $this->load ->view('home/inc/header_view') ->view('home/main_view', $usermain_data); } //only used respond ajax request public function userinfo() { $gender = $this->input->post('gender'); if(empty($gender)) { $out = "no users found"; } else { $user_info = $this->userinfo_model->get_data($gender); $out = ""; foreach($user_info $info) { $out .= $info->content.'<br />'.$info->added_date.'<br />'; } } echo $out; } } this seems reasonably secure far. user input gender value. (never trust user input) should try pass value other string "female" database return males info. no user input presented directly database don't see vulnerabilities.
Comments
Post a Comment