Extjs file upload request stays on waitMsg - php

Through an ExtJs form I am uploading a file for processing in php (csv file in this matter).
The processing all works fine without errors or anything. And as far as I know, all of the other requirement for a proper response are met.
Return message = {success: true}
Response header Content/Type = text/html
Status = 200 OK
However ExtJs keeps showing my WaitMsg instead of going to my success of failure functions
Here is my form:
var form = new Ext.FormPanel({
id : 'mailinglist_form_import',
labelWidth : 210,
fileUpload : true,
border : false,
url : '/plugin/NewsletterManagement/mailinglist/import',
items : [{
xtype : 'fieldset',
width : 560,
border : false,
autoHeight : true,
labelWidth : 215,
defaultType : 'textfield',
defaults : {
width : 307,
labelStyle : 'font-weight: bold;'
},
items : [{
fieldLabel : t('Name') + ' *',
name : 'mli_name',
allowBlank : false
},{
xtype : 'textfield',
fieldLabel : t('File') + ' *',
name : 'file',
inputType : 'file'
}]
}]
});
The button:
var saveBtn = new Ext.Button({
text: t("Save"),
iconCls: 'pimcore_icon_save',
handler: function() {
form.getForm().submit({
waitMsg: t('Saving...'),
success: function () {
var tabpanel = Ext.getCmp("pimcore_panel_tabs");
Ext.MessageBox.alert (t('Message'),t('Data has been saved'));
form.getForm().reset();
grid.getStore().reload();
tabpanel.activate(gridTabId);
tabpanel.remove(tabId);
},
failure: function () {
Ext.MessageBox.alert (t('Message'),t('Saving data failed'));
}
});
}
});
The PHP file contains an echo:
echo "{'success': true}";
Any help is greatly appriciated.
Greetz,
XpertEase

Open console and see the error. If you dont's see both of your alerts -- then it's some error in code, in extjs side. Understand it, fix and then report back.

Related

Magicsuggest setValue() changes when move to other field

On selectionchange I am setting the new value but when it focus out the setValue change.
here is my code :
var ms=$('#mydiv').magicSuggest({
useCommaKey: true,
hideTrigger: true,
placeholder: 'Search here',
allowDuplicates: false,
data: '/getData.php',
ajaxConfig: {
xhrFields: {
withCredentials: true,
}
},
valueField: 'name',
renderer: function(data){
return data.full_name;
},
resultAsString: true
});
$(ms).on('selectionchange', function(e, cb){
var response = cb.getValue();
var respone_ary = response.toString().split(',');
if(respone_ary.length > 1){
this.removeFromSelection(cb.getSelection());
this.setValue(respone_ary);
}
});
For Example : In response I am getting "xyz,abc" then I want to set it as two different bobble like this "xyz" "abc" .
It's get set but when I click on other filed it get change to "xyz"
Thanks in advance

Load PHP via Ajax in fancybox

The following code display a page loaded with ajax when the page is loaded. However, I don't know how to load PHP within the ajax file. Can anyone help please?
/* <![CDATA[ */
// call fancybox
function openFancy(){
setTimeout( function() {$('.fancybox').trigger('click'); },0);
}
// create cookie on button click
function dontShow(){
$.fancybox.close(); // optional
$.cookie('visited', 'yes', { expires: 30 }); // expiration in 30 days
}
$(document).ready(function() {
var visited = $.cookie('visited'); // create cookie 'visited' with no value
if (visited == 'yes') {
return false;
} else {
openFancy(); // cookie has no value so launch fancybox on page load
}
$('.fancybox').fancybox({
scrolling : 'no',
width : '100%',
fitToView : true,
closeBtn : false,
padding : 0,
margin : 20,
locked : false,
scrollOutside : false,
closeClick : false,
helpers : { overlay : {
closeClick: false,
locked: true},
}
});
}); // ready
/* ]]> */
Try this:
For the link (HTML)
<a id="fancybox_ajax" href="overlay.php"></a>
For the fancybox's setup:(JS)
$("#fancybox_ajax").fancybox({
scrolling : 'no',
width : '100%',
fitToView : true,
closeBtn : false,
padding : 0,
margin : 20,
locked : false,
scrollOutside : false,
closeClick : false,
helpers : { overlay : {
closeClick: false,
locked: true},
},
//This is what you have to add
ajax : {
type : "POST",
//This is optional if you want to pass some data
data : 'key=value'
}
});
Good luck! ^^

