I am using dropzone 4.3.0 currently.
function HiddenNotesDropZone() {
$("#HiddenAttachments").dropzone({
maxFiles: 2000,
parallelUploads: 1,
maxFilesize: 2048,
filesizeBase: 1024,
disablePreviews: true,
clickable: true,
uploadMultiple: true,
addRemoveLinks: true,
createImageThumbnails: false,
url: "/api/Quotes/HiddenAttachments",
success: function(file, response) {
if (response !== -1) {
fileIds.push(response);
}
file._removeLink.href = "DeleteUpload/"+response;
}
});
}
This does not seem like it would be the proper means in which to set the specific thumbnails remove URL, which I would like to set to an api similar to the upload path however with the response Id which is the server database record Id. This might be a security flaw however for now I am willing to accept it as I don't know many means around it at the moment.
file._removeLink.href = "DeleteUpload/"+response;
It seems to function as I would like but it just doesn't seem correct or best practice.
I was able to figure out I could do this
function HiddenNotesDropZone() {
$("#HiddenAttachments").dropzone({
maxFiles: 2000,
parallelUploads: 1,
maxFilesize: 2048,
filesizeBase: 1024,
disablePreviews: true,
clickable: true,
uploadMultiple: true,
addRemoveLinks: true,
createImageThumbnails: false,
url: "/api/Quotes/HiddenAttachments",
success: function (file, response) {
file.Id = response;
if (response !== -1) {
fileIds.push(response);
}
},
removedfile: function(file) {
$.ajax({
type: "post",
url: "/api/Quotes/DeleteAttachment/"+file.Id,
});
}
});
}
Specifically by adding the Id to the file which is the response I can use the response to produce the api call to delete the file ID.
Related
I have an issue with ajax calling. It works correct except one thing, when I try to get data with the same option more than one times returns the new response but also still return the data of the previous response.
I think that there is something that I've missed.
ajax script
$('#search').on('click', function () {
var date = $("#date").val();
$.ajax({
type: 'GET',
url: '{{Route("dashboard.status")}}',
data: {
date: date
},
dataType: "JSon",
success: function(response){
console.log(response.manager_hourlog);
// Employee report script
var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
#if ($auth->user_type != 1)
// manager report script
var managerchartbar = {
labels: response.manager_projects,
datasets:
[{
label: response.users,
backgroundColor: colors[Math.floor(Math.random() * colors.length)],
data: response.totals
},]
};
var ctx = document.getElementById('manager').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: managerchartbar,
options: {
title: {
display: true,
text: 'Project Report chart'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
#endif
},
error: function(xhr){
console.log(xhr.responseText);
}});
});
});
</script>
You should change your method to POST for json request/response API, will be more secure and avoid laravel cache view it.
type: 'POST',
Try to change method to POST (do same for your api server and route).
If not work, please show your laravel API code.
you should set cache property to false or append "_={timestamp}" to the GET parameter
so add cache to your request:
cache:false
or append timestamp to your url:
url: '{{Route("dashboard.status")}}'+'_='+ + new Date().getTime(),
I am using angular datatable(1.10.19).
ref this for server side angular way
I have written web api in c# to get the data in desired format.
With following dtoptions, server side is working fine.
dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
processing: true,
serverSide: true,
orderCellsTop: true,
ajax: (dataTablesParameters: any, callback) => {
this.mainpageservice.GetPaginatedData(this.menuID, this.UserName, dataTablesParameters)
.subscribe(resp => {
this.Module = resp.data;
console.log('serverside', this.Module);
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: [],
});
});
},
Now, I want to display multiple tables that too using serverside angular way datatable. so to achieve this, I am using: for multiple datatables
as documented, I have created one function which is returning Datatable settings. But here ajax call is not working.
Can anyone suggest where I am doing wrong?.
private buildDtOptions(menu: number, Username: string): DataTables.Settings {
alert('call');
return {
pagingType: 'full_numbers',
pageLength: 10,
processing: true,
serverSide: true,
orderCellsTop: true,
ajax: (dataTablesParameters: any, callback) => {
console.log(dataTablesParameters);
this.mainpageservice.GetPaginatedData(menu, Username, dataTablesParameters).subscribe(resp => {
this.Module = resp.data;
console.log('serverside', this.Module);
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: [],
});
});
}
};
}
Not sure if you ran into the same issue that I did or not, but when I was moving to the "Server side the Angular way" from the "Angular Way", I forgot to remove the dtTrigger reference from the markup. Once I removed [dtTrigger]="dtTrigger" from the table tag all was good in my world.
I have a grid in ExtJs 4.2. I need to apply remote sorting, remort filtering and pagination. So my store look like this:
storeId: 'mainStore',
pageSize: 10,
autoLoad: {
start: 0,
limit: 10
},
autoSync: true,
remoteSort: 'true', //For Remote Sorting
sorters: [{
property: 'COM_KOP_Vertriebsprojektnummer'
direction: 'ASC'
}],
remoteFilter: true, //For Remote Filtering
proxy: {
type: 'rest',
filterParam: 'filter',
url: PfalzkomApp.Utilities.urlGetData(),
headers: {
'Content-Type': "application/xml"
},
reader: {
type: 'xml',
record: 'record',
rootProperty: 'xmlData'
}
}
I do not want to set buffered = true case that will load my pages in advance and I have 1000 pages and I don't want to do that.
Remote filtering, Pagination, sorting is working fine But when I try to filter some thing, a seprate request for sorting is going as well. How can I stop it?
two requests when I try to filter some thing:
http://127.0.0.1/projektierungen/?_dc=1437058620730&page=1&start=0&limit=10&sort=[{"property":"COM_KOP_Vertriebsprojektnummer","direction":"DESC"}]
http://127.0.0.1/projektierungen/?_dc=1437058620734&page=1&start=0&limit=10&sort=[{"property":"COM_KOP_Vertriebsprojektnummer","direction":"DESC"}]&filter=[{"property":"COM_KOP_Vertriebsprojektnummer","value":"2882"}]
How can I stop the first request?
My code for filtering column is this:
{
text: 'Vertriebsprojektnr',
dataIndex: 'COM_KOP_Vertriebsprojektnummer',
flex: 1,
items : {
xtype:'textfield',
flex : 1,
margin: 2,
enableKeyEvents: true,
listeners: {
keyup: function() {
var store = Ext.getStore('mainStore');
store.clearFilter();
if (this.value) {
//debugger;
//debugger;
store.filter({
property : 'COM_KOP_Vertriebsprojektnummer',
value : this.value,
anyMatch : true,
caseSensitive : false
});
}
},
buffer: 1000,
}
}
}
Due to this auto genrated request, my view is not working fine. As the result after filtering are replaced by this sorting request.
Kindly help.
The extra request is not there because of sorting but because of the call to store.clearFilter(). Try to call store.clearFilter(true) that suppresses the event what could prevent that extra request.
Why are you clearing you filters when the value is empty? Why not filter on an empty value? I almost got the same situation, but I think my solution works well without clearing anything. Besides that I don't want to know which store to filter or have the property name hardcoded. Here is my filterfield:
Ext.define('Fiddle.form.TextField', {
extend: 'Ext.form.field.Text',
alias: 'widget.filterfield',
emptyText: 'Filter',
width: '100%',
cls: 'filter',
enableKeyEvents: true,
listeners: {
keyup: {
fn: function(field, event, eOpts) {
this.up('grid').getStore().filter(new Ext.util.Filter({
anyMatch: true,
disableOnEmpty: true,
property: field.up('gridcolumn').dataIndex,
value : field.getValue()
}));
},
buffer: 250
}
}
});
And here is the view declaration:
dataIndex: 'company',
text: 'Company',
flex: 1,
items: [{
xtype: 'filterfield'
}]
I am trying to get a grid filled with the json response I would receive when making a httpwebrequest call to a url endpoint which requires authentication. The data will be in json form:
{
"data": [
{
"value": "(\"Samsung Health\")",
"tag": "ME"
},
{
"value": "(\"Samsung Galaxy Tab\")",
"tag": "HIM"
},
{
"value": "(\"Amazon fire\")",
"tag": "ME"
}
]
}
I am not sure how to even start and whether to use Ext.Ajax.Request or some type of call from code behind. I am using vb.net in code behind. Any suggestions appreciated. Sample code for ajax call;
function getMembers() {
var parameters = {
node: dynamicNodeId
}
Ext.Ajax.Request({
url: 'https://data.json',
method: 'GET',
jsonData: Ext.encode(parameters),
success: function (response, opts) {
alert('I WORKED!');
//decode json string
var responseData = Ext.decode(response.responseText);
//Load store from here
memberStore.loadData(responseData);
},
failure: function (response, opts) {
alert('I DID NOT WORK!');
}
});
}
The grid formation:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text: 'Query',
flex: 1,
sortable: false,
dataIndex: 'query'
},
{
text: 'Last Updated',
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
Here query would be the value from the json response and lastChange the current datetime. I tried the proxy request call and realized that since I am calling an endpoint on a different domain I needed to use jsonp.
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'jsonp',
extraParams: {
login: 'username',
password: 'password'
},
url: 'https://api.data/rules.json',
reader: {
type: 'json',
root: 'rules'
},
callbackParam: 'callback'
},
autoLoad: true
});
I might have to just figure out some other way to do by making sure all the data I needed is called to a database by some other function.
The best approach for your situation would be to create store that is configured with a remote proxy. See the example at the top of this documentation page: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store
The remote proxy will take care of the AJAX request to retrieve the data, and the store will automatically manage casting the data results to Ext.data.Model instances. Once the store is loaded with data, the grid to which the store is bound will also automatically handle rendering the data that has been populated into the store.
I am trying to use setlabel method of jqGrid along with setGroupHeaders. It does not work. But when I remove this setGroupHeaders, setLabel method works and I am able to change my column headers dynamically. Is there anyway to use both of the methods together?
Adding the code fragment
$("#aGrid").jqGrid({
shrinkToFit: false,
autowidth: true,
height: 305,
colNames: ['Parameter','T0','T1','T2','T3'],
colModel: [
{name:"paramName",index:"paramName",width:115,sortable:false,frozen:true},
{name:"t0",index:"t0",cellattr:myFormatter,hidden:false},
{name:"t1",index:"t1",cellattr:myFormatter,hidden:false},
{name:"t2",index:"t2",cellattr:myFormatter,hidden:false},
{name:"t3",index:"t3",cellattr:myFormatter,hidden:false}
],
viewrecords: true,
gridview: true,
sortable: false,
caption: "A Grid"
});
$("#aGrid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName:'t0',
numberOfColumns:8,
titleText:'10.152.141.142'}]
});
$.ajax({
type : "get",
url : url,
dataType: "json",
contentType: "application/json",
success : function(responseText){
for(var i=0;i<=responseText.length;i++)
{
if(i === 0){
var newColHeaders = responseText[i];
$("#aGrid").jqGrid('setLabel', "t0",newColHeaders['t0']);
$("#aGrid").jqGrid('setLabel', "t1",newColHeaders['t1']);
$("#aGrid").jqGrid('setLabel', "t2",newColHeaders['t2']);
$("#aGrid").jqGrid('setLabel', 't3',newColHeaders['t3']);
}else{
$("#aGrid").jqGrid('addRowData',i+1,responseText[i]);
}
}
},
error: function(xhRequest, ErrorText, thrownError){
}
});
If I use the same code after removing setGroupHeaders call in above code, column headers change works as expected.
This issue is because of your group header.
When you want to change the header, first destroy the group header and then call the setLabel and again reconstruct the group Header.
$("#aGrid").jqGrid('destroyGroupHeader');
//Now change the Label of header
$("#aGrid").jqGrid('setLabel', "to","ABC"); //colModel name value
constructGroupHeader();
Construct group Header should be like this
function constructGroupHeader()
{
jQuery("#aGrid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName:'t0',
numberOfColumns:8,
titleText:'10.152.141.142'}]
});
}
Hope this helps.