Почему пост jQuery Ajax очищает все div, которые использовали load ()? - PullRequest
Новая
       5

Почему пост jQuery Ajax очищает все div, которые использовали load ()?

2 голосов
/ 22 февраля 2011

У меня возникла проблема с использованием $.ajax для отправки формы. Мое приложение - это ImageMap и прототип формы. У меня есть рабочий процесс, который загружает изображение в div из клика на изображении карты в область на карте стран. Это изображение страны, другая карта изображения, которая принимает щелчок для региона на карте. Это показывает мою форму.

Все эти операции показывают результат в div на одной странице с интервалом вокруг страницы. Моя проблема заключается в отправке формы. Это простая форма, которая собирает данные из базы данных (на данный момент только одна запись) и заполняет строку для выборочного ввода. Это позволяет собирать данные на стороне сервера. Все это звучит нормально!

Изображение формы на странице путем выбора страны

Да, все это отображается. Спорим, у меня есть $.ajax сообщение в форме, поэтому после отправки страницы оно не обновляется. И круто, он отправляет данные на страницу PHP (я проверил вывод), хотя? Когда он будет отправлен, ранее загруженный раздел страны очищается от содержимого. И любая попытка load() новой страницы или HTML в div не удалась. 

<html>
    <head>
        <title>Online Flights</title>
        <link rel="stylesheet" type="text/css" href="Main.css" />
        <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('area').bind('click mouseover', function() {
                    var id = $(this).attr('id');
                    var subStrEnd = id.length - 4;
                    var countryDiv = id.substring(0, subStrEnd);
                    var href = $(this).attr('href');
                    $('#area2').load( href + ' #' + countryDiv).css({ opacity: 0 }).fadeTo("slow",1);
                    return false;
                });

                $('.countryItem').live('click', function() {
                    var id = $(this).attr('id');
                    $('#area3').load(id).css({ opacity: 0 }).fadeTo("slow",1);
                    return false;
                });

                $(".submitFlights").live('click', function() {
                    var name = 'testname';
                    var email = 'as@erdd.com';
                    var phone = '02987374754';
                    var dataString = 'action=add' + '&name='+ name + '&email=' + email + '&phone=' + phone;

                    $.ajax({
                        type: "POST",
                        url: "Pages/includes/area4.php",
                        data: dataString,
                        success: function() {
                            // alert(dataString);
                            $('#area3').html("<h2>New Flight Requested</h2>");
                            $('#area3').show();
                            //  console.log($('#area4').html());
                            // alert(dataString);
                        }
                    });
                    $('#area4').load("Pages/includes/area4.php");
                    console.log($('#area4').html());
                });
            });
        </script>
    </head>
    <body>
        <div id="pageHeader">
            <img src="LogoSmall.png" alt="Logo">
            <img src="uluru.jpg" alt="Uluru">
            <img src="queensland.jpg" alt="Queensland">
            <img src="pelican.jpg" alt="Pelicans West Australia">
        </div>
        <div id="area1">
            <div style="text-align:center; width:350px; margin-left:auto; margin-right:auto;">
                <img id="wMap" src="WMGreen.png" usemap="#wMap" border="0" width="350" height="175" alt="" />
                <map id="_wMap" name="wMap">
                    <area shape="rect" coords="77,90,135,170"
                          id ="south_america_Lnk" href="Pages/includes/area2.php?image=SA"
                          alt="South America" title="South America"/>
                    <area shape="rect" coords="42,36,108,91" id ="north_america_Lnk"
                          href="Pages/includes/area2.php?image=NA"
                          alt="North America" title="North America" />
                </map>
            </div>
        </div>
        <div id="area2">
        </div>
        <div id="area3">
        </div>
        <div id="area4">
        </div>
    </body>
</html>

Я использую live для загруженной div area2 (которая вызывает событие ab для загрузки div area3) и для класса кнопки отправки в area3.

Также, когда я отправляю форму, строка мигает секунду, а затем исчезает с загруженным содержимым в области 2. 

$('#area3').html("<h2>New Flight Requested</h2>");

Форма отправки, очистка div и сбой при загрузке нового содержимого в div

Задача 1

Почему сообщение формы очищает div area2 и div area3 оба? Должен ли он оставить контент только с постом Ajax? Нужно ли что-то делать, чтобы сохранить содержимое страницы, например, кеш?

Задача 2

Почему я не могу загрузить данные в div area4 и area3 после публикации формы Ajax? Это самое неприятное.

Я новичок в этом виде кодирования jQuery, поэтому я не подозреваю о каких-либо грубых ошибках, которые я мог бы вызвать непреднамеренно.

1 Ответ

0 голосов
/ 16 июля 2012

Проблема 1: Нажатие кнопки с типом «submit» отправит синхронный запрос (поведение html по умолчанию), поэтому index.php перезагрузится после отправки формы. Измените тип на «button» или добавьте event.preventDefault () перед отправкой. 


    $(".submitFlights").live('click', function(event) {
        event.preventDefault();
        /// .... others 
    });

Задача 2: то же самое, что и проблема 1

...