I'm using casperjs to get all jquery ui tabs on a page and clicking each one. The problem is that the tabs load dynamically and never seem to switch away from the "Loading..." state. I've tried using the casper wait() function and even the waitWhileSelector() function but neither seems to work:
function getActiveTab () {
var active_tab = $('#tabs>ul').find('li.ui-tabs-selected').text();
console.log("Active tab: " + active_tab);
return active_tab;
}
function clickTabs (tabs) {
this.each(tabs, function(casper, tab_name, i){
var child_number = i + 1;
var tab_selector = "#tabs>ul>li:nth-child(" + child_number + ")>a";
console.log(tab_selector);
// this.thenClick(tab_selector).waitWhileSelector('#tabs>ul>li.ui-state-processing', function(){
this.thenClick(tab_selector, function(){
var this_tab = this.evaluate(getActiveTab);
});
});
}
It seems to work for the first tab (because it's the one loaded on page load) but all the rest return "Loading":
------ snip passed tests ------
#tabs>ul>li:nth-child(1)>a
#tabs>ul>li:nth-child(2)>a
#tabs>ul>li:nth-child(3)>a
#tabs>ul>li:nth-child(4)>a
#tabs>ul>li:nth-child(5)>a
#tabs>ul>li:nth-child(6)>a
#tabs>ul>li:nth-child(7)>a
#tabs>ul>li:nth-child(8)>a
#tabs>ul>li:nth-child(9)>a
remote message caught: Active tab: Host Allocation
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#disk_pools_table').dataTable')
remote message caught: Active tab: Loadingâ¦
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#vvol_groups_table').dataTable')
remote message caught: Active tab: Loadingâ¦
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#arrayCablesTable').dataTable')
remote message caught: Active tab: Loadingâ¦
remote message caught: Active tab: Loadingâ¦
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#fa_information_table').dataTable')
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#zoning_table').dataTable')
remote message caught: Active tab: Loadingâ¦
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#pool_mismatch_table').dataTable')
remote message caught: Active tab: Loadingâ¦
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#other_information_table').dataTable')
remote message caught: Active tab: Loadingâ¦
Page Error: TypeError: 'undefined' is not a function (evaluating '$('#arrayIPs').dataTable')
remote message caught: Active tab: Loadingâ¦
FAIL 12 tests executed in NaNs, 11 passed, 1 failed.
When I use waitWhileSelector it times out after the first click. Most of the tabs dynamically load a script tag with a dataTables object and it would seem that either the table object never loads or the datatables library isn't loading? Do I have to inject that library into the evaluate method, or should the tag in the page pull it in anyway?
I'd appreciate any help to isolate what's happening in this test.
Need to include the .js files of datatables in the casperjs option: clientScripts.
Related
Error Pup Up Dialog ASP.MVC 5
I am developing a modal window for my application.
I 'm doing all that is necessary for the display, but an error is generated at run-time.
I used two methods: data-role = " Dialog" and data-role = " Pupup " but both generate an error when running.
the error referred to preventDefault ();
Error Description : 0x800a01b6 - JavaScript runtime error : Object does not support property or method " preventDefault " ==> this error is generated during the use of data-role = " pupup".
During the use of data-role = " Dialog", no event is generated.
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) {
I am working on the ode-to-food MVC4 demo app on Pluralsite by Scott Allen and have a troublesome error enabling ajax calls. I am thinking this may have something to do with my more recent jquery version but not sure.
When I uncomment following line to activate ajax call I get the Microsoft JScript runtime error, otherwise it works fine:
$('form[data-ucw-ajax="true"]').submit(ajaxFormSubmit);
The error is:
Unhandled exception at line 4411, column 2 in http://localhost:17471/Scripts/jquery-1.9.0.js
0x800a139e - Microsoft JScript runtime error: Syntax error, unrecognized expression:
<div class="wrapper clearfix">
....
</div>
<hr />
My View has this form:
<form method="get" action="#Url.Action("Index")" data-ucw-ajax="true" data-ucw-target="#facilitiesList">
My JQuery code is:
$(function () {
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr('data-ucw-target'));
var $newHtml = $(data);
$target.replaceWith($newHtml);
$newHtml.effect('highlight');
});
return false;
};
$('form[data-ucw-ajax="true"]').submit(ajaxFormSubmit);
});
My Script Load Bundles look like:
bundles.Add(new ScriptBundle("~/bundles/jquery/ucw").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/jquery-migrate-1.0.0.js",
"~/Scripts/My.js"
));
"This" has scope issues. The "this" that you refer to in ajaxFormSubmit is the context of the ajaxFormSubmit , not the click handler of the link. You need to do something like this:
$form = $('form[data-ucw-ajax="true"]');
or give the form an ID and use:
$form = $('#myForm');
Also, I would move Jquery to another bundle to ensure it is loaded before all the other libraries.
I have similar error with another code from that video course - when returned html from partial View wrapped into JQuery to apply animation later...
function dataReceived(data) {
var $newHtml = $(data); -<<<<same Exception here
$(target).replaceWith(data);
$(data).effect("highlight");
}
Exception: Unhandled exception at line 4421, column 2 in jquery-1.9.1.js
0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression:
<div id="restaurantsList">.....
I started with the code from this changeset, then, via NuGet:
updated jQuery to 1.9.1
updated jQuery UI to 1.10.0
added jQuery migrate 1.1.0 (also added to jQuery bundle)
I don't see any problems in Chrome or IE10 (except for JQMigrate warnings). Other than the small difference in jQuery versions, I can't see anything that would be different. Can you try to bump up your jQuery reference? If the problem still persists, send me the error message again with 1.9.1
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.