Проблемы, закрывающие iFrame fancybox при отправке - PullRequest
Новая
       17

Проблемы, закрывающие iFrame fancybox при отправке

3 голосов
/ 25 октября 2011

У меня есть реестр пользователей онлайн, заполненный из базы данных.Каждое имя пользователя - это ссылка, которая открывает форму в fancybox (iframe), чтобы разрешить редактирование информации.Без js в дочернем окне данные формы отправляются в базу данных, но fancybox не закрывается.Мне нужно, чтобы он отправил данные, затем закройте коробку.

Я попробовал ответ Амра из на этот вопрос , и теперь он закрывается, но не отправляет.

Вот код, который открывает 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
     ?>

Вот как теперь выглядит код файла iframed с функцией, закрывающей 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>

<?
}
?>

Перед внесением измененияпредложено в связанном посте, там был только закомментированный <input type="submit" id="mysubmit" name="submit" value="Submit changes" /> - он действительно отправил данные правильно.

Любая идея, что мне нужно сделать, чтобы получить новый код, чтобы закрыть окно фантазии и отправитьсформировать?

1 Ответ

4 голосов
/ 28 октября 2011

Ваш текущий код имеет одну из следующих проблем:

  • Fancybox закрывается, но форма не отправлена ​​правильно
  • Форма отправлена ​​правильно, но fancybox не будетзакрыть.

Решение Рабочий код в JS Fiddle : http://jsfiddle.net/hMcc8/7/show/ (пропустите /show/, чтобы увидеть источник)./show/ должен быть добавлен, чтобы заставить код работать, чтобы Одинаковая политика происхождения не мешала.

Включите файлы JS и CSS fancybox и определите следующую функцию в вашемОсновной файл: 

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

Скрипка для файла в рамке: http://jsfiddle.net/SnTwQ/7/
Привязать обработчик событий submit к вашей форме, который вызывает parent.fancyBoxClose().Событие submit используется вместо кнопки click, потому что можно отправить форму, нажав клавишу ввода из поля ввода. 

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

Как это работает? Когда форма отправляется, вызывается родительская функция.Эта функция присоединяет обработчик событий onload к фрейму Fancybox.После отправки формы новая страница загружается.Когда страница завершает загрузку, запускается событие onload.Мы звоним $.fancybox.close() из этого onload события.В результате fancybox закрывается, как и ожидалось.

Связанный ответ: Uncaught TypeError: Невозможно прочитать свойство 'fancybox' из undefined - ошибка только в Google Chrome? Обновление: Другой метод.Скрипка: http://jsfiddle.net/hMcc8/9/show/.
Согласно комментариям, форма отправляется на ту же страницу.Следующий код должен всегда работать, когда страницы обслуживаются в одном домене:

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();
        });
    }
});
...