3

I use a basic.html in my flask application which loads all needed ressources like footer navbar etc., all my other html sites extend this basic.html

In my main.js I created a simple function:

function fun() {
  alert("we have fun");
}

I load my files like this in the basic.html:

<script type=text/javascript src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/main.js') }}"></script>

Now I want to use this function in my page.html which extends the basic.html:

{% extends "basic.html" %} 

{% block content %}

<div class = "container" onload="fun()">
<p> Test </p>
</div>

{% endblock %}

Sadly nothing happens, but if I use the onload="fun()" in the basic.html itself it works.

So how do I resolve this?

This is a very simplified version of one of my previous question, due to the fact that I am sitting on this since 4 hours I think I know what causes the issue but I cant solve it and all solutions I found do not work.

Here is my previous question: question

I think that onload="fun()" is called before jQuery is even load or my main.js but I am still not 100% sure if this causes the error and I cant find a solution

Community
  • 1
  • 1
Roman
  • 3,563
  • 5
  • 48
  • 104

2 Answers2

3

The problem is simple. You can't attach onload to a div.

The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.

Adding the script tag immediately after the div element will cause it to fire as soon as the div is rendered. So this will perfectly work:

{% extends "basic.html" %}
{% block content %}

<div class="container">
<p> Test </p>
</div>

<script type="text/javascript">
fun();
</script>

{% endblock %}

Read more here: How to add onload event to a div element?

Instead of appending a script tag with the function call, you can use another solution explained here: https://stackoverflow.com/a/17071878/4395646

Community
  • 1
  • 1
oxalorg
  • 2,768
  • 1
  • 16
  • 27
  • seems like he wants to keep javascript code in a separate file so the problem is how to connect js file with the html file – leela.fry Jun 24 '16 at 15:21
  • @leela.fry I'm sorry if it wasn't obvious. But he still keeps the javascript code in `main.js`, just calls it after the `div`. I've edited the code to clear it up. – oxalorg Jun 24 '16 at 15:24
  • yeah that was stupid to attach it to div, I already figured it out, it works if I connect in to a button for example and use onclick, so the scripts are loaded succesfully, but my main problem is the one in the first quistion, it seems that google apis do not work on localhost – Roman Jun 24 '16 at 16:07
  • @Roman if this problem has been fixed please accept the answer. I'll take a look on your other question too! Thank you. – oxalorg Jun 24 '16 at 16:07
  • I am sure it simply does not work on localhost, the Google JavaScript Api – Roman Jun 24 '16 at 16:16
  • I will try to upload my app on monday to heroku and test everything again – Roman Jun 24 '16 at 16:17
2

Put that in your basic.html 

<head>

<script src="{{url_for('static', filename='js/main.js')}}"></script>

</head>

<body onLoad="fun();">

onLoad needs to go in the body not in div

leela.fry
  • 283
  • 2
  • 3
  • 13
  • This will work under the presumption you have set your static path to static folder and inside of it have a folder named JS – Anekdotin Jun 24 '16 at 16:10
  • This answer is not useful, since you're altering a parent template for an effect desired on the child template. This will cause **EVERY** page rendered using child template to call `fun()` which is clearly not desirable. – oxalorg Jun 24 '16 at 16:15
  • @MiteshNinja if you want to make people sign up for your page that may be what we want, it shows something that my be useful in a real project – leela.fry Jun 24 '16 at 16:21