HTML+CSS+JavaScript

Написал такую форму на jQuery.form с помощью которой отправляю как данные так и файл, с последующей проверкой на сервере. Всё это работает нормально, проверял на всех последних версиях браузеров, на старых версиях проверить возможности не было. Но хотелось бы весь Js код обвернуть в одну функцию, чтобы можно было ей передавай id формы. Поскольку форм будет много, решил не копировать код по несколько раз для каждой формы, а написать всего одну функцию и передавать id соответствующей формы. Но как это сделать пока не разобраться.

Ниже привожу весь код скрипта

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

<script type="text/javascript"> <!-- $(document).ready(function() {    $("#frm").ajaxForm({       // dataType: "json",       beforeSubmit: function(dataFrm, obj, option) {          $("#result_load").show();          $("#result_load").html("Загрузка...");          $("#go").enable(false); // Деактивируем кнопку       },       success: function(data){           var res = jQuery.parseJSON(data);                         if (res['err']=='1'){                                $("#result_load").hide();                                $("#result").html(res['msg']);                                $("#go").enable(true); // Делаем кнопку активной                         }else{                                $("#result_load").hide();                                $("#result").html(res['msg']);                                $("#go").enable(true); // Делаем кнопку активной                         }       },       clearForm: true // Устанавливаем значения по умолчанию    }); }); //--> </script>

<div id="result_load"></div> <form action="upload.php" id="frm" method="POST" enctype="multipart/form-data"> <input type="text" name="txt1"><br> <input type="text" name="txt2" value="Текст"><br> <input type="hidden" name="MAX_FILE_SIZE" value="30000000"> <input type="file" name="file_name"> <input type="submit" name="go" id="go" value="Загрузить файл"> </form> <b>Ответ сервера:</b><br> <div id="result"></div>

<?php  header('Content-Type: text/html; charset=utf-8');  $res = array();  if($_POST['txt1'] == ''){     $res['msg'][] = 'Поле txt1 не заполнено!';  }  if($_POST['txt2'] == ''){     $res['msg'][] = 'Поле txt2 не заполнено!';  }  if (!isset($_FILES['file_name']))  {       $res['msg'][] = 'Файл не выбран';  }elseif($_FILES['file_name']['error'] == 0 && $_FILES['file_name']['size'] > 0 && $_FILES['file_name']['size'] < 30000000) {       $path = "C:/wamp/www/jquery/form/";       $path .= basename($_FILES['file_name']['name']);       $tmp = $_FILES['file_name']['tmp_name'];       if (!@move_uploaded_file($tmp, $path))       {           $res['msg'][] = 'Ошибка при копировании файла';       }  }else{       $res['msg'][] = 'Ошибка при загрузке. Код: ' . $_FILES['file_name']['error'];  }  $output = '';  $res2 = array();  if( @sizeof($res['msg']) > 0 ){    foreach(@$res['msg'] as $index => $val)    {       $output .= $val.'<br>';    }     $res2['msg'] = $output;     $res2['err'] = '1';  }else{     $res2['msg'] = 'Даные были сохранены успешно';     $res2['err'] = '0';  }   echo '{"msg":"'.$res2['msg'].'","err":"'.$res2['err'].'"}'; ?>

по пытался сделать таким образом, весь js код поместил в функцию

function myAjaxForm(id) { ... }

также в js коде изменил это
$("#frm").ajaxForm({

на это
$("#"+id).ajaxForm({

всё остальное оставил без изменений


а в HTML форме изменил так

<form action="upload.php" id="frm" method="POST" enctype="multipart/form-data"> <input type="submit" name="go" id="go" onclick="myAjaxForm('frm');" value="Загрузить файл">

таким образом хотелось бы при нажатии на кнопку, сработала функция myAjaxForm которой был передан id формы что прописано в теге <form id="frm">

проверил в FireFox работает нормально также в Chrome, а вот в IE8 неработает, выдаёт такую ошибку

Строка: 28 Символ: 162 Код: 0 URI-код: http://localhost/jquery/form/jquery-1.4.2.min.js

кстати в Опере 10 версии работает, но вроде как с перезагрузкой страницы.

Подскажите плиз. что не так делаю?

<script> $(document).ready(function() {   $('form').submit(function() {     alert(this.id);     return false;   }); }); </script> <form action="" name="as1" id="as1"> <input type="text" name="txt1" value="val1"> <input type="submit" value="GO"> </form> <form action="" name="as2" id="as2"> <input type="text" name="txt2" value="val2"> <input type="submit" value="GO"> </form>

пришлось немного изменить код, теперь скрипт работает как нужно, но вот столкнулся с такой проблемой невозможно передать некоторые HTML теги, какие-то проходят а какие нет, вот сам код

JS

<script type="text/javascript"> $(document).ready(function() {    $("#frm").ajaxForm({       dataType: "json",       beforeSubmit: function(dataFrm) {          $("#result").html("Загрузка...");          $("#go").enable(false); // Деактивируем кнопку       },       success: function(d) { // При отсутствии ошибки             $("#go").enable(true); // Делаем кнопку активной             var obj = eval(d);             if(obj.status == "ok"){                $("#result").html(obj.msg);             }else{                $("#result").html(obj.msg);             }       },       error: function() {          $("#result").html("Произошла ошибка");          $("#go").enable(true); // Делаем кнопку активной       },       resetForm: true // Устанавливаем значения по умолчанию    }); }); </script>

HTML

<form id="frm" action="ajax.php" method="POST" enctype="multipart/form-data"> <input type="text" name="txt1"><br> <input type="text" name="txt2" value="Текст"><br> <input type="hidden" name="MAX_FILE_SIZE" value="300000000"> <input type="file" name="file_name" id="file_name"><br><br> <input type="submit" name="go" id="go" value="Загрузить файл"> </form> <b>Ответ сервера:</b><br> <div id="result"></div>

PHP

<?php error_reporting(0); // Запрет кеширования header("Expires: Sun, 27 May 2007 01:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Pragma: no-cache"); header('Content-Type: text/html; charset=utf-8');  $res = array();  if ($_FILES['file_name']['name'] != ''){       $path = "C:/wamp/www/jquery/form/upload2/";       $path .= basename($_FILES['file_name']['name']);       $tmp = $_FILES['file_name']['tmp_name'];       if (!@move_uploaded_file($tmp, $path)) {         $res['msg'][] = 'Файл не удалось загрузить'.$_FILES['file_name']['name'];       }  }  if($_POST['txt1'] == ''){    $res['msg'][]= '<br><b>Поле txt1</b> не заполнено!';  }  if($_POST['txt2'] == ''){    $res['msg'][]= '<br><b>Поле txt2</b> не заполнено!';  }  $output = '';  $res2 = array();  if( @sizeof($res['msg']) > 0 ){    foreach(@$res['msg'] as $index => $val)    {       $output .= $val.'<br>';    }     $res2['msg'] = $output;     $res2['err'] = 'error';  }else{     $res2['msg'] = '<b>Даные</b> <i>были сохранены успешно</i>';     $res2['err'] = 'ok';  }  echo '{ "msg":"'.$res2['msg'].'", "status":"'.$res2['err'].'" }'; ?>

так вот, если в строчке PHP кода укажу ссылку например так

$res2['msg'] = '<b>Даные</b> <i>были сохранены успешно</i><a href="http://www.site.ru">Перейти на главную страницу</a>';

то за место этого выводится сообщение Произошла ошибка из функции error

error: function() {          $("#result").html("Произошла ошибка");          $("#go").enable(true); // Делаем кнопку активной       },

но если эту ссылку передать не через сервер а напрямую прописать в JS вот так

$("#result").html('<a href="http://www.site.ru">Перейти на главную страницу</a>'+obj.msg);

то всё срабатывает нормально. Но это не дело, т.к. ссылку нужно передавать через сервер, поскольку от разных задач адрес ссылки может быть разный. Также от сервера не доступны такие теги <table>, а например эти <b> или <i> проходят нормально.

Вот подумываю может принимаю данные с сервера не верно

var obj = eval(d);

может както обрабатывать нужно, или не в этом совсем дело. Помогите пожалуйста разобраться

я также приложил архив этого скрипта

Я вообще не понимаю зачем с сервера передавать HTML-код, который будет всегда один и тот же. Разве не досточно передавать только адрес, вставляя его параметром для создаваемого на клиенте объекта - элемента А?

да такое возможно, но я бы хотел чтобы все данные передавались уже готовые, такое возможно?
почему тег A или например TABLE не проходят, что мешает этому? и как сделать чтобы они были доступны?

на самом деле запрос я передаю контроллеру, контроллер обрабатывает данные и передаёт сообщение через шаблон .tpl
Я не стал упрощать в примере, привёл простой PHP код, но сути не меняет.

Сообщение будет не одним и тем же, всё зависит от статуса, если ответ был успешным, то нужно будет вывести разные ссылки к примеру если пользователь добавил объявление, то ему нужно будет предоставить несколько ссылок на редактирование, удаление можно ещё предложить некоторые услуги, к примеру через смс поднять объявление и т.п. А всё это передавать JS и через него формировать сообщение, не совсем удобно. Удобнее было через шаблон сформировать и передать готовое клиенту.

Даже и не знаю, чего такого разветвленно сложного может быть по результатам загрузки файла на сервер, чтобы это потребовало передачу клиенту не данных, а дизайна, хотя вам виднее.

Вы отдаете клиенту данные в JSON-формате, значит ошибку искать надо здесь. Я не знаю вышеуказанного плагина для jQuery (хотя метод $.getJSON в jQuery проблем не вызывает), посему ничего сказать не могу, но eval(d) не верно, если вы хотите получить JSON-объект сами, это делается так:
var obj = eval('('+d+');');

>но если эту ссылку передать не через сервер а напрямую прописать в JS вот так
>$("#result").html('<a href="http://www.site.ru">Перейти на...
>то всё срабатывает нормально.

Но а с чего бы ей не работать, это просто вставка HTML-кода в объект, но это совсем иное.

вот в чём проблема, выяснил:)

error - Invalid JSON: { "msg":"<b>Даные</b> <i>были сохранены успе"шн"о</i><a href="t">IE</a><table><tbody><tr>     <td>text</td></tr></tbody></table>", "status":"ok" }

данные формируются не верно для JSON тоесть не валидно, строка не должна содержать переносов строк, также некоторые символы, пришлось экранировать

я решил снова перечитать статью что тут http://wwwadmin.ru/forum/sutra3629.html

и там было написано что нужно отправлять ответ сервера через textarea

<textarea>  Код скрипта или JSON-объект </textarea>

в PHP скрипте изменил на это

<?php  $res2['msg'] = str_replace("\r\n","", $res2['msg']);  $res2['msg'] = str_replace(array("\n","\r","\t"),"",$res2['msg']);  $res2['msg'] = addslashes($res2['msg']);  echo "<textarea>\n";  echo '{ "msg":"'.$res2['msg'].'", "status":"'.$res2['err'].'" }';  echo "</textarea>\n"; ?>

пришлось обработать переменную от строк переноса, а также экранировал символы, иначе через JSON не пройдёт и будет выдавать ошибку. После этого всё стало прекрасно работать:)

конечно формируемый HTML код получается обработанный, в одну строку, специальные символы экранированы, также код не должен содержать поле textarea. В прочем это не столько важно, тут всего будет небольшой ответ от сервера ввиде HTML кода, которого не так много будет, этого в пол не достаточно для обычного сообщения.


И остался последний вопрос, поскольку будет не одна форма, и не обязательно на одной странице несколько, то не хотелось под каждую форму писать/копировать этот код, решил сделать виде отдельной функцией, потом только передавать id формы через параметр id.

Вот пример того как сделал

<script type="text/javascript"> function myAjaxForm(id) {    $("#"+id).ajaxForm({       dataType: "json",       beforeSubmit: function(dataFrm) {          $("#result").html("Загрузка...");          $("#go").enable(false); // Деактивируем кнопку       },       success: function(d) { // При отсутствии ошибки             $("#go").enable(true); // Делаем кнопку активной             if(d.status == "ok"){                $("#result").html(d.msg);                $("#frm").hide('normal');             }else{                $("#result").html(d.msg);             }       },       error: function(xhr, status, errMsg) {          //alert(status+' - '+errMsg)          $("#result").html("Произошла ошибка");          $("#go").enable(true); // Делаем кнопку активной       },       resetForm: true    }); } </script>

<form id="frm" action="ajax.php" method="POST" enctype="multipart/form-data"> <input type="text" name="txt1"><br> <input type="text" name="txt2" value="Текст"><br> <input type="hidden" name="MAX_FILE_SIZE" value="300000000"> <input type="file" name="file_name" id="file_name"><br><br> <input type="submit" name="go" id="go" onclick="myAjaxForm('frm');" value="Загрузить файл"> </form> <b>Ответ сервера:</b><br> <div id="result"></div>

по примеру видно что я весь JS код поместил в функцию myAjaxForm(id) а внутри формы для кнопки прописал её onclick="myAjaxForm('frm');" теперь после нажатии на кнопку, функция отправит данные полей формы id="frm"
Проверил во всех браузерах работает нормально, единственное в IE8 при повторном нажатии кнопки, появляется в отладчике такая ошибка

'null' -  есть null или не является объектом  jquery-1.4.2.js, строка 1919 символ 45

где строка 1919

var events = jQuery.data(this, "events"), handlers = events[ event.type ];

и символ 45 указывает на первую букву слова handlers

что может быть и как от этого избавится?