Passing xhr data to rubaxa fileapi - javascript

I am using this api for file upload and need to pass some data dynamically when onFilePrepare event is fired but it is not sending that data to url. Please suggest as I have to add 1 new data param b from onFilePrepare event, which is not avaiable during initially since fileapi is being called from nested ajax setup
https://github.com/RubaXa/jquery.fileapi
CODE :
$('#multiupload').fileapi({
url: "url",
data: ({'a':'A'}),
clearOnComplete: true,
multiple: true,
elements: {
ctrl: { upload: '.js-upload' },
emptyQueue: { hide: '.js-upload' },
list: '.js-files',
name: '.js-name',
size: '.js-size',
file: {
tpl: '.js-file-tpl',
preview: {
el: '.b-thumb__preview',
width: 80,
height: 80
},
upload: { show: '.progress', hide: '.b-thumb__rotate' },
complete: { hide: '.progress' },
progress: '.progress .bar'
}
},
onFilePrepare : function(evt,ui) {
//pass more data dynamically
ui.xhr.options.data = { 'a':'A','b':'B'};
console.log(ui.xhr.options);
},
onComplete : function (evt, ui) {
//read ajax data returned
var data = JSON.parse(ui.xhr.response);
console.log(ui.xhr.options);
}
});

With latest Rubaxa library, this works by doing as below -
Thanks to rubaXa for helping in git
Changes in onFilePrepare
$('#multiupload').fileapi({
url: "url",
data: ({'a':'A'}),
clearOnComplete: true,
multiple: true,
elements: {
ctrl: { upload: '.js-upload' },
emptyQueue: { hide: '.js-upload' },
list: '.js-files',
name: '.js-name',
size: '.js-size',
file: {
tpl: '.js-file-tpl',
preview: {
el: '.b-thumb__preview',
width: 80,
height: 80
},
upload: { show: '.progress', hide: '.b-thumb__rotate' },
complete: { hide: '.progress' },
progress: '.progress .bar'
}
},
onFilePrepare : function(evt,ui) {
//pass more data dynamically
ui.options.data.b = 'B';
},
onComplete : function (evt, ui) {
//read ajax data returned
var data = JSON.parse(ui.xhr.response);
console.log(ui.xhr.options);
}
});

Related

eventHandler trigger multiple times when using .on() only

