Heroku资产Twipsy和Tablesorter不起作用，本地是 [英] Heroku assets for Twipsy and Tablesorter not working, locally yes

问题描述

我想知道是否有其他人遇到了像Twipsy（来自Twitter bootstrap）和Tablesorter这样的jQuery脚本在本地工作但在Heroku上没有工作的问题。

每次清理我的公共/资产文件夹并针对部署环境进行预编译时，

这个脚本实际上显示在heroku上的预编译JS中，但似乎没有被识别出来......

奇怪的部分是下拉菜单的第一个jQuery / Ajax函数在Heroku上运行正常。

我在Heroku雪松堆栈上使用Rails 3.1

这是我的资产/ application.js

  //这是一个清单将被编译成包括下面列出的所有文件的文件。 
 //在此目录中的单独文件中添加新的JavaScript / Coffee代码，它们将自动为
 //包含在可从http://example.com/assets/application.js访问的编译文件中
 //不建议直接在这里添加代码，但如果你这样做，它会出现在
 //编译文件的底部。 
 // 
 // =要求jquery 
 // =要求jquery_ujs 
 // =要求jquery.tablesorter.min 
 // =要求bootstrap-twipsy 
 // =需要引导警报
 // =需要引导 - 下拉
 // =需要引导模式
 // =需要引导 - 弹出
 // =需要bootstrap-scrollspy 
 //需要bootstrap-tabs 
 
 
 jQuery（函数（$）{
 //当#region_id字段更改时
 $ （#contact_country_id）。live（'change'，function（）{
 //进行POST调用并替换内容
 var country = $（'select＃contact_country_id：selected'）。val （）; 
 if（country ==）country =0; 
 jQuery.get（'/ countries / update_city_select /'+ country，function（data）{
 $（ #cities）.html（data）; 
}）
 return false; 
}）; 
}）; 
 
 $ {
 $ {
 $（＃sortTable）。 false 
}，
 8：{
 sorter：false 
}，
 9：{
 sorter：false 
} 
 }，
 sortList：[[0,0]] 
}）; 
}）; 
 $ b $ j（函数（$）{
 $（'。action-icon'）。twipsy（）; 
 $（a [rel = twipsy]）。twipsy （{
 live：true 
}）; 
}）; 
 // = require_tree。 
  

同时更改配置资源使其工作！

Aurelien

解决方案

>有类似的问题。
在行 // = require_tree 之前放置引导代码。

I was wondering if anyone else ran into the problem where jQuery scripts such as Twipsy (from Twitter bootstrap) and Tablesorter work locally but not on Heroku.

Each time I cleaned my public/assets folder and precompiled for deployment environment.

The script actually shows up in the precompiled JS on heroku, but it doesn't seem to be recognized....

The weird part is that the first jQuery/Ajax function for the dropdown works fine on Heroku.

I use Rails 3.1 on heroku cedar stack

Here is my assets/application.js

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require jquery.tablesorter.min
//= require bootstrap-twipsy
//= require bootstrap-alerts
//= require bootstrap-dropdown
//= require bootstrap-modal
//= require bootstrap-popover
//= require bootstrap-scrollspy
//= require bootstrap-tabs


jQuery(function($) {
// when the #region_id field changes
  $("#contact_country_id").live('change', function() {
    // make a POST call and replace the content
    var country = $('select#contact_country_id :selected').val();
    if(country == "") country="0";
    jQuery.get('/countries/update_city_select/' + country, function(data){
        $("#cities").html(data);
    })
    return false;
  });
});

jQuery(function($) {
    $("#sortTable").tablesorter({
        headers : {
            5: {
                sorter: false
            },
            8: {
                sorter: false
            },
            9: {
                sorter: false
            }
        },
        sortList: [[0,0]] 
    });
});

 jQuery(function($) {
  $('.action-icon').twipsy();
  $("a[rel=twipsy]").twipsy({
    live: true
  });
 });
//= require_tree .

Also changing the config assets made it work!

Your help would be most appreciated.

Aurelien

解决方案

Had a similar problem. Placing the bootstrap code before the line //= require_tree . solved this problem for me.

这篇关于Heroku资产Twipsy和Tablesorter不起作用，本地是的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！