Question

I have an online user roster populated from a database. Each username is a link that opens a form in a fancybox (iframe) to allow editing of info. Without any js in the child window, the form data submits to the database but the fancybox does not close. I need it to submit the data, then close the fancybox.

I’ve tried Amr’s answer from this question and it now closes but doesn’t submit.

Here’s the code that opens the fancybox:

<script type="text/javascript">

$(function() {
    $(".updateLink").fancybox({ 
                             'padding'        : 0, 
                             'autoScale'      : false, 
                             'transitionIn'   : 'none', 
                             'transitionOut'  : 'none', 
                             'width'          : 650, 
                             'height'         : 560,
                             'showCloseButton': true,
                             'type':         'iframe' 
                            }); 
});

</script>



<?php
    foreach ($contacts as $contact) {

    $updateLink = '<a class="updateLink" href="update_person.php?people_id='.urlencode($contact->people_id).'&company_id='.urlencode($company_id).'&uid='.urlencode($uid).' ">'.$contact->first_name.' '.$contact->last_name.'</a>';

        print '<tr>';
        print '<td>'.$contact->people_id.'</td>';
            print '<td>'.$updateLink.'</td>';
            print '<td>'.$contact->title.'</td>';
            print '<td>'.$contact->email.'</td>';           
        print '</tr>';
    } # end foreach contact
     ?>

Here’s what the code of the iframed file looks like now, with the function that closes the fancybox:

<?php 

include('/home/www/viola/ssl/include/ez_sql.php');
include('/home/www/lib/common_functions.php');

if (isset($_POST['submit'])) {
    //write to roster table
    $people_id = $_POST['people_id'];
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $title = $_POST['title'];
    $email = $_POST['email'];

   $db->query("INSERT INTO roster (people_id, first_name, last_name, title, email) values ($people_id, '$first_name', '$last_name', '$title', '$email')");

}

else {

   $people_id = urldecode($_GET['people_id']);
   $uid = urldecode($_GET['uid']);


   $query = "SELECT id AS people_id, first_name, last_name, title, email
FROM new_people 
WHERE active = 1 AND id = $people_id";

   $person = $db->get_row($query);      
   $people_id = $person->people_id;   
   $first_name = $person->first_name;
   $last_name = $person->last_name;
   $email = $person->email;
   $title = $person->title;

?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?= $jsPath; ?>/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
 function closeME() {
            event.preventDefault();
            parent.$.fancybox.close();
            $('#myForm').submit();
        }
</script>

<style>
fieldset {margin: 35px;}
label {margin-right: 30px;}

input[type="text"]{
   width:350px;
   /*display:block;*/
}
input[type="button"]{
   width:120px;
   margin-left:35px;
   display:block;
}

select {
   width:350px;
}
</style>

   <form action="update_person.php" method="post" id="myForm">
      <input type="hidden" name="people_id" value="<?= $people_id; ?>"/>
       <fieldset>
            <legend>Update <?= $first_name . " " . $last_name; ?></legend>
            <table>
               <tr>
                  <td><label for="first_name">First Name:</label></td>
                  <td><input type="text" name="first_name" value="<?= $first_name; ?>"/></td>
               </tr>

               <tr>
                  <td><label for="last_name">Last Name:</label></td>
                  <td><input type="text" name="last_name"  value="<?= $last_name; ?>"/></td>
               </tr>

                <tr>
                  <td><label for="user_email">Email:</label></td>
                  <td><input type="text" name="email" value="<?= $email; ?>"/></td>
               </tr>

               <tr>
                  <td><label for="title">Title:</label></td>
                  <td><input type="text" name="title" value="<?= $title; ?>"/></td>
               </tr>


               <tr><td colspan="2" style="text-align:center"><!--<input type="submit" id="mysubmit" name="submit" value="Submit changes" />-->
 <button onclick="closeME();">
    <span>Save changes</span>
    </button>

</td></tr>
            </table>

       </fieldset>
   </form>

<?
}
?>

Before making the change suggested in the linked post, there was just the commented-out <input type="submit" id="mysubmit" name="submit" value="Submit changes" /> – this did submit the data correctly.

Any idea what I need to do to get the new code to both close the fancybox AND submit the form?

Answer 1

Your current code is having one of the following issues:

• Fancybox closes, but the form is not correctly submitted
• The form is correctly submitted, but fancybox wont’t close.

Solution
Working code at JS Fiddle : http://jsfiddle.net/hMcc8/7/show/ (omit /show/ to see the source). /show/ has to be added to get the code work, so that the Same origin policy does not interfere.

Include the fancybox JS and CSS files, and define the following function at your main file:

function fancyBoxClose(){
    $("#fancybox-frame").load(function(){
        $.fancybox.close();
    });
}

Fiddle for framed file: http://jsfiddle.net/SnTwQ/7/
Bind a submit event handler to your form, which calls parent.fancyBoxClose(). The submit event is used instead of the button click, because it’s possible to submit a form by pressing enter from within an input field.

$(function(){
    $("#myForm").submit(function(){
        parent.fancyBoxClose();
    });
});

How does it work?
When the form is submitted, the parent function is called. This function attaches an onload event handler to the Fancybox frame. After the form has finished submitting, a new page is loaded.
When the page finishes loading, the onload event is triggered. We’re calling $.fancybox.close() from within this onload event. As a result, the fancybox closes as expected.

Related answer: Uncaught TypeError: Cannot read property 'fancybox' of undefined – Google Chrome only error?

---

Update: Another method. Fiddle: http://jsfiddle.net/hMcc8/9/show/.
According to the comments, the form is submitted to the same page. The following code should always work, when the pages are served at the same domain:

Main:

$(function() {
    $(".updateLink").fancybox({
         'padding'        : 0,
         'autoScale'      : false,
         'transitionIn'   : 'none',
         'transitionOut'  : 'none',
         'width'          : 650,
         'height'         : 560,
         'showCloseButton': true,
         'type'           : 'iframe',
         'onClosed': function(){ /* Reset variable when closing*/
             fancyBoxToClose = false;
         }
     });
});
var fancyBoxToClose = false;
function fancyBoxLoaded(){
    if (fancyBoxToClose) {
       fancyBoxToClose = false;// Reset flag
       $.fancybox.close();     // Close fancybox
       return true;            // Callback for frame
    }
}
function fancyBoxClose(){
    fancyBoxToClose = true;    // Activate flag
}

Frame:

// You don't need fancybox code at this page
$(function(){
    if(parent.fancyBoxLoaded()){ /* Notify that the DOM has finished*/
        // If the parent function returned true, this page is going to be closed.
        $('body').hide();  //Hide body, so that the user cannot submit another form.
    }
    else {
        $("#myForm").submit(function(){
            parent.fancyBoxClose();
        });
    }
});