I am using the "events" elements of fullcalendar to get data dynamically. This works fine and I'm happy with it, however, I need to be able to pass a GET / POST parameter to the PHP page, and I'm unsure how to refresh the call to include the changed variable... My code is like this:
function redrawMe() {
var resource_array = get_resources();
$("#calendar").fullCalendar({
"cache" : true,
"editable" : true,
"events" : {
"url" : "/ajax/get_calendar_entries.php",
"data" : function() {
return { "resources" : resource_array }
}
}
});
}
function get_resources() {
let view_id = $("#view_id").val();
let promise = $.ajax({
"url" : "/ajax/get_resources.php",
"data" : { "view_id" : view_id },
"dataType" : "json"
});
promise.done(function(data) {
return data;
});
}
Tl;Dr:
I have a dropdown ("view_id") that just needs to fire redrawMe() and redraw the calendar dynamically.
Currently, I can see in the network tab of the developer tools, that the "events" url isn't being fired, and I think its probably because the #calendar div is "already" a calendar?
Make sense?
As recommended by #ADyson - I pass the view_id in the ajax call and use that, rather than multiple calls.
function redrawMe() {
$("#calendar").fullCalendar({
"cache" : true,
"editable" : true,
"eventClick" : function(calEvent, jsEvent, view) {
showJob(calEvent.job_id);
},
"data" : function() {
return {
"view_id" : $("#view_id").val(),
});
});
}
The above works fine
When I want to force a refresh I use this:
$("#calendar").fullCalendar("refetchEvents");
Related
Using Datatables with AJAX / POST, I initialize like this, where experiment_list is a list, and $("#type") is a selector menu.
var my_table = $('#my_table').DataTable( {
"ajax": {"url": "/experiment_data/", "type":"POST", "data": {"experiments": experiment_list, "type": $("#type_selector").val() } },
"dom": '<"top">rt<"bottom"fp><"clear">',
} );
The problem I am having is that "type" is at initialization to the selector menu value, and changing the value after that and reloading the data, does not change the value in the "ajax" method.
$("#type_selector").change(function () {
console.log($("#type_selector").val());
position_table.ajax.reload()
});
The API Documentation only has .url() for a dynamic method, which would mean either using GET (which is not very good for object type data) or rewriting views for each selector 'type' (and changing the url on select).
Is there a way to update the Data load of the Post request Dynamically?
Did you try with the sample request they provide ?
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "/experiment_data/",
"data": function ( d ) {
d.experiments = experiment_list;
d.type = $("#type_selector").val();
}
}
});
If it fails, can you provide the log of Firebug please ?
So I've been using jstree for a while now, but still can't get a handle on it, it's pretty much a headache but well, it was decided we were gonna work with it. The data I'm using comes from HTML (no JSON involved). The issue I'm having is that I'm not sure how to set that some nodes are not folders. Every node has a class and based on that class I'm able to change it's icon but if the user tries to send any node inside these nodes that are not supposed to be folders they will be able. I need to prevent this, one way or the other but every thing I've test so far has not work at all.
$("jstree").jstree({
"core": {
"animation": 0,
"check_callback": true
},
rules: { draggable: "all" },
"dnd": {
"drop_finish": function (data) {
if (data.o.attr("rel") === "ds") {
//update chart with new data here?
//using data.o.attr("id")
}
},
"drag_check": function (data) {
if (data.r.attr("rel") != "ds") {
return false;
}
return {
after: false,
before: false,
inside: true
};
}
},
"crrm": {
"move": {
"check_move": function (data) {
// alert(data.r.attr("id"));
if (data.r.attr("id") == "999") {
return false;
}
else {
return true;
}
}
}
},
"plugins": ["dnd", "crrm"]
});
That's what I'm using to create my tree. Also, I cannot disable drag and drop since some items should be moved if the user wants but obviously the user shouldn't be able to drag something into anything that is not a folder.
Thanks in advance for the help,
Regards,
Adrian.
I accomplished this by using the Types plugin jstree plugins. There you can define types of nodes and set the valid_children variable which types are allowed to be children. That means that users also cannot DnD nodes of the restricted type into the node.
In my example below I have a type "book" that could have "folder" and "file" nodes as children. The "file" type cannot have any children at all, because valid_childrenis defined empty.
$('#' + tree_id)
.jstree({
'core' : {
'check_callback' : true, //needed to enable create, remove, rename... events
"themes" : {
"stripes" : true
}
},
"types" : {
"book" : {
"valid_children" : ["folder", "file"],
"icon" : "img/1397762742_book.png"
},
"folder" : {
"valid_children" : ["folder", "file"],
"icon" : "img/1397751666_folder.png"
},
"file" : {
"valid_children" : [],
"icon" : "img/1397752227_page.png"
}
},
"contextmenu" : {
"items" : customMenu
},
"plugins" : ["sort", "dnd", "contextmenu", "types"]
});
The type attribute can be set when adding a new node
tree.create_node("#", {
"text" : "sample node",
"type" : "file"
});
or by using the set_type function. API
I have a couple of grids, divided in an accordion layout. They basicly show the same kind of data so an grouped grid should do the trick, however it looks really good this way and so far it works good too.
Left of the grids there is a form panel which is used to edit grid records, when I click on a record in the grid the appropriate data shows up in the form. I can edit the data, but when I click the save button, which triggers an 'model'.save() action, the related grid row draws blank and a dirty flag appears. I checked the model and the 'data' attribute doesn't contain any data but the id, the data is present in the 'modified' attribute.
I read that the red dirty flag means that the data isn't persisted in the back-end, but in this case it is. The request returns with a 200 status code and success : true.
The onSave method from the controller:
onSave : function() {
// Get reference to the form
var stepForm = this.getStepForm();
this.activeRecord.set( stepForm.getForm().getValues() );
this.activeRecord.save();
console.log( this.activeRecord );
}
The step store:
Ext.define( 'Bedrijfsplan.store.Steps', {
extend : 'Ext.data.Store',
require : 'Bedrijfsplan.model.Step',
model : 'Bedrijfsplan.model.Step',
autoSync : true,
proxy : {
type : 'rest',
url : 'steps',
reader : {
type : 'json',
root : 'steps'
},
writer : {
type : 'json',
writeAllFields : false,
root : 'steps'
}
}
} );
Step model:
Ext.define( 'Bedrijfsplan.model.Step', {
extend : 'Ext.data.Model',
fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],
proxy : {
type : 'rest',
url : 'steps',
successProperty : 'success'
}
} );
Step grid
Ext.define( 'Bedrijfsplan.view.step.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.stepsgrid',
hideHeaders : true,
border : false,
columns : [ {
header : 'Titel',
dataIndex : 'title',
flex : 1
} ]
} );
I spend a couple of hours searching and trying, but I still haven't found the solution. Some help on this matter would be appreciated :)
Your model updating code:
this.activeRecord.set( stepForm.getForm().getValues() );
Should work, but I might try splitting it into two lines and setting a breakpoint to verify that getValues() is returning what you're expecting.
Also ensure that you have the name attribute set for each field in your form and that it matches exactly to the names of fields in your model.
Finally, it's better to call .sync() on the store rather than .save() on the model when you're working with a model that belongs to a store. They option autoSync: true on the store will make this happen automatically each time you make a valid update to one of its models.
The BasicForm.loadRecord and BasicForm.updateRecord methods provide a nice wrapper around the functionality you're seeking that may work better:
onRowSelected: function(activeRecord) {
stepForm.getForm().loadRecord(activeRecord);
}
onSaveClick: function() {
var activeRecord = stepForm.getForm().getRecord();
stepForm.getForm().updateRecord(activeRecord);
activeRecord.store.sync();
}
The only oddity I see is with your: this.activeRecord.set( stepForm.getForm().getValues() );
I've always used .set() on the store never on the record. e.g.:
myDataStore.set( stepForm.getForm().getValues() );
Is there any way to add an event listener to the load/update event of a ajax based tabpanel in ExtJS v3.3.1? I need an event that fires after the tab content is retrieved and fully rendered, not right after the tab is selected/activated and the loading spinner is displayed.
I thought I would be able to add this event on the Ext.Updater object returned by the tabpanel's getUpdater() method, i.e.:
myTabs.getUpdater().on('update', function()
{
console.log('tab loaded');
});
But that does not seem to work. Any ideas?
Edit: Here's my full implementation to make it easier to see what I'm trying to do:
var myTabs = new Ext.TabPanel(
{
id : 'rec_tabs',
activeTab : 0,
enableTabScroll : true,
padding : 5,
autoWidth : false,
autoHeight : true,
border : false,
plain : true,
defaults : { autoHeight: true },
items :
[
{ title : 'Tab #1', autoLoad : { url : 'tab1_content.php', scripts : true } },
...
]
});
myTabs.render('tab_div');
myTabs.getUpdater().on('update', function()
{
console.log('tab loaded');
});
Finally figured it out. I hadn't realized that the properties of the "autoLoad" config object for each item of the TabPanel are actually just used as parameters for the Ext.Updater.update() method. So all I had to do was is along with the "url" and "scripts" parameters, is define the "callback" property as a function to be executed when the tab content is finished loading into its body, and its good to go.
Have you tried this?
myTabs.on("afterrender", function() {
console.log('tab loaded');
});
I've got two instances of uploadify in my form. You'll find the definitions below.
And two buttons that trigger the uploads. The image button is the only one relevant to the question:
$( "#btnimageupload" ).button().click(function()
{
$('#picbrowse').uploadifySettings( 'scriptData', ({ 'isSelected': $( '#selectImage' ).val() }));
$('#picbrowse').uploadifyUpload();
});
Now, here's the issue:
When I click btnimageupload button, the image doesn't upload. The progressbar goes to 100 and stops. No errors, javascript or otherwise.
But, when I disable the vdobrowse file input box, and its corresponding script, everything works fine. The images are uploaded and the data is transferring.
Here's the tricky part... if I don't pass the scriptData on the btnimageupload click handler, images will upload even with vdobrowse file input box on the page.
So it seems to me like scriptData is breaking uploadify when there's more than one instance of uploadify on the page.
Anyone know how I could solve this?
Uploadify definitions
$('#picbrowse').uploadify(
{
uploader : 'script/uplodify/uploadify.swf',
script : '../../dopost.php',
cancelImg : 'script/uplodify/cancel.png',
folder : '/images',
queueID : 'picqueue',
auto : false,
multi : true,
fileDesc : 'Image Files',
fileExt : '*.gif;*.jpg;',
queueSizeLimit: 5,
scriptData:
({
'action': 'upload_image',
}),
onComplete: function( event, queueID, fileObj, response, data )
{
console.log( reponse)
}
});
.
$('#vdobrowse').uploadify(
{
uploader : 'script/uplodify/uploadify.swf',
script : '../../dopost.php',
cancelImg : 'script/uplodify/cancel.png',
folder : '/video',
queueID : 'vdoqueue',
auto : false,
multi : true,
fileDesc : 'Video Files',
fileExt : '*.avi;*.mpg;*.mov;*.mp4;*.mpeg;*.flv;*.mkv;*.wmv',
queueSizeLimit: 5,
scriptData:
{
action: 'upload_video'
},
onComplete: function( event, queueID, fileObj, response, data )
{
console.log( response );
}
});
The plugin appears to be putting the
options into global space, which is
why when you are using two or more
uploadify's with scriptData it is
picking up the last stored value in
scriptData.
I see running two uploadify's on one
page a pointless exercise and as such
I never test the functionality with
multiple uploadify's.
uploadifySettings works perfectly with
one uploadify. Multiple uploadify's
are the demo page to demonstrate the
different setups possible.
That said, it is still obviously a
problem for users and we will need to
fix it for those that wish to use
multiple uploadify's on the same page.
Forum
I suggest to use swfUpload. I am use in at my project and tested with multiple instances and it's work perfect. So swfUpload easy to understand and api looks like as uploadify api.
Given that there seems to be a limitation with scriptData and multiple Uploadifys on a page, what you could do is skip the scriptData and folder attributes and parse out the file types inside dopost.php and take an action based on that.
For example:
$fileParts = pathinfo($_FILES['Filedata']['name']);
$extension = strtolower($fileParts['extension']);
switch($extension){
case "gif" | "jpg":
// Do Image Upload Action
break;
case "avi" | "mpg" | "mov" | "mp4" | "mpeg" | "flv" | "mkv" | "wmv":
// Do Video Upload Action
break;
}
I'm receiving the scripData just fine, I've made an example on my website
I've limited the upload size to 500KB for obvious reasons and corrected the code:
$('#picbrowse').uploadify(
{
uploader : 'uploadify.swf',
script : 'uploadify.php',
cancelImg : 'cancel.png',
folder : 'uploads/images',
queueID : 'picqueue',
auto : false,
multi : true,
removeCompleted : false,
fileDesc : 'Image Files',
fileExt : '*.gif;*.jpg',
sizeLimit : 512000,
queueSizeLimit: 5,
scriptData: {action: 'upload_image'},
onComplete: function( event, queueID, fileObj, response, data )
{
$ul.html('');
var json = jQuery.parseJSON(response);
$.each(json,function(k,v){
var li = "<li>"+k+": "+v+"</li>";
$ul.append(li);
});
},
onError: function (event,ID,fileObj,errorObj) {
console.log(errorObj.type + ' Error: ' + errorObj.info);
}
});
$('#vdobrowse').uploadify(
{
uploader : 'uploadify.swf',
script : 'uploadify.php',
cancelImg : 'cancel.png',
folder : 'uploads/video',
queueID : 'vdoqueue',
auto : false,
multi : true,
sizeLimit : 512000,
fileDesc : 'Video Files',
fileExt : '*.avi;*.mpg;*.mov;*.mp4;*.mpeg;*.flv;*.mkv;*.wmv',
queueSizeLimit: 5,
scriptData: {action: 'upload_video'},
onComplete: function( event, queueID, fileObj, response, data )
{
$ul.html('');
var json = jQuery.parseJSON(response);
$.each(json,function(k,v){
var li = "<li>"+k+": "+v+"</li>";
$ul.append(li);
});
}
});
And I'm using the standard uploadify.php and echoing the POST variable instead:
echo json_encode($_POST);