I have a laravel app, to which I am now trying to add functionality provided by surveyJS.
So the standard laravel (v5.6) Authentication QuickStart puts this into the view/layouts/app.blade.php view
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
And then I want to add in the survey JS scripts, and the JQuery on which it depends. So I do this:
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://surveyjs.azureedge.net/1.0.28/survey.jquery.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
Now it does not seem to matter where I put ...('js/app.js')... in the order of things, it's mere existance causes the surveyJS scripts to not work. Specifically, the survey form is shown, but the button actions no longer work.
EDIT
...('js/app.js')... is required for the laravel header menu dropdowns
jQuery is needed for the surveyJS functionality
The chrome dev console shows no errors.
The chrome dev network shows all three scripts loading in the order shown above, as expected.
So...
- When ...('js/app.js')... is in, then laravel menu's work, surveyJS doesn't.
- When ...('js/app.js')... is removed, then laravel menu's don;t work, but surveyjs does.
EDIT #2
Now further investigation shows that within th BODY tags, this div is the culprit.
<body>
<div id="app">
....
</div>
</body>
If I remove that specifi DIV element, then my javascripts work, although I do a get a one line warning ni my console app.js:36520 [Vue warn]: Cannot find element: #app - of course - I removed it.
app.js by the way seems to be 47,000+ lines of code related to "webpackBootstrap". Installed by default with laravel auth quickstart - not my creation.
I've gone with what I hope is a simple approach, being a simple JQuery and thus avoiding any additional complexity of React/Angular/Vue.
What should I be looking at?
Related
I followed both the documentation, and the solution found here, on SO. But the input field just wouldn't load on localhost. It does however if I just add it into an index.html file.
<script async src="https://cse.google.com/cse.js?cx=123456">
</script>
<div class="gcse-search"></div>
Does anybody know what might cause it?
Things I tried:
Added it to my page as displayed above.
Added the script tag separately into the head tag.
Added the script as a function into the ComponentDidMount
Assuming there is already an existing angular running in the page. I would like to inject/add an isolated angular app into it (which runs in isolation with the existing angular app without interference).
For example, I would like to 1) insert a custom element say <app-root-two></app-root-two> in the page then 2) initialise/bootstrap that app (or vice versa).
How would I go about achieving this?
I know back in AngularJs it is possible because you can retrieve the DOM element and use angular.boostrap(<dom-element>) to initialise it but I don't think Angular has the same manual bootstrapping pattern. It is abstracted and it goes directly to DOM to find the root element, typically <app-root> in the page.
The current angular version I am working with is version 5.2 and Angular CLI 1.6.6. I have tried the .angular-cli.json file for generating multiple app however it targets two separate "index.html" files, that is two app in one project, not necessarily in one page.
You need a different root element on your second AppModule. Then simply import your second app scripts (runtime, styles, etc) but delete window.webpackJsonp first.
For example
<app-one></app-one>
<app-two></app-two>
<script type="text/javascript" src="app-one/runtime.js"></script>
<script type="text/javascript" src="app-one/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-one/polyfills.js"></script>
<script type="text/javascript" src="app-one/styles.js"></script>
<script type="text/javascript" src="app-one/vendor.js"></script>
<script type="text/javascript" src="app-one/main.js"></script>
<script>delete window.webpackJsonp</script>
<script type="text/javascript" src="app-two/runtime.js"></script>
<script type="text/javascript" src="app-two/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-two/polyfills.js"></script>
<script type="text/javascript" src="app-two/styles.js"></script>
<script type="text/javascript" src="app-two/vendor.js"></script>
<script type="text/javascript" src="app-two/main.js"></script>
Though - to date - this works, the framework is clearly not designed for this. More complex apps with further chunking may have issues with the app's runtime that you're essentially changing when deleting webackJsonp object.
Polyfills that go to the global prototypes you may be able to skip reimporting.
Take a look at overall-structural-guidelines
You can simply load one app but orchestrate ( lazy load ) many different modules that would behave as Apps. Each sub major module would have all the modules, services, components etc that it needs and it would be isolated.
Upon looking into the source code, I had to do a bit of override. AngularJs does two things automatically: 1) bootstrap any "ng-app" 2) add a tag. To prevent any conflict. I commented both bits out. Instead I took the content of tag and placed it in my scss file and bootstrap my custom element manually
The other thing is Angularjs is loaded within the context of chrome extension content script therefore any window global defined directly in the content script will not bleed to the user page.
On top of that, I did use shadow dom to further isolate the application so that no css/js thing bleed in/out. As long as I don't modify any common aspects of the page I should be fine, e.g. location. Any global events binding I need to add/remove based on the lifecycle. The end result would look something like this:
<custom-element>
#shadow-dom
<!-- stylesheet if any -->
<!-- js script if any -->
<bootstrapped-angular-element>
I'm a new angular2 development and currently facing a rendering issue with my application. I use #angular#2.0.0-rc.1 for my app and router-deprecated#2.0.0-rc1 for my routing, whenever I click on the a link, the static content of the page loads immediately and the binding (dynamic content) happens only when I do some interaction with the mouse like click or hover over a link. I tried various options and still couldn't figure it out.
Any help would be appreciated.
The order in which you include the JS files is important.
This issue happened when I didn't.
<script src="/lib/shim.min.js"></script>
<script src="/lib/system.js"></script>
<script src="/lib/system-polyfills.js"></script>
<script src="/lib/Reflect.js"></script>
<script src="/lib/zone.js"></script>
As mentioned by bryanm, the order of the js files is important and the placement of those script tags also matters. In my environment with angular2.rc.4, the order was
<script src="node_modules/es6-shim/es6-shim.js">
<script src="node_modules/reflect-metadata/Reflect.js">
<script src="node_modules/systemjs/dist/system.src.js">
<script src="node_modules/zone.js/dist/zone.js">
It has to be placed at the end of the body tag just above loading the systemjs config script.
I have the following at the bottom of my HTML:
<script defer="defer" src="http://localhost:8080/bower_components/jquery/dist/jquery.min.js"></script>
<script defer="defer" src="http://localhost:8080/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script defer="defer" src="http://localhost:8080/apps/promotion/active.js">
// "Gulped" angular, ngAnimate, ui.bootstrap, and my angular app; in that order.
</script>
</body>
</html>
At random times, I will get this error when I refresh the page:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=activePromos&p1=Err…20(http%3A%2F%2Flocalhost%3A8080%2Fapps%2Fpromotion%2Factive.js%3A1%3A7124)
Sometimes it will happen for multiple refreshes in a row, and sometimes it will work for multiple refreshes in a row. Nevertheless, there are times when I get the error and it's getting annoying.
What I found out is the following: If I remove the jquery and bootstrap scripts so that I only have the one script (active.js) with the defer attribute, it always work. I am trying to load the scripts after the page is done loading in the specified order.
Should I be doing this a different way (requirejs?)? I assumed using defer and putting the scripts in order would help since I've done it before, but not with AngularJS. I am mainly trying to take advantage of parallel downloads from the browser instead of having one huge JS file, since the page only has 1 image and 2 CSS files.
The angular app will not be able to initialize properly until after all of the required JavaScript files are loaded.
Since you are deferring the load of those files, you will need to wait until all of the files are loaded, and then manually initialize the app using AngularJS's bootstrap function.
If you have done this topic before please add your solution.
Here is what i am trying to do:
I used this solution https://github.com/chrismorata/Responsive-View-Full-Site
but it requires jQuery 1.7+, however chameleon theme includes different JQuery. So, I added following code at the end;
<div class="rwd-display-options">
<span id="view-full" class="rwd-display-option">View Full Site</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/rwd-display.js"></script>
</body>
</html>
But this "JQuery.min.js" file causes crash with existing JQuery.
Is there a way to use this "JQuery.min.js" make only work with "rwd-display.js" and dont cause crashes with other part of site.