Using react-router with the client-side library - I get errors - javascript

I've loaded the client-side library as the author suggests. "If you just want to drop a <script> tag in your page and be done with it, you can use the UMD/global build hosted on cdnjs."
ReactRouter is loaded onto the window object.
To render a Router, Route or Link I will need the ReactClass. But there I am stumped. I am using pure JavaScript so I want to do something like:
var router = React.createElement(ReactRouter.Router, null);
React.render(router, document.getElementById('container'));
But I just get an error message:
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
Does anyone have an example of getting react-router to work with the CDN hosted client side library?
I'm using:
13.0 of React and the JSX inline transpiler and 13.3 of React-Router. (I have the same error whether I do it in JSX or pure JavaScript)

This was resolved for me by following the example in the answer by dionmampo on this ticket: react-router Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
Note the essential change added in my comment to make it work.
This doesn't quite explain my issue but does provide a working example of using React Router with the client side include. It suggests but doesn't prove that the key issue is the loading one: you need to wait till the Window has loaded before trying to run the Router.
Note that the Router, Route and Link are available on window.ReactRouter in this case.

Related

Framework7 js Bundle disables the ajax Function

I am trying to migrate my app from plain HTML to framework 7, everything was going well until I noticed that the ajax requests were not being executed since they resulted in an error
Uncaught TypeError: $.ajax is not a function
at functionName (file.js:73:5)
at functionName (file.js:69:2)
at HTMLFormElement.<anonymous> (file.js:18:2)
I briefly know that the type error could occur mainly if jquery is not present in the project or when the slim version of Jquery is used which wasn't the case for my project
after some time hunting the cause of the issue, I found that whenever the file framework7-bundle.min.js is included ajax would stop working resulting in the above error, and would work if vice versa, is there a way to navigate through this issue?
after some trying to figure out the issue, I found that framework7 comes with its own Dom manipulator and uses the very symbol that jquery uses hence overriding all included jquery functionalities to fix this issue, I did comment on the line from where this Dom Manipulator is initialized.
The Dom Handler can be disabled by removing or commenting on the first line in app.js, this particular line var $ = Dom7;

Unable to load a js framework while the authors demo works without problems

I'm trying to use formio and a 3-rd party framework formio-export but I'm having trouble getting started.
The author provided a sample of the framework on his github page. Demo can be found here.
I've tried to recreate a simple demo using HTML/JS.
I was able to create the form, load a submission on demand, but I'm unable to get the print functionality working. When I press the print button, I get the error:
Uncaught ReferenceError: FormioExport is not defined
at HTMLButtonElement. (:47:21)
at HTMLButtonElement.dispatch (index.js:3)
at HTMLButtonElement.elemData.handle (index.js:3)
A fiddle for your convenience.
I would expect the formio-export to 'just work' once the script tag is added but maybe it requires some additonal configs?
You can't use it in the browser directly. You must use node in order to import the module
import FormioExport from 'formio-export';
and then use
npm run build
to make a browser bundle (as explained in the github page).

CQ5 fails to load and execute ReauireJS module that runs on CQ6

I created a drag able component that what it does, is to require a certain module using RequireJS, and then executing this module. When I try to drag and use this component on CQ5, it fails to load, but on CQ6 it works fine!
edit1: CQ5 refers to localhost:4502/cf#/content/somePage.html url whereas CQ6 refers to
localhost:4502/editor.html/content/somePage.html
edit2: I tried to use more simpler component the depends on jQuery,
Backbone and underscore. It failed to execute because of binding
issue. I am trying to find now where CQ5 client code corrupting it.
Any help with that will be helpful!
One thing I saw, is that if I am adding the forceChannel query param, it loads the component, but fails to load the parsys fields. It also show the following error multiple time in the console:
Uncaught TypeError: Cannot read property 'edit' of undefined
It happens when it try to execute the following expression:
CQ.WCM.edit
Does anyone familiar with that issue? Or maybe show me where specifically might be the problem.
Thanks :)

Getting a Backbone.js fiddle working

I am stuck on a seemingly simple Backbone.js issue and would like to set up a fiddle to iteratively work through the problem. However... I can't seem to get the fiddle to load the scripts properly, or at least I am no using the correct "method".
Here is the link to the Jsfiddle
I've selected the following external sources, and provided each with links to the appropriate cdnjs sites.
However I'm still getting the following errors:
The firs tone deals with the Underscore.js library:
Message: Uncaught TypeError: Cannot read property 'each' of undefined - backbone.js:219
Code: _.each(listenMethods, function(implementation, method)
The second refers to my first Backbone declaration:
Message: Uncaught ReferenceError: Backbone is not defined - (index):47
Code: var QuoteHistory = Backbone.Model.extend(
You should at first load jQuery and Underscore and then the Backbone library. Also note that jQuery UI Bootstrap.js depend on jQuery, so the jQuery library should be loaded before these libraries; however, as you are loading jQuery in the "Frameworks & Extensions" panel you don't have to load it again manually.

Problems installing Dajaxice properly

I have dajaxice installed on my python2.6 dist-packages folder, that seems to work alright with importing the stuff. But it throws all kinds of errors, since the django template tags are not being rendered.
invalid property id [Break on this
error] {% for module in
dajaxice_js_functions %}\n
Makes sense, so I tried putting the js into HTML straight, which solves some of the problems of the templatetags, but gets messed up again, probably since its looking for dajaxice_core_loop.js
invalid property id
[Break on this error] ,\n
I kept on uncommenting JS that throws me errors, but here i stripped it down to an extent that it is not working at all (duh). Because when I recreate the example with the button and hit the button i get:
Dajaxice.MYAPP is undefined
of course, MYAPP is my specific application that holds the ajax.py
I guess I am doing it all wrong, but I can't really tell from the documentation what that might be specifically.
Found that I shoulnd't have configured that Nginx serves my js statically, resolved!
Quick note: on the Django development server I had to place the Dajaxice URL entry before the static media so it could parse the javascript correctly.

Categories