jQuery works in jsFiddle, but not in Drupal

Question

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.

I am trying to implement jQuery code to change the order of columns a table has. 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. I also tried removing the $(document).ready part, and adding (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 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(). Still no progress.

Any idea on what I'm doing wrong?

Thanks beforehand.

Xanfar · Accepted Answer · 2013-12-07 18:56:57Z

3

You should be wrapping your entire JS in (function ($) {})(jQuery); Then using your $ in place of your jQuery instances...drupal has always liked this better for me.

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:

scripts[] = yourjsfiles/script.js

Then in the script.js file you can have something like the following:

(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. You will thank me for this in the long run :)

edit: I just noticed in your question the inclusion of 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

edited Dec 7, 2013 at 18:56

answered Dec 7, 2013 at 18:29

Xanfar

1565 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Inst Over a year ago

Thank you for the advice, it indeed has cleared many of the doubts I had. However, even having implemented your solution, I still cannot achieve the desired. I have tried creating a new .js file with the code and later including it in the .info file (and after disabling and re-enabling the theme, of course) or simply integrating your code in the html.tpl.php, but it doesn't work in neither of these cases. Is it possible for the problem to be in CSS? Perhaps I shouldn't be using the id of the table for this function?

Inst Over a year ago

Solved this by using $(function() { jQuery.each($("#changeorder tr"), function() { $(this).children(":eq(1)").after($(this).children(":eq(0)")); }); }); Although not sure why this solution worked while the other didn't.

Xanfar Over a year ago

not sure if you did but always make sure you dump your drupal cache after any .info file changes or you will not see the changes

Collectives™ on Stack Overflow

jQuery works in jsFiddle, but not in Drupal

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related