Refresh parent page after closing Iframe Modal box

The basics: I have a webpage where a user can 'add an article'; when they click to 'add an article' it opens an iframe (a pop-up modal box).

In the Iframe there is a form with 'save' and 'cancel' buttons - what I'm trying to do is make it so when the user hits 'save', it will close the modal box, and then refresh the page.

I have it set so the iframe closes and the data is saved to the database, but I can't get the page to refresh (which would then display the new articl开发者_运维技巧e)

I've been unable to do this as of yet, despite googling for days. I'm not a javascript pro, but I've learned enough in the past couple days to do a thing or two.

Here is the code for the button:

<a class="toolbar" href="#" onclick="javascript: submitbutton('save'); return false;">

Here is the end of the javascript function that handles the saving of the data:

    function submitbutton(pressbutton) {
...
            <?php endif; ?>
            submitform( pressbutton );

        parent.$('sbox-window').close();    

        }


    }

http://community.getk2.org/forum/topics/solved-adding-articles-on-the?xg_source=activity

That link is the fix that I was looking for - this question was originally aimed at the K2 Component for Joomla.

Myself and another person were able to resolve the issue by writing some code of our own. In that thread as well as the one linked in the replies, a solution is arrived upon.

EDIT: A request was made to post the solution here, so here's a short summary

If you have users creating articles from the front end and you want the 'save' button to close the model box window that pops up when they add or edit an article - just follow the steps below to achieve this:

*Note: there are a few other fixes that work to close the box, but not refresh the page - this does both.

The key is passing an extra parameter through the URL that gets created when the user clicks "Save", then we just check to see if that parameter (which I will call 'step') exists - if it does, we refresh the page.

Lets follow along, first we must add this parameter to the URL created -

Open the item.php file located at:

Yoursite->administrator->components->com_k2->models->item.php

On or around line 646 - you will see some text that resembles:

case 'save':
default:
$msg = JText::_('Item Saved');
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&tmpl=component';
else
$link = 'index.php?option=com_k2&view=items';
break;

So what we need to do is add our parameter to that URL so it will look like this (remember I called the parameter 'step', and will be setting it =1) - the code will now look like this:

if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&step=1&tmpl=component';

Now when the user clicks 'save' the parameter 'step' is getting passed along, and when the form reloads to show the user their information they had entered, step=1!

So then we have to add the php to check for that - that's simple enough:

Open the form.php file located at:

Yoursite->components->com_k2->views->item->tmpl->form.php

In there you can see where the form actually begins (on or around line 249), what we want to do is just add a little bit of php that checks to see if our 'step' parameter is equal to 1. If it is - we'll refresh the parent page using some javascript, that will automatically close the model box and cause the 'item saved' text to display to the user letting them know what happened.

The existing code looks like :

<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">


<div class="k2Frontend">

<table class="toolbar" cellpadding="2" cellspacing="4">

When finished it will look like this:

<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">


<div class="k2Frontend">
<?php if (JRequest::getInt('step')=='1') { ?>
        <script language="javascript">
        var XHRCheckin = new Ajax('index.php?option=com_k2&view=item&task=checkin&cid=<?php echo $this->row->id; ?>', {
            method: 'get'
        });
        dummy = $time() + $random(0, 100);
        XHRCheckin.request("t"+dummy);
        parent.$('sbox-window').close();
        window.parent.location.reload();

        </script>
        <?php    } ?>

<table class="toolbar" cellpadding="2" cellspacing="4">

That checks to see if 'step' is =1. If it is - it runs javascript to refresh the parent window - closing the box and refreshing the page automatically. It also checks in the article on the backend.

This ensures the easiest possible thing for the user (i.e. they don't have to click 'back' and 'refresh' which is extremely counter-intuitive) and gives the front end user a back-end experience.

I hope this helps people - it took me a LOT of chasing things in the wrong direction before I thought of this solution.

I'm pretty saddened the developers never helped with something that's affected so many people, but oh well - problem was solved!

Try window.location.reload

You'll also want to get rid of the "return false;" from your onclick handler. That may prevent the page from refreshing. Also in general, put any "return" statements from within the event handler function.

I think you're looking for

   parent.location.reload();

Incidentally, you don't actually need to close the iframe - once you reload the parent page, it'll be gone anyway.

Check out jQuery fancyBox.

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

It' has a "Reload page after closing", function.

$(".fancybox").fancybox({
    afterClose : function() {
        location.reload();
        return;
    }
});