Welcome Guest, Not a member yet? Register   Sign In
Search filter using ajax
#1

(This post was last modified: 04-24-2017, 06:24 AM by ciadmin.)

Hiii,

I have developed shopping website. But while searching product i have filter that using ajax but stuck somehow ....please help me...

here is my code....

Code:
 
    <div class="row" style="margin-bottom: -30px; border: 1px lightgray inset; background-image: url('<?php echo base_url();?>assets/images/headerbanner3.jpg')">
       <nav class="navbar-form" style="margin-left: 25%; ">
           <form action="<?php echo base_url();?>resource_controller/search_users" method="POST">
               <input type="hidden" id="multiskills" name="multiskills">
                                <script type="text/javascript">
                                        function allskill() {
                                        var mk = $('#selskill').val();
                                        document.getElementById('multiskills').value = mk;
                                    }
                                        </script>
                                        <select class="selectpicker" multiple data-live-search="true" id="selskill" name="selskill" required="required"
                                                data-live-search-placeholder="Search" data-actions-box="true">
                            <?php 
                            $sk=$this->skills_model->get_skills();
                            foreach ($sk->result() as $row) {
                                echo '<option>';
                                echo $row->name;
                                echo '</option>';
                            }
                            
                            ?>
                                </select>  
          <button type="submit" class="btn btn-success input-group" onclick="javascript:allskill()">
                                    <i class="fa fa-search"></i> Search</button>
        </form>
            <div style="margin-left: 80%"><a> sort by </a>
               <select name="filter" class="form-control">
                   <option>Qualification</option>
                   <option>Experience</option>
                   <option>Ranking</option>
               </select>
            </div>                               
      </nav>
    </div>
    <div class="container-fluid" style="">
