I'm using simple modal to display a legal alert before the user can send email to a specific address:
On my main page:
somebody#abc.com
jQuery being used:
jQuery(function ($) {
$('.legalnotice').click(function(e) {
var src = "email_alert.html";
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML:"",
closeCLASS:"simplemodal-close",
containerCss:{
backgroundColor:"#f8f8f8",
borderColor:"#f8f8f8",
height:500,
padding:0,
width:400
},
overlayClose: true
});
return false;
});
});
email_alert.html contains:
<form name="alertFORM" id="alertFORM" action="">
<div class="row-box"><input type="checkbox" /><label>I understand and agrees</label></div>
<input name="Submit" type="submit" class="modal-close simplemodal-close" id="Submit" value="Close" />
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#alertFORM').submit(function() {
window.parent.jQuery.modal.close(true);
});
</script>
When the user clicks the email address, the window opens as expected.
They check "I understand" to accept the notice, hit "Submit", and the window closes - as expected. However, I can't figure how to get the opening page to go ahead and continue from where it left off so their email client now opens so they can write an email to the selected address.
Little help please??
You could trigger the mailto window to open by using:
window.location.href = "mailto:email#example.com";
Therefore you could just add that after the modal is closed:
$('#alertFORM').submit(function() {
$.modal.close();
window.location.href = $('.legalnotice').attr('href');
});
If you want a dynamic approach that passes the href mailto value when the dialog is opened, use:
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var mailto = $(this).attr('href');
$.modal($('#alertFORM'), {
closeHTML: "",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
Within the onClose callback, trigger the mailto window to open with window.location.href = mailto when the dialog is closed:
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
.. and for your iframe:
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var src = "email_alert.html";
var mailto = $(this).attr('href');
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML: "",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
});
Slight variation to get the iframe with the external file back in there, and it works a treat.
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var src = "email_alert.html";
var mailto = $(this).attr('href');
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML: "",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
});
Thanks for the assistance!!
Related
Jquery code is
$(".confirmDialog").live("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;
});
HTML.cshtml code is
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure to delete ?
</p>
button is
when I using button it is deleting data
#Html.ActionLink("Delete", "Delete", new { id = item.Sid }, new { #class = "confirmDialog" })
But not showing popup. and
How to delete and show popup when using image.
put jquery code in document.ready and use .click instead of .live
Document.ready(function(){
$(".confirmDialog").click(function(){
});
});
As Rory McCrossan and Raphael Mayer in your comments has suggested to use ".on" instead of ".live" as this has been removed from newer versions of jQuery.
$(".confirmDialog").on("click", function (e) {
...
...
});
Here is some documentation from jQuery:
http://api.jquery.com/live/
http://api.jquery.com/on/
Hope this helps.
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']
);
});
});
I have some images in my HTML and _I need to play embedded you tube video videos on click of each image which should load/play in a jQuery UI dialog. Basically like a pop up video player.
So here is what i have done to play/attach video with each image. I have three images and i have added the unique video id in my custom data-attribute which i taken from you tube.
HTML
<div id="ImageBox">
<img src="img1.png" class="playVideo" alt="" id="image1" data-videoId="v6jg8g"/>
<img src="img2.png" class="playVideo" alt="" id="image2" data-videoId="re84hj"/>
<img src="img3.png" class="playVideo" alt="" id="image3" data-videoId="dhj3fk"/>
</div>
<!-- HTML for jQuery modal dialog -->
<div id="MyVideoPlayer">
<div>
<strong id="videoTitle">title for video</strong>
<img src="closeButton.png" id="Close" alt="Close" />
</div>
<iframe src="https://www.youtube.com/embed/MyVideoId?wmode=opaque&autoplay=1&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1" id="Player" width="100%" height="100%"></iframe>
</div>
Note: I am using iframe embed method from you tube player
API
to embed videos.
For JavaScript/jQuery section, I came up with two choices here.
1. Because i am working in a ASP.NET MVC 3 app, i can set the unique video id to #ViewBag in script and assign to iFrame like this...
$('#ImagesBlock .playVideo').click(function(){
var myId = $(this).attr('data-videoId');
'#ViewBag.VideoId' = myId;
$('#MyVideoPlayer').dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} }
});
});
2. Assign the updated iFrame src with new video id each time dialog
opens.
$('#imagesBlock .playVideo').click(function(){
var myId = $(this).attr('data-videoId');
var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&autoplay=1&autohide=1
&showinfo=0&controls=2&rel=0&enablejsapi=1';
$('#MyVideoPlayeriframe').attr('src', src);
$('#MyVideoPlayer').dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} }
});
});
Which one should I go with. I found some references though,
Embedded jwplayer into jQuery Dialog
https://stackoverflow.com/questions/15887106/how-to-get-embedded-video-into-modal-dialog
jQuery mb.YTPlayer
Is there any way i can make it little more simplified and re-usable in future. Please advise with your wise opinion.
I am little late updating this thread but I managed to create a method or more of a plugin by extending jQuery's prototype object. This is a nice link to start learning.
// following is the method by extending the jQuery's prototype object
// to convert and embed an element into a video pop-up
(function ($) {
$.fn.videoPlayer = function (options) {
var defaults = $.extend({
title: "",
videoId: "",
autoplay: 1
}, options);
var videoBox = this.find('#VideoBox');
var videoElement = document.createElement('iframe');
var src = 'https://www.youtube.com/embed/' + defaults.videoId + '?wmode=opaque&autoplay=' + defaults.autoplay + '&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1';
this.find('#VideoTitle').text(defaults.title);
$(videoElement).attr({
'src': src,
'frameborder': 0,
'width': '100%',
'height': '90%'
});
videoBox.html(videoElement);
this.dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} },
{ hide: { effect: "fade", duration: 250} },
{ close: function (event, ui) {
$(videoElement).remove();
$(this).dialog('destroy');
}
});
//making the method chainable!
return this;
};
})(jQuery);
$(function(){
$('#VideoPlayerPopUp #Close').click(function () {
$("#VideoCatcher").dialog("close");
});
$('#Entertainment .launch-video').click(function () {
var element = $(this);
$('#VideoCatcher').videoPlayer({
title: element.attr('data-videoTitle'),
videoId: element.attr('data-videoId')
});
});
});
I have used custom HTML data-attributes for video title and video id. This will keep HTML clean and semantic. You can of course style/customize the pop-up accordingly.
Visit this working demo to see this in action.
'm trying to call a server side function in nested jquery dialogs
the design is like this:
[first dialog]
clicking a button opens up second dialog
clicking another button runs server a side method. (works fine)
a gridview gets updated by a server side method.
[second dialog]
clicking a button run a server side method
var btnConfirm = document.getElementById("<%= BtnAvailEmpAccept.ClientID %>");
btnConfirm.click();
[first dialog] works fine as intended, but nothing happens in [second dialog].
[second dialog] javascript code gets executed but never hit the server side method.
Two "div"s for each dialog are enclosed in an updatepanel, since I have gridviews to be updated by button click events.
This is [second dialog]
$confirmWindow = jQuery("#empConfirmDiv");
$confirmWindow.show();
$confirmWindow.dialog("open");
//instantiate the dialog
$confirmWindow.dialog({
dialogClass: "empConfirmDialog",
maxHeight: 600,
width: 1200,
resizable: false,
modal: true,
position: 'center',
autoOpen: false,
title: 'Exception - Confirmation',
overlay: { opacity: 0.5, background: 'black' },
buttons: {
"Decline": function () {
var btnDecline = document.getElementById("<%= BtnAvailEmpReject.ClientID %>");
btnDecline.click();
},
"Left Message": function () {
var btnMsg = document.getElementById("<%= BtnAvailEmpMsg.ClientID %>");
btnMsg.click();
},
"Confirm": function () {
var btnConfirm = document.getElementById("<%= BtnAvailEmpAccept.ClientID %>");
btnConfirm.click();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
asp:button to run a server side method:
<asp:Button ID="BtnAvailEmpAccept" runat="server" Width="10px" Height="10px" OnClientClick="return SetValidateTrue()"
OnClick="BtnAvailEmpAccept_Click" />
Does anyone have ideas why button.Click() does not invoke the server side method?
> Edited: Here is my answer!
var showDialogConfirmEmp = function () {
$confirmWindow = jQuery("#empConfirmDiv");
$confirmWindow.show();
$confirmWindow.dialog("open");
}
var myWindowConfirmEmp =
jQuery("#empConfirmDiv").dialog({
dialogClass: "empConfirmDialog",
maxHeight: 600,
width: 1200,
resizable: false,
modal: true,
position: 'center',
autoOpen: false,
title: 'Exception - Confirmation',
overlay: { opacity: 0.5, background: 'black' },
buttons: {
"Decline": function () {
var btnDecline = document.getElementById("<%= BtnAvailEmpReject.ClientID %>");
btnDecline.click();
},
"Left Message": function () {
var btnMsg = document.getElementById("<%= BtnAvailEmpMsg.ClientID %>");
btnMsg.click();
},
"Confirm": function () {
var btnConfirm = document.getElementById("<%= BtnAvailEmpAccept.ClientID %>");
btnConfirm.click();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
var showDialogAvailEmp = function () {
SetValidateTrue();
if (IsScheduleWorkChecked()) {
var button = document.getElementById("<%= btnListEmp.ClientID %>");
button.click();
$myWindowAssign = jQuery("#availEmpDiv");
$myWindowAssign.show();
$myWindowAssign.dialog("open");
$myWindowAssign.parent().appendTo(jQuery("form:first"))
}
else {
alert("Please select a work to assign!");
}
}
var myWindowAvailEmp = jQuery("#availEmpDiv").dialog({ maxHeight: 600,
width: 700,
resizable: false,
modal: true,
position: 'center',
autoOpen: false,
title: 'Exception - Available Employees',
overlay: { opacity: 0.5, background: 'black' },
buttons: [{
text: "Proceed",
"id": "btnProceed",
click: function () {
Page_IsValid = true;
if (Page_IsValid) {
var btnProceed = document.getElementById("<%= btnProceed.ClientID %>");
btnProceed.click();
}
$confirmWindow = jQuery("#empConfirmDiv");
$confirmWindow.show();
$confirmWindow.dialog("open");
myWindowConfirmEmp.parent().appendTo(jQuery("form:first"));
}
},
{
text: "Cancel",
"id": "btnAvailCancel",
click: function () {
$(this).dialog("close");
}
}]
}); // myWindow
// JQuery UI: Diaglog
jQuery(document).ready(function () {
jQuery("#BtnAssign").click(showDialogAvailEmp);
//variable to reference window
myWindowAvailEmp.parent().appendTo(jQuery("form:first"));
...
I had to add "form:first" :
"The reason for this is that the dialog function pulls your element and puts it in a window container which are placed outside the Form tag"
like:
myDialog.parent().appendTo(jQuery("form:first"));
http://labs.kaliko.com/2011/08/jquery-ui-dialog-aspnet-postback.html
helped me!
A page on my site are auto-reloading every 15th second. It's being done by using jQuery's .ajax function.
My problem are, that everytime the page are being loaded by the user, the form in the dialogs work fine.
But when it's reloaded automatically by the page itself, the inputs are being moved OUTSIDE the form.
Many on the internet writes, that it is possible to move it back into the form by appending a div into the first form found. My problem is, that when i try to move my "input-wrapper" back into the form, i get a hirachy-problem.
Can anyone help? Or point out an alternative solution?
My jQuery-script:
<script type='text/javascript'>
var intval;
var xmlhttp;
function init() {
$('#dialog:ui-dialog').dialog('destroy');
$('.ui-dialog').dialog({ modal: true, draggable: false, resizable: false, autoOpen: false, open: function(event, ui) { stopTimer(); }, close: function(event, ui) { startTimer(); } });
$('#targets').dialog({ width: 400, buttons: { 'close': { text: 'Luk', height: '30px', click: function() { $(this).dialog('close'); } }, 'submit': { text: 'OK', class: 'submit', height: '30px', click: function() { $(this).find('form').trigger('submit'); } } } });
$('#targets" & id2 & "Opener').click(function() { $('#targets').dialog('open'); return false; });
};
function startTimer() { intval = setTimeout('ajaxRefresh()', 15000); };
function stopTimer() { clearTimeout(intval); if(xmlhttp) xmlhttp.abort(); };
function ajaxRefresh() { xmlhttp = $.ajax({ url: '/', data: {h: 'ok'}, beforeSend: function() { stopTimer(); }, success: function(result) { $('body').html(result); } } }) };
$(document).ready(function() { init(); startTimer(); $('#targetsFormWrap').parent().appendTo('#targetsForm'); });
</script>
The HTML:
<div id='targets' class='ui-dialog' title='The Dialog Title' style='text-align: center; display: none;'>
<form id='targetsForm' name='targetsForm' method='post'>")
<div id='targetsFormWrap'>")
<input id='input1target' name='input1target' type='text' value='' style='width: 95%; />
<input id='input2target' name='input2target' type='text' value='' style='width: 95%; />
<input id='input3target' name='input3target' type='text' value='' style='width: 95%; />
</div>
</form>
</div>
you are trying to add targetFormWrap to targetsForm right? so just do:
$("#targetsForm").append($("#targetsFormWrap"));