Currently using the Parse JavaScript SDK for a web app, but I'm also new to Backbone, and since this particular problem is in functionality that Parse copied over from Backbone, I'm not sure exactly where I'm making my mistake.
I have index.html, with this basic structure & script template tag (to be used by _underscore):
<div id="my-app">
</div>
<script type="text/template" id="album-header-template">
<div id="some-id">
Some Content
</div>
</script>
At the end of <body>, the following script tags, to take care of Parse dependencies, load Parse, & use my own JS file:
<script src="libraries/node_modules/jquery/dist/jquery.min.js"></script>
<script src="libraries/node_modules/underscore/underscore-min.js"></script>
<script src="libraries/node_modules/parse/dist/parse-latest.min.js"></script>
<script src="app/ParseApp.js"></script>
Then in ParseApp.js, where I am trying to get off the ground by creating simple objects and views, I have the following:
$(function () {
var Album = Parse.Object.extend("Album",{
// Default attributes for the album
defaults: {
name: "Album Title"
},
// Ensure that each album created has a title
initialize: function() {
if (!this.get("name")) {
this.set({"name": this.defaults.content});
}
},
});
var HomeView = Parse.View.extend({
el: $("#my-app"),
initialize: function() {
console.log("new instance of HomeView");
this.render();
},
render: function() {
this.$el.html(_.template($("#album-header-template").html()));
}
});
new HomeView;
});
When I run index.html in the browser, I get the following error in console: Uncaught TypeError: Cannot read property 'extend' of undefined (occurring at the var Home View = Parse.View.extend line).
Originally, I had thought this might be because Parse wasn't initiated in time for ParseApp.js to use it, based on my scripts loading. However, I ran the recommended "Test the SDK" script from Parse, and it's indeed initialized (in addition, adding an object with var Album works fine). So I'm really stuck on what's causing either HomeView or Parse.View to be "undefined".
Likely a straightforward answer that I'm overlooking, but any help would be greatly appreciated, and I could provide full files if need be.
Not a very satisfying answer, but thanks to the help from #Yura & #Daniel Blank, discovered that the error was resulting because the most recent versions of the Parse SDK (everything after 1.6.0) no longer include full Backbone functionality. This includes the version I had been using locally from npm.
The best explanation of the Parse SDK direction is in the link given above, and there seem to be three options, for those hoping to continue using Parse and/or Backbone:
Use an old version (1.5.0 being the most recent that includes Backbone functionality) in order to maintain your Backbone functions, such as Parse.Collection or Parse.Router.
Try going Parse SDK-agnostic, while continuing to use Backbone. Can use the basic Parse REST API, or try one of the GitHub projects attempting to do that linking for you.
Give up on Backbone going forward, and use Parse with VanillaJS, or perhaps switch over to React (which is obviously the direction Facebook would want Parse to head)
I'm too inexperienced to recommend one of the three, although #1 seems the easiest, while #3 seems far and away the most maintainable. Still trying to make my own decision, but that's outside the scope of my original question. Thanks for the help, everyone.
2 things jump out at me:
I don't see where you initialize Parse... typically that
produces a different error, but still might be an issue
You are referencing your own local library for Parse... maybe try targeting the officially deployed version.
script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"
Related
I'm not sure I'm even asking the right question here, sorry, but I think the two general ones are:
In what way do you need to modify a node.js package using require etc to be used as a plain embedded script/library in HTML?
How do you call a class constructor (?) in JS as a function to validate a form field?
I'm trying to use this small JS library NoSwearingPlease (which is an npm package) in an environment with no node or build system – so I'm just trying to call it like you would jQuery or something with a script & src in the HTML, and then utilise it with a small inline script.
I can see a couple of things are required to get this working:
the JSON file needs to be called in a different way (not using require etc)
the checker variable needs to be rewritten, again without require
I attempted using jQuery getJSON but I just don't understand the class & scope bits of the library enough to use it I think:
var noswearlist = $.getJSON( "./noswearing-swears.json" );
function() {
console.log( "got swear list from inline script" );
})
.fail(function() {
console.log( "failed to get swear list" );
})
noswearlist.done(function() {
console.log( "done callback as child of noswearlist variable" );
var checker = new NoSwearing(noswearlist);
console.log(checker);
});
Please halp. Thanks!
No need to modify, when outside of node the class is just appended to window (global):
fetch("https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/swears.json").then(response => {
return response.json();
}).then(data => {
var noSwearing = new NoSwearing(data);
console.log(noSwearing.check("squarehead"));
});
<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/index.js"></script>
In the future, you can answer this type of question on your own by looking through the source code and looking up things you don't understand. That being said, here's what I was able to gather doing that myself.
For your first question, if you have no build tools you can't use require, you have to hope your NPM package supports adding the class to the window or has a UMD export (which in this case, it does). If so, you can download the source code or use a CDN like JSDelivr and add a <script> tag to link it.
<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/index.js"></script>
I'm having a hard time deciphering your script (it has a few syntax errors as far as I can tell), so here's what you do if you have a variable ns containing the JSON and the string str that you need to check:
var checker = new NoSwearing(ns);
checker.check(str);
As an aside, you should really use build tools to optimize your bundle size and make using packages a lot easier. And consider dropping jQuery for document.querySelector, fetch/XMLHttpRequest, and other modern JavaScript APIs.
I'm sure this is going to be so trivial, but have had a number of tries and being the last thing I need to configure before I can deploy the private test is driving me mad.
This question extends off this question, my config.xml is established in the same way, this part is a no brainer. I have also got in my <head>:
<script type='text/javascript' src="./js/facebookConnectPlugin.js"></script>
I have tried both ./facebookConnectPlugin.js as well as ./js/facebookConnectPlugin.js, so part (a) of my question is, how can I determine what is the correct relative path without seeing the directory? I can't find its install location to verify.
Next part of the question follows the advice I received from somewhere, that instead of using the usual device ready event, to use the window.onload:
window.onload = onDeviceReady;
...
function onDeviceReady() {
onDeviceReadyFacebook();
...
}
...
function onDeviceReadyFacebook() {
// ?
}
window.fbAsyncInit = function () {
if (!window.cordova) {
// Initialize - only executed when testing in the browser.
facebookConnectPlugin.browserInit(<APP_ID>);
}
}
I have tried the window.fbAsyncInit both inside and out of the call I make for onDeviceReadyFacebook, trying to follow the advice from different forums...
So finally the error occurs within the call I have made to login:
function fb_login(){
var login_data = {};
client.cmd = "login";
login_data.userid = user_id;
login_data.cmd = "login";
facebookConnectPlugin.login([
'user_about_me',
'email',
'user_status',
'user_posts',
'user_photos',
'user_videos',
'user_friends'
],function(response) {
// success
...
Saying that the facebookConnectPlugin is undefined. After sligthly modifying different areas and everything else about the app is working, I would generally say that I'm not specifying the right source url for the primary JS file...
One last question on this topic: if I have correctly put in my Content Security Policy, is there any reason I need to use a plugin when I can just use the Facebook all.js they provide as is used in the browser version? I have got my key hash and other properties defined to add the android platform, I would have thought I can specify those attributes to match the platform...
EDIT: The plugin branch in question is located here.
UPDATE 2:
#JesseMonroy650:
Yes; a few things are definitely becoming clearer, but I did switch to cordova-plugin-facebookconnect-orlando, but adding that made the build crash, the log file result saying the message "...-FacebookLib/ant-build does not exist". I found the exact problem happening here, so I've now tried the same npm plugin and preference settings that was used there. It now builds, but I have the same problem (facebookConnectPlugin is undefined).
However, I checked the repo again this morning, specifically the path:
/platforms/android/assets/www/index.html
To see what I am crucially missing :
<div id="fb-root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/facebookConnectPlugin.js">/script>
So hopefully if I copy off this example, I should be alright now. Will be trying again tonight.
Any help is always very appreciated!
The code added to index.html has finally resolved the issue. I tidied up the actual call to the login as demonstrated, but ultimately the variable wasn't found because I hadn't done the script include. Confusion over the scripts to include and what path they would be.
BIG relief!!! Props to you #JesseMonroy650 for steering me in the right direction of a deprecated plugin.
I have a interesting concept I was working on and looking over, through various stack questions on auto loading JavaScript. I dint want to use a third party tool, aside form jquery, so I thought I would role my own. The concept I have is:
var scripts = {
'name' : 'path/to/script_dir/' // Load all scripts in this file.
}
requireScripts(scripts); // Requires all scripts
// Call your classes, methods, objects and so on ....
The requireScript() function would work something like:
function requireScript(hash){
$.each(hash, function(key, value)){
$.ajax({
url: value,
dataType: "script",
async: false,
error: function () {
throw new Error("Could not load script " + script);
}
});
});
}
Note: The above is just a concept, I don't think it will work.
The above would let you load SPECIFIC scripts. so in essence your hash key value would be 'name' : 'path/to/specific/script'. The issue this posses is that your hash would get rather large ....
The other issue I ran into is what if I simplified this to "php pear naming standard" so, as the trend seems to be - we would create a class, and it would be named after its location:
var some_folder_name_class = function(){}
Would be translated by the autoloader as: some/folder/name/class.js and then loaded that way.
To wrap up and get to my point there are two ways of loading javascript file I am looking at, via rolling my own "require" method. One is loading a directory of javascript files via the hash idea implemented above. (the provided code sample of how this hash would be walked through would have to be changed and fixed....I dont think it works to even load a single file)
OR
to have you just do:
new some_class_name() and have a global function listen for the new word, go find the file your trying to call based on the name of the class and load it, this you never have to worry - as long as you follow "pear naming standards" in both class and folder structure your js file will be loaded.
Can either approach be done? or am I dreaming to big?
I see a lot of frameworks do a bunch of require('/path/to/script') and if I could role my own autoloader to just allow me to either load a directory of js files or even have it where it listens for new before a class instantiation then I could make my life SO MUCH easier.
Have you consider using requirejs and probably Lazy loading.
http://www.joezimjs.com/javascript/lazy-loading-javascript-with-requirejs/
Here is sample version:
You can download here.
The sample is based on this folder structure :
public
index.html
scripts
app.js
lib
** jquery-1.10.2.js
** require.js
3 . From Code:
html
`<!DOCTYPE html><html>
<head><title>Sample Test</title>`
<script src="scripts/lib/require.js"></script> <!-- downloaded from link provide above-->
<script src="scripts/app.js"></script></head>
`<body><h1>My Sample Project</h1><div id="someDiv"></div></body></html>`
application configuration app.js
requirejs.config({
baseUrl: 'scripts',
paths: {
app: 'app',
jquery: 'lib/jquery-1.10.2' //your libraries/modules definitions
}
});
// Start the main app logic. loading jquery module
require(['jquery'], function ($) {
$(document).on('ready',function(){
$('#someDiv').html('Hello World');
});
});
jQuery-only option
If you are looking for a jQuery-only solution, have a look at jQuery.getScript(). It would be a great candidate for handling the script loading portion of your problem. You could then write a very small wrapper around it to load all the scripts—something like you wrote above:
var loadScripts = function(scripts) {
$.each(scripts, function(name, path) {
jQuery.getScript("/root/path/" + path + ".js");
})
}
If you are interested in more information on this approach, read this article by David Walsh.
Other great libraries
I strongly recommend taking a look at the current batch of script-loading libraries. I think that you will pleasantly surprised by what is out there. Plus, they come with the benefit of great community support and documentation. RequireJS seems to be the front runner but David Walsh has great articles on curl.js and LABjs.
I've noticed that RequireJS creates script tags in the tag as it loads modules.
Is there anyway to configure RequireJS to "tag" those elements w/ a class or an attribute of some kind that I could later target w/ jQuery later on?
e.g.:
var $requireJsScripts = $('script.require-script');
--UPDATE--
Ok.. I think I can get by on this little workaround for now. Thanks to this answer for the breadcrumb on require.s.contexts._.defined. I'd still like to hear if anyone knows of a way to configure RequireJS to do something similar to what was laid out in the original question...
var loadedRjsModules = Object.keys(require.s.contexts._.defined);
var $scripts = $('script');
$scripts.each(function () {
if ($(this).data('requiremodule') && $.inArray($(this).data('requiremodule'), loadedRjsModules)) {
console.log(this);
}
});
Looking at the source code, I don't see how RequireJS would allow adding anything custom to the script nodes at creation. The routine that creates them has no provision for it. The code that fleshes them out upon creation does not support it either.
There's an onResourceLoad hook considered part of the internal API. It could be used with the code you've put in your question instead of relying on require.s.contexts._.defined, which as far as I know is fully private and subject to change without notice.
I have tried to include a FireBreath plugin object in an AngularJS view, however when I try to render the view I get this error:
TypeError: Cannot read property 'nodeName' of undefined
I am able to successfully include the object in the view with $compile like this:
$("body").append($compile('<object id="plugin" type="application/x-firebreathplugin" width="0" height="0></object>')($scope));
However, after including the object like this I cannot get my plugin to fire an event in the JS.
Doing something like this:
plugin = document.getElementById('plugin');
console.log(plugin);
Returns
TypeError
In the Chrome console. But I can still do:
plugin.callFunction();
And have a FireBreath method execute. The issue is when I try to get an event to fire in the JS. No matter what I try, I cannot get the event to fire. So this code will never execute:
var addEvent = function(obj, name, func) {
obj.addEventListener(name, func, false);
}
addEvent(document.getElementById('plugin'), 'firebreathEvent', function(data) {
console.log('data ' + data);
});
var plugin = document.getElementById('plugin');
plugin.functionThatTriggersFireBreathEvent();
Does anybody know if it has something to do with accessing the object after calling $compile? I noticed that in regular HTML (before using AngularJS) logging the plugin in the console returns this :
<JSAPI-Auto Javascript Object>
So I am thinking that whatever I am getting with document.getElementById after using $compile is not the same.
What would be easier is is if I could just include the <object> tag in the view.html file and have it display in <body class='ng-view'> but I get the top TypeError, so if anyone has any ideas for that, that would be preferred.
Any help is appreciated. Thanks.
If anyone is interested, because I could not get the event to fire, I followed along to this link:
http://colonelpanic.net/2010/12/firebreath-tips-asynchronous-javascript-calls/
(which I think is your blog #taxilian) to get the data back to the JS.
Plugin Code: Great example in the link.
JS Code:
//attach FireBreath Object to AngularJS View
$("body").append($compile('<object id="plugin" type="application/x-firebreathplugin" width="1" height="1"><param name="onload" value="pluginLoaded"/></object>')($scope));
var callback = function(data) {
//data is an object
console.log(data.resultFromFireBreath);
}
plugin = document.getElementById("plugin");
plugin.getData(callback);
This will have to work for now until someone can figure out how to attach an event to the plugin object after $compile.
I ran into the same problem and was able to make the problem go away by creating a read-only nodeName property in my plugin object. I asked about this in a firebreath forum post and taxilian suggested adding this to JSAPIAuto.cpp, which also worked, so I submitted a pull request with the change.
I once spent about 6 hours trying to make FireBreath plugins work with jquery; it was really educational, but ultimately I determined that it wasn't worth the work.
Long story short is that it's not worth it; particularly since even if you could make it work, it would break on IE9 where FireBreath doesn't support addEventListener (IE never gives it the even info, so it's a little hard to support) and you would need to use attachEvent anyway.