<div class="modal-dialog  pull-left" style="width: 25%; ">
    <!-- Modal content-->
    <div class="modal-body">
        <div class="row">
            <article role="login" style="min-height: 400px;">
                <form name="filters" action="<?php echo base_url('resource_controller/view_div');?>">
                <div class="pull-left">
                    <h4 class="text-center"><i class="fa fa-filter"></i> Filter By Region </h4></div><br><br>
                    <div class="form-group">
                        <div class="regions">
                         <label class="check-inline">
                             <input type="checkbox" id="sangli" name="region[]" value="Sangli" class="category"
                                    onclick="javascript:updateregion()" 
                                    > Sangli</label><br>
                         <label class="check-inline">
                             <input type="checkbox" id="satara" name="region[]" value="Satara" class="category"
                               onclick="javascript:updateregion()" 
                               >Satara</label><br>
                        <label class="check-inline">
                            <input type="checkbox" id="kolhapur" name="region[]" value="Kolhapur" class="category"
                               onclick="javascript:updateregion()" 
                               >Kolhapur</label><br>
                        <label class="check-inline">
                            <input type="checkbox" id="solapur" name="region[]" value="Solapur" class="category"
                                   onclick="javascript:updateregion()" 
                                   >Solapur</label><br>
                            <input type="hidden" name="filterbyregion" id="filterbyregion"> 
                        <script type="text/javascript">
                            function updateregion() {
                                var textbox = "";
                                var rgns = [];
                             if(document.getElementById('sangli').checked) {
                                 if (textbox == "") {
                                     textbox += "Sangli";
                                 } else {
                                     textbox += ", Sangli";
                                 }
                                 rgns.push('sangli');
                                }
                                if(document.getElementById('satara').checked) {
                                  if (textbox == "") {
                                     textbox += "Satara";
                                 } else {
                                     textbox += ", Satara";
                                 }
                                 rgns.push('satara');
                                }
                                if(document.getElementById('kolhapur').checked) {
                                  if (textbox == "") {
                                     textbox += "Kolhapur";
                                 } else {
                                     textbox += ", Kolhapur";
                                 }
                                 rgns.push('satara');
                                }
                                if(document.getElementById('solapur').checked) {
                                  if (textbox == "") {
                                     textbox += "Solapur";
                                 } else {
                                     textbox += ", Solapur";
                                 }
                                 rgns.push('satara');
                                }
                                document.getElementById('filterbyregion').value = textbox;
                              //  document.filters.submit();
                                jQuery.ajax({
                                    url: '<?php echo site_url();?>resource_controller/view_div',
                                    type: "POST",
                                    data: {"txt": textbox},
                                    success: function() {
                                $('#filter_div').load('<?php echo site_url();?>resource_controller/view_div');
                                  },
                                    error: function(error) {
                                        console.log(error);
                                    }
                                 });
                            }
                            
                        </script>
                    <div class="panel group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse1">
                                    <i class="fa fa-plus"></i> More Regions</a>
                            </h4>
                            </div>
                            <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">
                        <?php $attribut = array("name" => "form", "id" => "form");
                            echo form_open("resource_controller/view_div", $attribut);?>
                            <script type="text/javascript">
                                function filterregion() {
                            document.getElementById('filterbyregion').value = document.getElementById('district').value;
                            $("#form").submit();
                            }
                            </script>
                            <div class="form-group">
                            <label class="col-md-3 control-label">State</label>
                            <div class="col-md-9">
                                <?php $attribut = 'id="state" class="form-control"';
                                    echo form_dropdown('state', $state, set_value('state'), $attribut); ?>
                            </div>
                            </div> <div class="clearfix"></div><br>
                            <div class="form-group">
                                <label class="col-md-3 control-label">District</label>
                                <div class="col-md-9">
                                <?php $attribut = 'id="district" class="form-control"';
                                $distattribut = array("name" => "form", "id" => "form");
                                    echo form_dropdown('district', $district, set_value('district'), $attribut,
                                            'onChange="javascript:filterregion()"'); ?>
                                </div>
                            </div><div class="clearfix"></div><br>
                            <div class="form-group">
                                <label class="col-md-3 control-label">Taluka</label>
                                <div class="col-md-9">
                                <?php $attribut = 'id="taluka" class="form-control"';
                                    echo form_dropdown('taluka', $taluka, set_value('taluka'), $attribut); ?>
                                </div>
                            </div>
                        <?php echo form_close(); ?>
                        </div></div>
                        </div>
                        <div class="clearfix"></div><br>
                        
                    </div>
                        </div></div>
                    <div class="pull-left">
                    <h4 class="text-center"><i class="fa fa-user"></i> Qualification </h4></div><br><br>
                    <div class="form-group">
                         <label class="check-inline">
                             <input type="checkbox" id="mcom" name="MCom"> MCom</label><br>
                         <label class="check-inline">
                        <input type="checkbox" id="ba" name="BA"> BA</label><br>
                        <label class="check-inline">
                        <input type="checkbox" id="hsc" name="HSC"> HSC</label><br>
                        <label class="check-inline">
                        <input type="checkbox" id="ssc" name="SSC"> SSC</label><br>
                    <div class="panel group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse2">
                                    <i class="fa fa-plus"></i> More Qualification</a>
                            </h4>
                            </div>
                            <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <select id="qualification" name="qualification" class="form-control">
                                
                            <?php 
                            foreach ($courses as $course) {
                                 ?>
                                <option><?php echo $course;?></option>
                                <?php
                             }
                            ?></select>
                        </div></div>
                        </div>
                        <div class="clearfix"></div><br>
                    </div>
                    </div>
                    <div class="pull-left">
                    <h4 class="text-center"><i class="fa fa-user"></i> Experience </h4></div><br><br>
                    <div class="form-group">
                         <label class="check-inline">
                             <input type="checkbox" id="exp" name="exp"> More than 5 years</label><br>
                         <label class="check-inline">
                        <input type="checkbox" id="exp5" name="exp5"> 2 to 5 years</label><br>
                        <label class="check-inline">
                        <input type="checkbox" id="exp2" name="exp2"> 0 to 2 years</label><br>
                        <label class="check-inline">
                            <input type="checkbox" id="fresher" name="Fresher"> Fresher</label><br><br><br>
                    </div> 
                    
                    <div class="pull-left">
                    <h4 class="text-center"><i class="fa fa-user"></i> Ranking </h4></div><br><br>
                        <div class="radio">
                            <label><input type="radio" name="ranking" value="4,5" id="rad1"
                                          onclick="javascript:ranking()">
                                <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> & up</label><br>
                                
                                <label><input type="radio" name="ranking" value="3,4,5" id="rad2"
                                              onclick="javascript:ranking()">
                                    <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> 
                            <i class="fa fa-star-o"></i> & up</label><br>
                            
                            <label><input type="radio" name="ranking" value="2,3,4,5" id="rad3"
                                          onclick="javascript:ranking()">
                                <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> 
                            <i class="fa fa-star-o"></i> & up</label> <br>
                                <label><input type="radio" name="ranking" value="1,2,3,4,5" id="rad4"
                                              onclick="javascript:ranking()">
                                    <i class="fa fa-star"></i> <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> 
                            <i class="fa fa-star-o"></i> & up</label><br>
                            <input type="hidden" id="selrank" name="selrank">
                            <script type="text/javascript">
                            function ranking() {
                                alert('ranking');
//                                if(document.getElementById('rad1').checked) {
//                                    document.getElementById('selrank').value = document.getElementById('rad1').value;
//                                    $("#rankingform").submit();
//                                }
//                                if(document.getElementById('rad2').checked) {
//                                    document.getElementById('selrank').value = document.getElementById('rad2').value;
//                                    $("#rankingform").submit();
//                                }
//                                if(document.getElementById('rad3').checked) {
//                                    document.getElementById('selrank').value = document.getElementById('rad3').value;
//                                    $("#rankingform").submit();
//                                }
//                                if(document.getElementById('rad4').checked) {
//                                    document.getElementById('selrank').value = document.getElementById('rad4').value;
//                                    $("#rankingform").submit();
//                                }
                            }    
                            </script>
                        </div>
                    </form>
            </article>
        </div>
    </div>
