kaya new kaya new - 4 months ago 34
Ajax Question

Multiselect dropdown listbox code using cakephp

i have two dependent select box in my form for selecting country and state.

when i select country India then it should populate its dependent state.upto this my code working fine...

bit i want to make this multiselect listbox.

Ex - if i select two countries from county dropdown then it populates states from two countries....not of single selected country.

below is my code...

HTML Select list box code

<?php
echo $this->Form->input('service_area_category_id', array(
'id' => 'shipping_type',
'required' => false,
'multiple' => 'multiple',
'type' => 'select',
'class' => 'form-control drop-arrow',
'label' => false,
'options' => $serviceCategory,
'empty' => '--Select--'
));
?>

<?php
echo $this->Form->input('ship_category', array(
'class' => 'form-control drop-arrow',
'required' => false,
'id' => 'state',
'label' => false,
'options' => '$states',
'empty' => '--Select--'
));
?>


Controller function

public function getServiceArea(){
$this->loadModel('ServiceAreaCategory');
$serviceCategory = $this->ServiceAreaCategory->find('list', array(
'conditions' => array(
'is_active' => 1
),
'fields' => array(
'ServiceAreaCategory.id',
'ServiceAreaCategory.name'
),
'order' => 'name ASC'
));
$this->set('serviceCategory', $serviceCategory);
}


public function loadSkills() {
$this->loadModel('Skill');
$states = array();
if (isset($this->request['data']['id'])) {
$states = $this->Skill->find('list', array(
'fields' => array(
'Skill.id',
'Skill.skill_name'
),
'conditions' => array(
'Skill.service_area_category_id' => $this->request['data']['id']
)
));
}
echo json_encode($states);
exit();
}


Ajax Script

<script type="text/javascript">
$(document).ready(function() {
$("#shipping_type").on('change', function() {
var id = $(this).val();
if (id) {
var dataString = 'id=' + id;
$.ajax({
type: "POST",
url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills")); ?>',
data: dataString,
dataType: 'JSON',
cache: false,
beforeSend: function() {
$('.spinicon').show();
},
complete: function() {
$('.spinicon').hide();
},
success: function(html) {
$("#loding1").hide();
$.each(html, function(key, value) {
$('<option>').val('').text('select');
$('<option>').val(key).text(value).appendTo($("#state"));
});
$('#state').selectpicker('refresh');
}
});
}
});

});
</script>

Answer

in your cakephp side function should be

public function loadSkills() {

        $exploded_ids=explode(",",$this->request['data']['country_ids']);
        $ids= "IN ('".implode(",",$exploded_ids).")";
        $this->loadModel('Skill');
        $states = array();
        if (isset($this->request['data']['id'])) {
        $states = $this->Skill->find('list', array('fields' => array('Skill.id','Skill.skill_name'),'conditions' => array(
        'Skill.service_area_category_id '.$ids )));
        }            
        echo json_encode($states);
        exit();
}     

And your Javascript and AJAX code Should be

<script type="text/javascript">
    $(document).ready(function() {
        $("#shipping_type").on('change', function() {
            var ids = $(this).val();           
            if (id) {

                $.ajax({
                    type: "POST",
                    url: '<?php echo Router::url(array("controller" => "Profiles", "action" => "loadSkills"),true); ?>',
                    data: {country_ids: ids}
                    dataType: 'JSON',
                    cache: false,
                    beforeSend: function() {
                        $('.spinicon').show();
                    },
                    complete: function() {
                        $('.spinicon').hide();
                    },
                   success: function(html) {
                        $("#loding1").hide();
                        $("#state").html("");
                        $.each(html, function(key, value) {
                            $('<option>').val('').text('select');
                            $('<option>').val(key).text(value).appendTo($("#state"));
                        });
                        $('#state').selectpicker('refresh');
                    }
                });
            }
        });

    });
</script>
Comments