How do I return data via Ajax using Plupload on Upload Complete?

I've been trying for the last few hours to get something... anything back from the pluploader upon completion of the queue to no avail.
Here is my JS code:
var uploader = $('#pluploadDiv').pluploadBootstrap();
uploader.bind("UploadComplete", function(up, files) {
var obj = $.parseJSON(response.response);
alert(obj.result);
});
On the very last line of the upload.php script, I have:
die('{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}');
This makes sense to me... but it's not working, the files upload without problems, but the alert doesn't even fire off... there is no response whatsoever.
Thoughts?
EDIT WITH NEW CODE AS A SOLUTION
The JS that I'm using (thanks jbl):
var uploader = $('#pluploadDiv').pluploadBootstrap();
uploader.bind('FileUploaded', function(upldr, file, object) {
var myData;
try {
myData = eval(object.response);
} catch(err) {
myData = eval('(' + object.response + ')');
}
$("#vehicle_id_value").val(myData.result);
});
Upload.php script stayed the same, last line of code:
die('{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}');
So basically when I create the shell row to associate images to in the upload script, I pass the row ID back to the original form into a hidden input field via the FileUploaded event that is bound to the plupload object.
<input type="hidden" name="vehicle_id_value" id="vehicle_id_value" value="" />
Works like a charm!
Several files could have been uploaded as part of the upload process. The individuals responses are not avalaible anymore when on UploadComplete stage.
If you want to display info about a specific file upload, you should bind to the FileUploaded event instead of UploadComplete.
Something like :
uploader.bind('FileUploaded', function(upldr, file, object) {
var myData;
try {
myData = eval(object.response);
} catch(err) {
myData = eval('(' + object.response + ')');
}
alert(myData.result);
});
Hope this will help
have you tried echo instead of die?
echo '{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}';
function fileupload(fileuploadid, urlashx, foldername, keyid, filelimit, filefilters) {
$("#" + fileuploadid).plupload({
// General settings
runtimes: 'html5,flash,silverlight,html4',
url: urlashx,
//Set parameter for server side
multipart_params: {
foldername: foldername,
keyid: keyid
},
// Maximum file size
max_file_size: filelimit,
// User can upload no more then 20 files in one go (sets multiple_queues to false)
max_file_count: 20,
multiple_queues: true,
//chunk_size: '10mb',
// Resize images on clientside if we can
resize: {
//width: 200,
//height: 200,
quality: 90,
crop: false // crop to exact dimensions
},
// Specify what files to browse for
filters: [
{ title: "Allowed files", extensions: filefilters }
],
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
// Views to activate
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
},
// Flash settings
flash_swf_url: 'plupload/js/Moxie.swf',
// Silverlight settings
silverlight_xap_url: 'plupload/js/Moxie.xap',
// Post init events, bound after the internal events
init: {
FileUploaded: function (up, file, jsonMsg) {
var json = JSON.parse(jsonMsg.response); // now I have json object
if (json.success) {
AlertMessage("Message", json.message, "success", "False");
} else {
AlertMessage("Message", json.message, "error", "False");
}
up.splice(); //remove items of container
up.refresh(); //refresh container
}
}
});
}
uploader.bind('FileUploaded', function (up, file, res) {
var res1 = res.response.replace('"{', '{').replace('}"', '}');
var objResponse = JSON.parse(res1);
alert(objResponse.fn);
});

Retrieve data with extjs 3.4 panel + dataview + jsonstore

i'm trying to show some data via dataview, but for some reason i am getting an emptytext message (No data).
Here is my dataview:
xtype : 'dataview',
emptyText : 'No data',
id : 'cartdata',
multiSelect : true,
plugins : new Ext.DataView.DragSelector( { dragSafe : true } ),
store : new Ext.data.JsonStore({
url : '/aecms/user-photos-view/',
autoLoad : true,
root : 'data',
fields : [
'images'
],
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
}),
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<tpl for="images">',
'<a title="{id}">test</a>',
'</tpl>',
'</tpl>'
)
and this is a data from php:
{"data":{"images":{"id":"2"}},"status":"success"}
I am new to extjs and appreciate any help.
By the looks of it you are not returning a successProperty value correctly. Change the response from you php code to be, as listed below.
The default successProperty of the JsonReader on your store is 'success'. ExtJs will look for this property in your server response.
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader-cfg-successProperty
Also, you will probably want to return your data as a json array, not an object. You dont need the image object inside the data array.
Server response:
{ "data":[{"id":"2"}], "success":true }
Javascript:
...
store : new Ext.data.JsonStore({
url : '/aecms/user-photos-view/',
autoLoad : true,
root : 'data',
fields : [
'id'
],
listeners : {
scope : this,
load : function(store) {
var data = store.reader.jsonData;
if (data.systemMessage) {
infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
}
}
}
})
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<a title="{id}">test</a>',
'</tpl>'
)

