[英]jQuery works in jsFiddle, but not in Drupal
Good Evening, I am pretty new to jQuery, and therefore would like you to forgive me if I am asking a stupid question, but apparently I've been facing the following problem, which I think I cannot solve by myself. 晚上好,我对jQuery很陌生,因此如果我问一个愚蠢的问题,希望您能原谅我,但是显然我一直在面对以下问题,我认为我自己无法解决。
I am trying to implement jQuery code to change the order of columns a table has. 我正在尝试实现jQuery代码以更改表具有的列的顺序。 The code is as follows:
代码如下:
$(document).ready(function (table, from, to) {
var rows = jQuery('tr', table);
var cols;
rows.each(function () {
cols = jQuery(this).children('th, td');
cols.eq(from).detach().insertBefore(cols.eq(to));
});
}(jQuery('#changeorder'), 1, 0));
It works perfectly Having a table with the id "changeorder" in jsFiddle, but doesn't work on Drupal website. 它可以完美地工作在jsFiddle中具有id为“ changeorder”的表,但在Drupal网站上不起作用。 I also tried removing the $(document).ready part, and adding (jQuery);
我还尝试删除$(document).ready部分,并添加(jQuery); at the end, the same result.
最后,结果相同。
I tried adding the code to the html.tpl.php, just after the inclusion of jQuery javascript: 在包含jQuery javascript之后,我尝试将代码添加到html.tpl.php中:
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function (table, from, to) {
var rows = jQuery('tr', table);
var cols;
rows.each(function () {
cols = jQuery(this).children('th, td');
cols.eq(from).detach().insertBefore(cols.eq(to));
});}(jQuery('#changeorder'), 1, 0));
</script>
And I have also tried adding the content directly to the page where I need it with the drupal_add_js(). 我还尝试使用drupal_add_js()将内容直接添加到需要的页面中。 Still no progress.
仍然没有进展。
Any idea on what I'm doing wrong? 关于我在做什么错的任何想法吗?
Thanks beforehand. 预先感谢。
You should be wrapping your entire JS in (function ($) {})(jQuery); 您应该将整个JS包装在(function($){})(jQuery);中。 Then using your $ in place of your jQuery instances...drupal has always liked this better for me.
然后使用$代替jQuery实例... drupal一直对我来说更喜欢这个。
I would also suggest converting this into a function that you can call when needed instead of passing your variable straight to the document ready like you currently are. 我还建议将其转换为可以在需要时调用的函数,而不是像当前那样直接将变量直接传递给文档。
(function ($) {
$(document).ready(function() {
function tableChange(table, from, to){
var rows = $('tr', table);
var cols;
rows.each(function () {
cols = $(this).children('th, td');
cols.eq(from).detach().insertBefore(cols.eq(to));
};
tableChange('#changeorder', 1, 0)
});
})(jQuery);
In my experience best practice for drupal should not be adding your scripts to your html.tpl but instead you should be adding to yourtheme.info file: 以我的经验,drupal的最佳实践不应将脚本添加到html.tpl中,而应将其添加到yourtheme.info文件中:
scripts[] = yourjsfiles/script.js
Then in the script.js file you can have something like the following: 然后,在script.js文件中,您可以看到以下内容:
(function ($, Drupal, window, document, undefined) {
$(document).ready(function(){
//your code here
});
})(jQuery, Drupal, this, this.document);
You want to try and avoid cluttering up you .tpl files. 您要尝试避免使.tpl文件混乱。 You will thank me for this in the long run :)
从长远来看,您将为此感谢我:)
edit: I just noticed in your question the inclusion of jquery. 编辑:我只是在您的问题中注意到jquery的包含。 This cannot be done in the manner you are attempting to do it.
这不能以您尝试的方式完成。 By default Drupal 7 uses jquery 1.4.4 and the way to update this would be the jQuery Update Module
默认情况下,Drupal 7使用jquery 1.4.4,而更新它的方法将是jQuery Update Module。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.