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
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}
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.
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);
}
});
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
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() != '') {
}
}
});