Getting an iFrameResize not defined error in AngularJS - iframe-resizer

I am trying to use the code at: https://github.com/davidjbradshaw/iframe-resizer
In my index.html page I have included (and it does load):
<script src="./Scripts/iframeResizer.js"></script>
In my iframe content page I have included:
<script src="iframeResizer.contentWindow.min.js"></script>
My AngularJS controller is:
ajs_module.controller("MyController",
['$scope', '$window', function ($scope, $window) {
$scope.iframeLoadedCallBack = function () {
console.log('Resizing iFrame...');
iFrameResize({ log: true }); // causes: Uncaught ReferenceError: iFrameResize is not defined
}
}])
When the host page loads and tries to resize the iFrame, I get the error:
Uncaught ReferenceError: iFrameResize is not defined
Thanks for any help.

Have you tried doing window.iFrameResize? as it looks like a scoping issue.
Failing that load it in with require js

Angular uses JqLite instead of the normal jquery, probably you need to add jquery before loading the iframeResizer.js script
if you cant access a global function it should be because is not initializated
(check other dependendies but i didnt find anything else in the iframeResize page)

Related

JQuery autocomplete suddenly stopped working

The autocomplete was working well for months, suddenly it stopped recognizing 'autocomplete' method.
This is the error I'm getting:
JavaScript runtime error: Object doesn't support property or method 'autocomplete'
Default.aspx
Reference to the local js file was working fine.
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
Now that it stopped working I tried the online reference, with no avail.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Javascript code:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
];
$("#MyTextBox").autocomplete({
source: availableTags,
minLength: 0,
select: function (event, ui) {
$get("MyTextBox").value = ui.item.value;
}
});
Could it be a race condition? Where is the autocomplete initialization being done? Is it possible that it is now getting run before jQuery-UI is loaded?
There was a bug in one of my js files which was preventing the jquery from loading, my bad.
I removed the error line, and every works fine now.

using EJS with requirejs

I had a problem include ejs into requirejs. I put <script data-main="js/app" src="js/require.js"></script> in my and inside of body create EJS object.
In my app.js,
require.config({
paths: {
//library
jquery: 'lib/jquery-1.11.1.min',
jquerymobile: "lib/jquery.mobile-1.4.2.min",
text: 'text',
ejs: 'ejs_0.9_alpha_1_production'
},
shim: {
"ejs": {
exports: 'ejs'
}
}
});
require(['jquery', 'jquerymobile','text','ejs'], function ($, mobile) {
console.log('jQuery version:', $.fn.jquery); // 1.9.0
});
when it is running, it throws EJS is not defined error. However, if I include
<script type="text/javascript" src="js/ejs_0.9_alpha_1_production.js"></script>
in the head, everything goes well.
Regards
Hammer
Lately I just get through similar trouble using ejs from the browser. I post the answer as it could save somebody's time.
I suggest you double check your ejs library is indeed coming from https://github.com/visionmedia/ejs. There is quite some tuned version of ejs around right now because it is becoming very popular. Unfortunatly most of thoses versions target specific needs and return different object to the window (eg. EJS instead of ejs) or don't even return anything usefull for requirejs.
=> In both case this would expalin why your shim exports return undefined.
Once you get it to load properly, let me also spot on an awesome requirejs-ejs plugin at https://github.com/whitcomb/requirejs-ejs . It could help you preload and render your template in a nice requirejs way.

Chrome Extension: Using addEventListener()

In the tutorial for migrating a Google Chrome Extension to Manifest Version 2, I am directed to Remove inline event handlers (like onclick, etc) from the HTML code, move them into an external JS file and use addEventListener() instead.
OK, I currently have a background.html page that looks like this…
<html>
<script type="text/javascript">
// Lots of script code here, snipped
…
</script>
<body onload="checkInMyNPAPIPlugin('pluginId');">
<object type="application/x-mynpapiplugin" id="pluginId">
</body>
</html>
Following another directive, I've moved that Lots of script code into a separate .js file, and following this directive, I need to remove the onload= from the body tag, and instead cal addEventListener() in my script code. I've tried several approaches, but am apparently guessing wrong. What will that code look like? In particular, upon what object do I invoke addEventListener()?
Thanks!
I normally use this for body onload event...
document.addEventListener('DOMContentLoaded', function () {
// My code here.. ( Your code here )
});
For somethings it is working.. but really, I think we should use..
window.addEventListener('load', function () {
document.getElementById("#Our_DOM_Element").addEventListener('change - or - click..', function(){
// code..
});
});

