I am using Jquery 1.3.2 for a script that needs it to run in IE 7/8.
The following code I've made to modify tabSlideOUt v1.3
By William Paoli: http://wpaoli.building58.com is causing a conflict and throwing an "Invalid Argument" error in jquery.
<script type="text/javascript">
$(document).ready(function() {
$("div#slidetab_1.slide-out-div a.handle").click(function () {
$("div#slidetab_2.slide-out-div").toggleClass("slide-height", 250) ;
});
$("div#slidetab_2.slide-out-div a.handle").click(function () {
$("div#slidetab_2.slide-out-div.tab2.slide-height").toggleClass("slide-height");
});
});
</script>
It seems that the toggleClass function is causing the error. Does anyone know of another way to code this so I don't have to use toggle?
I'm sorry it seems so vague but I was having trouble posting an example on JS Fiddle.
All I need is an alternative method for toggleClass
Thanks in advance
Cheers
The problem is that you pass 250 as second argument... what is it supposed to do in your code?
From the documentation:
switch A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
It seems to have no purpose so I suggest to remove it.
Update: After having a look at the jQuery source code, passing 250 should not throw that error. Nevertheless I suggest to remove it and test it. If it does not work, you have to provide more information (where exactly the error is thrown, etc.).
Alternatively, you use this function to toggle the class:
function toggleClass($element, cls) {
$element[$element.hasClass(cls) ? 'removeClass' : 'addClass'](cls);
}
Related
I simplified the code i need to test to this:
<html ng-app="home" ng-strict-di=""><head>....
And i am running some protractor tests, i want to access the value of ng-app so i can compare and see which app is running in each page.
I have tried
var appName = element(by.xpath('/html/#ng-app'))
but it is not returning a usable promise or text i can compare with
appName.getText().then(function(name) {
expect(name).toBe('home')
});
But protractor complains:
InvalidSelectorError: invalid selector: The result of the xpath expression "/html/#ng-app" is: [object Attr]. It should be an element.
So i'm a bit baffled as how can i access my angular app name from protractor to test for app running independently of localization of labels.
Any insight into this enigma?
And it seems like magically, when you order your thoughts to formulate the question, the answer comes to you.
the trick is to get the html as element
var appNameHtml = element(by.xpath('/html'))
and then, in the test, get the ng-app attribute and use it:
appNameHtml.getAttribute('ng-app').then(function(value) {
expect(value).toBe('home');
});
And bingo, you can extract the app name.
Maybe this is a very basic question, but it was driving me insane :)
your answer will suffice I guess in this case. But just wanted to highlight a more generic approach in case ng-app may reside not only on html element.
var elementWithNgApp = element(by.css('*[ng-app]'))
And then wanted to add one more thing. You need not resolve the promise of getAttribute to do an expect on its value. Jasmine resolves the promise for you. You can have something like this
expect(elementWithNgApp.getAttribute('ng-app')).toBe('home');
After a lot of research, and tinkering, I can't seem to actually get my Protractor test to do anything else other than have an Angular related error, even though I am using browser to avoid Angular being detected at all.
The test involves an Angular app, opening a dropdown in it, and clicking on the link for the console; the console opens a non-Angular admin page in a separate window.
So based on the many informative SO posts I found, I first used this...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
//expect for new window here
});
});
Which appeared to work, as I could get to the window through repl pretty easily.
The issue is when either of the following were added...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
One expect check the URL and the other checks for the header element on the page, which is a table header. When I run this, I get the following:
Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
When I decide to use browser.ignoreSynchronization = true, both in the function, or in a beforeEach, with or without a following afterEach setting it to false, I get the following:
JavascriptError: angular is not defined
I can't seem to get any "useful" errors to help me debug it, and trying it in repl does not help, as I get the same issue.
To be comprehensive, trying my URL expect without getting the second window will give me the root, and the other will fail.
Just doing one or the other will cause the same problem.
Changing to regular syntax (element(by.css...)) does not change things.
So much for my first question...
It appears that my use of browser.getLocationAbsUrl() is meant to be used for an Angular page, and was causing my issue...
Essentially, even though I believed I was using pure Webdriver calls, that call still required Angular on the page to work...
As stated in another post, the use of browser.driver.getCurrentUrl() is a non-Angular call using Webdriver, and fixed the problem. Thus, the final code is the following...
browser.sleep(1000); //to wait for the page to load
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.driver.getCurrentUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
This works without setting ignoreSynchronization, BTW.
I realized it would probably be something relatively simple to fix it, just didn't expect I'd get it that quickly (I intended on submitting the question last night, but posted it this morning instead).
In any case, I hope this will at least be a good reference for anyone else facing the same issue.
Seems like getLocationAbsUrl is angular abs url.
Try using the native driver getCurrentUrl instead.
-- expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
++ expect(browser.driver.getCurrentUrl() ...
I'm using the StratifiedJS library's waitFor construct.
function myFunction() {
// some declarations
waitfor() {
AsyncService.getThisDone().then(function(result) {
// some more calculation
resume();
});
}
}
I am getting unexpected '{' on the line where waitfor is used as I cannot enclose the above code in <script type="text/sjs"> tag.
How can I get this working in AngularJS
The library you linked says you need to include this on the main page:
<script type="text/sjs">
// Your SJS code here!
</script>
Make sure you've labelled it that way. Most javascript is labelled as "text/javascript" (or has no label at all, in which case the <script> tag implies javascript.
The code you posted runs fine when typed in the command-line-like eval tool they have on the StratifiedJS page - likely there is nothing wrong with the code itself, just the way it's loaded.
As #blgt said, you need to put the SJS code inside an appropriate <script type="text/sjs"> tag (since most StratifiedJS code is not valid JavaScript).
In order to access SJS functions from plain JS frameworks like SJS, you could attach them to some well known object, e.g:
<script type="text/sjs">
window.myFunction = function() {
waitfor() {
AsyncService.getThisDone().then(function(result) {
// some more calculation
resume();
});
}
}
</script>
You can then call window.myFunction from any JS code. In real code you'd probably pick a more unique name ;)
Note: it's impossible to actually wait for the execution of a suspending StratifiedJS function like this if you call it from JS. So if you're calling StratifiedJS functions from JS, generally they should be fire-and-forget (i.e functions which are only executed for their side-effects, rather than functions which return a result).
This blog post has some details about integrating AngularJS and StratifiedJS, which may clarify the relation between them:
http://onilabs.com/blog/megazine
The short version is that your JavaScript syntax is invalid.
The medium version is that
functionCall() {
// stuff here
}
...is invalid. You'd need a ; after functionCall(), and if you had one, the block following it would have no purpose.
Given that your linked documentation suggests that it is valid, there must be some pre-processing step that turns the code described into valid JavaScript that you've skipped. So your code is being processed as normal JavaScript, in which this construct is not valid.
The solution is to ensure that this code is pre-processed and/or run in the right environment (I think it's by their Conductance server).
I have followed tutorials such as this one and this one. At first glance they are quite simple as in how to add JQuery UI to Drupal 7. Nonetheless, when I apply them, all I get is that the function dialog is undefined. Here is what I have done:
template.php
function mytheme_preprocess_image(&$variables) {
drupal_add_library('system','ui.dialog');
}
chat_overlay.js
jQuery(document).ready(function(){
console.log("*********************Setting up click");
jQuery('#small_chat_wrapper #chat_message').click(function(){
console.log("*********************CLICKED CLICKED");
if (typeof jQuery.ui !== 'undefined')
console.log("loaded");
else
console.log("undefined");
jQuery('#chat_overlay').dialog('open');
});
})
The console logs print out wonderfully, and the if check prints out loaded. Nonetheless, when it gets to the line of .dialog(..) the Undefined error occurs. I don't know what else to try. Such a simple thing and it's becoming painful.
Help is very much appreciated.
Edit:
The site's Status Report has the following:
jQuery Update jQuery 1.7.1 and jQuery UI 1.8.7
My MISTAKE:
Change function mytheme_preprocess_image(&$variables) to function mytheme_preprocess_page(&$variables) . Goodness.
Now the UNDEFINED ERROR NO LONGER happens, BUT, even though the ui classes and divs are getting added, the UI CSS is not coming through (the dialog does not pop up).
Really would appreciate some help.
You should load the jquery library that you need either in the preprocess_html function of your template.php or in yourmodule_init hook like that:
<?php
function yourmodule_init(){
drupal_add_library('system', 'ui.dialog');
drupal_add_library('system', 'ui.draggable');
drupal_add_library('system', 'ui.sortable');
}
?>
The source: https://www.drupal.org/node/1172846
I am new to AngularJS and working my way through some documents and tutorials to learn. My question is in reference to Egghead's video series, this video in particular, demonstrating how to put together a basic search filter. I wanted to use this in a real app I'm building for a friend with a small candle-making business but when I modified it to be her candles rather than the Avengers cast (as demo'd in the video) I got this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify ...
I copied a redacted (only 3 cast members in the array) version of EXACTLY what is in the video demo into a jsfiddle and discovered it still yields the same error. (For reference, the Egghead demo is here: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter). I've read at least a half dozen similar questions on this site so far and tried every solution offered, but none of them get rid of this error or cause the Avengers search -- which works fine in the video demo -- to actually function properly.
HTML:
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$" />
<table>
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
Javascript:
var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
var Avengers = {};
Avengers.cast = [
{
name: "Robert Downey Jr.",
character: "Tony Stark / Iron Man"
},
{
name: "Chris Evans",
character: "Steve Rogers / Captain America"
},
{
name: "Mark Buffalo",
character: "Bruce Banner / The Hulk"
}
];
return Avengers;
})
function AvengersCtrl($scope, Avengers) {
$scope.avengers = Avengers;
}
Simply put, can someone offer a solution that will work and get rid of this error, as well as explain in simple English (not Ph.D. level "Angular Obscurese") what causes it (in a nutshell) and what needs to be done to avoid it?
Edit: Apologies, but the jsfiddle link referenced above from the tutorial is no longer active. I have removed the broken link. The tutorial mentioned is still available for viewing.
Try using No Wrap - In Head or No wrap - in body in your fiddle:
Working fiddle: http://jsfiddle.net/Q5hd6/
Explanation:
Angular begins compiling the DOM when the DOM is fully loaded. You register your code to run onLoad (onload option in fiddle) => it's too late to register your myApp module because angular begins compiling the DOM and angular sees that there is no module named myApp and throws an exception.
By using No Wrap - In Head, your code looks like this:
<head>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
<script type='text/javascript'>
//Your script.
</script>
</head>
Your script has a chance to run before angular begins compiling the DOM and myApp module is already created when angular starts compiling the DOM.
You have to play with JSFiddle loading option :
set it to "No wrap - in body" instead of "onload"
Working fiddle : http://jsfiddle.net/zQv9n/1/
For people having the same error with a similar code:
$(function(){
var app = angular.module("myApp", []);
app.controller('myController', function(){
});
});
Removing the $(function(){ ... }); solved the error.
For people who find this old posting on the web by searching for the error message, there is another possible cause of the problem.
You could just have a typo in your call to the script, even if you have already done the things described in the other excellent answer. So check to make sure you can used the right spelling in your script tags.
it turns out that I got this error because my requested module is not bundled in the minification prosses due to path misspelling
so make sure that your module exists in minified js file (do search for a word within it to be sure)
I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem
I know its know a 9 year old question, I was having this same error, I tried to put a js file containing AngularJS code in a directory where I also had the following files
I tried several things with no success until I just made a simple test to move outside that directory, isolating the file and that worked, I still don't know the reason. Hope this helps to someone