I see some answers for the Jeditable plugin to use a callback function from AJAX using complete callback function.
I know that the Jeditable has a callback function for the SUBMIT button, so I would like to know if there is a way to have a callback for the CANCEL button? I haven't found on the plugin docs.
Thanks for reply,
Carlos
PD. This is the source I see for COMPLETE from AJAX callback:
$("#editable_text").editable(submitEdit, {
indicator : "Saving...",
tooltip : "Click to edit...",
name : "Editable.FieldName",
id : "elementid",
type : "text",
});
function submitEdit(value, settings)
{
var edits = new Object();
var origvalue = this.revert;
var textbox = this;
var result = value;
edits[settings.name] = [value];
var returned = $.ajax({
url: "http://URLTOPOSTTO",
type: "POST",
data : edits,
dataType : "json",
complete : function (xhr, textStatus)
{
var response = $.secureEvalJSON(xhr.responseText);
if (response.Message != "")
{
alert(Message);
}
}
});
return(result);
}
Yes, there is a "onreset" parameter that is called when clicking cancel, or more generally, before jEditable resets the control back to the state before it was clicked. Add this to your code:
$("#editable_text").editable(submitEdit, {
//...
onreset: jeditableReset,
//...
});
function jeditableReset(settings, original) {
// whatever you need to do here
}
This is documented in the header of the jquery.jeditable.js file.
Another note - if you don't submit on blur (you don't appear to be in the sample), the onreset event will fire then too.
Related
I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).
I just want to add a button next to the big play button... Can someone help me?
Thanks...
PS: I'm using it in angularJS but I guess this can not a problem
This is how you can add download button to the end of control bar without any plugins or other complicated code:
var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
constructor: function () {
vjsButtonComponent.apply(this, arguments);
},
handleClick: function () {
document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
},
buildCSSClass: function () {
return 'vjs-control vjs-download-button';
},
createControlTextEl: function (button) {
return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
}
}));
videojs(
'player-id',
{fluid: true},
function () {
this.getChild('controlBar').addChild('DownloadButton', {});
}
);
I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.
How it works:
We registering a new component called 'DownloadButton' that extends built-in 'Button' component of video.js lib
In constructor we're calling constructor of the 'Button' component (it is quite complicated for me to understand it 100% but it is similar as calling parent::__construct() in php)
buildCSSClass - set button classes ('vjs-control' is must have!)
createControlTextEl - adds content to the button (in this case - an icon and title for it)
handleClick - does something when user presses this button
After player was initialized we're adding 'DownloadButton' to 'controlBar'
Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar
This is how I created a simple button plugin for videojs 5:
(function() {
var vsComponent = videojs.getComponent('Button');
// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
constructor: function() {
vsComponent.call(this, videojs, null);
}
});
// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';
// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};
// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
// Add our className to the returned className
return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};
// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
// Add specific click actions here.
console.log('clicked');
};
videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};
var pluginFn = function(options) {
var SampleButton = new videojs.SampleButton(this, options);
this.addChild(SampleButton);
return SampleButton;
};
videojs.plugin('sampleButton', pluginFn);
})();
You can use it this way:
var properties = { "plugins": { "muteBtn": {} } }
var player = videojs('really-cool-video', properties , function() { //do something cool here });
Or this way:
player.sampleButton()
I'm building a app with jquerymobile and I've a page which is a form where I have to fill some info about the field job I have done so I can save it, instead of arriving to the store and fill the paperwork by guessing the time of arrival and the time of the finish.
So, I want to fill the form and when I tap on submit, it saves a txt or another file type on the android phone.
Thanks
This worked for me...
When user clicks the save button
var form_1;
var jsonString;
function saveFormState() {
form_1 = $("#form").find("select,textarea, input").serializeArray();
jsonString = JSON.stringify(form_1);
console.log(jsonString);
getFSToSaveForm();
}
function getFSToSaveForm(){
window.requestFileSystem(LocalFileSystem.PERSISTENT,0 ,function(fileSystem){
var entry=fileSystem.root;
entry.getDirectory('myForms', {create:true, exclusive:false}, function(dirEntry){
dirEntry.getFile('formToSave.json', { create: true, exclusive: false}, saveToJsonFile, onError);
}, onError);
}, onError);
}
function saveToJsonFile(fileEntry){
fileEntry.createWriter(function(writer){
writer.onwrite = function (evt) {
console.log("Wrote to file: " + jsonString);
};
writer.write(jsonString);
}, onError);
}
If you want to restore:
+Read the file and save the read text on a vaiable
Then use some Jquery.
var jsonString;
function getFSToRead(){} //You can find the code in the cordova API http://cordova.apache.org/docs/en/2.5.0/cordova_file_file.md.html
function restoreFormState() {
var newObjectArray ;
newObjectArray = JSON.parse(jsonString);
console.log(newObjectArray.length);
jQuery.each( newObjectArray, function( i, field ) {
$( '#' + field.name).val(field.value);
});
}
Hope that helps
I have seen form file upload example in ExtJS4 and i need customize progress of the file upload.
I see waitMsg config property, but i don't want use that and i don't want use extjs 3rd party plugins.
So, how i can get simply current upload progress from upload form in extjs?
The waitMsg uses a message box with an infinitely auto-updating progress bar. So you can't just create a progressbar that displays the current upload.
You could create your own Ext.ProgressBar and estimate the upload time and when its done you set it to the max value. But I guess you don't want that.
To answer your question: You cannot simply track the current upload progress.
If you really need this user experience you can try a 3rd party component.
To quote the docs:
File uploads are not performed using normal "Ajax" techniques, that is
they are not performed using XMLHttpRequests. Instead the form is
submitted in the standard manner with the DOM element
temporarily modified to have its target set to refer to a dynamically
generated, hidden which is inserted into the document but
removed after the return data has been gathered.
To show real progress you can use onprogress callback of XMLHttpRequest:
Ext.override(Ext.data.request.Ajax, {
openRequest: function (options) {
var xhr = this.callParent(arguments);
if (options.progress) {
xhr.upload.onprogress = options.progress;
}
return xhr;
}
});
Then use like here:
Ext.Ajax.request({
url: '/upload/files',
rawData: data,
headers: { 'Content-Type': null }, //to use content type of FormData
progress: function (e) {
console.log('progress', e.loaded / e.total);
}
});
See online demo here.
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/upload/file',
waitMsg: 'Uploading your file...',
success: function (f, a) {
var result = a.result,
data = result.data,
name = data.name,
size = data.size,
message = Ext.String.format('<b>Message:</b> {0}<br>' +
'<b>FileName:</b> {1}<br>' +
'<b>FileSize:</b> {2} bytes',
result.msg, name, size);
Ext.Msg.alert('Success', message);
},
failure: function (f, a) {
Ext.Msg.alert('Failure', a.result.msg);
}
});
}
}
}]
Live demo with progress window is here
I'm building a Metro app using the single-page navigation model. On one of my pages I start an async ajax request that fetches some information. When the request returns I want to insert the received information into the displayed page.
For example:
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
WinJS.xhr(...).done(function (result) {
element.querySelector('#target').innerText = result.responseText;
});
}
};
But how do I know that the user hasn't navigated away from the page in the meantime? It doesn't make sense to try to insert the text on a different page, so how can I make sure that the page that was loading when the request started is still active?
You can compare the pages URI with the current WinJS.Navigation.location to check if you are still on the page. You can use Windows.Foundation.Uri to pull the path from the pages URI to do this.
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
var page = this;
WinJS.xhr(...).done(function (result) {
if (new Windows.Foundation.Uri(page.uri).path !== WinJS.Navigation.location)
return;
element.querySelector('#target').innerText = result.responseText;
});
}
};
I couldn't find an official way to do this, so I implemented a workaround.
WinJS.Navigation provides events that are fired on navigation. I used the navigating event to build a simple class that keeps track of page views:
var PageViewManager = WinJS.Class.define(
function () {
this.current = 0;
WinJS.Navigation.addEventListener('navigating',
this._handleNavigating.bind(this));
}, {
_handleNavigating: function (eventInfo) {
this.current++;
}
});
Application.pageViews = new PageViewManager();
The class increments a counter each time the user starts a new navigation.
With that counter, the Ajax request can check if any navigation occurred and react accordingly:
WinJS.UI.Pages.define("/showstuff.html", {
processed: function (element, options) {
var pageview = Application.pageViews.current;
WinJS.xhr(...).done(function (result) {
if (Application.pageViews.current != pageview)
return;
element.querySelector('#target').innerText = result.responseText;
});
}
};
I have something like wall posts which have the option of 'remove'. Since posts can be added any time hence I'm using jquery live method for event handling.
The problem is, multiple events are getting attached to 'remove' on click event
$(document).ready(function(){
$('.actions .remove_wall_post').live('click', function(){
var wall_post_id = $(this).attr('id');
var data = {
'action' : 'remove',
'wall_post_id' : wall_post_id
};
var url = myurl;
$.post(url, data, function(response){
if(response == '1'){
$('#post_list #'+wall_post_id).hide();
var total_posts = $('#total_posts').text();
} else{
alert('ERROR');
}
});
return false;
});
});
Suppose there are n posts, when I click on 'remove' of any post, the first event works fine...but after that i get n ERROR alerts and all events have the same wall_post_id