What is the order of execution between python code and javascript code in html

Question

I am using bottle framework to dynamically list a link for editing a task, rows is a collection of tuple with multiple (id, task, status) logically the code below should give the first link

http://localhost:8217/edit/1

second link

http://localhost:8217/edit/2

so on and forth

but all the link are

http://localhost:8217/edit/5

therefore I suspect this has to do with the order the code is executed, any hint would be much appreciated

<p>The open items are as follows:</p>
<table border="1">
%for row in rows:
    <tr>
    %for col in row:
        <td>{{col}}</td>   
    %end
    <script language="javascript">
        var number = "http://localhost:8217/edit/";
        var key = {{row[0]}};
        console.log(key);
    </script>
    <td>
        <a href="" onClick="location.href=number +key;return false";>Editing</a> 
    </td>
    </tr>
%end
</table>

Is there a reason you're using javascript here? Why not just use the template to populate the hrefs directly? — ron rothman
– ron rothman, Commented Aug 26, 2013 at 2:25

SLaks · Accepted Answer · 2013-08-26 02:21:08Z

2

Python code runs on the server; Javascript code runs on the client.
Therefore, Javascript code can only run after the Python code finishes.

However, this has nothing to do with your problem.

HTML tags do not create local variable scopes; all of your rows share the same key variable.

By the time you click the link, key will always have the last value (since all of the JS has already executed).

You should build an href attribute in server-side code instead.

answered Aug 26, 2013 at 2:21

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gos1 · Accepted Answer · 2013-08-26 02:50:10Z

0

The "problem" is in your javascript. It's not really a problem though, it's just the way the javascript event loop works. The short answer, is that when your browser is reading the rendered template, it loads the onClick events into the event queue, but doesn't actually call them. Only after it's done processing the page, does it start going through the event queue and reading them one-by-one. But at this point, all the <script> tags in your page have processed, and the current value of key will be the last value it had from the loop, presumably 5 in the examples you gave. As the browser handles the events from the event queue, it will just assign the current value of key to the onClick handle, which is why they all get the value 5.

One possible fix is to use a closure to take a "snapshot" of the current value of key as the script tags are read. To create the closure I will use a self-invoking function, but there are other ways to do this:

var key = (function() {
    return {{row[0]}};
)();

This is actually a very common problem, so you might want to look around for a more thorough explanation. A good starting point is the subsection "The infamous loop problem" here: Javascript Scope and Closures

edited Aug 26, 2013 at 2:50

answered Aug 26, 2013 at 2:40

gos1

3605 silver badges10 bronze badges

1 Comment

gos1 Over a year ago

I do agree with the other commenters though. If you are fabricating a template in the server (and you're looping through the rows server-side anyway), why not just generate the attribute server-side too? Unless of course, you wont actually hard-code the number variable on your script tag, and will have the browser determine that...

Collectives™ on Stack Overflow

What is the order of execution between python code and javascript code in html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related