JQuery-AJAX пост рабочий

Question

EDIT

Забыли пару Improtant очков.

1. Я делаю это, чтобы исключить необходимость обновления страницы и, следовательно, переход вверх в начало страницы.

2. Функция успеха функции ajax отбросит весь новый div id = "comments", чтобы заменить существующий либо сообщение об ошибке, либо новый комментарий со всеми остальными ниже.

END EDIT

Я пытался с этим Jquery-Аякса функции под обертками безуспешно. У меня есть X количество сообщений на странице, каждая из которых имеет форму для вставки комментариев под каждым сообщением. Я думаю, что я довольно близко и пытался отладить его с помощью firebug, но, честно говоря, я действительно не знаю, на что я смотрю или в firebug.

Весь код ниже, любая помощь будет высоко оценена!

HTML форма и структура (из-за repetative формы, я чувствую, что я должен использовать метод выбора родительского Jquery, а не перебор каждый пост-комментарий раздел в моем выходном сценарии)

<div id="content_body_right"> 
     <div id="activity"> 
      ....this is the area for each post.... 
     </div> 
     <div id="comments"> 
      <p class="comments_label">' . $reply_count . ' Comment</p> 
      <div id="comment1"> 
       <div id="comment_user_img"> 
        ' . $imgOutputReply . ' 
       </div> 
       <div id="comment_user"> 
        <p class="user_text_comment">' . $firstNameReply . ' ' . $lastNameReply . '</p><p class="date_text_comment">' . $date_timeReply . '</p> 
        <p class="message_text_comment">' . $messageReply . '</p> 
       </div> 
      </div> 
      <div id="add_comment"> 
       <form id="formAddComment" action="dashboard.php" enctype="multipart/form-data" method="post"> 
       <div id="add_comment_left"> 
        <textarea id="comment" name="comment" cols="75" rows="2">Add a Comment...</textarea> 
       </div> 
       <div id="add_comment_right"> 
        <input id="userID" name="userID" type="hidden" value="' . $userID . '" /> 
        <input id="actID" name="actID" type="hidden" value="' . $actID . '" /> 
        <input id="btnComment" name="btnComment" type="submit" value="" title="Add Comment" /> 
       </div> 
       </form> 
      </div> 
     </div> 
    </div> 

ОК, теперь JQuery разметки

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#formAddComment").submit(function(e) { 
       e.preventDefault(); 
       var form = $(this); 
       var div_add_comment = form.parent(); 
       var div_comments = div_add_comment.parent(); 
       $.ajax({ 
        type: "POST", 
        data: form.serialize(), 
        url: "includes/comment.php", 
        success: function(msg){ 
         $div_comments.html(msg); 
        } 
       }); 
       return false; 
      }); 
     }); 
    </script> 

Наконец внешний PHP скрипт (Примечание: Я только вывесим начальные строки, в которых я локализовать данные корма в PHP вары.)

if(isset($_POST['actID'])){ 
     $actID = mysql_real_escape_string($_POST['actID']); 
     $userID = mysql_real_escape_string($_POST['userID']); 
     $comment = mysql_real_escape_string($_POST['comment']); 
      ............other processing here........... 
    } 

Я подозрительно отношусь к моему сценарию jquery.

Еще раз спасибо,

Answer 1

jquery работает с селекторами. Когда вы пишете $ (что-то), что-то является селектором. Это может быть идентификатор, имя класса, переменная, элементы html. Таким образом, вместо

$("#formAddComment").submit(function(e) { 

Вы можете использовать

$(".someclassName").submit(function(e) { 

так же, как CSS, использование # для идентификатора,. для класса. Просто убедитесь, что вы добавили атрибут class в свою форму с тем же именем. Вы также можете попробовать

$("form").submit(function(e) { 

который должен выбрать любые элементы формы. Я думаю, что остальная часть вашей функции должна работать нормально с этим изменением, поскольку вы используете «this» и parent() вместо любых прямых ссылок.

Answer 2

В поджигатель, нажмите на консоли, а затем на всех. Когда вы нажимаете кнопку, чтобы вызвать ваш вызов ajax, вы должны увидеть всплывающее окно, возможно, с пиктограммой загрузки, которая показывает отправленный почтовый запрос. Вы должны иметь возможность щелкнуть по вкладкам, чтобы узнать, какие данные будут отправляться, и какой ответ указан, а также код состояния ответа ...

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

Answer 3

Я уронил общую структуру в jsfiddle в http://jsfiddle.net/cori/JsLWq/, и когда я отправить форму я действительно получить АЯКС POST на несуществующие http://fiddle.jshell.net/cori/JsLWq/show/includes/comment.php вследствие относительного АЯКС URL, так что это не проблема, насколько я могу сказать. Что я do думаю, проблема в том, что вы смешиваете правила именования переменных.

Вы начинаете называть переменные как набившие оскомину JavaScript объекты

var form = $(this); 
var div_add_comment = form.parent(); 
var div_comments = div_add_comment.parent(); 

, но затем в обработчике успеха вы переключиться на довольно распространенные $x конвенции, часто используется, чтобы указать, что переменная является экземпляром JQuery :

$div_comments.html(msg); 

однако в этой точке нет переменной $div_comments; только div_comments. Если вы отправите форму в http://jsfiddle.net/cori/JsLWq/1/, у которой есть обработчик ошибок ajax, и посмотрите на свою консоль firebug, вы увидите, что вы получаете ReferenceError, потому что $div_comments не определен.

EDIT

Включение предложений kgarrigan, в случае в РНР вы перебираете форму, которые вы хотите создать, и следить за свою позицию с помощью индекса, вы можете переименовать формы с индексом, так что ваш форма PHP/HTML код будет выглядеть примерно так:

<form id="formAddComment-' . $index . '" action="dashboard.php" enctype="multipart/form-data" method="post"> 

так что вы бы в конечном итоге с форменными элементами с идентификаторами, как formAddComment-1.

Затем в JQuery вы должны выбрать все формы, используя селектор startsWith и связать представить им событие, таким образом:

$('[id^="formAddComment"]').submit(function(e) { 
    // do your ajax 
}); 

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

Answer 4

Если у вас несколько форм на одной странице, с тем же идентификатором это вызовет проблему. Особенно идентификатор # formAddComment, который подключен к вызову submit(). Если их несколько, это не будет работать.