asp.net - How to lock screen on Jquery Onclick and ajax call -
i have submit button id "go" retrieving data server side due data length large taking large long time load .for reason want add screen locker on go button click dont have idea how through jquery on client side..
please direct me link can jquery screen locker ...
here code...
$(document).ready(function () { $("#go").click(function (e) { e.preventdefault(); $("#gridid").gridunload(); gridload(); }); }); function gridload() { $.ajax({ url: 'default2.aspx/mymethod?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val(), datatype: 'json', contenttype: "application/json; charset=utf-8", type: 'post', success: function (reportdatanew, textstatus, xmlhttprequest) { //debugger; griddata = json.parse(reportdatanew.d); //console.log(griddata); //alert(griddata.length); $("#gridid").jqgrid({ data: griddata, datatype: "local", height: '100%', autowidth: true, ignorecase: true, rownum: 50, rowlist: [50, 100, 200], colnames: ['username', 'ordinal', 'extension', 'trunk', 'dialdate', 'dialtime', 'duration', 'destination', 'price'], colmodel: [ { name: 'username', index: 'username', width: 100, editable: true, sortable: true, align: 'center' }, { name: 'ordinal', index: 'ordinal', width: 100, editable: true, sortable: true, align: 'center' }, { name: 'extension', index: 'extension', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'trunk', index: 'trunk', width: 100, editable: true, sortable: true, align: 'center' }, { name: 'dialdate', index: 'dialdate', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'dialtime', index: 'dialtime', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'duration', index: 'duration', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'destination', index: 'destination', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'price', index: 'price', width: 100, editable: true, sortable: true, align: 'center' } ], pager: '#gridpager', viewrecords: true, toppager: true, loadtext: 'loading...' }); any appreciated.. in advance..
if want make screen "locked" should add <div class="locker"></div> @ end of body tag in html code. add styling locker class:
.locker { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); /*lets make semi-transparent */ z-index: 9999; /*because set z-indexes in code before, lets make sure on every elements in html*/ } and javascript code should like:
$(document).ready(function () { var locker = $('.locker'); $("#go").click(function (e) { e.preventdefault(); $("#gridid").gridunload(); gridload(); canclick = false; locker.css('display', 'block'); }); }); function gridload() { $.ajax({ url: 'default2.aspx/mymethod?fromdate=' + $("#fromdate").val() + '&todate=' + $("#todate").val(), datatype: 'json', contenttype: "application/json; charset=utf-8", type: 'post', success: function (reportdatanew, textstatus, xmlhttprequest) { locker.css('display', 'none'); //debugger; griddata = json.parse(reportdatanew.d); //console.log(griddata); //alert(griddata.length); $("#gridid").jqgrid({ data: griddata, datatype: "local", height: '100%', autowidth: true, ignorecase: true, rownum: 50, rowlist: [50, 100, 200], colnames: ['username', 'ordinal', 'extension', 'trunk', 'dialdate', 'dialtime', 'duration', 'destination', 'price'], colmodel: [ { name: 'username', index: 'username', width: 100, editable: true, sortable: true, align: 'center' }, { name: 'ordinal', index: 'ordinal', width: 100, editable: true, sortable: true, align: 'center' }, { name: 'extension', index: 'extension', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'trunk', index: 'trunk', width: 100, editable: true, sortable: true, align: 'center' }, { name: 'dialdate', index: 'dialdate', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'dialtime', index: 'dialtime', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'duration', index: 'duration', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'destination', index: 'destination', editable: true, width: 100, sortable: true, align: 'center' }, { name: 'price', index: 'price', width: 100, editable: true, sortable: true, align: 'center' } ], pager: '#gridpager', viewrecords: true, toppager: true, loadtext: 'loading...' });
Comments
Post a Comment