Phoenix on layout false not loading semantic ui js

Phoenix Forum Questions / Help
,
1

Hi guys, i again.

I am building a new app, with phoenix and semantic-ui. For a modal popup, i loaded a form on ajax with layout false in controller, modal is opening fine with the expected content but the semantic-ui js functions are not working. how to resolve this. do i need to load semantic js in webpack.config.js? I use minified version and i have placed semantic-ui.js in vendor folder.

Thanks guys.

2

Easiest would be to put your semantic-ui.js file inside /assets/static/* folder. Then Webpack would copy the file over to /priv/static/* without touching the file.

Don’t forget to add the html script tag referencing the file. (also, don’t forget to load jQuery before it if Semantic still requires it)

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/static/semantic-ui.js") %>"></script>

This to first test that everything works. Then, after you get this working, you can try and go for a more module-based approach.

3

It is probably better to use a minimal alternative layout with at least… a loading semantic-ui css part

4

Hi guys, i called my js file with a script tag in the modal popup. and the ui and js events rendered properly.
The line, i added in modal,

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>

went with page specific js. Dont know whether its a right approach or not by it ran as expected.

5

Page specific JS isn’t bad, less to download elsewhere. ^.^

1 Like