AJAX形式 - 返回成功/失败消息（每页多种形式）

我使用jQuery表单插件（http://jquery.malsup.com/form/）来显示提交的表单的页面上的结果。我遇到的问题是，每页有多个表单并获取结果以显示特定表单的div。AJAX形式 - 返回成功/失败消息（每页多种形式）

这里的表单代码：

<form class="contest-rating-form" id="contest-rating-1" name="Contest" method="post" action="/">  
<input type="hidden" name="rating" value="1"> 
<input type="submit" name="submit" value="Vote"></p> 
</form> 
<div class="message"></div>

注意ID = “大赛评级-1” - 在页面上每种形式都有一个独特的＃，所以有可能是ID =“大赛评级-55 “和id =” 大赛评级-100" 等

这里是我的JS：

<script> 
$(document).ready(function() { 
    var options = { 
    target: '.message', 
    success: showResponse 
    }; 
    $(".contest-rating-form").submit(function() { 
     $(this).ajaxSubmit(options); 
     return false; 
    }); 
}); 
function showResponse(responseText, statusText) {} 
</script>

.message得到了响应更新，但.message的每一个实例被更新，而不仅仅是一个用于这种形式。

感谢有这方面的帮助！

编辑添加：我也可以将相同的＃添加到.message，以便.message-1匹配＃contest-rating-1等。只是不知道如何让它在每个动态JS中工作形成。

来源

2012-03-04 Mel

好吧，它几乎是这么说的，'target = .message'，这意味着它将所有元素与类消息作为目标，并将来自该特定ajax调用的响应放入所有元素中？ – adeneo 2012-03-04 00:41:47

谢谢。我意识到这一点。我在问如何让它只显示提交的那个。 – Mel 2012-03-04 00:45:30

假设你的消息元素将始终是表单元素后，你可以更改您的代码如下：

<script> 
$(document).ready(function() { 
    var options = { 
    success: showResponse 
    }; 
    $(".contest-rating-form").submit(function() { 
     options.target = $(this).next(".message"); 
     $(this).ajaxSubmit(options); 
     return false; 
    }); 
}); 
function showResponse(responseText, statusText) {} 
</script>

这样options.target总是指向提交的表单下面的消息元素。

来源

2012-03-04 00:58:26

中添加一个计数器，这非常棒，而且效果也很好。非常感谢！ – Mel 2012-03-04 03:34:27

如果您正在运行的页面.PHP，可以动态插入唯一的类名的“消息”的div。

来源

2012-03-04 00:43:48 adamdehaven

谢谢。我可以给消息div添加唯一的类名 - 我不知道如何在JS中调用它。 – Mel 2012-03-04 00:48:20

如果添加一个变量是eaxh消息DIV一些，从“1”到div的结尾，如“MESSAGE_1”，“MESSAGE_2”，等等，你就可以在你的JS将号码添加到“消息' – adamdehaven 2012-03-04 00:55:13

现在，你会如何让这个变量在JS和PHP中相同，只有我能想到的方法是将你的JS文件解析为PHP或其他奇怪的解决方案？ – adeneo 2012-03-04 00:57:43

还没有尝试过，但有可能是在一些有参考this的地方，如果.message元素在里面.contest-rating-form也许这样的事情会工作：

$(document).ready(function() { 
    $(".contest-rating-form").submit(function() { 
     $(this).ajaxSubmit({ target: $('.message', this), success: showResponse }); 
     return false; 
    }); 
}); 
function showResponse(responseText, statusText) {}

这要看插件写？

如果标记不同，您将不得不爬上DOM找到.message并参照.contest-rating-form。尝试检查AjaxSubmit网站上的一些线索，了解如何做到这一点？

来源

2012-03-04 00:53:19 adeneo

这里有一个方法可以帮助您得到您的轴承和实施certian类型插件的多个实例时总是得心应手。

/* loop over each form to insulate context in the $.each loop 
    and provide for index avaliablity*/ 

$(".contest-rating-form").each(function(index){ 

     var $form=$(this);        

     var options={  

      /* can now use indexing if wanted*/ 
      target: '#message_'+index, 

      /* or traverse within form*/   
      target : $form.find('.message'), 


      success: showResponse 
     }; 

     $form.submit(function() { 
      $form.ajaxSubmit(options); 
      return false; 
     }); 

})

来源

2012-03-04 02:28:55 charlietfl

非常感谢。我无法将我的头围绕'循环' – Mel 2012-03-04 03:34:09

AJAX形式 - 返回成功/失败消息（每页多种形式）

回答

相关问题