У меня возникла проблема с использованием $.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 = '[email protected]';
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 для загруженной области div2 (которая вызывает событие ab для загрузки области div3) и для класса кнопки отправки в области3.
Кроме того, когда я отправляю форму, строка мигает на секунду, а затем исчезает с загруженным содержимым в области 2.
$('#area3').html("<h2>New Flight Requested</h2>");
Форма отправлена, она очистила разделы и не смогла загрузить новый контент в разделы
Проблема 1
Почему сообщение формы очищает div область 2 и div область 3? Должен ли он оставить контент только с сообщением Ajax? Нужно ли мне что-то делать, чтобы сохранить содержимое страницы, такое как кеш?
Проблема 2
Почему я не могу загрузить данные в div область 4 и область 3 после публикации формы Ajax? Это самое хлопотное.
Я новичок в таком кодировании jQuery, поэтому я не знаю о каких-либо грубых ошибках, которые я мог бы вызвать непреднамеренно.
