[web2py] Bootstrap modal and AJAX

[Annet]

I have two functions:

def eventList():
    response.view='calendar/eventList.html'
    rows=db(...).select()
    return dict(rows=rows)

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


I have a view index.html with the following JavaScript:

<script type="text/javascript">

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

</script>


... and the eventList embedded in a tab and called in a tab-pane:

{{=LOAD('calendar','eventList.load',args=int(organization.nodeID),ajax=True,target='eventlist')}}


The eventList view lists all the events and each event has a view details 
button.

<a class="btn" href="{{=URL('event',args=row.id)}}" data-toggle="modal" 
data-target="#myModal">View Details</a>

 When the user clicks this button I would like the event to open in a modal 
window. For this purpose the eventList view contains this target div:

<div class="modal hide" id="myModal"></div>

Furthermore I have a view called event.html:

<div class="modal-header">
  <a class="close" data-dismiss="modal">×</a>
  <h3>{{=row.summary}}</h3>
  <p>
    {{=db.EventList.startDate.formatter(row.startDate)}}
    {{if row.endDate:}} - {{=db.EventList.endDate.formatter(row.endDate)}} 
{{pass}}
  </p>
</div>
<div class="modal-body">
  <p>{{=row.description}}</p>
</div>
<div class="modal-footer">
  <a class="btn" data-dismiss="modal">Close</a>
</div>


When I click the View Details button, just an empty backdrop element 
appears. When I put static content in the target div:

<div class="modal hide" id="myModal">
<p>Hello, world</p>
</div>

... and click the button, Hello, world, is being displayed in a modal. 
However, I don't get it to work, loading an external element.

I hope one of you has an idea of how to get this to work.


Kind regards,

Annet