I'm working on a AlloyUI modal window that is present in many pages of my application. The modal structure is actually the same, the only thing that changes is the bodyContent text for each page. I'm trying to reuse the AlloyUI modal script, only updating the bodyContent parameter rather than create 20 modal scripts for each page, but it's script nightmare for me as I have not found any code I can look at. I created a jsfiddle as an example and down below is the script I've been working. I'd appreciate your help.
http://jsfiddle.net/x9t3q0bs/
YUI().use('aui-modal', function(Y) {
var helpModConfIdent = Y.one('#showHelpPageConfirmIdentification'),
helpModQuestions = Y.one('#showHelpPageQuestions'),
helpPageConfirmIdentRetCust = Y.one('#showHelpPageConfirmIdentRetCust')
var modal = new Y.Modal({
bodyContent: "<p>Here will show help modal1.</p>",
centered: true,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 800,
toolbars: {
}
});
modal.addToolbar([{
label: 'Close',
cssClass: 'btn-primary-content',
on: {
click: function() {
modal.hide();
}
}
}]);
modal2 = new Y.Modal(
{
bodyContent: "<p>Here will show help modal2.</p>",
centered: true,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 800,
toolbars: {
}
}
);
if (helpModConfIdent) {
helpModConfIdent.on('click', function (e) {
modal.show();
});
} else if (helpModQuestions) {
helpModQuestions.on('click', function (e) {
modal2.show();
});
}
});
Thanks
The bodyContent is one of the attributes that is available to be set if you have access to the modal instance. Otherwise, you can always manipulate the html within the template that has been rendered.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: "<p>Default implementation</p>",
centered: false,
destroyOnHide: false,
headerContent: '<h3>Help info</h3>',
modal: true,
render: '#modal',
visible: false,
width: 250
});
Y.one('#modalInstance').on('click', function(){
modal.set('bodyContent', "<p>Something loaded using the orginal modal instance</p>")
modal.show()
})
Y.one('#nodeInstance').on('click', function (e) {
Y.one('#modal .modal-content .modal-body').setHTML('<p>Set using the node instance</p>')
modal.show()
})
});
<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div id='modalInstance'>Modal Instance</div>
<br/>
<div id='nodeInstance'>Node Instance</div>
<div class="yui3-skin-sam">
<div id="modal"></div>
</div>
Related
Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.
The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});
I have a dialog with a WebGrid that displays a list of items:
#if (Model.ItemsByLocation != null)
{
#grid.GetHtml(
tableStyle: "table",
fillEmptyRows: true,
headerStyle: "header",
footerStyle: "footer",
mode: WebGridPagerModes.All,
firstText: "<<First",
previousText: "<Prev",
nextText: "Next>",
lastText: "Last>>",
htmlAttributes: new { id = "grid"},
columns: new []
{
//grid.Column("ItemNumber", "Item"),
grid.Column(header: "Item Number", format: (item) => Html.ActionLink((string)item.ItemNumber, "ShowItem", "Inventory", new { id = item.ItemNumber.ToString()}, new {onclick = "GetItemDetails(" + item.ItemNumber.ToString() + ");"})),
grid.Column("ItemDescription","Desc"),
grid.Column("ItemSerialNumber","SN"),
grid.Column("itemLocationSite","Site"),
grid.Column("ItemLocationBuilding","Bldg"),
grid.Column("ItemLocationFloor","Flr"),
grid.Column("ItemLocationOffice","Off"),
grid.Column("ItemTypeDescription","Type"),
grid.Column("FirstName","First"),
grid.Column("LastName","Last")
})
}
else {
<p><i>No item to display</i></p>
}
This is a dialog itself from another page - no problem with this. When I click on the link the JS function is called:
function GetItemDetails(id) {
var test = id;
$.ajax({
type: 'GET',
url: '#Url.Action("ShowItem")?id=' + id,
success: function (data) {
$("#divDetails").html(data);
$("#divDetails").dialog("open");
$("#divDetails").show();
}
});
return false;
}
This responds with another dialog on top of the first dialog, but only for a second or two and then both dialog close and the data in the second dialog is displayed full page in the browser. Any ideas why this is?
This is the dialog for the details:
$(document).ready(function () {
//debugger;
$("#divDetails").dialog({
autoOpen: false,
width: 'auto',
resizable: true,
title: 'Item Details',
modal: true,
closeOnEscape: false,
show: {
effect: 'drop', direction: 'up'
},
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
}).prev("ui-dialog-titlebar").css("background", "#FF3300");
$(".dialog").click(function () {
$("#divDetails").dialog("open");
});
});
<div id="divDetails" style="display:none" class="ui-dialog-titlebar ui-widget-header">
</div>
I put some breakpoints in the code and after the second dialog is displayed the controller Index function is called. How does that happen? It does this if I remove the ShowItem from the link, But if I put that back in, it calls the ShowItem function twice. Why?
I still do not know what the problem was but if I change the webgrid column to this, it works just fine:
grid.Column(header: "Item Number", format:##item.ItemNumber.ToString()),
Below code i have used for opening popup . How do i close the same on submit?
function popupCreation(url){
AUI().use('liferay-util-window', 'aui-io-deprecated',
function(A) {
modal=Liferay.Util.openWindow({
dialog: {
id:'closeid',
centered: true,
modal: true,
width: 950,
height:750,
},
uri: '<%=editSettingsURL%>'
});
});
}
this page might be helpful - How to close a Dialog IFrame in Liferay 6.2
If you define your modal window like this (let's say in view.jsp):
<aui:button name="openDialog" type="button" value="open-dialog" />
<liferay-portlet:renderURL var="dialogURL" windowState="<%=LiferayWindowState.POP_UP.toString() %>">
<liferay-portlet:param name="mvcPath" value="/dialog.jsp" />
</liferay-portlet:renderURL>
<aui:script use="liferay-util-window">
A.one('#<portlet:namespace/>openDialog').on('click', function(event) {
Liferay.Util.openWindow({
dialog: {
centered: true,
height: 300,
modal: true,
width: 400
},
id: '<portlet:namespace/>dialog',
title: '<liferay-ui:message key="i-am-the-dialog" />',
uri: '<%=dialogURL %>'
});
});
</aui:script>
and create button trigger (or onsubmit event listener in your case) inside the dialog page (dialog.jsp):
<aui:button name="closeDialog" type="button" value="close" />
<aui:script use="aui-base">
A.one('#<portlet:namespace/>closeDialog').on('click', function(event) {
// Let's suppose that "data" contains the processing results
var data = ...
// Invoke a function with processgin results and dialog id
Liferay.Util.getOpener().<portlet:namespace/>closePopup(data, '<portlet:namespace/>dialog');
});
</aui:script>
you will get the window that opened the dialog by getOpener() function. In page that creates the dialog (view.jsp), you have to provide the closePopup function like this:
<aui:script>
Liferay.provide(
window,
'<portlet:namespace/>closePopup',
function(data, dialogId) {
var A = AUI();
// Here you can use "data" parameter
// Closing the dialog
var dialog = Liferay.Util.Window.getById(dialogId);
dialog.destroy();
},
['liferay-util-window']
);
</aui:script>
Try this
Liferay.Util.getOpener().<portlet:namespace />closePopup('<portlet:namespace />YOUR_POPUP_ID')
Please try the below code for closing the popup:
AUI().use('liferay-util-window', 'aui-io-deprecated',
function(A) {
modal=Liferay.Util.openWindow({
dialog: {
id:'closeid',
centered: true,
modal: true,
width: 950,
height:750,
},
uri: '<%=editSettingsURL%>'
});
});
Liferay.provide(
window,
'closePopup',
function(popupIdToClose) {
var dialog = Liferay.Util.getWindow(popupIdToClose);
dialog.destroy(); // You can try toggle/hide whatever You want
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
});
});
Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.
I am trying to achieve something but I don't know is it possible.
I have a link that point to /ControllerName/ActionName.
When I click on it view is opened and url is like:
localhost:xxxx/ControllerName/ActionName
or
localhost:xxxx/ControllerName/ActionName/9879878927
Now, when I use JQuery UI modal dialog to display the same view it opens in modal view but url isn't changed.
Is this possible in this way that I am making? Am I on the right direction or I did something completely wrong?
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
open: function (event, ui) {
window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 600,
height: 'auto',
resizable: false, position: 'top'
}).load(this.href);
});
...
#Html.ActionLink("about", "About", "Home", null,
new { #class = "openDialog", data_dialog_id = "test" })