function changeStatus() {
$('#dataTable tbody').on('change', '.orderStatus', function () {..code}
}
function showOrdersInModal() {
$('#dataTable tbody').on('click', '.fa-eye-btn', function (e) {...code}
}
function addUrl() {
$('#dataTable tbody').on('click', '.addUrl', function () {..code}
}
function showOrders() {
$.ajax({
type: 'method',
url: 'url',
data: { data },
success: function (response) {
$('#dataTable').DataTable().clear().destroy();
let data = JSON.parse('[' + response.replace(/}{/g, '},{') + ']');
$('#dataTable').DataTable( {
autoWidth: false,
pageLength: 25,
lengthMenu: [[25, 50, 100, 500, -1], [25, 50, 100, 500, 'All']],
data: data,
columns: [
{ data: 'receipt' },
{ data: 'first_last_name' },
{ data: 'contact_no' },
{ data: 'address' },
{ data: 'email' },
{ data: 'url' },
{ data: 'status' },
],
});
showOrdersInModal();
changeStatus();
addUrl();
},
});
}
showOrders();
When I use .off() before .on(), the only last function will execute which is addUrl(); but when I remove the .off() it will trigger the event depending on how many times I click any of each button or element.
Is there a way that I can make the eventHandler trigger once even if I clicked any of the buttons multiple times?
or is there a way to execute all three functions not just the addUrl(); function at the end?
I found the answer and when using the dataTables I cannot access the DOM after the next page so I use drawCallback which like this:
$('#dataTable').dataTable({
drawCallback: function () {
showOrdersInModal();
changeStatus();
addUrl();
},
retrieve: true,
deferRender: true,
data: data,
columns: [
{ data: 'data' },
],
});
then I just use this.
$('.className').off().on('click', function () {..code}

How do I change floatingFilter option after Init of AGGrid?

I'm using AgGrid with JavaScript module. I'm trying to change the value of floatingFilter after init of Grid by calling api.refreshHeader method but it's not working.
function getServices() {
var columnDefs = [
{ field: 'name', headerName: 'Name' },
{ field: 'Category', headerName: 'Category' },
];
var gridOptions = {
animateRows: true,
columnDefs: columnDefs,
defaultColDef: {
resizable: true,
filter: true,
sortable: true,
flex: 1,
},
floatingFilter: true, // I want to change this after init
};
var gridDiv = document.querySelector('#serviceGrid');
var gridInstance = new agGrid.Grid(gridDiv, gridOptions);
$.ajax({
type: 'GET',
dataType:"JSON",
url: 'FROM_URL',
success:function(data){
gridOptions.api.setRowData(data)
}
});
// For testing purpose I'm using timeout
setTimeout(function() {
gridInstance.gridOptions.floatingFilter = false;
gridInstance.gridOptions.api.refreshHeader();
}, 5000)
}
Correct me if I'm wrong anywhere.
I am not sure which version you are using, but in the latest version, floatingFilters go inside columnDefinitions and not inside gridOptions.
Move floatingFilters inside defaultColDef in your gridOptions.
var gridOptions = {
animateRows: true,
columnDefs: columnDefs,
defaultColDef: {
resizable: true,
filter: true,
sortable: true,
flex: 1,
floatingFilter: true, // I want to change this after init
},
};
and then change your setTimeout function to this.
// For testing purpose I'm using timeout
setTimeout(function() {
gridInstance.gridOptions.defaultColDef.floatingFilter = false;
gridInstance.gridOptions.api.refreshHeader();
}, 5000)
Here is a plnkr I forked from one of their examples that works.
Hope I was able to help.

DataTables Dynamic displayStart

I'm trying to get my javascript to use a dynamic value for "displayStart". I'm getting the data from a php script that returns JSON.
Here is my js:
balance.list = function () {
$('#balance').dataTable({
processing: true,
ajax: {
url: 'php/list.php',
dataSrc: 'data'
},
dom: '<"top"flp<"clear">>rt<"bottom"ip<"clear">>',
pageLength: 50,
autoWidth: false,
displayStart: '100',
columns: [
{
width: "10%",
data: "date"
}, {
width: "5%",
data: "checknum"
}, {
width: "75%",
data: "description"
}, {
width: "5%",
data: "debit"
}, {
width: "5%",
data: "credit"
}, {
width: "5%",
data: "balance"
}]
});
};
instead of
displayStart: '100',
I want it be something like:
displayStart: displayStart.displayStart,
But I'm setting the dataSrc to data, which is another branch of the JSON
And here is the JSON data:
{
"displayStart":"100",
"data": [
{
"date":"2015-03-27",
"checknum":null,
"description":null,
"debit":"50.00",
"credit":"0.00",
"balance":"500.00"
},
{
"date":"2015-03-28",
"checknum":null,
"description":null,
"debit":"0.00",
"credit":"250.00",
"balance":"750.00"
}
]
}
I've messed around with the ajax portion using a success/error function, but then it doesn't continue on to finish the table.
How do I set the value?
You can change the page after the data has been loaded by adding two event handlers after you DataTables initialization code as shown below.
// Handles DataTables AJAX request completion event
$('#balance').on('xhr.dt', function( e, settings, json){
$(this).data('is-loaded', true);
});
// Handles DataTables table draw event
$('#balance').on('draw.dt', function (){
if($(this).data('is-loaded')){
$(this).data('is-loaded', false);
var api = $(this).DataTable();
var json = api.ajax.json();
var page_start = json['displayStart'];
// Calculate page number
var page = Math.min(Math.max(0, Math.round(page_start / api.page.len())), api.page.info().pages);
// Set page
api.page(page).draw(false);
}
});

Open the Results of Autocomplete in Fancybox

I have the following autocomplete searchbox code
$("#searchbox").autocomplete({
source: function(request,response) {
$.ajax({
type: "POST",
dataType: "json",
data: { term: request.term },
url: "/Settings/Find?searchString="+request.term,
success: function(data) {
response($.map(data,function(item) {
return { label: item.Name ,value: item.Type, ID: item.ID};
}
))
}
})
},
messages: {
noResults: "No Results",results: "Results"
},
select: function(e, ui) {
window.location.assign('/Item/Details/'+ui.item.ID);
}
},
});
When the user clicks on the autocompleted items, I redirect them to the detail page of the item using this
window.location.assign('/Item/Details/'+item.ID);
Now, I want to display the details of the item in a fancybox without redirect the user to another page. So when the user clicks on the autocompleted results, a fancybox opens up with the details of the selected item.
Here is the fancybox code That i would like to call.
$('.fancyboxdisplay').fancybox({
fitToView: false,
autoSize: false,
closeClick: false,
width: '550px',
height:'680px',
padding: 15,
closeBtn:true,
'afterClose': function() {
window.location.reload();
},
});
I looked everywhere for a possible solution but i can't figure it out. Can you please help !
Thanks
Within your select setting, try replacing window.location.assign by the fancybox script like :
select: function (e, ui) {
// window.location.assign('/Item/Details/' + ui.item.ID);
$.fancybox({
href: '/Item/Details/' + ui.item.ID,
type: "iframe",
fitToView: false,
autoSize: false,
closeClick: false,
width: 550,
height: 680,
padding: 15,
closeBtn: true,
afterClose: function () {
window.location.reload();
}
});
}
It's assumed you have previously loaded fancybox js and css files

Dynatree is stuck loading the icon

I use dynatree to display a list of documents. When I load the template, the dynatree was stuck in the loading icon. What could be wrong?
$("#tree").dynatree({
checkbox: true,
selectMode: 2,
initAjax: {
url: "/getTree/",
dataType: "json",
data: {}
},
onSelect: function(node) {
},
onActivate: function (node) {
},
persist: true,
noLink: false,
fx: { height: "toggle", duration: 200 },
onPostInit: function (isReloading, isError) {
if (getStringOfSelectedTreeNodes() != '') {
}
}
}); });
</script>
Did you have an example maybe on CodePen to check what the issue is. It seems the last }); end braces was not needed, was this because it was within a jQuery $(document).ready(); method. Otherwise this would be the correct code: Some good examples on the dynatree example page which I'm sure you've seen.
$("#tree").dynatree({
checkbox: true,
selectMode: 2,
initAjax: {
url: "/getTree/",
dataType: "json",
data: {}
},
onSelect: function(node) {
},
onActivate: function (node) {
},
persist: true,
noLink: false,
fx: { height: "toggle", duration: 200 },
onPostInit: function (isReloading, isError) {
if (getStringOfSelectedTreeNodes() != '') {
}
}
});

Categories