問題背景: 想用 jQuery 做 AJAX 處理, 用基于 Prototype 的 EasyValidation 做表單驗證, 但是二者不能共存, 因為都用了同一個方法名: $().
解決:
jquery和prototype沖突解決, 網上流傳的一篇文章,我這里測試結果是錯誤的! http://ajaxbbs.net/blog/post/71/
另一種方式是:
<script type=”text/javascript”>
jQuery.noConflict();
</script>
參考: http://www.d5s.cn/archives/6, 但我這里測試也有問題!
本人測試通過的方式:
1、將jquery.js放到prototype.js前面（這個是必須的!）。
2、在jquery.js后面將$變量重命名。
方法如下：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var jQuery=$;
</script>
<script type="text/javascript" type="text/javascript" src="window.js"></script>
<!--上面這個window.js調用了jquery框架的方法-->
<script type="text/javascript" type="text/javascript" src="prototype.js"></script>
3、將原來使用的$方法名一律替換為jQuery名，如$("obj")替換為jQuery("obj")。
例如下面的一段代碼, 混合了 jQuery和基于Prototype的 EasyValidation:
<!-- jquery, 注意加載順序 -->
<script src="js/jquery-1.2.6.pack.js"></script>
<script type=”text/javascript”>
var jQuery=$;
</script>
<!-- 表單驗證 -->
<script src="easy_validation/lib/prototype.js" type="text/javascript"></script>
<script src="easy_validation/lib/effects.js" type="text/javascript"></script>
<script src="easy_validation/src/validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="easy_validation/styles/style_min.css" />
<div id="contents"></div>
<script>
jQuery(document).ready(function(){
//jQuery("#contents").load("test.jsp");
jQuery("#contents").load("test.jsp?username=BeanSoft")
});
</script>
<!-- 為form增加required-validate class,標識需要驗證form -->
<form id='helloworld' action="#" class='required-validate'>
<input name="user.name" class="required min-length-6 max-length-20 validate-alphanum" value="beansoft">
*密碼:
<input name="user.password" type="password" class="required min-length-6 max-length-20" value="123456" >
*密碼(重復):
<input name="password1" type="password" class="required equals-user.password" value="123456" >
<input type='submit' value='Submit'/>
<input type='reset' value='Reset'/>
</form>