[web2py] Bootstrap modal and ajax

[Annet]

In a controller I have the following functions:

def eventList():
    response.view='calendar/eventList.html'
    rows=db(..).select(...)
    if not rows:
        response.flash=response.flash_noresult
    return dict(rows=rows,alert=alert)

def event():
    response.view='calendar/event.html'
    
row=db(db.EventList.id==request.args(0)).select(db.EventList.ALL).first()
    return dict(row=row)


In the index.html view I have the following menu:

<ul class="nav">
  <li class="active"><a data-toggle="pill" 
onclick={{="web2py_component('%s','component-pane')"
  %URL('addressbook','contact.load',args=session.id)}}>Home</a></li>
  <li><a data-toggle="pill" 
onclick={{="web2py_component('%s','component-pane')"
  
%URL('calendar','openingHours.load',args=session.id)}}>Openingtijden</a></li>
  <li><a data-toggle="pill" 
onclick={{="web2py_component('%s','component-pane')"
  %URL('calendar','eventList.load',args=session.id)}}>Event list</a></li>
 </ul>


and component-pane:
  
<div class="row-fluid">
  <div class="span12">
    <div class="component-pane">
      
{{=LOAD('addressbook','contact.load',args=session.id,ajax=True,target='component-pane')}}
    </div> <!-- /component-pane -->
  </div><!-- /span -->
</div><!-- /row -->


In the eventList.html view I have the following code:

<script type="text/javascript">

  $("a[data-toggle=modal]").click(function (e) {
  target = $(this).attr('data-target')
  url = $(this).attr('href')
  $(target).load(url);
  })
  
</script>

{{if rows:}}
  <table>
    <tbody>
      {{for row in rows:}}
        ..
      {{pass}}
      </tbody>
    </table>
   </div> <!-- /results -->
{{pass}}

<div class="modal hide fade" id="myModal">
</div> <!-- /modal -->


In this case the modal window open without problem and displays the event 
details.

However, when I replace the menu with:
<ul class="nav">
  <li class="active"><a 
href="{{=URL('addressbook','contact',args=row.id)">Home</a></li>
  <li><a 
href="{{=URL('calendar','openingHours',args=row.id)">Openingtijden</a></li>
  <li><a href="{{=URL('calendar','eventList',args=row.id)">Event 
list</a></li>
 </ul>

And keep the views the same, the modal window pops up but remains empty. 
When I add a static text to;

<div class="modal hide fade" id="myModal">
  <p>This is a static text.</p>
</div> <!-- /modal -->

The modal window pops up and displays the static text.

What is the difference between these approaches and how do I get the event 
details displayed in the modal window?


Kind regards,

Annet.