Trying to use cloudinary with requirejs - javascript

I am trying to use cloudinary library using below code, but i keep on getting "TypeError: Cannot read property 'config' of undefined".
main.js
require.config({
shim: {
"jquery": {},
}
});
require(['jquery', 'jquery.ui.widget', 'jquery.iframe-transport', 'jquery.fileupload', 'jquery.cloudinary'], function($) {
$(document).ready(function() {
$.cloudinary.config({
cloud_name: 'sample',
api_key: '874837483274837'
})
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script data-main="js/main.js" type="text/javascript" src="js/require.js"></script>
</html>

Cloudinary widget all.js can't be loaded straight using require.js (even using shim). We can only catch a moment of time when the script is loaded and get the widget object from window.
// Require.js doesn't load the Cloudinary script if it specified in a `required` call but does load if in a `define`
define('cloudinary', ['https://widget.cloudinary.com/global/all.js'], function () {
return window.cloudinary;
});
require(['cloudinary'], function (cloudinary) {
console.log(cloudinary);
});

Seems like they had some bug with the library, they fixed it with the version 2.0.4.

Related

Access a Function From Another File

I have two file:
html2canvas.js
function html2canvas(){
}
myid_print.js
(function ($) {
$(document).ready(function() {
//I want to call html2canvas function here
html2canvas();
});
})(jQuery);
I already included both files in my html but after running the code above, the console shows an error saying:
Uncaught ReferenceError: html2canvas is not defined
How will I call the function from inside my second file?
Try implementing your Client side code as :
<head>
....
<script src="html2canvas.js" type="text/javascript"></script>
<script src="myid_print.js" type="text/javascript"></script>
....
<head>
<body>
...
<script type="text/javascript">
function_from_myid_print();
</script>
...
</body>
Inside which you can call html2canvas();
This will surely help you.
For more details refer links:
https://stackoverflow.com/a/3809896/4763053 and https://stackoverflow.com/a/25963012/4763053
Try put your JS script at the bottom of your HTML page.

RequireJS, jquery still undefined

I know this has already been discussed, but after searching for a while I can't figure out why my small setup does not load jquery correctly with requireJS.
I'm running a small sample html page from 'file://' and try to load 2 modules with a call to require:
jquery
a custom module I wrote
If my custom module loads correctly (i can use it with its alias in the require call, jquery is always undefined)
I tried to setup paths in require.config, as well as shim (exporting '$' or 'jQuery') but it does not work.
The only way i can get jquery to correctly load, is removing all paths definition and naming the jquery file on my filesystem 'jquery.js'
Here is my config:
main.js:
require.config({
baseUrl: 'scripts',
paths: {
jquery: 'jquery-2.1.3.min' //does not work
//jquery: 'http://code.jquery.com/jquery-2.1.3.min.js' //does not work either
}
});
console.log( "main.js is loaded" ); //this is correctly ouputed to the console
test.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--
... page content ...
-->
<!-- main.js is loaded from data-main -->
<script data-main="scripts/main" src="scripts/require.js"></script>
<script type='text/javascript'>
require(
['jquery','custom'],
function($, Custom){
console.info('$:');
console.info($); //outputs undefined
console.info('Custom:');
console.info(Custom); //outputs my custom object
});
</script>
</body>
</html>
Once again, it works if I remove all paths definition for jquery, and simply name my jquery js file 'jquery.js' but this is sloppy.
Can somebody points me on the right way to go ?
The problem is that you load your RequireJS configuration, which is in main, through data-main. The data-main attribute merely tells RequireJS to load the module listed there but the loading is still asynchronous, so main may load after RequireJS tries to load jQuery. When this happens, RequireJS fails to find jQuery and $ is undefined. (Incidentally, I'd suggest setting enforceDefine to true in your RequireJS configuration so that you get an error message telling you when a module has not loaded. That's a better clue than having an undefined symbol.)
One solution would be to move your configuration outside of main. So you remove it from main and add it to a script element in front of the one loading RequireJS:
<script>
// RequireJS will use the value of `require` as its configuration.
require = {
baseUrl: 'scripts',
paths: {
jquery: 'jquery-2.1.3.min'
},
enforceDefine: true
};
</script>
<script src="scripts/require.js"></script>
Or you can nest require calls to force main to load before any other module:
require(['main'], function () {
require(['jquery','custom'], ...
});

why doesn't this simple require.js setup work?

I'm trying to learn how to use require.js to load my scripts, but something is wrong with my setup/understanding. I can't see what is wrong. It is something simple with the setup that I'm missing.
When I load this index.html page in chrome, none of the script require.js action is working.
***index.html
<html>
<head>
<title>My Sample Project</title>
</head>
<body>
<h1 class="h1">sample project header</h1>
<script data-main="main" src="require.js"></script>
</body>
</html>
***main.js
(function() {
requirejs.config({
//By default load any module IDs from baseUrl
baseUrl: '',
// paths config is relative to the baseUrl, and
// never includes a ".js" extension
paths: {
'small-blue-mod': './a-script'
}
});
// Start the main app logic.
requirejs(['small-blue-mod'], function (sbm) {
alert(sbm.color);
});
})();
***small-blue-mod.js
define({
color: "blue",
size: "small"
});
*File System looks like...
index.html
main.js
require.js
FOLDER called "a-script"
a-script folder contains small-blue-mod.js
The path small-blue-mod refers to the a-script folder, either require it like small-blue-mod/small-blue-mod or recommended change your path to this:
paths: {
'small-blue-mod': './a-script/small-blue-mod'
}

Require.js Uncaught TypeError: undefined is not a function

I just started learning Require.js
the file system is like :
This is my index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="lib/require/require.min.js" data-main="lib/main"></script>
</head>
<body>
<span id="content"></span>
</body>
</html>
Now, this I knows that the 1st file that loaded on to the DOM is require.js then after that it loads lib/main.js
Now the main.js is
require(['jquery'],function($){
//this works since both **main.js** and **jquery.js** are in same folder
$("#content").html("jquery am loaded");
});
Now here is the problem if I keep jquery.js in the same folder as that in main.js the code works fine, but if I change the path to jquery/jquery.js and change the main.js as
require(['jquery/jquery'],function($){
//this thing shows 'Uncaught TypeError: undefined is not a function'
$("#content").html("jquery am loaded");
});
I understood the problem is that it is not loading the jquery.js if it is inside any other folder other that main.js is, but why, please shed some light and how that can be achieved.
To use RequireJS and jQuery, you should either use the combined RequireJS/jQuery file, available at:
http://requirejs.org/docs/jquery.html
Or use a path.
http://requirejs.org/docs/api.html#config-paths
require.config({
paths: {
"jquery": 'http://code.jquery.com/jquery-1.9.1'
}
});
require(["jquery"], function ($) {
console.log($.fn.jquery);
});

phonegap plugin: Torch undefined, even though js file is loaded on android

I get the following error when trying to use the TorchPluging:
file:///android_asset/www/web/index.html: Line 12 : Uncaught TypeError: Cannot read property 'Torch' of undefined
I added the plugin to config.xml (I think it has changed from plugins.xml to config.xml in the newer phonegap versions?)
The following is my entire index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Flashlight</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Torch.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function turnTorchOn(){
window.plugins.Torch.turnOn(
function() { console.log( "turnOn" ) } // success
, function() { console.log( "error" ) }); // error
}
</script>
</head>
<body>
<button id="turnOnButton" name="turnOnButton" > Turn on Flashlight</button>
<script>
$('#turnOnButton').click(function(){
alert("will turn on now");
turnTorchOn();
alert("called turnOn done");
});
</script>
</body>
</html>
It actually isn't that hard to update an older style plugin to one that will work in 2.0.0+. You would need to:
Modify the JS to the new cordova.define() style of declaring plugins.
Update the package reference to org.apache.cordova.* from com.phonegap.* in the Java code.
Make sure you are not calling any deprecated API's.
I've written a couple of blog posts that cover the topic. If you do follow them an update the Torch plugin you should submit a pull request so everyone can enjoy your work.
2.0.0 Plugin - http://simonmacdonald.blogspot.ca/2012/08/so-you-wanna-write-phonegap-200-android.html
Deprecated API's - http://simonmacdonald.blogspot.ca/2012/07/phonegap-android-plugins-sometimes-we.html

Categories

Resources