Question

<script type="text/javascript">
  $(document).ready(function(){
    var form = $('.formet');
    var submit = $('#knappUp');

    form.on('submit', function(e) {
      e.preventDefault();

$.ajax({
  url: 'ajax_post_com.php',
  type: 'POST',
  cache: false,
  data: $(this).serialize(),           //$(this) = a form
  beforeSend: function(){
      submit.val('Submitting...').attr('disabled', 'disabled');
  },
  success: function(data){
    var item = $(data).hide().fadeIn(800);
    form.parent().nextAll('.note-block:first').append(item); 
    //GOAL: append(item) onto the .note-block after only (this) form
  },

},
    error: function(e){
    alert(e);
    }
  });
 });
});         
</script>

该页面包含一个循环，其中包含多个<form>，后跟<div class="note-block">。我想要的是告诉我的jQuery .append(item)到它找到的下一个（最近的）.note-block。

（今天表格中发布的最后一个数据显示在所有.note-block上，直到页面被刷新 - 但我不想刷新页面 - 显然）

这可能非常简单 - 但我的大脑冻结让我100％陷入困境。

请帮忙

- UPDATE -

页面循环......

echo "<div class='notat' id='typenote".$clients_id."'>
        <form class='formet' method='post'>
            <textarea name='note' id='note' placeholder='Legg til notat'></textarea>
            <input type='text' name='client_id' id='client_id' value='".$clients_id."' style='display:none;' />
            <input type='text' name='user' id='user' value='".$class->getCurrentUser('users_fullname')."' style='display:none;'/>
            <input type='submit' value='SAVE' id='Up'/>
            <input type='button' class='page-fade' value='CANCEL' id='Down'/>
        </form>
    </div>";
?>
<div style="clear:both; height:2px;"></div>

<?php
    $note_query = mysql_query(
    "SELECT * FROM ... WHERE client_id = $clients_id ORDER BY note_id DESC");
?>

<div class="note-block"></div>
    <?php while($nota = mysql_fetch_array($note_query)): ?>

    <div class="note_post"> 
        <strong><img src='img/user.png' width='15px'> <?php echo $nota['user']?></strong> 
        <?php echo strftime('%e', strtotime($nota['note_created']));?>. 
        <?php echo strftime('%b', strtotime($nota['note_created']));?>. 
        <?php echo strftime('%y', strtotime($nota['note_created']));?> (<?php echo date('H:i',strtotime($nota['note_created']))?>)
        <br>
        <p><?php echo $nota['note']?></p>
    </div>
<?php end while?>

- UPDATE -

来自url: 'ajax_post_com.php'

的数据/项目

<div class="note_post">
  <img src='img/user.png' width='7.5px'> <?php echo $user?>
  <?php echo date("j. M. Y");?> (kl. <?php echo date("H:i");?>)
  <p><?php echo $note?></p>
</div>

Answer 1

$(this).next('.note-block').append(item);

Answer 2

尝试添加表单作为调用的上下文，并使用find the div

$.ajax({
  url: 'ajax_post_com.php',
  type: 'POST',
  cache: false,
  data: $(this).serialize(),           //$(this) = a form
  beforeSend: function(){
      submit.val('Submitting...').attr('disabled', 'disabled');
  },
  context: this,
  success: function(data){
    var item = $(data).hide().fadeIn(800);
    $(this).parent().nextAll('.note-block:first').append(item); 
    //GOAL: append(item) onto the .note-block after only (this) form
  },

Answer 3

根据您提供的HTML，看起来.note-block是表单父的兄弟姐妹。所以试试：

$(this).parent().nextAll('.note-block').append(item);

编辑（再次 - 基于OP的新代码）

在调用ajax success处理程序时，$(this)可能不会引用原始表单元素。您可以在提交处理程序中保存对表单（正在提交）的引用，以便在$.ajax调用中使用：

$(document).ready(function() {
    var allForms = $('.formet');
    var submit = $('#knappUp');

    allForms.on('submit', function(e) {
        e.preventDefault();
        //form variable created inside submit handler
        var thisForm = $(this);
        $.ajax({
            url: 'ajax_post_com.php',
            type: 'POST',
            cache: false,
            //use the form variable
            data: thisForm.serialize(),
            beforeSend: function(){
                submit.val('Submitting...').attr('disabled', 'disabled');
            },
            success: function(data){
                var item = $(data).hide().fadeIn(800);
                //use the form variable
                thisForm.parent().nextAll('.note-block:first').append(item);
            }
        });
    });
});

您甚至可以保存对要更新的目标.note-block的引用：

allForms.on('submit', function(e) {
    var thisForm = $(this);
    var noteBlock = thisForm.parent().nextAll('.note-block:first');
    //try console.log(noteBlock); right here to see what it is
    $.ajax({
        ...
        success: function(data){
            var item = $(data).hide().fadeIn(800);
            //use the noteBlock variable
            noteBlock.append(item);
        }
    });
});

jQuery - 将（item）追加到最近的类

3 个答案: