Re: [web2py] Re: Bootstrap modal and ajax

[Johann Spies]

On 27 May 2012 09:38, Annet  wrote:

> I solved the problem by moving the JavaScript code from right below
> {{extend calendar/index.html}} to right above
>
>
> 
>
>   $("a[data-toggle=modal]").click(function (e) {
>   target = $(this).attr('data-target')
>   url = $(this).attr('href')
>   $(target).load(url);
>   })
>
> 
>
>
> Would it make a difference if you include this code in here?


$(document).ready(function(){

< your 'function>
});


Regards
Johann
-- 
Because experiencing your loyal love is better than life itself,
my lips will praise you.  (Psalm 63:3)

[web2py] Re: Bootstrap modal and ajax

[Annet]

I solved the problem by moving the JavaScript code from right below 
{{extend calendar/index.html}} to right above 


{{extend 'calendar/index.html'}}

{{if rows:}}
  
...
   
{{pass}}



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



 


I have no idea why this makes any difference. I hope one of you can tell me 
the difference.


Kind regards,

Annet.

[web2py] Re: Bootstrap modal and ajax

[Annet]

Hi,

Thanks for your reply. 

One thing: does it behave differently if you change ajax=False in the 
> LOAD()?
>

I don't think that's the cause of the problem, I replaced the ajax menu:


  Home
  Openingtijden
  Event list
 

... with a none ajax menu:


  Home
  Openingtijden
  Event 
list
 

And that caused the modal window to no longer work. To me there's no 
obvious link between the menu and the details displayed in the modal window.


Kind regards,

Annet.

[web2py] Re: Bootstrap modal and ajax

[pbreit]

Hard to say. There are a number of moving parts in your design.

One thing: does it behave differently if you change ajax=False in the 
LOAD()?


On Friday, May 25, 2012 11:14:50 AM UTC-7, Annet wrote:
>
> 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:
>
> 
>onclick={{="web2py_component('%s','component-pane')"
>   %URL('addressbook','contact.load',args=session.id)}}>Home
>onclick={{="web2py_component('%s','component-pane')"
>   %URL('calendar','openingHours.load',args=session.id
> )}}>Openingtijden
>onclick={{="web2py_component('%s','component-pane')"
>   %URL('calendar','eventList.load',args=session.id)}}>Event list
>  
>
>
> and component-pane:
>   
> 
>   
> 
>   {{=LOAD('addressbook','contact.load',args=session.id
> ,ajax=True,target='component-pane')}}
>  
>   
> 
>
>
> In the eventList.html view I have the following code:
>
> 
>
>   $("a[data-toggle=modal]").click(function (e) {
>   target = $(this).attr('data-target')
>   url = $(this).attr('href')
>   $(target).load(url);
>   })
>   
> 
>
> {{if rows:}}
>   
> 
>   {{for row in rows:}}
> ..
>   {{pass}}
>   
> 
> 
> {{pass}}
>
> 
>  
>
>
> In this case the modal window open without problem and displays the event 
> details.
>
> However, when I replace the menu with:
> 
>   Home
>   Openingtijden
>   Event 
> list
>  
>
> And keep the views the same, the modal window pops up but remains empty. 
> When I add a static text to;
>
> 
>   This is a static text.
>  
>
> 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.
>

[web2py] Re: Bootstrap modal and AJAX

[Annet]

Hi Anthony,

Thanks for your reply, after spending figuring out why I ended up with an 
empty backdrop I found that I had to move the JavaScript part from 
calendar/index.html to calendar/eventlist.html. I have no idea why, 
eventList.html is loaded into index.html.

This is the relevant part in index.html:


  

{{=LOAD('addressbook','contact.load',args=organization.nodeID,ajax=True,target='component')}}
  


This is what it looks like in the browser:


  
  


  
  

  
  


Now when I click the event list link this is what it looks like in the 
browser:


  
  


  
  
 
  
  


Only the div within the component changed, and the JavaScript code isn't 
even there. This is the relevant part of eventList.html:



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



...


Any way, the problem seems to be solved.


Kind regards,

Annet.

[web2py] Re: Bootstrap modal and AJAX

[Anthony]

>
>
> {{=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.
>
>  data-target="#myModal">View Details
>

Have you confirmed that the Ajax request is getting sent and a response 
returned? If so, what is the response (check using the browser developer 
tools)? Is the above "View Details" link inside the LOAD component? If so, 
I think the .load extension of the component may be getting propagated to 
the "View Details" URLs -- if you don't specify an extension in URL(), it 
will use the extension of the current request (which would be .load in this 
case). So, it may be looking for an event.load view and returning an error 
if it doesn't find one (unless you have enabled generic views, in which 
case it would try the generic.load view). Maybe try URL('event.html', 
args=row.id), or change event.html to event.load.

Anthony