jqGrid errorTextFormat function

I´m developing an application using CodeIgniter and JQuery.
I have read here jqgrid error message on delete and here jqGrid error message from server side exception some issues about this problem but the fact is that does not work for me.
In my database I have set some business rules in form of index, checks, etc. I need to customize the "error Status: 'error'. Error code: 500" that the jqGrid returns when I have those types of errors.
I´d appreciate any help.
Here is my jquery grid code.
<script type="text/javascript">
var base_url = 'http://localhost/sp/';
var site_url = 'http://localhost/sp/index.php';
var url = '';
$(document).ready(function() {
var grid = jQuery("#newapi_1351019084").jqGrid({
ajaxGridOptions : {type:"POST"},
jsonReader : {
root:"data",
repeatitems: false
},
ondblClickRow: function(id){
dtgLoadButton1();
return;
},
rowList:[10,20,30],
viewrecords: true
,url:'http://localhost/sp/index.php/assigment/getData'
,editurl:'http://localhost/sp/index.php/assigment/setData'
,datatype:'json'
,rowNum:'13'
,width:'800'
,height:'300'
,pager: '#pnewapi_1351019084'
,caption:'Control de asignaciones'
,colModel:[
{name:'username',index:'username',label:'Usuario' ,align:'left',width:300,editable:false,edittype:'text',editrules:{required:true} }
,{name:'StoreName',index:'StoreName',label:'Tienda' ,align:'center',width:200,editable:false,edittype:'text',editrules:{required:true} }
,{name:'Users_idUsers',index:'Users_idUsers',label:'Usuario' ,align:'center',width:100,hidden:true,editable:true,edittype:'select',editoptions:{value:":Select;5:tienda1;6:tienda2;17:tienda3;18:tienda11",size:10},editrules:{edithidden:true,required:true,integer:true} }
,{name:'Stores_idStores',index:'Stores_idStores',label:'Tienda' ,align:'center',width:100,hidden:true,editable:true,edittype:'select',editoptions:{value:":Select;1:EA001;3:EA003;4:EA005;5:EA006;6:EA007;7:EA008;8:EA009;9:EA010;10:EA011;11:EA012;12:EA013;13:EA015;14:EA017;15:EA018;16:EA019;17:EA020;18:EA021;19:EA022;20:EA002;21:EA000",size:10},editrules:{edithidden:true,required:true,integer:true} }
,{name:'SurrugateTurn',index:'SurrugateTurn',label:'SurrugateTurn' ,align:'center',width:100,key:true,hidden:true,editable:true,edittype:'select',editoptions:{value:":Select;1:1;3:3;2:2",size:10},editrules:{hidden:true} }
] })
jQuery("#newapi_1351019084")
.jqGrid('navGrid',
'#pnewapi_1351019084',
{view:false,
edit:'1',
add:'1',
del:'1',
close:true,
delfunc: null ,
search:''
},
{ recreateForm: true,
width : 400 ,
beforeShowForm : function(form) {
},
closeAfterEdit:true }, // edit options
{ recreateForm: true,
width : 400,
closeAfterAdd : true,
beforeSubmit : function(postdata, formid) {
var mensaje = '';
var resultado = true;
return[resultado,mensaje];
}
}, /*add options*/
{mtype: 'POST'} /*delete options*/,
{sopt: ['eq','cn','ge','le' ] ,
multipleSearch: false ,
showOnLoad : false,
overlay:false,mtype: 'POST'} /*search options*/
).navButtonAdd('#pnewapi_1351019084',
{ caption:'', buttonicon:'ui-icon-extlink', onClickButton:dtgOpenExportdata, position: 'last', title:'Export data', cursor: 'pointer'}
);
;
});
</script>
Best regards and thanks for your time,
Assuming the server returns a user-friendly error message with the HTTP 500 response, you can simply to this:
...
{ recreateForm: true,
width : 400 , //removed the empty beforeShowForm callback
errorTextFormat:function(data){
if (data.status == 500)
return data.responseText; // You may need to do some HTML parsing here
}
closeAfterEdit:true }, // edit options
...

Categories