jquery navigation bar with flask/python

Question

I built a simple webpage with Dreamweaver including a simple navigation bar working with jquery. It is running on my RPi with Flask, but the Navigation does not work anymore.

HTML CODE:

<table width="100%" height ="100%" border="0">
   <tr>
     <td width="120px" valign="top">
       <ul  id="Navigation" class="nav">
        <li id="home" ><a data-site="home" href=""><br><img src="{{ url_for('static',filename='icons/Home.png')}}" width="40" height="40"><br> Home</a></li>
        <li id="light"><a data-site="light" href=""></a></li>
        <li id="htpc"><a data-site="htpc" href=""></a></li>

      </ul>

     </td>

     <td class="content" valign="top" ></td>
   </tr>
 </table>

jquery:

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){ 

            $(".content").load("{{ url_for('static', filename='home.html')}}");
            $('.nav a').click(function(e){              
                e.preventDefault();                
                var site = $(this).data('site'); 

                site = site + '.html';                

                $(".content").load(site); 
            });
        });
</script>

I replaced some links with the url_for function which is working very well(for images). I got the home.html working but the rest does not work. I got the 404 error " light.html not found " when i click on the li-element " light ". I'm sure the path is wrong but how can i fix this in a simple way?

Answer 1

Got It working!

A @app.route is needed in the *.py file.

(...)
@app.route("/light", methods=['GET'])
def light():
    return render_template('light.html')
(...)

The light.html has to be in the /templates folder. It can be used with "/light" . I did this for the home.html , too. Perhaps not the best way but it works!

Like This:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){ 

            $(".content").load("/home");
            $('.nav a').click(function(e){              
                e.preventDefault();                
                var site = $(this).data('site'); 

                 site  = '/' + site;                

                $(".content").load(site); 
            });
        });
</script>