ExtJS Version : 4.1.0
Answered - See my response below... quite silly really
I have a simple form with a few fields, one of them being of the xtype fileuploadfield. I listen for the click event on my form's save button in the Controller's this.control method. When the click event occurs, I run a method saveForm, which looks like this:
saveForm: function(button) {
/** Get the Window Object and retrieve the Form*/
var currentWin = button.up('window'),
form = currentWin.down('form');
/** Get the Form Object */
form = form.getForm();
/** ...continued... */
}
At this point in my method, I can console.log the form object, inspect the object's _fields and see my fileuploadfield and the path of the file I input in the field (i.e. C:\fakepath\somefile.png). I can also perform form.getField('upload-field-id'); to get the upload field element. The method form.hasUpload() returns TRUE.
The kicker is that when I call form.submit() and var_dump() the $_FILES array on my server, it is empty!
In the examples that I've seen of file uploading in ExtJS, the form submission happens via a handler function on the Save button in the view. As I like to keep logic for handling button presses in my controller, I'm hoping this is not my only option!
Any input would be greatly appreciated, thank you for your time.
I feel a bit silly, but the problem was pertaining to retrieving the form object from the button passed to my saveForm method.
Corrected:
In my ExtJS controller...
saveForm: function(button)
{
var currentWindow = button.up('window');
/** var form = button.down('form').getForm(); **INCORRECT** */
var form = button.up('form').getForm(); /** this is correct */
form.submit({
url : '/service/form/upload/format/json',
waitMsg : 'Uploading....',
success : function(form,o) {
alert(o.response.responseText);
},
failure: function(form, action)
{
console.error('form, action', form,action);
alert('failure');
}
});
}
In my back-end (Zend), my controller action is simply:
public function uploadAction()
{
var_dump($_FILES);
this->view->success = false;
}
As expected, my Chrome Inspector outputs the following upon clicking the save button:
Uncaught Ext.JSON.decode(): You're trying to decode an invalid JSON String:
{"success":false}array(1) {
["file-upload-field"]=>
array(5) {
["name"]=>
string(29) "TestImage.jpg"
["type"]=>
string(10) "image/jpeg"
["tmp_name"]=>
string(14) "/tmp/php7XfeLD"
["error"]=>
int(0)
["size"]=>
int(89799)
}
}
The server has successfully received the file upload!
This is most certainly a server side issue. ExtJS makes use of hidden components to submit a multipart form to the server. This indeed works as described in the guides, examples, and docs.
I am unfamiliar with var dump function you refer to above, but you need to make certain that your server side component is handling the multipart form submission correctly.
Related
I want to pass data from my dynamic html table on button click event to model driven app account form in dynamic 365 crm. But I'm not be able to pass the data. Please refer the below java script function that I used to pass data.
function addAddress(event) {
var row = $(event);
var parent = row.parent();
parent = parent.parent();
window.parent.Xrm.Page.getAttribute("address1_line1").setValue(parent.closest("tr").find('td:eq(0)').text());
window.parent.Xrm.Page.getAttribute("address1_line2").setValue(parent.closest("tr").find('td:eq(1)').text());
window.parent.Xrm.Page.getAttribute("address1_line3").setValue(parent.closest("tr").find('td:eq(2)').text());
window.parent.Xrm.Page.getAttribute("address1_city").setValue(parent.closest("tr").find('td:eq(3)').text());
window.parent.Xrm.Page.getAttribute("address1_stateorprovince").setValue(parent.closest("tr").find('td:eq(4)').text());
window.parent.Xrm.Page.getAttribute("address1_country").setValue(parent.closest("tr").find('td:eq(6)').text());
}
One simple option is to refactor your code to use the postMessage() function. Once that button is clicked on your HTML WebResource, you can post a message that can be handled by the form which can take action based on that.
As an example, when X event is triggered on your HTML WebResource, the following code sends a message (you can format your object whatever you like) to the parent window (account form):
// Please change the targetOrigin parameter
window.parent.postMessage({ "line1": "value1", "line2": "value2"}, "*");
On your account form JS WebResource, the following code registers an event handler that will listen for your message and take action using the _formContext object which can be saved on the onLoad event (as a replacement of Xrm.Page which has been deprecated):
window.addEventListener('message', function (event) {
// Important. Only accept messages from trusted origins
if (event.origin === "XXX") {
var messageData = event.data;
_formContext.getAttribute("address1_line1").setValue(messageData.line1);
_formContext.getAttribute("address1_line2").setValue(messageData.line2);
}
});
It's important that you use the postMessage and addEventListener methods on the correct window object so if the above code doesn't work as is (I've just taken the Mozilla documentation code and changed it to fit your scenario) please review this, as you might need to change window.addEventListener to window.parent.addEventListener.
We have a web application that is using Spring framework 5.1.7.RELEASE, JDK 1.8 and DWR 3.0.2 deployed in WAS 8.5. We have a JSP web page; that displays some statistical information to its user; web page was working fine like in years and all of a sudden it started failing to load. When we debugged the issue; we narrow it down to dwr's ajax request; and it failed in engine.js with an unknown error. What we figured; we will provide the information in answer to this question. Code snippet is below, and it continue to fail on line '3' below i.e. controllerClass.someMethod call. selectObj1 and selectObj2 are array type of objects.
if (document.getElementById("someCheckBox").checked) {
//Below controllerClass is the name of JS class produced by DWR but actually it's a Java class (i.e. object used below)
controllerClass.someMethod("Value1", selectObj1, selectObj2, 'Value2', 'Value1', function(data) {
if (data != null) {
hideView("viewOne",false); //user defined function call
fillData("viewName",data[0]); //user defined function to fill the returned data
valueRet1 = data[1];
someConst = "X";
displayNavCon(pageNumber); //user defined function to control the navigation on web page
} else {
alert("No Data Found!!!");
recordCount=0;
}
});
When it comes to DWR and it start's failing with an error in engine.js; I think DWR needs to put some improvements there. Because most of the time error is/was unknown. So in above case - we were passing some data in DWR's ajax call using selectObj1 like an array and selectObj2 like an array, how data being constructed haven't changed in years; then we noticed that there was a decimal value being passed in selectObj1 that has comma in it, we removed the comma before giving data to DWR's ajax call and Bingo! it worked. Code fix is below;
//we are omitting the construction of other object being passed in i.e. selectObj2
var indexBrkLp = 0;
if (priceVal != null){
while (priceVal.includes(",")){
indexBrkLp++;
priceVal = priceVal.replace(",", "")
if (indexBrkLp > 5){
break;
}
}
}
var selectObj1={
val2:(val2 == null? "": val2),
priceVal :(priceVal == null? "": priceVal)
};
if (document.getElementById("someCheckBox").checked) {
//Below controllerClass is the name of JS class produced by DWR but actually it's a Java class (i.e. object used below)
controllerClass.someMethod("Value1", selectObj1, selectObj2, 'Value2', 'Value1', function(data) {
if (data != null) {
hideView("viewOne",false); //user defined function call
fillData("viewName",data[0]); //user defined function to fill the returned data
valueRet1 = data[1];
someConst = "X";
displayNavCon(pageNumber); //user defined function to control the navigation on web page
} else {
alert("No Data Found!!!");
recordCount=0;
}
});
Conclusion - If you see engine.js is failing, then it might not just be something wrong in your code; it could be data that it don't like or could be some other config related to DWR.
Please consider:
- a loading.hbs file exist, which gets called by ember when transaction occurs.
- Used form.submit() approach to retrieve data from the server in the Ember framework. I didn't use this.store.findrecord() because we faced some issue in downloading a file (created in the server) as an attachment and so went with the form.submit() approach.
Objective:
- a loading screen should get displayed when the form.submit() is triggered until we get the final data from the server.
Problem:
- In ember, when we go for this.store.findall() approach, ember automatically search for a file like loading.hbs and it displays the file until the full data is downloaded from the server.
- Since we are going via form.submit() approach, the ember is not searching for loading.hbs file to display.
Is there anyway, to display the loading.hbs file when the form.submit() is triggered.
Here is my code:
actions: {
pdfClick(Id) {
pdfId=document.getElementById("version_"+Id).value;
let form = document.getElementById("pdfForm");
form.action = Globals.urlPrefix + this.get('router.url') + "/" + Id; //This line creates the URL to be triggered
form.submit();
form.action = "";
}
}
All ya need is something like this:
component:
#action
submit() {
this.set('loading', true);
somePromise().then(() => this.set('loading', false));
}
template:
{{#if loading}}
Please Wait
{{/if}}
The Environment
PHP: Symfony -> Twig, Bootstrap
Doctrine -> Mongodb
Jquery
The Project
The timer is working, counting the interval, and I can send the form. This is good, but once I get to the part where the form is sent I seem to be running into two problems:
interval counter working
form submitting automatically, then
The null fields do not get accepted
The form does not get validated
The form itself is setup through a custom built PHP graphical interface that allows you to set the simple things very easily: fields, fieldtypes, names and labels, etc.
This is cool, but it means that you can't go in and tinker very much with the form or at all really. The most you can change is aesthetics in the template. Although you could wrap each form element in another form element or some kind of html identifier, this is an option, but a tedious one...
On a valid check the form gets upserted and all is well the else catches the non-valid form and lets the user know that some fields are not filled in. I would post that code here, but I think it would be frowned upon. Hopefully you understand the PHP concept.
The part that I can share is the JS:
autoSaveForm = function() {
var form = $('form'),
inputs = form.find('input');
form.on('submit', function() {
inputs.each( function( input ) {
if (input.attr("disabled") === true){
input.removeAttr("disabled");
}
})
});
function counter(){
var present = $('.minutes').attr('id'),
past = present;
$('.minutes').text(past);
setInterval(function(){
past--;
if(past>=0){
$('.minutes').text(past);
}
if(past==0){
$('.minutes').text(present);
}
},1000);
}
function disableInputs(){
inputs.each( function( input ) {
if (input.val() === ""){
input.attr("disabled", true);
}
});
}
// Start
counter();
// Loop
setInterval(function(){
counter();
form.submit()
},10000);
};
This sets a counter on the page and counts through an interval, it's set to seconds right now for testing, but eventually will be 10 minutes.
Possible Solutions
disable the null fields before submit and remove the attribute after submit is accomplished
this needs to be done so that the user can do a final completed save at the end of the process
this doesn't actaully seem to be disabling the fields
Their were a few things I found about adding in novalidate to the html, but it wasn't supported in all browsers and it might get tricky with the static nature of the forms.
Post the form with ajax and append a save true variable to the end of the url, then redirect it in PHP Controller with a check on the URI var although:
then I still have the null fields
to solve this: set a random value or default value to the fields as they are being passed through. haven't tried this yet
Something kind of like what this question is addressing, although I have some questions still about the null fields - Autosaving Form with Jquery and PHP
Sending the form through ajax
Any input would be greatly appreciated. :) Thanks
Scenario :
I have aspx page which I need to Iframe on CRM's Opportunity form. This aspx page has form which submits data into the other database.
Requirement :
I would like when user clicks save button on CRM opportunity form ,aspx page should store the data in external database and opportunity form should also save all the changes on CRM form.
My Efforts :
Till now I have Iframed aspx page on CRM form.I am also submitting the form using OnSave event.
But the only problem is the form gets submitted but by the time it executes the complete code CRM form gets refreshed . End result is that Data on aspx page does not get stored in the external database.
What can be the other possible way to achieve this functionality ?
Thanks for taking time to read. Thank you in advance.
Option 1: The better solution is to do this from an opportunity post event plug-in. This ensures data consistency between CRM and external data (if required). Also you could use WCF or a web service to transmit the data to external DB.
Option 2: If you must use javascript you could (1) bind to opportunity form OnSave, (2) Prevent the form from submitting , (3) submit the iframe and (4) wait until it comes back and then (5) do another save to complete the action. This however might cause inconsistencies between CRM and external DB if opportunity save fails.
Here is a pseudo code example
function OpportunityOnLoad() {
IFRAME.OnReadyStateChange = function() {
// (4) Check success if possible
// (5) unbind save event and complete the opportunity save
Form.RemoveOnSave(OpportunityOnSave)
Form.Save();
}
//OnLoad
Form.AddOnSave (OpportunityOnSave);
}
function OpportunityOnSave(context) {
//(1) Save clicked
//(2) Stop save
context.PreventDefault();
//(3) Submit iframe form
IFRAME.Submit();
}
EDIT:
Regarding Q1 : unfortunately not.
Regarding Q2 :
This is a rough translation of the concept above into Javascript and CRM client side API.
I didn’t test it but it should put you on the right track.
Change the Params to match the iframe id, url etc.
also since you’re using an aspx you might experience cross domain issue that could be easily overcome if you’re browsing IE and not so easily overcome if you’re using CROME for example.
var IFRAME, SaveMode;
var FORM = Xrm.Page.data.entity;
var UI = Xrm.Page.ui;
var SaveModes = {
1 : "save",
2 : "saveandclose",
59: "saveandnew"
}
var Params = {
IframeBaseUrl : "",
IframeId : "IFRAME_test",
IframeFormId : "form1"
}
function OpportunityOnLoad() {
var sUrlparams = "?"; //add required params after ?
var IframeUrl = Params.IframeBaseUrl + sUrlParams;
IFRAME = UI.controls.get(Params.IframeId);
IFRAME.setSrc(IframeUrl);
IFRAME.Dom = document.getElementById(Params.IframeId);
IFRAME.add_readyStateComplete(OnAfterIfameSave);
FORM.addOnSave(OpportunityOnSave);
}
function OnAfterIfameSave() {
//SubmitSuccess indicates that the form has reloaded after a
//successful submit. You'll need to set this variable inside your iframe.
if (IFRAME.contentWindow.SubmitSuccess) {
FORM.removeOnSave(OpportunityOnSave);
FORM.save(SaveModes[SaveMode]);
}
}
function OpportunityOnSave(execObj) {
var evArgs = execObj.getEventArgs();
evArgs.preventDefault();
SaveMode = evArgs.getSaveMode();
IFRAME.contentWindow.document
.getElementById(Params.IframeFormId)
.Submit();
}