I am trying to use the jQuery UI dialog as pop up window and I wanted to put another aspx page as body to the Jquery UI Dialog. here I do not want to use the Jquery button option. At the child page, I have put button which is supposed to close the modal window and refresh the parent page. Below is the code I have been trying to implement but some reason I am getting js error message. Am I missing something here ?
Parent Page : aspx page
<div>
<div id="dialog" title="This is Pop up ">
<div class="modal">
<div class="modal-body">
<iframe style="width: 100%; height: 100%;" src="childPage.aspx" runat="server" frameborder="0"></iframe>
</div>
</div>
</div>
<input type="button" value="open" id="OpenDialog"/>
</div>
Jquery code : parent page
$(function () {
var dialog
dialog = $("#dialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
$("#OpenDialog").button().on("click", function () {
dialog.dialog("open");
});
});
Child page :
<input type="button" id="btnCloseChildPageRefreshParent" value="Close and Refresh Parent Page" />
Child Page Js code :
$(function () {
$('#btnCloseChildPageRefreshParent').on('click', function () {
refreshParent();
open(location, '_self').close();
});
function refreshParent() {
window.opener.location.reload();
}
});
This is an iframe so you need to use window.parent (see the MDN documentation here) instead of window.opener. It is not a new window, but a frame, so there is no opener.
Note that the domain of the frame and parent must match, or the call will fail due to cross-domain security restrictions.
The code sample below will print out the value of window.opener and the error generated by the call to window.parent.location.reload to illustrate this.
function log (o) {
var el = document.createElement('div');
el.innerHTML = o;
document.body.appendChild(el);
}
document.getElementById('button').onclick = function () {
//This line could be used if the domain of the frame and parent match
//window.parent.location.reload();
log('window.opener is: ' + window.opener);
try {
window.parent.location.reload();
}
catch (e) {
log('Attempted to call window.parent.location.reload(): ' + e);
}
}
<button id="button">Reload Parent</button>
Related
I'm new to javascript.
Below is my popup form code,
try to find a way to make popup form only show one time.
Looking for a solution.
Can someone help me?
Here is my form code:
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow">
</div>
<!-- Begin Pop-up Signup Form -->
<div id="mc_embed_signup">
<form action="# " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-default">
</div>
</form>
</div>
<!-- End Signup Form -->
</div>
I've included these in the header of the page:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
Then follows the message using a jQuery popup. Here it is:
<script>
$(document).ready(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(9800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(10000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose,.backgroundOverlay").click(function (e)
{
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
</script>
You need to:
keep track of the fact you have shown the dialog to this user before
isolate the show function
use a cookie to persist the event of showing
can't guarantee it works 100% because i don't have the time now, but you can surely get started with this.
therefore I re-wrote the code above:
<script>
var didShowOnce = false;
var canShowDialog = function () {
// try to read cookie
var ckvalue = $.cookie('dialog-shown');
if (typeof ckvalue !== 'undefined' && ckvalue != null) {
didShowOnce = ckvalue == '1';
}
// write cookie to make sure it sticks
$.cookie('dialog-shown', didShowOnce ? '1' : '0', { expires: 365, path: '/' });
return !didShowOnce;
};
$(document).ready(function () {
ShowDialog();
});
var ShowDialog = function () {
if (canShowDialog()) {
$.cookie('dialog-shown', '1', { expires: 365, path: '/' });
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(9800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(10000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose,.backgroundOverlay").click(function (e)
{
HideDialog();
e.preventDefault();
});
}
}
var HideDialog = function () {
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
</script>
I am tring to open a new popup url in chrome extension pop up on the onclick event of a button. In my case I have a page which will display two buttons on startup. This has been set in the useropt.html page
useropt.html
<script src="scripts/usmanager.js"></script>
<body>
<div id="btn_wrap_inner">
<button class="btn" id="signin">Sign In</button><br /><br />
<button class="btn" id="signup">Sign Up</button>
</div>
</body>
The JS file usnmanager.js has js code which has code to open a new popurl url in the popup window on the onlick event of the buttons above.
usnmanager.js
function btn_clicked(tgtUrl) {
if(tgtUrl == "signin") {
var manager_url = "signin.html";
chrome.tabs.query(
{
currentWindow: true,
active : true
}, function(openselection) {
chrome.browserAction.setPopup({
popup: manager_url
});
});
} else if(tgtUrl = "signup") {
var manager_url = "signup.html";
chrome.tabs.query(
{
currentWindow: true,
active : true
}, function(openselection) {
chrome.browserAction.setPopup({
popup: manager_url
});
});
}
}
document.addEventListener("click", function() {
document.querySelector('#signin').addEventListener('click', btn_clicked('signin'));
document.querySelector('#signup').addEventListener('click', btn_clicked('signup'));
});
But when I am clicking either of the button the popup window is not loading the new popup page as set. Please let me know what have I done wrong
I would not try to pass the string in the event handler but use an attribute of the clicked button
function btn_clicked() {
var id=this.id;
if(id == "signup") {
Also in you code you test signup twice and you only add the event handler when you click something. Instead you likely want
document.addEventListener("DOMContentLoaded", function() {
I want to close some html popup windows. I have static site, which creates popup windows. These windows have a submit button, which sends a POST request to asp mvc app. This app works well and return View() (Index page with message "Ok". And Button "Close").
When I click on Close button- nothing happens.
My code:
<body>
<button type="button" id="btn" onclick="window.parent.jQuery('#btn, #m_window').hide('slow');">Close</button>
<!-- <button type="button" id="btnFoo" onclick="$("#btnFoo, #m_frame").live("click", function(){
$("#mistake").remove();
}); ">Close form </button>
-->
</body>
m_frame- frame of popup window.
mistake- div of popup window.
Please, tell me how to close this popup window?
window.close() doesn't work.
P.S. at js script (when popup creates) I write:
$("#btn",#m_window").live("click",function(){
var p = parent;
var win = p.document.getElementById('mistake');
win.parentNode.removeChild(win);
});
But it doesn't works too.
Try this
<script>
$(document).ready(function () {
$("#displayinmodal").dialog({
autoOpen: true,
modal: true,
buttons: {
"Close": function () {
$("#displayinmodal").dialog("close");
}
}
});
});
</script>
<div id="displayinmodal">
Popup demo
</div>
You should try:
window.close();
I'm loading a dialog from a div
<div id="dialog-message" title="Send Message" style="display: none;">
<form id ="form_message">
<textarea name="message_field" id="message_field" rows="8" cols="62" class="ui-widget-content ui-corner-all" style="resize: none;"></textarea>
</form>
creating the dialog inside the $(document).ready(function() and opening it using a link.
On submit of the dialog i change the content of the dialog with the return message, and the user can close the window.
// dialog create
$("#dialog-message").dialog({
autoOpen: false,
resizable: false, width: 520, height: 320,
modal: true,
buttons: {"Send": { text: "Send", id: "btn_send", click: function () {},
close: function() {if($('#form_message').length) {$(this).find('form')[0].reset();} }
});
//link to open dialog
$('#dialog_link').click(function(){$("#dialog-message").data("msg_data", {msg_from: 14, msg_to: 15}).dialog("open"); return false; });
//operations made on submit dialog
$('#btn_send').hide();
$('#dialog-message').html(data.error);
The problem i have is that once you open the dialog again, the return message remains, and it's not loading the original div content.
how can i achive this? i tried to destroy the dialog on the close event, but then the dialog doesn't reopen at all.
just save the message field's content before you change it....like this:
var message_field_html = "";
function openDialog(){ //or whatever function calls your dialog
if(message_field_html != ""){
$('#dialog-message').html(message_field_html);
}
//do things
}
function changeDilogText(){ //or whatever function changes the text
message_field_html = $('#dialog-message').html()
$('#dialog-message').html(data.error);
}
[edit] edited code to mach your question
I am using jquery-ui tabs and dialog functionality.
Each tab has a button on the page which opens a dialog. This works for one of the tabs. However if I go the second tab, the button does not work there. When I come back to the first tab, the dialog does show up but the problem is I notice as I make switches back and forth to the first tab, it keeps on inserting new div's while the old div's have display:none set on them.
I am doing this using JSP. This is how the reusable jsp looks like:
<script>
$(function() {
var formData = null;
$.ajax({
url : "addFormGenerator.html",
success : function(data) {
formData = data;
$("#addFormDialog").html(data);
$("#addFormDialog").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
}
});
}
});
$("#addButton").button().click(function() {
$("#addFormDialog").html(formData);
$("#addFormDialog").dialog("open");
});
});
</script>
<button id="addButton">Click here to Add New</button>
<div id="addFormDialog" title="Add New"></div>
This jsp fragment is included in other jsp pages as well.
I was assuming as I switch between tabs the old button will be garbage collected.
Can you help me understand the problem and fix it?
You need not render the following part from your jsp's response
<div class="addFormDialog" title="Add New"></div>
$("#addButton").button().click(function() {
$("#addFormDialog").html(formData);
$("#addFormDialog").dialog("open");
});
Just have the following, ideally with class names and not duplicate id's
<button class="addButton">Click here to Add New</button>
UPDATE:
I still don't think you need unique id's -
<div id="tabs-container">
<!-- tabs here -- >
<-- let's say this is tab#1 -->
<button class="addButton">Click here to Add New</button>
<div class="addFormDialog" title="Add New"></div>
<!-- tab1 -->
</div>
$('#tabs-container').on('click' , '.addButton', function(){
var dialogContent = $(this).siblings('.addFormDialog');
//now call .dialog({..}); or whatever you need
});
This way you're binding just one click handler that listens to any click that bubbles up from a .addButton and then searches for its sibling .addFormDialog. (I hope I'm not sounding too confusing)