I'm using the jQuery-UI dialog widget in a Grails-based application to load a remote page (in this case, a simple file upload form). The remote page is defined elsewhere in my project, and doesn't know it is being loaded in a dialog.
Is there any way to close the dialog via a link in the remote page? Would I have to somehow pass a reference to the dialog when I load the page, or is there a way to trigger the close event while remaining agnostic of the dialog itself?
Try this HTML:
CLOSE
and this JavaScript:
$("#btnDone").click(function (e) {
e.preventDefault();
var dialogDiv = $("#btnDone").parents(".ui-dialog-content");
if (dialogDiv.length > 0) {
dialogDiv.dialog('close');
}
});
in your remote page. It will look to see if it is inside a dialog and if so, it will close it. If not, it will do nothing.
If you give your dialog a known ID then you can look it up using jquery (e.g. $('#mydialog') and close it via script on the remote page. The only issue might be getting JS to be evaluated when the remote page is loaded into the dialog.
Related
I'm using bootstrap 3.x.x & I have a remote modal which is working fine, also I have Implemented the functionality where if the modal is closed, the data is flushed and a fresh ajax request is made if it is reopened. All of this is working fine.
Now I need to refresh/reload the content from that same remote URL without closing the modal.
Is there a way to achieve it?
One way that I can think of is just manually firing a jquery .load with the same URL and modal-body as the target. But that doesn't trigger the respective events like loaded.bs.modal etc.
So again, is there an official way to refresh the remote bootstrap modal, without closing it and re-opening it again?
If you load an external Modal dialog with bootstrap in MVC, its easy to set the height, for example:
$(".modal-body").height(300);
However, if I then send another view to that same popup (if they click a link within the popup which hits your controller and you return a different view to the existing popup window), then you may have a different size of content in this new view. So how can you resize the external modal dialog now?
My thought was to put JS code in that new view, and have an onload event:
<script type="text/javascript">
$(document).ready(function () {
$(".modal-body").height(530);
alert("hit.");
});
</script>
Well this code hits (the alert debug message 'hit' does show up), but the dialog height doesn't change from 300 to 530. So, perhaps the JS doesn't have access to that part of the DOM?
How can I get this second view within the same Modal dialog to have the correct height for its content?
thanks
So there was a Iframe inside of the popup and that was why the popups content size was not changed. There exists an issue where the popup content change isnt noticed anyway, but that is solved with the code I already had, posted above, but the below solves when its in an iframe if on the same domain as well.
The solution was on the site that the SRC in the iframe pointed to (the content of the popup) since hosted on the same domain, was to do:
parent.$(".modal-body").height(530);
parent.$("#myIframeId").height(500);
I'm working on my first chrome extension and I'm trying to create a pop up extension that scrapes a webpage and add some items to a list, based on the results. Kind of like a wishlist.
I want to listen to a popup opened event in my content script so I can re-scrape the webpage for updated data (that's if the user clicks something in the webpage and the DOM changes). I'm using chrome.runtime.onMessage and chrome.tabs.sendMessage to communicate between content and pop up scripts.
My question here is: is there any event to which I can listen to in the content script and know when the popup was opened? Or even better, is there a best practice for updating the popup based on tab DOM changes?
Cheers.
In your popup page, include the following js
window.onload = function() {
//popup was opened, do what you want
};
Based on the docs.Use 'MutationObserver()', it provide a mechanism for a web page or an extension to get notified about changes made to the DOM.
Code snippet below is how to instantiate DOM mutation observers:
new MutationObserver(
function callback
);
Using the Tabs permission you can run a script when the extension's Popup has opened:
chrome.browserAction.onClicked.addListener(function(tab) {
// Run the following code when the popup is opened
});
Just remember that the code above has to be run in a background script.
I have a modal window which is loading an external HTML page. I am trying to figure out how to close this modal window after the content has been loaded. Since this is an external page I will not be able to change this content so I'm guessing that I need to put an event listener on the parent page that can detect when the modal window content has been loaded?
Any help would be greatly appreciated.
Are you using .load() to load the external HTML page? If so, you can put a callback function in the load() function. Like this:
$('#someDiv').load(function(){
//Put code to close the modal
});
JS:
To call a method in the parent window from the modal:
window.opener.document.globalMethodInOpeningFile(param1, param2);
To close the modal window, call this once content is loaded (you can use .load(callbackFn) to check for load`):
window.close();
If you're opening this modal page with window.showModalDialog() then you can't. As its own name indicates, it opens a modal window. Execution of javascript in your main (opener) page will be suspended until the modal closes (because modal dialogs can return values, so the caller must wait for the dialog to close before continuing). As the page you're opening is an external page (I assume in another domain), the only way for it to close, is that the user closes it.
If this is not acceptable, then you need to use window.open or an HTML modal window like the ones jQuery UI offers.
I'm assuming you are using Joomla's core modal feature. Another assumption is the controlling logic is located inside the modal window. Which is why the answer isn't as straight forward as it could be because I'm unsure of the workflow which opens the external HTML page you wish to fire the event after. However, after the logic which opens the external HTML page has fired, you can use the following JavaScript embedded inside your modal window's rendered HTML to close the modal window:
window.parent.SqueezeBox.close();
I use a popup window for edit operations using the Kendoui framework.
When a session times out while the popup is open the login page will load inside of the popup window.
I would like to add js in the forms redirect page and check if it is being loaded inside a popup window and if so redirect and close the window.
Is there a way to determine if a page is loaded inside of a popup and if so how can I get a handle to it?
Thanks
Usually the page is not redirected to the login page until you click button or do something.
We had the same problem and we solved it using Ajax call for our popup.
So we had some button on the popup and we read the response from the server. If the session is already expired you will have the wrong response code (not 200 definitely). You can read and interpret it and in your JS close popup window and do redirect to the login page like:
window.location = login_url