I have a edit user form. The form is loaded from a Json store with this code:
var store = Ext.create('cp.store.form.Paciente',{});
store.load({params:{idUsuario: idPaciente}});
var form = Ext.create('cp.view.form.EditPaciente',{
action: 'bin/paciente/modificar.php'
});
// note: write this lines in the controller
form.on('afterrender',function(form,idPaciente){
form.getForm().loadRecord(store.first());
form.getForm().findField('idUsuario').setValue(idPaciente);
});
var win = Ext.create('cp.view.ui.DecoratorForm',{
aTitle: 'Editar paciente',
aForm: form
});
win.show();
The load code works fine. The submit code is:
var me = this;
console.log('Submit...');
console.log(this.url);
// WHY NOT SUBMIT !!!!
this.getForm().submit({
console.log('submit !');
success: function(form,action){
if(action.result.success === true){
Ext.create('cp.view.ui.AlertOk',{mensaje:action.result.msg}).showDialog();
me.up('decoratorForm').close();
}else{
Ext.create('cp.view.ui.AlertErr',{mensaje:action.result.msg}).showDialog();
}
}
});
So, the submit code starts running. FireBug shows the first and second "console.log", and the "this.url" value is correct. But, the third "console.log" not execute, and the form not send to the server.
Firebug not says 404 error for "this.url" value.
Any ideas ?
Thanks !
Add the form definition:
Ext.define('cp.view.form.EditPaciente',{
extend: 'Ext.form.Panel',
alias: 'widget.editPaciente',
bodyPadding: '5px 5px 5px 5px',
bodyStyle: 'border: none',
fieldDefaults: {
labelWidth: 65,
labelAlign: 'top'
},
initComponent: function(){
this.url = this.action,
this.method = 'POST',
this.items = [ .... ]
this.callParent(arguments);
}
});
You cant put log statements inside object literals.
submit({ <-- This is an object literal
console.log('submit !'); <-- This can not be in an object literal
success: function(form,action){
if(action.result.success === true){
Ext.create('cp.view.ui.AlertOk',{mensaje:action.result.msg}).showDialog();
me.up('decoratorForm').close();
}else{
Ext.create('cp.view.ui.AlertErr',{mensaje:action.result.msg}).showDialog();
}
}
});
Related
Seemingly strange problem here: I've got TinyMCE 5.7 up and running with the images_upload_handler function configured per the docs. If the upload is a success, everything works great. However, if the upload is a failure, then the dialog box that should output the failure message simply outputs "[object Object]".
Screenshot: Failure callback output
I find that this is the case whether I invoke the failure callback in the images_upload_handler function just as the docs dictate...
function gg_image_upload_handler (blobInfo, success, failure, progress) {
[...]
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
[...]
}
...or if I make the entire images_upload_handler function a failure callback with a simple string, taking all the other variables (including the PHP upload handler) out of it:
function gg_image_upload_handler (blobInfo, success, failure, progress) {
failure('hello!');
return;
}
Notably, if I change the second example from "failure('hello!');" to "success('hello!');" then there is no problem: When I upload a photo in that case, "hello!" appears in the dialog box where the path to the uploaded image would normally appear.
I can't find anyone else who's had an issue with the failure callback, so I fear I've done something silly, but it seems weird that everything else works and this part does not. Any thoughts? Full Javascript code follows:
function gg_image_upload_handler (blobInfo, success, failure, progress) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'handlers/tinymce_photo_handler.php');
xhr.upload.onprogress = function (e) {
progress(e.loaded / e.total * 100);
};
xhr.onload = function() {
var json;
if (xhr.status === 403) {
failure('HTTP Error: ' + xhr.status, { remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
};
tinymce.init({
selector: "textarea#editor",
images_upload_handler: gg_image_upload_handler,
images_reuse_filename: true,
skin: "oxide",
plugins: "lists, link, image, media, image code",
relative_urls: false,
remove_script_host: false,
toolbar:
"h1 h2 h3 h4 h5 h6 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help",
image_caption: true,
image_advtab: true,
image_class_list: [
{title: 'Responsive', value: 'img-fluid'}
],
content_style: 'img { max-width: 75%; height: auto; }',
menubar: false,
setup: (editor) => {
// Apply the focus effect
editor.on("init", () => {
editor.getContainer().style.transition =
"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
});
editor.on("focus", () => {
(editor.getContainer().style.boxShadow =
"0 0 0 .2rem rgba(0, 123, 255, .25)"),
(editor.getContainer().style.borderColor = "#80bdff");
});
editor.on("blur", () => {
(editor.getContainer().style.boxShadow = ""),
(editor.getContainer().style.borderColor = "");
});
}
});
Unfortunately, this is a bug introduced in TinyMCE 5.7.0 as reported here: https://github.com/tinymce/tinymce/issues/6579. This will be fixed in the upcoming TinyMCE 5.7.1 patch release, however for now the best workaround is to downgrade to TinyMCE 5.6.2 sorry.
ag-Grid, following the official demo of javascript but using API like real world over hard-coded data. Note: no jQuery, just use the primitive plain XMLHttpRequest() for ajax.
F12 verified API returns data in the same structure as demo, has children node inside, and gripOptions.rowData is assigned with the returned data.
Tried instantiating rowData inside of gripOptions as
rowData: [], got the same error
Or
rowData: {}, got ReferenceError: rowData is not defined.
HTML:
<script src="/scripts/agGrid/ag-grid.js"></script>
<script src="/scripts/agGrid/myAG.js"></script>
<br />JavaScript ag-Grid
<div id="myGrid" style="height: 200px;" class="ag-fresh"></div>
myAG.js:
var httpApi = new XMLHttpRequest();
var columnDefs = [
{ headerName: "Client Name", field: "ClientName", unSortIcon: true, cellRenderer: "group" },
{ headerName: "Division", field: "Division" },
{ headerName: "Others", field: "Others" }
];
var gridOptions = {
columnDefs: columnDefs,
getNodeChildDetails: getNodeChildDetails
};
function getNodeChildDetails(rowItem) {
if (rowItem.ClientName) {
return {
group: true,
// provide ag-Grid with the children of this group
children: rowItem.children,
// the key is used by the default group cellRenderer
key: rowItem.ClientName
};
} else {
return null;
}
}
// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
$.ajax({
type: "GET",
url: "/api/myAG/Tree",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
gridOptions.rowData = data;
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
})
});
Version:
ag-grid = v8.1.0
FireFox = 50.1.0
Error message:
F12 confirms data exists and assigned:
inside of ag-grid.js, the line it complains about but rowData has data:
See this answered post, basically an additional check is needed for the tree.
ag-Grid, try to make Tree Demo work using own data
I'm trying to find out if it is possible to implement an Analytics Event to track conversions in the Muse WebPro.js Form widget on successful submit?
Here is the code from the Muse WebPro.js that executes the Form submit:
Muse.Utils.initWidget('#widgetu2128', ['#bp_infinity'], function(elem) {
return new WebPro.Widget.Form(elem, {
validationEvent: 'submit',
errorStateSensitivity: 'high',
fieldWrapperClass: 'fld-grp',
formSubmittedClass: 'frm-sub-st',
formErrorClass: 'frm-subm-err-st',
formDeliveredClass: 'frm-subm-ok-st',
notEmptyClass: 'non-empty-st',
focusClass: 'focus-st',
invalidClass: 'fld-err-st',
requiredClass: 'fld-err-st',
ajaxSubmit: true
});
}); /* #widgetu2128 */
My idea is to insert the Analytics Event tracking code here, as example here:
Muse.Utils.initWidget('#widgetu2128', ['#bp_infinity'], function(elem) {
return new WebPro.Widget.Form(elem, {
validationEvent: 'submit',
errorStateSensitivity: 'high',
fieldWrapperClass: 'fld-grp',
formSubmittedClass: 'frm-sub-st',
formErrorClass: 'frm-subm-err-st',
formDeliveredClass: 'frm-subm-ok-st',
notEmptyClass: 'non-empty-st',
focusClass: 'focus-st',
invalidClass: 'fld-err-st',
requiredClass: 'fld-err-st',
onSuccess: function(){
ga('send', 'event', 'Form', 'Send', '');
},
ajaxSubmit: true
});
}); /* #widgetu2128 */
But it does not seem to be working. Anybody have any suggestions. Can't find any WebPro.js docs or support about this topic online.
Thanks!
//validate
Muse.Utils.initWidget('#widgetu812', function(elem) {
new WebPro.Widget.Form(elem,
{
validationEvent:'submit',
errorStateSensitivity:'high',
fieldWrapperClass:'fld-grp',
formSubmittedClass:'frm-sub-st',
formErrorClass:'frm-subm-err-st',
formDeliveredClass:'frm-subm-ok-st',
notEmptyClass:'non-empty-st',
focusClass:'focus-st',
invalidClass:'fld-err-st',
requiredClass:'fld-err-st',
ajaxSubmit:true
}
);
});/* #widgetu812 */
//submit
<script> $(document).ready(function() {
$("#widgetu812").ajaxComplete(function() {
if (typeof ga !== 'undefined') {
ga('send','event','order','sent');
}
}); }); </script>
Last year i build a form for one of our costumers, when visitors submitted the form they
got a message on the same page. But now he asks me if it is possible to
make a succes page if the form is filled in correctly.
I can't make it work. It's a bit out of my league.
So i hope anyone of you can help me out!
$(document).ready(function() {
$("#ajax-contact-form").submit(function() {
$('#load').append('<center><img src="ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
var fem = $(this).serialize(),
note = $('#note');
$.ajax({
type: "POST",
url: "contact/contact2.php",
data: fem,
success: function(msg) {
if ( note.height() ) {
note.slideUp(500, function() { $(this).hide(); });
}
else note.hide();
$('#loading').fadeOut(300, function() {
$(this).remove();
// Message Sent? Show the 'Thank You' message and hide the form
result = (msg === 'OK') ? '<div class="success">Uw bericht is verzonden, we nemen z.s.m. contact met u op!</div>' : msg;
var i = setInterval(function() {
if ( !note.is(':visible') ) {
note.html(result).slideDown(500);
clearInterval(i);
}
}, 40);
}); // end loading image fadeOut
}
});
return false;
});
<form id="ajax-contact-form" target="_blank" method="post" action="javascript:alert('success!');" >
Instead of displaying the "success" message, redirect to a new page:
window.location = successPageUrl;
Just redirect to success page after ajax success.
I have an Edit button next to each uploaded thumbnail on my page that summons the Aviary modal upon click. What I'd like to do is replace the original file on FP when I save the outcome of editing in Aviary.
filepicker.saveAs doesn't seem like the right solution because I don't want to save to a new file, I just want to replace the file on FP.
The "Saving Back" documentation doesn't seem to apply because it says to POST a full file to the original URL. Ideally I'd like to just have a function take the original url and the new Aviary URL and replace the contents at the original URL.
Is this possible at the moment? Thanks!!!
I've pasted my code here:
<script src='http://feather.aviary.com/js/feather.js'></script>
<script src="https://api.filepicker.io/v0/filepicker.js"></script>
<script type="text/javascript">
$(document).on('click', '.delete-image', function(e) {
var image = $(this).closest('tr').attr('data-image');
$('.modal-footer .btn-danger').remove();
$('.modal-footer').append("<button class='delete-confirmed btn btn-danger' data-image='"+image+"'>Delete</button>");
$('#myModal').modal('show');
return false;
});
$(document).on('click', '.delete-confirmed', function(e) {
e.preventDefault();
var image = $(this).attr('data-image');
var row = $("tr[data-image="+image+"]");
$('#myModal').modal('hide');
$.ajax({
url: row.attr('data-link'),
dataType: 'json',
type: 'DELETE',
success: function(data) {
if (data.success) {
row.hide();
filepicker.revokeFile(row.attr('data-fplink'), function(success, message) {
console.log(message);
});
}
}
});
return false;
});
//Setup Aviary
var featherEditor = new Aviary.Feather({
//Get an api key for Aviary at http://www.aviary.com/web-key
apiKey: '<%= AVIARY_KEY %>',
apiVersion: 2,
appendTo: ''
});
//When the user clicks the button, import a file using Filepicker.io
$(document).on('click', '.edit-image', function(e) {
var image = $(this).closest('tr').attr('data-image');
var url = $(this).closest('tr').attr('data-fplink');
$('#aviary').append("<img id='img-"+image+"'src='"+url+"'>");
//Launching the Aviary Editor
featherEditor.launch({
image: 'img-'+image,
url: url,
onSave: function(imageID, newURL) {
//Export the photo to the cloud using Filepicker.io!
//filepicker.saveAs(newURL, 'image/png');
console.log('savin it!');
}
});
});
filepicker.setKey('<%= FILEPICKER_KEY %>');
var conversions = { 'original': {},
'thumb': {
'w': 32,
'format': 'jpg'
},
};
$(document).on("click", "#upload-button", function() {
filepicker.getFile(['image/*'], { 'multiple': true,
'services': [filepicker.SERVICES.COMPUTER, filepicker.SERVICES.URL, filepicker.SERVICES.FLICKR, filepicker.SERVICES.DROPBOX, filepicker.SERVICES.IMAGE_SEARCH],
'maxsize': 10000*1024,
'conversions': conversions
},
function(images){
$.each(images, function(i, image) {
$.ajax({
url: "<%= product_images_path(#product.id) %>",
type: 'POST',
data: {image: JSON.stringify(image)},
dataType: 'json',
success: function(data) {
if (data.success) {
$('.files').append('<tr><td><img src="'+image.data.conversions.thumb.url+'"</td></tr>')
}
}
});
});
});
});
You actually can POST a url to the filepicker url as well, for example
curl -X POST -d "url=https://www.filepicker.io/static/img/watermark.png"
https://www.filepicker.io/api/file/gNw4qZUbRaKIhpy-f-b9
or in javascript
$.post(fpurl, {url: aviary_url}, function(response){console.log(response);});