Wednesday 18 January 2017

How to use ajax inside bootstrap multiselect dropdown

Create Dropdown:

    <select multiple id="projectList">
                <option value="0" id="liteBlue">Option1</option>
                <option value="1" id="liteBlue">Option2</option>
               <option value="2" id="liteBlue">Option3</option>
               <option value="3" id="liteBlue">Option4</option>
               <option value="4" id="liteBlue">Option5</option>
   </select>


User jQuery Ajax Inside bootstrap multiselect dropdown.

<script>
$(document).ready(function(){

      $('#projectList').multiselect({
numberDisplayed: 1,
maxHeight: 275,
includeSelectAllOption: true,
selectAllText: 'All Projects',
nonSelectedText: 'All Projects',
onSelectAll: function() {
var projectIds = $('#projectList option:selected');
var selected = [];
$(".projectBreadcrumbs").html('');
$(projectIds).each(function(index, brand){
if($(this).val()!="multiselect-all"){
selected.push([$(this).val()]);
}
});
var projectIdString =  selected.join(",");
},
onDeselectAll: function () {
var projectIds = $('#projectList option:selected');
var selected = [];
$(projectIds).each(function(index, brand){
if($(this).val()!="multiselect-all"){
selected.push([$(this).val()]);
}
});
var projectIdString =  selected.join(",");
},
onChange: function(element, checked) {
var projectIds = $('#projectList option:selected');
var selected = [];
$(".projectBreadcrumbs").html('');
$(projectIds).each(function(index, brand){
if($(this).val()!="multiselect-all"){
selected.push([$(this).val()]);
}
});
var projectIdString =  selected.join(",");
                        ajax_load_status_jobs()
}
});


function ajax_load_status_jobs() {
var projectIdString         = $("#projectsIds").val();
var jobStatusIdString = $("#jobStatusIds").val();
var keyword_search = $("#searchJob").val();
$.ajax({
type: "POST",
url: "action_url",
dataType: 'html',
data: {'jobStatusId': jobStatusIdString, 'project_id':projectIdString, 'keyword_search':keyword_search},
cache:false,
beforeSend: function() {
$(this).prop("disabled", true);
$( '.setAjaxData').html('<div style="margin-bottom: 0px; margin-top: 2px;"><center><img src="'+base_url+'images/ajax-loader-bg-white.gif" style="height:50px;"></center></div>');
},
complete: function(){
$(this).prop("disabled", false);
},
success:
function(data){
//alert(data);
$(".setAjaxData").html(data);
},
error:
function(e) {
//alert(e.message);
$('.setAjaxData').html('<div class="jobTrack">No Recrod Found!</div>');
}
});
    }

});
</script>

No comments:

Post a Comment