Angular Js Unexpected Token error Dynamic Routes

I'm getting getting several "unexpected token <" errors when I try to create a dynamic route.
Normal routes work fine. So if I set the following route:
.when('/user',{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
The request goes to the server and gets caught by my express catch all route handler, then angular kicks in and requests express' api route, api/user, binds data, controller and template and I see a nice page. Everything works fine. No errors.
If I try to create a dynamic route or a route with more depth, I get the unexpected token error, when I try to request that route:
.when('/user/:id',{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
For example, when I request /user/3, i get the error, and it the addUserCtrl is never called. Any ideas what could be causing this.
.when('/user/show,{
templateUrl: 'views/user/new',
controller: "addUserCtrl"
})
requesting /user/show will also throw the error. In the console the error shows up next to the request for all of angular files (angular.js, App.js, services.js, controllers.js, filters.js, directives.js) that I load in the body of my index.html.
I've noticed that this problem happens whenever I add more than one slash to the route. If I try /user/show, I can see the following requests:
/user/show
syntax errors for the below:
/user/js/App.js
/user/js/lib/angular/angular.js
/user/js/filters.js
/user/js/controllers.js'
/user/js/services.js
/user/js/directives.js
If I try /abc/def, I will get the following request:
/abc/def
syntax errors for the below:
/abc/js/App.js
/abc/js/lib/angular/angular.js
/abc/js/filters.js
/abc/js/controllers.js'
/abc/js/services.js
/abc/js/directives.js
I had the same issue and just as atentaten describes the problem was caused by relative paths to js-files. However, it has nothing to do with Express. It can just as well be caused by relative include paths from script tags in the head of a html file. So, to clarify, I changed my HTML from:
<script src="bower_components/angular/angular.js"></script>
to:
<script src="/bower_components/angular/angular.js"></script>
Apparently this is not really an angular issue, but an express issue.
The problem was that the beginning slashes were missing from my angular js includes in my index.jade:
script(src='js/lib/angular/angular.js')
script(src='js/App.js')
script(src='js/services.js')
script(src='js/controllers.js')
script(src='js/filters.js')
script(src='js/directives.js')
I changed them to this:
script(src='/js/lib/angular/angular.js')
script(src='/js/App.js')
script(src='/js/services.js')
script(src='/js/controllers.js')
script(src='/js/filters.js')
script(src='/js/directives.js')
And the errors went away. Although the js loaded without the starting slash, it was still causing a problem with express, creating the syntax error, which probably broke angular, but I'm not sure exactly why.
The templateUrl needs to be absolute else Express will choke if there is more than one slash/level of depth in the url:
.when('/user/show,{
templateUrl: '/views/user/new', /* add slash */
controller: "addUserCtrl"
})
This happens for ui-router dynamic route in angularJS application. I have the same error. solved by changing the path
<script src="app/components/services/campaign.services.js"></script>
to
<script src="/app/components/services/campaign.services.js"></script>
But in my case index.html file path is generated by gulp task gulp-inject so i changes the config of gulp-inject like
inject: { addRootSlash: true }
and it works for me :)

Railway.js + Jade crashes when a route to '/client' is defined

I get this weird error when I add a route '/client' in Railway.js:
500 ReferenceError: jade is not defined
I get this for any valid route in my app, not only '/client'. This line seems to be added to the top of my Jade compiled templates, and is what causes the exception:
var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
It is not present in the compiled templates unless I define a route do '/client'.
'/client/:id?', '/clients', everything else works, only '/client'.
Anyone has a clue?
I had this exact same error when I was working on an ExpressJS app using jade templates. I figured out it was only happening on pages where I passed a local variable named client. E.g.
res.render('admin/project_new', {
title: 'Edit Project',
message: req.flash(),
client: someClient
});
I think client is a reserved word when rendering jade files (or maybe something else, I'm still kinda new to Node.js). I was able to fix it by changing it to this:
res.render('admin/project_new', {
title: 'Edit Project',
message: req.flash(),
theClient: someClient
});

Resources