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>

Internet Security Software

This utility allows you to block unwanted websites from display in Internet Explorer. If a website is blocked the user is forwarded to a blank page or to a "blocked page" and the contents of the original page are not loaded on your PC. Stop your kids from spending hours in chat rooms or remove undesired websites from their view. Prevent your children from having access to certain websites content such as adult sites and gambling. The software includes password protected mode so that other computer users can not modify the list of blocked web sites and password protected uninstall.

Features: 


  • Block websites of your choice.

  • Block Messengers.

  • Block Any Application of PC.

  • Allows to lock and unlock any drive, folder and files.

  • Full Admin Control.
  • (Block Task Manager, Folder Option, Registry, Search, Run, Device Manager, Internet Option and Command Prompt)

  • Use password protected mode so that other users can not change settings.
Click here to download

Update data attribute value using jquery


Set Attribute Value Using Jquery

$('.className img').data('block', 'something');
$('.className img').attr('src', 'something.jpg');


OR


$('.className img[data-id="4"]').attr('data-block', 'something');
$('.className img[data-id="4"]').attr('src', 'something.jpg');


Update many image elements. You want to update the value of specific image by using data-id

$('.className img').each(function(index) {
    if($(this).attr('data-id') == '5')
    {
        $(this).attr('data-block', 'something');
        $(this).attr('src', 'something.jpg');
    }
});

OR

$('.className img[data-id="5"]').attr('data-block', 'something');
$('.className img[data-id="5"]').attr('src', 'something.jpg');