I have some code that closes a modal in the parent when an IFrame's button is pressed.
This works well, but my problem is I need the IFrame to be fully postbacked before executing the close method.
var $MyFrame = $("#editScheduleFrame");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
var btn = frameBody.find('.schedule-submit');
btn.on('click', function () {
closeEditModal();
});
});
Is there any way I can instead call closeEditModal only once the schedule submit button has been pressed AND the IFrame child page has posted back?
The script on the server should somehow denote the page is a post back. It can be as simple as writing a content attribute: <body data-postback="true">. Then you can detect that with JavaScript and act accordingly.
Related
I can't figure out how this is done:
I want to link to an internal page with an addEventlistener function. When the linked page loads I want to open a div that is hidden. So something along the line of:
button.addEventListener("click", () => {
const hiddenDiv = document.getElementById("hidden-div")
window.open("/newPage.html" + hiddenDiv.click())
});
I know the code above won't work, but I don't know how it could work, since window.open() ends the execution of the code.
Is there a way to store the function after the page refreshes (without localstorage)? Is there a way to handle it via the url? Or should be done with localstorage?
I have made the following site:
www.ppp.one
Whenever you open an image, a popup is loaded.
This popup can be closed using the X on the top-right. However, if you click on one of the thumbnails in the popup (reloading the frame) the X button can no longer close it.
The JavaScript I use:
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
And the html:
<a class="small align-top" onclick="frameWarp.hide();">✖</a>
Any ideas on what is causing the issue?
When you open the popup you call a function setUpAPI which inserts the frameWrap object into the global scope of the iframe.
When a thumbnail is clicked the frame is reloaded and the frameWrap instance is no longer available.
You could try listening for load events on the iframe instead of ready events:
iframe.ready(function(){
frameCacheDiv.append(iframe);
});
iframe.load(function(){
setUpAPI(iframe, settings);
settings.onShow();
});
It looks like when the iframe's URL changes the frameWarp variable becomes undefined. One idea to try would be to listen to the load event of the iframe and make your changes there: (you'd have to give it the ID of "iframeId")
$('#iframeId').load(function(){
console.log('URL changed');
// code to attach hide event here
});
Another idea would be to change your setup to use the postMessage API for the communication between the parent and iframe. You can read a tutorial of how to do that here:
http://robertnyman.com/html5/postMessage/postMessage.html
Edit: Actually, this blog post is a better example: http://davidwalsh.name/window-iframe
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
Using an iframe to post a submit, it has a file upload. everything is working fine up til the returned content.
If i show the iframe on the page, i see the html that was returned from the function in my iframe. Having much trouble getting the content of the iframe to replace the content of the page.
Basically get the content of the body iframe and place it in the body tags of the page.
I'm sure its 1 or 2 lines, but every jquery or document or getElementById idea i've found on the web is not working.
I do notice something odd, if i try to use "console.info('somemessage')" in my reload function, it throws an error saying console does not exist. Not sure why, but seems my javascript focus is in the iframe and can't see firebug.
Heres the code stripped down. Back to trying the .load event, which is working. but its that second line that trys tot write the content to the body. when i comment it out, the iframe shows, with my content. If i run it uncommented, the whole page reloads.
if (isStarted == false) {
isStarted = true;
statustracker.start();
//style="height:0px;width:0px;"
var iframe = $('<iframe name="postframe" id="postframe" class="hidden" />');
$('div#iframe').append(iframe);
$('#ImportDetailForm').attr("target", "postframe")
form.submit();
$("#postframe").load(function () {
iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
$("body").html(iframeContents); // <--- the problem
});
}
In your parent page (the one containing the iframe), you could set an event listener for the 'message' event, like so:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(e) { ... }
Then in your iframe, just post a message to the 'parent' window like this:
parent.postMessage(someString, parentUrl);
Because messages are strings, you'll need to serialize any data you're sending between iframe and parent window - I suggest JSON! So in your case, serialize the returning HTML from the upload request and post it to the parent, then deserialize it on that side and inject it into the DOM.
An invalid or illegal string was specified" code: "12
probably because iframeContents is empty.
$("#postframe").load(function () {
var win = document.getElementById("postframe").contentWindow;
var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')), link;
iframeContents = $("#postframe").find("body").contents().serialize(); //$("iframe")[0].contentDocument.body.innerHTML;
console.info(iframeContents);
//$(this).parent("body").html(iframeContents);
win.postMessage(iframeContents, parent_url, parent);
});
I am using an asp.net update panel to refresh the content on a page when a menu item is selected.
Within the content that is updated are images which have a javascript reflection function which is triggered with the following line of code:
window.onload = function () { addReflections(); }
This runs fine when the page is first loaded but not when a menu item is selected and the update panel is run.
On previous projects using jquery code I have replaced document.ready with function pageLoad but there is no document.ready on this page.
Like this:
<script>
// ASP.NET AJAX on update complete
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(sender, args) {
// your code here, eg initToolTips('/Common/images/global/popup3.gif');
});
Basically, it's because that event isn't triggered by an update panel refresh.
There are ways to achieve this behaviour though, Ajax.Net has an EndRequestHandler function that you can hook into.
Here's a good example:
http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/
i think u should use
function pageLoad(sender, arg) {
if (!arg.get_isPartialLoad()) {
// in first load only
}
//every time the update panel refreshed
}
Regards
Take a look to this event:
http://msdn.microsoft.com/en-us/library/bb383810.aspx
window.onload is fired when the entire page is loaded. UpdatePanel uses an AJAX approach, so whenever it's updated and round trip ends, the page remains loaded and only a portion of this has been updated.
In other words, you need to do that "when a request to the server ends".