In theory, it should be as easy as suppling an execute method to the dialog arguments:
execute: function(value) {
alert(value);
}
You may have to change your movie selection button to a dijit button.
Stefan, that will not work, I found this:
"In order to run Dialog's execute-method the submit button has to be a dijit.form.Button, normal submit button doesn't trigger this function. In addition, the form has to be local, the dialog doesn't find the form values if it's included via href attribute."
We cant have our form local since it will do a lot of logic and is now a MVC action.
I found that text here:
http://livedocs.dojotoolkit.org/dijit/Dialog
Another DOJO day, another failure :(
I am soooooo close to a working solution, but it is failing me.
I got all the steps working, but not the complete picure. Here is my code now:
define([
"dojo/_base/array",
"dojo/_base/connect",
"dojo/_base/declare",
"dojo/_base/lang",
"dijit/_CssStateMixin",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/layout/ContentPane",
"epi/epi",
"epi/shell/widget/_ValueRequiredMixin"
],
function (
array,
connect,
declare,
lang,
_CssStateMixin,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
ContentPane,
epi,
_ValueRequiredMixin
) {
return declare("customer.editors.FilmSearchEditor", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {
templateString: '<div class="dijitInline">' +
'<div>' +
' <div data-dojo-attach-point="selectedFilm" data-dojo-type="dijit/layout/ContentPane"></div>' +
' <input type="button" value="Search" data-dojo-attach-point="searchButton" />' +
' <div data-dojo-id="myExternalDialog" data-dojo-type="dijit/Dialog" title="Filmsearch">' +
' <div class="dijitDialogPaneContentArea">' +
' <form data-dojo-type="dijit/form/Form" id="searchForm" data-dojo-id="searchForm" action="" method="">' +
' <input data-dojo-type="dijit.form.TextBox" type="text" id="searchText" name="searchText" value="" trim="true" />' +
' <input data-dojo-type="dijit.form.TextBox" type="hidden" id="selectedFilmId" name="selectedFilmId" value="HIDDEN" />' +
' <div data-dojo-type="dijit/form/Button">' +
' Sök' +
' <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">' +
' dojo.xhrGet({' +
' url: "/filmeditor/SearchResults",' +
' form: "searchForm",' +
' handleAs: "text",' +
' timeout: 5000,' +
' load: function(response, ioArgs){' +
' dojo.byId("results").innerHTML = response;' +
' return response;' +
' },' +
' error: function(response, ioArgs){' +
' dojo.byId("results").innerHTML = "Form submission failed.";' +
' return response;' +
' }' +
' });' +
' </script>' +
' </form>' +
' </div>' +
' <br>' +
' </div>' +
' <strong>Sökresultat</strong>' +
' <div id="results"></div>' +
' <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-attach-point="selectButton">' +
' Välj film' +
' </button>' +
' </div>' +
' </div>' +
'</div>',
intermediateChanges: false,
value: null,
onChange: function (value) {
// Event
},
_onSearchButtonClicked: function () {
myExternalDialog.title = "Sök film";
myExternalDialog.show();
},
postCreate: function () {
// call base implementation
this.inherited(arguments);
// Init textbox and bind event
this.selectedFilm.set("href", "/filmeditor/?id=" + this.value);
this.connect(this.searchButton, "onclick", this._onSearchButtonClicked);
this.connect(myExternalDialog, "hide", function (e) {
var selected = $('input:radio[name=SelectFilm]:checked').val();
if (selected != null) {
this._setValueAttr(selected);
}
});
},
isValid: function () {
return !this.required || this.value.length > 0;
},
// Setter for value property
_setValueAttr: function (value) {
this._setValue(value, true);
},
_setReadOnlyAttr: function (value) {
this._set("readOnly", value);
},
_setValue: function (value) {
if (this._started && epi.areEqual(this.value, value)) {
return;
}
// set value to this widget (and notify observers)
this._set("value", value);
if (this._started) {
// Trigger change event
this.onChange(value);
}
}
});
});
I get it to open the dialog, do the search, get the value when they press select movie and get it to trigger this.OnChange with the new value. The thing that is not working is that EPiServer is not acting as something has changed and the value does not get saved to the database. There are no javascript errors reported.
If I try to see if the connection to the update event works with putting this changing the _onSearchButtonClicked event to like this
_onSearchButtonClicked: function () {
myExternalDialog.title = "Sök film";
myExternalDialog.show();
this._setValue("Klicked " + Math.floor((Math.random() * 1000000) + 1));
},
EPiServer are seeing that there are a new value and triggers the publish-button.
I also have problem with that after I have made a publish, I get this error:
When specifying id attributes in templates they will be used and you will run into conflicts if the widget is used multiple times ("Tried to register widget with id==... ").
Use data-dojo-attach-point instead if you want to reference nodes in the template, then the id will be auto-generated.
When it comes to your missing change events; is myExternalDialog defined in postCreate? Looks like you shold use data-dojo-attach-point and reference it with this.myExternalDialog
We are trying to create a property where the user can search for things in a dojo dialog popup and select one item from a list and after that we need to save the selected value to our EPiServer property.
The problem now is that we can´t figure out on how to get the value from the dialog back to the main widjit. The code we have is fist the main js-file
The dialog will show content from this view:
We need to get the value of selectedFilmId and return it to the widjit (We have code that shows the search result like this:
We know that the code for population the hidden value is not there and we will implement it but our propblem is how to connect the hidden value back to the main widjit.
Anyone who is a Dojo expert and can help a Dojo newbe ;-)