</div>

<div class="modal-dialog pull-right" id="filter_div" style="width: 75%; height: auto;">
    <?php $this->load->view('/web/filtered_resources');?>
    <!--<iframe src="<?php //$this->load->view('/web/filtered_resources');?>"></iframe>-->
</div>
</div></div>

Code:
public function search_users() {
            $rgn = str_replace(",", "','", $this->input->post('filterbyregion'));
            $rank = str_replace(",", "','", $this->input->post('ranking'));
            $exp = str_replace(",", "','", $this->input->post('selexperiance'));
            $qual = str_replace(",", "','", $this->input->post('qualification'));
            //$sk = $this->session->userdata('skills');
            $mskills = str_replace(",", "','", $this->input->post('multipleskills'));
            $multiskills = str_replace(",", "','", $this->input->post('multiskills'));
            $filterskills = str_replace(",","','", $this->input->post('filterskills'));
            $sk = "";
            if ($mskills != "") {
                $sk = $mskills;
            } else 
            if ($multiskills != "") {
                $sk = $multiskills;
            } else 
            if ($filterskills != ""){
                $sk = $filterskills;
            }
            $this->q['h'] = $this->resource_model->search_users($sk,$rgn,$qual,$exp,$rank);
            $this->q['state'] = $this->place_model->get_state();
            $this->q['district'] = $this->place_model->get_district();
            $this->q['taluka'] = $this->place_model->get_taluka();
            $this->q['courses'] = $this->course_model->get_all_course_names();
            if(isset($this->q['h']) && $this->q['h']->num_rows() > 0)
            {
                $this->load->view('/web/searched_resources',$this->q);
            }else {
                echo '<script>alert("No resources are available!")</script>';
                $this->load->view('/web/searched_resources');
            }
            return array();
        }


Attached Files
.php   search_controller.php (Size: 1.18 KB / Downloads: 202)
.php   resource_controller.php (Size: 12.72 KB / Downloads: 150)
Reply
#2

Please use BBcode (https://forum.codeigniter.com/misc.php?a...help&hid=7) so your posts are readable. Not too many will read a post which is pages long.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB