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']
);
});
});
Related
I have two web form e.g. webform1 and webform2 . i am calling webform2 as dialog from webform1. I want to access ui element(e.g. hidden field) on click button event of dialog.
When focus was on dialog (webform2) then i am able to get hidden filed value in console but when i click on dialog button and code executing button event in JS that time hidden field value becomes undefined.
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 950,
title: "Add Lines to Manual Invoice",
close: function () {
$(this).dialog("close");
},
buttons: {
okay: function () {
console.log($('#HiddenField1').val()) // This is undefined while i want to access webform2 vlaue
$(this).dialog("close");
}
},
show: {
effect: "slide",
duration: 1500
}
});
$("#opener").click(function () {
$("#dialog").dialog('open');
return false;
});
});
i have load webform2 in iframe tag like below:
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title"><iframe style="border: 1px;height:700px;width:930px;" src="WebForm2.aspx"></iframe></div>
I have resolved this with below line of code.
$(this).find('iframe').contents().find('[id="HiddenField1"]').val()
I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>
I have a HTML page which has a model as follows:
#model ViewModel.Ekranlar.ModelVM
I call a Confirm Dialog written with JavaScript in the html page as in the following:
<script type="text/javascript">
$(document).ready(function () {
$(".confirmDialog").on("click", function (e) {
// e.preventDefault(); use this or return false
var url = $(this).attr('href');
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location = url;
}, "Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog('open');
return false;
});
}); </script>
And the controller is as in the following:
public ActionResult DUDBaskaniBuro2GidenIptal(ModelVM model)
How can I pass ModelVM model to the Action in the controller?
Thanks for your helps.
Though not sure if you are using jquery modal or your custom one, but:
1) If you want to do full page postback, you may make the 'OK' button a 'submit' button type so that on click it will postback to the url mentioned in the form tag.
<input type="submit" value="OK" .../>
2) If you want to do partial postback, you may use something like:
"OK": function () {
$.post('#Url.Action("ActionMethod","ControllerName")',
<captured values via jquery/javascript as json>, //E.g. {"Id":1,"Name":"My Name"}
function(data){
//Code you want to do here
$(this).dialog("close"); //Just an example
window.location = data.url; //Just an example
});
}
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.
jquery ui.dialog
after open a modal dialog, if I will open another modal dialog again and close it, the textbox is lock in the parent dialog. I can not resolve this problem.
if I open a non-modal dialog , it works fine,
but the parent dialog can be closed ,How to resolve it , thanks , waiting online
html:(dotnet mvc2)
<input id="btnDlg" type="button" value="open dialog"/>
<div id="dlg1"><%=Html.TextBox("txtName","can not edit") %><input id="btnShowDlg" type="button" value="dialog again" /></div>
<div id="dlg2"><div>the second dialog</div><%=Html.TextBox("txtName2") %></div>
jquery:
//first modal dialog
$("#dlg1").dialog({
autoOpen: false,
height: 350,
width: 300,
title: "The first dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
//second modal dialog
$("#dlg2").dialog({
autoOpen: false,
height: 200,
width: 300,
title: "This is the second dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
//show the first modal dialog
$("#btnDlg").click(function() {
$("#dlg1").dialog("open");
})
//show the second modal dialog
$("#btnShowDlg").click(function() {
$("#dlg1").dialog("options", "hide",true);
$("#
dlg2").dialog("open");
})
I just figured it out, just in case sb ever needs an answer and doesn't find one
One needs to change the z-index in CSS file of #btnShowDlg to this (not exactly)# 638746and then the fields within the modal preview are editable.. No need to change anything else :)
Just go to your css file, locate #btnShowDlg and either change or set z-index:638746;