I'm using a Railscast way to remotely access Rails data using Ajax. It works fine.
Railscast 340
Now, I'm trying to add the jquery-datatables-column-filter plug-in.
Here is my coffeescript:
$("#workorders").dataTable(
sPaginationType: "full_numbers"
bProcessing: true
bServerSide: true
bFilter: false
sAjaxSource: $('#workorders').data('source')
sDom: "T<\"clear\">lfrtip"
).columnFilter()
But, when I even click on NEXT (to get the 2nd page of workorders), I get the following console error:
Uncaught TypeError: Cannot read property 'sServerMethod' of undefined jquery.dataTables.js?body=1:8754
DataTable.defaults.fnServerData jquery.dataTables.js?body=1:8754
oTable.fnSettings.fnServerData jquery.dataTables.columnFilter.js?body=1:330
_fnAjaxUpdate jquery.dataTables.js?body=1:1898
_fnDraw jquery.dataTables.js?body=1:1431
(anonymous function) jquery.dataTables.js?body=1:2876
fnClickHandler jquery.dataTables.js?body=1:11665
(anonymous function) jquery.dataTables.js?body=1:4800
jQuery.event.dispatch jquery.js?body=1:3075
elemData.handle
And searching a column doesn't work either.
Any ideas? Thanks!
UPDATE1
I tried to even simplify with another index listing (without ajax).
This is the coffeescript:
$("#dataTable1").dataTable().columnFilter()
And when I try to search on a column, I get:
Uncaught TypeError: Cannot read property 'oFeatures' of null jquery.dataTables.js?body=1:5586
fnFilter jquery.dataTables.js?body=1:5586
(anonymous function) jquery.dataTables.columnFilter.js?body=1:65
jQuery.event.dispatch jquery.js?body=1:3075
elemData.handle
Did you drop the Column Filter plugin js into your /vender/assets/javascripts dir? And, then reference in your application.js:
//= require jquery.dataTables.columnFilter
Try to change line 316 in jquery.dataTables.columnFilter.js from this:
oTable.fnSettings().fnServerData = function (sSource, aoData, fnCallback) {
to this:
oTable.fnServerData = function (sSource, aoData, fnCallback) {
Related
So this seems like a weird error, i've just started using teaspoon and im trying to get it set up on a rails project.
I have a very simple function im trying it out on:
export function add(value,value2) {
return value+value2;
}
Simple right?
and im including it in my spec file as such:
//= require config/add
describe("add", function() {
var num;
it("add", function() {
num = add(2,3);
expect(num).toEqual(5);
});
});
Why do I get a "Can't find variable "Add" in http://127.0.0.1:8000/assets/test_spec.self.js?body=1 (line 5)"
Am I missing something? I know this project does have ES6 modules which I know need to be compiled and such, but....this doesn't use any ES6 syntax I believe.
This ended up being a problem with the function export. Which was resolved by using:
import {add} from 'subfolder/add';
Im guessing since it was using ES6 standards...
I am working in Rails with BackboneJS in handlebar templates.
I am getting a weird error here..
this is my header view
class App.Views.Header extends Backbone.View
className: "navbar-inner"
template: HandlebarsTemplates['app/templates/header']
render: ->
#$el.html(#template())
#
main application file is this
#= require_self
#= require_tree ./templates
#= require_tree ./views
#= require_tree ./routers
window.App =
Routers: {}
Views: {}
Collections: {}
Models: {}
initialize: ->
new App.Routers.MainRouter()
Backbone.history.start()
and my main router file is this
class App.Routers.MainRouter extends Backbone.Router
routes:
"": "index"
initialize: ->
#headerView = new App.Views.Header()
index: ->
$("#header").html(#headerView.render().el)
when I hit localhost:3000.. I got this error upfront.
Uncaught TypeError: this.template is not a function..
Am totally stuck in that any help will be appreciated Thanks
template: HandlebarsTemplates['header']
Template path should be only the template itself.
May that is version due to version or assets precompiled
It sounds like the Handlebars template in HandlebarsTemplates['app/templates/header'] either does not exist, has not been compiled, or there may have been an error while compiling it. That's the error you'd get if that value was null or undefined.
You might want to try setting a breakpoint in your browser's javascript debugger in the call to render, then use the debugger to check the value of this.template and see what's going on.
My rails 4 app breaks stellar.js after link_to.
I know that is something related with turbolinks.
I installed jquery.turbolinks and my js functions from uikit are all working now.
But the stellar.js still don't..
It works when I type the address in browser: 0.0.0.0:3000, but do not after clicking any link.
I am calling stellar.js from my assets/javascripts/my-js.js like this:
$(function(){
$.stellar();
});
I also tried with no success:
function initialize() {
$.stellar();
}
$(document).ready(initialize);
$(document).on('page:load', initialize);
Thank you
Your issue is most certainly related to Turbolinks. I have a feeling that when you call $.stellar() after a Turbolink request, the call has no effect since it's already attached to the window object and that doesn't go away during a the request. Try destroying it prior to initializing it again in the initialize function.
var initialize = function() {
$.stellar( 'destroy' );
$.stellar();
}
$(document).ready( initialize );
$(document).on( 'page:load', initialize );
You can also bind the destroy method to the turbolink before-cache event :
$(document).on "turbolinks:before-cache", ->
$.stellar('destroy')
I am trying to use the jquery ui autocomplete, and keep having the following error when you type into the input field that has the autocomplete on it:
Uncaught TypeError: Cannot read property 'PAGE_UP' of undefined
I have included the following files on my page:
jquery-1.7.2.min.js
jquery-ui-1.8.21.custom.min.js
jquery-ui-1.8.21.custom.css
Here is the code using the autocomplete:
$('input#searchFor').autocomplete({
source:function(req,add){
$.getJSON("/index.php/search/autoCompleteHandler?q=?§ion="+$('input#searchFor').attr("searchDesc"),req,function(data){
var suggestions = [];
$.each(data,function(i,val){
suggestions.push(val.name);
});
add(suggestions);
});
}
});
I have no idea what could be going wrong. Any help would be appreciated.
The jQueryUI example documentation for a remote data source shows the remote data source should be done like:
$(function() {
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
//the code to execute when an item is clicked on
}
});
});
It looks like source only needs to be a url. You could take a look at the ajax request in Chrome to figure out the $_GET or $_POST variable which is being populated with the search query.
It might not be a bad idea depending on your usage to use the remote data source with caching option.
I wanna use a jQuery UI Progress Bar
Now i am dynamicly creating the progress bar
(I'm creating an uploader simmilar to the one on gmail messages)
And for some reason i get this error.
This is my code:
$('#' + file.id + " b").html('<div id="progressbar"></div>');
$( "#progressbar" ).progressbar({
value: file.percent
});
Which gives me this error:
Uncaught TypeError: Object [object Object] has no method 'progressbar'
Anyone has a clue why?
I do have the jQuery UI linked to the file as i'm already using a Dialog on the same page, so that's NOT the problem.
Could it be that it messed up because the div does not exist in the intial page loading?
With Shef's help the problem is solved.
The problem was i had a custom jQuery UI library which didn't include the progressbar.