Why Javascript does not work in lieview?

Questions / Help
, ,
1

Good morning everybody, in my previous post, I’ve mentionned that I have one small project for learn phoenix framework,

And in this application, I’ve used phoenix liveview and some javascript code
The problem is like this, when i reload the page, the javascript work but when I try to redirect to another page, the javascript doesn’t work at all, I dont understand why it’s do this

This is the link for the project

Thanks a lot for your reply, have a nice day

Thanks! :smiley:

1 Like
2

If you want other people to debug your program, you may want to make your problem interesting or challenging, or abstract your problem down to a generic one, so the other people can get something in return.

1 Like
3

I have a bunch of questions.

Where? I don’t see anything beyond the standard in assets/js/app.js

Which page?

Redirect to which page? This can be important because of things like live_session boundaries.

Expand on how it “doesn’t work” - do you see any errors in the browser console? If none, try adding some strategically-placed console.logs to verify that the JS is getting loaded on that page.

3 Likes
4

A few things.

Try to follow the conventions to put your code in the right places. While you may break conventions, it’s better to follow them unless you have a really good reason. Putting your liveviews inside a template folder won’t help other people trying to help you.
Do Not put your scripts in the root template’s head, put them in app.js instead. Do not use jquery as a beginner, and most certainly do not use any Ajax in a LiveView.

Now for more practical advice. If you’re dead set on saving the cart in the session cookie, just add a button ‘save cart’ Form bindings — Phoenix LiveView v0.17.11 (there is much more to it, but that will get you somewhere).
Try to port your js code to Phoenix.LiveView.JS — Phoenix LiveView v0.17.11

Also, when writing in this forum, explain what you wanna do -there are other ways to build a shopping cart.

-------- French
Quelques petites choses:
Essaye de suivre les conventions de nommage des fichiers. Sinon c’est difficile pour les autres d’examiner ton code.
N’ecris pas, JAMAIS, de code js dans la balise script du header, utilise app.js. Et surtout pas d’ajax dans les LiveView. Essaye de ne pas utiliser jQuery.

Si tu veux vraiment sauver tes données de panier dans la session, rajoute un bouton sauver le panier pour plus tard (voir le lien plus haut).

Essaye de porter ton code js en utilisant les fonctionnalités du module JS (tout ce que tu as fait peut marcher).

De maniere general, sur le forum explique ce que tu veux obtenir comme résultat plutôt que demander des petites choses qui ne seront pas nécessairement comprises. En l’occurrence demande comment implementer un shopping cart. Tu auras plus de réponses

@derek-zhou : While I fully agree with you in general, sometimes, some people have difficulties speaking in English and further could be beginners who don’t really know what to ask.
I believe that the OP falls in that category, and I believe that we should welcome them. I’m not faulting you, a decade ago I was in dev mailing list for a very good software that’s still great, and I ‘dunked’ on a lost user there (not saying it’s what you did) only to have my ass handed to me, because many things are not obvious to beginners/people who don’t really speak English. Since then I ignore questions that come from a bad faith place (and there are a few in this forum) or I try to help. Again I believe OP’s intentions are good, and perhaps they’re misunderstood

4 Likes
5

I’ve created some file .js and I put the js code inside, after this, I’ve import this inside the app.js but some script doen’t work.
After this I’ve delete the othe script file and I’ve used Hooks amd put the js script inside the hooks and it’s resolve the problem,

Before I’ve used Hooks, the javascript run one time, and when I live_render to another page, this was imposible to use javascript event like the search button

I’ve any error in the console but I think that It was caused because the script need to reload before to work or to be mounted with the live_page

6

I’ve solve the problem with adding and mounting the script code inside the app.js with Hooks

2 Likes