| |
|
|
| | Имеется следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#ToUpdate', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('About to submit: \n\n' + queryString);
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
</script>
<head>
<body>
<form id="myForm1" action="../util/uploadfilejshandler.php" method="POST" enctype="multipart/form-data">
<input name="pic" type="file" value="Выберите файл">
<input type="submit" name="Отправить1">
<form>
<div>
<p id="ToUpdate" style="border: solid 1px #00FF00"></p>
</div>
<form id="myForm2" action="handler.php" method="POST">
<input size="20" type="text" value="test">
<input type="submit" value="Отправить2">
</form>
</body>
</html>
|
Первая форма (myForm1) должна быть отправлена без перезагрузки страницы, что собственно и происходит при нажатии на кнопку Отправить 1 и к этому никаких нареканий нет, но если нажать на кнопку Отправить 2, то будет вновь отправлена форма с id равным myForm1, а должна быть отправлена форма с id равным myForm2 самым что ни наесть обычным способом перезагрузкой страницы! Объясните мне пожалуйста: почему так происходит? Я же явно указал:
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
|
С нетерпением жду ваших предположений. Заранее благодарен. | |
| |
|
|
| |
|
|
| |
для: Zend72
(16.11.2009 в 22:58)
| | | Я не знаю этого плагина, не читал о нем, но в данном случе получается, что неверно назначается событие, и оно обрабытывается у коллекции форм, а не у конкретной формы. Может быть требуется $.element.bind, для конкретного элемента (кнопки submit)? | |
| |
|
|
| |
|
|
| |
для: sim5
(16.11.2009 в 23:20)
| | | Я тоже так считаю... sim5, вы случайно не знаете подобного плагина для JQuery? | |
| |
|
|
| |
|
|
| |
для: Zend72
(16.11.2009 в 23:29)
| | | Я знаю о его существовании :), но никогда его не подключал и даже не читал о нем. У вас ситуация типа:
$('p').bind('click', alert())...
и все параграфы на странице будут "материться". Нужно почитать о методах этого плагина, должны же быть в нем прописаны "правила применения" ) | |
| |
|
|
| |
|
|
| |
для: sim5
(16.11.2009 в 23:35)
| | | Фуф ;-) Зря я на этот плагин обижался - он прекрасно работает! Проблема была в том, что эти две формы браузер "рассматривал" как одну! Точная причина такого поведения мне неизвестна, но полагаю, это происходило из-за символов в кодировке Windows-1251 (хотя скрипт сохранен в кодировке UTF-8) которые попали в код в результате копипаста со старого скрипта.
Что касается плагина то в его исходном коде присутствует следующий комментарий:
/*
Usage Note:
-----------
Do not use both ajaxSubmit and ajaxForm on the same form. These
functions are intended to be exclusive. Use ajaxSubmit if you want
to bind your own submit handler to the form. For example,
$(document).ready(function() {
$('#myForm').bind('submit', function() {
$(this).ajaxSubmit({
target: '#output'
});
return false; // <-- important!
});
});
Use ajaxForm when you want the plugin to manage all the event binding
for you. For example,
$(document).ready(function() {
$('#myForm').ajaxForm({
target: '#output'
});
});
When using ajaxForm, the ajaxSubmit function will be invoked for you
at the appropriate time.
*/
|
Надо было сразу в исходник смотреть! ;-) sim5, спасибо за наставление меня на путь истинный насчет правил применения.
PS
Вот так выглядит полностью рабочий и даже валидный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').bind('submit', function() {
$(this).ajaxSubmit({
target: '#ToUpdate'
});
return false; // <-- Важно!
});
});
</script>
</head>
<body>
<div>
<p id="ToUpdate" style="border: solid 1px #00FF00"></p>
</div>
<form action="handler.php" method="post" id="addcom">
<fieldset>
<legend> Оставить комментарий </legend>
<label for="firstname">Ваше имя:</label>
<input type="text" name="id_article" id="firstname" value="test">
<input type="submit" value="Отправить">
</fieldset>
</form>
<form action="uploadfilejshandler.php" method="post" id="myForm">
<fieldset>
<legend> Загрузить фото </legend>
<label for="photo">Фото:</label>
<input type="file" name="pic" value="" id="photo">
<input type="submit" value="Загрузить">
</fieldset>
</form>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Zend72
(17.11.2009 в 15:21)
| | | Ну вот, достаточно почитать толмут и все как по маслу )
Вот только как таковое возможно, чтобы браузер воспринимал несколько форм как одну, без помощи автора кода? ;-) | |
| |
|
|
| |
|
|
| |
для: sim5
(18.11.2009 в 04:21)
| | | Естественно браузер воспринимал несколько форм как одну из-за моей оплошности. ;-) Текст в UTF-8, как оказалось в последствии, содержал в себе левые символы в некой другой кодировке (какой черт его знает то ли Windows-1251, то ли еще в какой-то. А может и не в кодировке, а вообще какой либо бинарный код ;-)), которые попали туда в результате копипаста с PDF документа. Вот от этого и наблюдалось такое поведение... | |
| |
|
|
