0

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?

Maxcot
  • 1,513
  • 3
  • 23
  • 51
  • I know what `defer` does, so can you explain why you've chosen to make your own app is needing deferred loading? Does it depend on jquery? If so, how are you ensuring it loads _after_ jquery is loaded? – Mike 'Pomax' Kamermans Jun 25 '18 at 23:11
  • Unfortunately I'm a total noob on javascript, so I don't know what defer does. This `...('js/app.js')...` is done by the default laravel quickstart. It doesn;t need jQuery. – Maxcot Jun 25 '18 at 23:13
  • 1
    defer tells the browser "load this _whenever is convenient for you_" rather than "load this when you see the ` – Mike 'Pomax' Kamermans Jun 25 '18 at 23:17
  • ok, questions answered through edits to original question – Maxcot Jun 25 '18 at 23:32
  • If you don't load your own app, do both work (e.g. can you use the dev tools console to verify they're both loaded and accessible)? Because it sounds like you've now reached the point where you need to start pairing down your own code in order to reach that mcve: https://stackoverflow.com/help/mcve – Mike 'Pomax' Kamermans Jun 25 '18 at 23:37
  • edited the original question. My MCVE example is identified. – Maxcot Jun 26 '18 at 02:45
  • ... you removed the div that deploys the actual app. That is not the culprit. The culprit is *in* your app, so: **what is in your app code**. Start reducing *that*. Stop abbreviating the app.js as if it's somehow unrelated: it is literally the cause of this problem, and you need to edit whatever source code is used to generate it, and reduce that code until your app.js doesn't trigger the problem. – Mike 'Pomax' Kamermans Jun 26 '18 at 04:18
  • I'm not sure I'm following you. when you say _"The culprit is in your app"._ You are referring to app.js, right? I did not create app.js, it's a laravel default. If however, you are referring to my broader laraval application - well, I can't strip it down to more that the HTML root tags, the script references, and that one div element. So, assuming you are trying to point me to app.js, I've got one almighty challenge on my hands, given my lack of experience in javascript, and 48,000 lines of code. – Maxcot Jun 26 '18 at 06:04
  • Do you have a clean Laravel boilerplate? You can try to add SurveyJS scripts to it and check whether it works. If you post a link to a MCVE (https://stackoverflow.com/help/mcve) I'll take a look. – TSV Jun 26 '18 at 13:50
  • Yes, I mean the problem is in the file that `asset('js/app.js')` generates. If that is not your own file, then it's time to go back to the laravel site/documentation and find out how you can temporarily "start over" with a cleaner version. – Mike 'Pomax' Kamermans Jun 26 '18 at 16:25
  • OK, well I've been having a crash course in "Compiling Assets (Laravel Mix)" https://laravel.com/docs/5.4/mix#working-with-scripts and after running `npm run production` the problems seems to have dissappeared.I don't understand this whole webpack compiling thing, but obviously I'm going to have to master it. – Maxcot Jun 27 '18 at 02:09

0 Answers0