13. Spring - Adding bootsrap alert and using It call to backend.

-

Adding bootsrap alert and using It call to backend.

Go to bootboxjs.com and download any alert message JS code and import it to project.


<table id="productsTable" class="table table-condensed table-bordered">


// list of all products for admin
var $productsTable = $('#productsTable');

if($productsTable.length) {
var jsonUrl = window.contextRoot + '/json/data/admin/all/products';
$productsTable.DataTable({
lengthMenu : [ [ 10, 30, 50, -1 ], [ '10 Records', '30 Records', '50 Records', 'ALL' ] ],
pageLength :30,
ajax : {
url : jsonUrl,
dataSrc :''
},
columns : [
{data:'id'},
{data:'code',
bSortable:false,
mRender:function(data,type,row) {
return'<img src="' + window.contextRoot
+ '/resources/images/' + data
+ '.jpg" class="dataTableImg"/>';
}
},
{data :'quantity',
mRender :function(data, type, row) {
if (data <1) {
return'<span style="color:red">Out of Stock!</span>';
}
return data;
}
},
{data :'unitPrice',
mRender :function(data, type, row) {
return'&#8377; ' + data
}
},
{data :'active',
bSortable :false,
mRender :function(data, type, row) {
var str = '';
if(data) {
str += '<label class="switch"><input type="checkbox" value="'+row.id+'" checked="checked"><div class="slider round"></div></label>';

}else {
str += '<label class="switch"><input type="checkbox" value="'+row.id+'"><div class="slider round"></div></label>';
}

return str;
}
},
{data :'id',
bSortable :false,
mRender :function(data, type, row) {
varstr = '';
str += '<a href="'
+ window.contextRoot
+ '/manage/'
+ data
+ '/product" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span></a>&#160;';

return str;
}
}
],


initComplete:function () {
var api = this.api();
api.$('.switch input[type="checkbox"]').on('change' , function() {
var dText = (this.checked)?'You want to activate the Product?':'You want to de-activate the Product?';
var checked = this.checked;
var checkbox = $(this);
debugger;
bootbox.confirm({
size:'medium',
title:'Product Activation/Deactivation',
message: dText,
callback:function (confirmed) {
if (confirmed) {
$.ajax({
type:'GET',
url:window.contextRoot + '/manage/product/'+checkbox.prop('value')+'/activation',
timeout :100000,
success :function(data) {
bootbox.alert(data);
},
error :function(e) {
bootbox.alert('ERROR: '+ e);
//display(e);
}
});
}
else {
checkbox.prop('checked', !checked);
}
}
});
});

}
});
}





Comments

Post a Comment

Popular posts from this blog

09.Data Binding.

-
Image
Data Binding. Data binding ආකාර 2 කි. One-way Data Binding - component to view (DOM) or view to the component Two-way Data Binding - component to view and view to the component. One-way Data Binding in Angular Component to view (DOM) or view to component One-way data binding will bind the data from the component to the view (DOM) or from view to the component. One-way data binding is unidirectional. You can only bind the data from component to the view or from view to the component. a). From Component to View      01.   Interpolation Binding      02.   Property Binding      03.   Attribute Binding      04.   Class Binding      05.   Style Binding b). From View to Component      01.  Event binding  From Component to View     Style and Class Binding Directives – Directives are nothing but custom html element that angular provi...
Read more

Database - Topics

-
Image
 Topics  01. Steps in SQL Query Execution 02. How does the database create a query plan 03. How Query Plan Caching Works 04. What is the need for an execution plan? 05. How Do Query/ Query Plan Execute (Inside MySQL Server) 06. Importance Of Undo Log 07. How Row Lock Is Handle When Query On The Table Row 08. Technique to recover the committed changes 09. Auditing technique 10. Query cache 11. DB connection pool 12. What is ACID? 13. Optimizing SQL queries
Read more

02. Spring – Creating spring project clone it with GIT step by step.

-
Image
  Creating spring project clone it with GIT step by step. 01. Create an empty GIT repository and select a repository name. 02.   Check to add README.md and technology to add it inside the gitignire file0- it will include all the generated class when we complete the application. 03.      Copy the github repository URL. 04 . Open eclipse and go to,             Window – Show View – Other - Type git on the folder and select git repositories. 05.   Now clone this repository at your desired location in which we are going to keep the project specific file . a)         a)  Step One.             b)  Step  Two .          c)    Step Three. Both projects are generated as bellows           d) Step Four  Open the gitingnore file and ignore the target folder of the project. All the class files which are ...
Read more