Refresh Parent page when closing a fancybox2 iframe - javascript

I am using an Iframe with fancybox2, to open up a page which has a form which updates a database. What i am looking for is that when the fancybox is closed the parent page, which is a table of database results, automatically refreshes it's self.
My link to the iframe page is here:
echo "<a class='fancybox fancybox.iframe' href=\"add.php?ip_address={$ip_address}&id={$id}&userna={$username1}\" class=' btn btn-small' data-original-title='Add'>Add</a>";
I also have this code which i found in a different post, when i include this in the parent page, and click on the link, the fancy box starts but then immediatley closes and refreshes the page.
$("fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
I have tried several re-writes of this code but it either describes as above or just doesn't work. Any suggestions would be much appreciated.

try calling window.parent.location.reload();

Related

Refresh one php page from another page

I have one PHP page(dashboard.php). on click on a button it opens up one pop up page(viewstatus.php).I updates some data on this page and click submit button on this page it updtes the data and close this popup and refresh the page dashboard.php.But my page dashboard.php is not refreshing. This is the code written on the file viewstatus.php.
$query->execute();
$_SESSION['msg']="Stationery Added successfully";
header("Refresh:0; url=dashboard.php");
echo "<script>window.close();</script>";
Try this please:
$query->execute();
$_SESSION['msg']="Stationery Added successfully";
header("Refresh:0; url=dashboard.php");
echo "<script>window.opener.location.reload();window.close();</script>";
The reason the page is not refreshing is because the header is redirecting the popup page, not the dashboard page.
Refreshing the page on demand is going to be pretty difficult.
When you open the popup you can save that variable in javascript and add an onclose listener, but this is not supported in all browsers.
var popup = window.open('...');
if (popup) {
popup.onclose = function(){ window.location.reload };
}
Another way would be in your popup window to add the following code:
window.opener.location.reload();
Just add that above the window.close(); that you put in your example code and it might work.
It worked for me, but just as the other one I don't know if this is supported by all browsers.

Call Javascript function on iFrame reload

So I have the following problem: I have a website in an iFrame. I want the parent site to scroll up to the top once you go to a new page inside the iFrame, which it does via this JavaScript:
function scrollToTop() {
if ('parentIFrame' in window) {
window.parentIFrame.scrollTo(0,0);
return false;
}
}
But, on one page I have a two-part form. If you submit the first form, you get to the second one, but both parts are in the same PHP document, so you stay on the same page, but the iFrame is reloaded. I want the page to scroll to the top once you submit the first form, but the above JavaScript doesn't seem to work. Can anyone help? Would be much appreciated!
use iframe onload event that will get triggered, once frame loads content,
onload="myFunction()"
During the first form submissiom submit the page through Ajax call back method

Click same button to refresh current page and navigate to a new page

I am working on a jquermobile template (only one HTML page with 10 DIVs as data-role=page) and I have a scenario where I have one button which when clicked should perform two activities at the same time -
Refresh the forms (that means.. reset the form fields)
Navigate to home screen
For this I am doing two things -
An onClick function that calls location.reload() - to refresh the page
For the same button, added an anchor tag referring to a screen (which is a DIV tag in jquerymobile template).
The problem here is, only the location.reload() works and the anchor tag fails to navigate to the given link (e.g. a href="index.html/#myDiv" - this doesn't do anything)
Can anyone suggest me an approach or provide me a working example for the above scenario, in which both the functionalities work for the same button?
The reason is when you do a reload it lost the track and never redirect you, so you can manually clean the entries and then reload to other page
First clear all the values
then navigate away to other page
these both step will be perform sequentially
function SomeName()
{
document.getElementById('elementid').value = "";
....
....
document.location.href='the_link_to_go_to.html';
}
Hope it helps
You can use the following
In the script
<script>
function clickEvent(){
refresh();
navigate to home();
}
</script>
in html
<input type="button" value="Dont show this again! " onClick="clickEvent();" />

Parent Jsp page refresh when click on popupwindow alert box

I am working on jsp's, I have two jsp one in configDb.jsp, in that I have written code to retrieve the values from database and display it. In this whereas I have option like newconnection.. its a popup window. When I click on that it opens popupwindow and taken the values and store them in a database, but in my parent page I am not able to display those values. After I click on the ok button in popup window, I have to refresh the parent page, then I am able to see the values which I have created few seconds back by the new connection page. Could anyone please help me out?
You can include this in your HTML for the popup window.
<script type="text/javascript">
function proceed(){
opener.location.reload(true);
self.close();
}
</script>
<form onsubmit="proceed()">
...
</form>
Actually you can obtain the answer by googling "javascript refresh parent page from popup" and you will see stackoverflow's answer :)
A better alternative without the need of refreshing the parent page can be achieved by adding a submit button listener and perform a DOM action to insert the new element with new content. This can be easily done by Javascript.

On Click: Open a Pop-up Div on a Different Page

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/

Categories

Resources