The following code is a confirm dialog that contains "OK" and "Cancel" button, I would like to retrieve the value either user selected "OK" or "Cancel".
dojo.provide("custom.dialog.ConfirmDialog");
dojo.declare("custom.dialog.ConfirmDialog",dijit.Dialog , {
message : "",
postCreate: function(){
var self = this;
this.inherited(arguments);
this.contentCenter = new dijit.layout.ContentPane({ content : this.message, region: "center"});
this.contentBottom = new dijit.layout.ContentPane({region: "bottom"});
this.okButton = new dijit.form.Button( { label: "OK" } );
this.cancelButton = new dijit.form.Button( { label: "Cancel" } );
this.contentBottom.addChild(this.okButton);
this.contentBottom.addChild(this.cancelButton);
this.addChild(this.contentCenter);
this.addChild(this.contentBottom);
this.okButton.on('click', function(e){
self.emit('dialogconfirmed', { bubbles: false } );
self.destroy();
return "OK";
});
this.cancelButton.on('click', function(e){
self.emit('dialogdeclined', { bubbles: false } );
self.destroy();
return "Cancel";
});
}
});
But there was nothing returned, please help me out if you can point out my mistake, thanks!
You are trying to access the value in event listener? You can pass the label as part of the arguments.
self.emit('dialogconfirmed',
{ bubbles: false, label: self.okButton.get('label') } );
Usage:
this.confirmDialog.on('dialogconfirmed', function(data) {
var label = data.label;
});
Related
I have created Dialog in AddButtonEntryPoint.js file and I want to access that variable in Form.js file to hide the dialog after click on Submit button So, How can i call.
Here is the code which i have written
AddButtonEntryPoint.js
var w = new Form({});
var d = new Dialog({
id: 'FormDialog',
title: "Bridge Form",
style: "width: 270px; height: 270px;",
content: w,
onHide: function() {
// To prevent destroying the dialog before the animation ends
setTimeout(lang.hitch(this, 'destroyRecursive'), 0);
}
});
d.show();
};
Form.js
return declare( "mypackage.MyForm", Form, {
repotextbox: new TextBox({
name: "text",
placeHolder: "Enter text here."
} , dojo.doc.createElement('input')),
DFMtextbox: new TextBox({
name: "text",
placeHolder: "Enter text here."
} , dojo.doc.createElement('input')),
submitButton: new Button({
type: "submit",
label: "Submit"
}),
constructor: function(args) {
declare.safeMixin(this, args);
},
onSubmit: function() {
var repositoryID = this.repotextbox.get('value');
xhr("https://samples.openweathermap.org/data/2.5/weather?q={repositoryID}",{
// The URL of the request
method: "GET",
handleAs: "json",
}).then(
function(data){
alert(data.success + " " + JSON.stringify(data));
},
function(err){
alert( "Your message could not be sent, please try again.");
});
},
});
}
);
In form.js file, Under onSubmit function I have to hide the dialog created in AddButtonEntryPoint.js when the user click on Submit button.
In Form.js you have to add a property that will reference the Dialog instance
return declare( "mypackage.MyForm", Form, {
myDialog: null,
// etc
}
Then in AddButtonEntryPoint you can either set this property when you initialize w if you put it after:
var d = new Dialog({
id: 'FormDialog',
title: "Bridge Form",
style: "width: 270px; height: 270px;",
content: w,
onHide: function() {
// To prevent destroying the dialog before the animation ends
setTimeout(lang.hitch(this, 'destroyRecursive'), 0);
}
});
var w = new Form({
myDialog: d
});
or you can keep it as it is and call w.set("myDialog", d); later - but in this case any code in postCreate that requires the dialog will not run.
Hope this helps!
I have a table that shows a pop-up when the first cell is clicked like this:
$('#tblAllUsers tbody').on('click', 'td', function () {
var visIdx = $(this).index();
if (visIdx != 0) {
return false;
}
var par = this.parentNode.parentNode.id;
var oTable = $("#tblAllUsers").dataTable();
var rowIndex = $(this).closest('tr').index();
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
var name = aData[1];
if (name != '') {
GetUser(name, rowIndex, "#tblAllUsers");
}
else {
ErrorDialog("#MessageDialog", "#lblError", "The User ID is blank in that row.", "No User ID");
return false;
}
});
The pop-up allows the user to modify fields and save it, close the dialog and then return to the grid. If the dialog is canceled, data not saved, the scroll is maintained. But if the data is saved, and I am not reloading the table, the table moves to the top. The AJAX update function is within the pop-up:
$.ajax({
type: 'POST',
data: $("#formUserModification").serializeArray(),
url: '#Url.Action("UpdateUser")',
success: function (data) {
if (data.Errors === 'ERROR') {
ErrorDialog("#MessageDialog", "#lblError", "There was an error encountered in modifying the user, please try again later.", "Error");
}
else {
updateTable(data);
}
$("#divDetails").dialog('close');
},
beforeSend: function () {
$("#divOverlay").show();
},
complete: function () {
$("#divOverlay").hide();
}
});
The update function simply loads the row:
function updateTable(data) {
var tab = $("#tblAllUsers").dataTable();
tab.fnUpdate(data.LastName + ', ' + data.FirstName, data.RowIndex, 0);
tab.fnUpdate(data.ID, data.RowIndex, 2);
tab.fnUpdate(data.LocationText, data.RowIndex, 3);
tab.fnUpdate(data.SiteText, data.RowIndex, 4);
}
Is there a way with this setup to keep the scroll position?
I accomplished my goal by doing this:
Define a variable:
var scrollToPos;
In the dialog definition set the value when it is opened and place the scroll bar when it is closed:
$("#divAllUsersDetail").dialog({
autoOpen: false,
width: '90%',
resizable: false,
draggable: false,
title: 'Details',
position: { my: 'top', at: 'top+100' },
modal: true,
closeOnEscape: false,
open: function() {
scrollToPos = $("#divAllUsers").find(".dataTables_scrollBody").scrollTop();
},
close: function () {
$("#divAllUsers").find(".dataTables_scrollBody").scrollTop(scrollToPos);
},
show: {
effect: 'drop', direction: 'up'
},
hide: {
effect: 'fade', duration: 200
},
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
}).prev("ui-dialog-titlebar").css("cursor", "default");
This works famously.
If I have made to the tab through the dojo,
mycode
var tab=new dijit.layout.ContentPane({
title:formCount,
id:''+formCount,
content:cont,
class:'tab',
closable: true,
onClose:function(){
return confirm('Relly want to remove?');
}
});
dijit.byId('tabContainer').addChild(tab);
After the tab is created, i want to change the tab title dynamically through dijit/Dialog.
but I don't know how it should be implemented,Please advise me
The best way to achieve this is to create your own widget and extend from dijit/layout/ContentPane, for example:
declare([ ContentPane ], {
});
Then you can add stuff to show a dialog, for example:
declare([ ContentPane ], {
btn: domConstruct.create("button", {
innerHTML: "Change title",
}),
_createButton: function() {
domConstruct.place(this.btn, this.domNode);
on(this.btn, "click", lang.hitch(this, this._showDialog));
},
postCreate: function() {
this.inherited(arguments);
this._createButton();
this._createDialog();
}
});
The postCreate function is a part of the widget lifecycle in Dojo and is automatically executed when the widget is loaded. So, we use that to add a "Change title" button to the contentpane that, when being clicked calls a function this._showDialog() (that's what you can see in this._createButton()).
Of course, you also need to create a dijit/Dialog before you can actuall show one, so you could do something like:
declare([ ContentPane ], {
/** ... */
dialog: null,
editField: null,
okBtn: null,
_showDialog: function() {
this.editField.value = this.title;
this.dialog.show();
},
_createDialog: function() {
var div = domConstruct.create("div");
domConstruct.place(div, this.domNode);
this.dialog = new Dialog({
title: "Change title",
content: ""
}, div);
this.editField = domConstruct.create("input", {
type: "text"
});
this.okBtn = domConstruct.create("button", {
innerHTML: "OK"
});
domConstruct.place(this.editField, this.dialog.containerNode);
domConstruct.place(this.okBtn, this.dialog.containerNode);
on(this.okBtn, "click", lang.hitch(this, this._saveTitle));
},
/** .. */
});
What happens here is that we create a dialog with a simple textfield and a button (the OK button), all of that can be found in this._createDialog().
In this._showDialog() you can see that I'm first changing the value of the textfield into the title of the contentpane. Then I show the dialog we made earlier.
Now all you have to do is read that value when the OK button is pressed:
declare([ ContentPane ], {
/** ... */
_saveTitle: function() {
this.set("title", this.editField.value);
this.dialog.hide();
},
/** ... */
});
That's all you really need. You can find a working example on JSFiddle: http://jsfiddle.net/LE49K/
I have the popup working but sometimes a user clicks the back button on their browser to close the popup.
How can I make the browser back button close a 'magnific-popup' that is already open?
Thanks
After some digging found history.js and then the following
var magnificPopup = null;
jQuery(document).ready(function ($) {
var $img = $(".img-link");
if ($img.length) {
$img.magnificPopup({
type: 'image',
preloader: true,
closeOnContentClick: true,
enableEscapeKey: false,
showCloseBtn: true,
removalDelay: 100,
mainClass: 'mfp-fade',
tClose: '',
callbacks: {
open: function () {
History.Adapter.bind(window, 'statechange', closePopup);
History.pushState({ url: document.location.href }, document.title, "?large");
$(window).on('resize', closePopup);
magnificPopup = this;
},
close: function () {
$(window).unbind('statechange', closePopup)
.off('resize', closePopup);
var State = History.getState();
History.replaceState(null, document.title, State.data["url"]);
magnificPopup = null;
}
}
});
}
});
function closePopup () {
if (magnificPopup != null)
magnificPopup.close();
}
I'm using this solution:
callbacks: {
open: function() {
location.href = location.href.split('#')[0] + "#gal";
}
,close: function() {
if (location.hash) history.go(-1);
}
}
And this code:
$(window).on('hashchange',function() {
if(location.href.indexOf("#gal")<0) {
$.magnificPopup.close();
}
});
So, on gallery open I add #gal hash. When user closes I virtually click back button to remove it. If user clicks back button - everything works fine olso.
This solution does not break back button behavior and does no require any additional plugins.
Comments are welcome.
Just to add to your answer, these are the meaningful lines that I got to work for me.
callbacks:
open: ->
History.pushState({ url: document.location.href }, null, "?dialogOpen")
History.Adapter.bind(window, 'statechange', attemptToCloseDialog)
close: ->
$(window).unbind('statechange', attemptToCloseDialog)
History.replaceState(null, null, History.getState().data['url'])
With attempt being:
attemptToCloseDialog = ->
$.magnificPopup.close() if $.magnificPopup.instance
I have used check box model in the grid panel. When i checked the check box i am the checked column value. Now what i need is when i unchecked i need to get that same unchecked value.
var selModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
id = records[0].get('id');
alert(id);
}
}
}
});
Thanks in advance.
Regards,
Riyaz
This is the answer:
var selModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
deselect: function(model, record, index) {
id = record.get('id');
alert(id);
},
select: function(model, record, index) {
id = record.get('id');
alert(id);
}
}
})