Why is a jQuery Ajax post clearing all divs that have used load()?_问答_开发者

I am encountering a problem with using $.ajax to post a form. My application is an ImageMap and form prototype. I have a workflow that loads an image in a div from an image maps' click to an area on the map of countries. This image is of a country, another image map that accepts a click to a region on the map. This then shows my form.

All these operations show a result in a div on the one page, spaced around the page. My problem is the form submit. It is a simple form, and it gathers data from the database (at the moment only one record ) and fills a row for selective entry. This allows the data to be collected on the server side. All this sounds normal!

Image of form on page through selection of Country

Yeah, this all displays. Bet, I have a $.ajax Post on the form, so it gets no refresh on the page after a page submit. And cool, it does post data to a PHP page (I checked the output), though? When it gets submitted the previously loaded country div is cleared of content. And any attempt to load() a new page or HTML in a div fails.

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

                $('.countryIt开发者_运维技巧em').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>

I use live for the loaded div area2 (that call ab event to load the div area3) and for the class of the submit button in area3.

Also, when I do a submit of the form the line flashes for a second then disapears with the loaded content in area 2.

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

Form submit, it cleared the divs, and failed on load new content into divs

Problem 1

Why does the post of the form clear div area2 and div area3 both? Should it leave the content with just an Ajax post? Do I need to do something to keep the page content like cache?

Problem 2

Why can't I load the data to div area4 and area3 after the Ajax form post? This is most troublesome.

I am new to this kind of jQuery coding, so I am unaware of any blunders I might be causing inadvertently.

Problem 1: Click on a button with type 'submit' will submit a synchronous request(default html behavior), so the index.php will reload after form submits. Modify the type to 'button' or add event.preventDefault() before submiting.


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

Problem 2: the same to problem 1

Why is a jQuery Ajax post clearing all divs that have used load()?

Problem 1

Problem 2

精彩评论

关注公众号

热门标签

图文推荐

Why is a jQuery Ajax post clearing all divs that have used load()?

Problem 1

Problem 2

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：