REF: Reload a web2py Component

[Teddy Nyambe]

Hi,

Massimo had given a solution on how to reload a component but its not
working. This is his solution:

Give a name to your components

{{=LOAD(...,target='one')}}
{{=LOAD(...,target='two')}}
{{=LOAD(...,target='three')}}

now any action can trigger a component reload

response.js="web2py_component('action','target')"

where action is the URL of the component and 'target' is 'one', 'two',
'three'', etc.

For me I have the following code which is failing to reload:

Controller:

def index():
response.subtitle = "Human Resource and Administration"
return dict()
def department():
db.department.id.readable = False
query = db(db.department.id > 0).select(db.department.name,
db.department.description)
fields = (db.department.name, db.department.description)
link = [lambda row: A('Edit', _class='btw', _role='button',
_href=URL('administration','department.load#myModal'),**{'_data-toggle':'modal'})]
headers = {'db.department.name': 'Department
Name','db.department.description': 'Description'}
default_sort_order=[db.department.name]
form = SQLFORM.grid(db.department, headers=headers,
orderby=default_sort_order ,links=link, create=True, deletable=True,
editable=True, maxtextlength=64, paginate=25)
return dict(form=form)
def refresh():
response.js =
web2py_component('/intranet/administration/department.load','department_form')
return dict()


View:

<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Meta Data
</a>
<ul class="dropdown-menu">
<li><a href="#tab3" id="department" tabindex="-1"
data-toggle="tab">Manage Departments</a></li>
<li><a href="#tab3" id="office" tabindex="-1"
data-toggle="tab">Manage Office Titles</a></li>
<li class="divider"></li>
<li><a href="#tab3" tabindex="-1" data-toggle="tab">Manage
List</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
{{=LOAD('administration','department.load',ajax=True,
target='department_form')}}
</div>
</div>
</div>
<div id="refreshed"></div>
<script>
jQuery('#department_form').hide();
jQuery('#department').click(function(){
ajax('{{=URL('administration','refresh')}}', [], 'refreshed');
jQuery('#department_form').show('fade');
});
</script>


When I refresh using the browser thats when i am having a new records
appearing on my grid


--
.......................................................................................
Teddy Lubasi Nyambe
Opensource Zambia
Lusaka, ZAMBIA

Cell: +260 97 7760473
website: http://www.opensource.org.zm

~/
Human Knowledge belongs to the world! - AntiTrust

Man is a tool-using animal. Without tools he is nothing, with tools he
is all - Thomas Carlyle 1795-1881

/~

[Teddy Nyambe]

Hi I have noticed the mistake I was making but noticed something weird.

I have added the line:

response.js = "web2py_component('department.load','department_form')"

in the controller the LOAD is calling: and it works. But I have
noticed that the page is just loading items and not finishing...what
is it loading?

[Teddy Nyambe]

[Teddy Nyambe]

Ok I have figured it out. For anyone who may have a problem like me in
the future here is the code below:

Controller:

def department():
#response.js = "web2py_component('department.load','department_form')"

db.department.id.readable = False
query = db(db.department.id > 0).select(db.department.name,
db.department.description)
fields = (db.department.name, db.department.description)
link = [lambda row: A('Edit', _class='btw', _role='button',
_href=URL('administration','department.load#myModal'),**{'_data-toggle':'modal'})]
headers = {'db.department.name': 'Department
Name','db.department.description': 'Description'}
default_sort_order=[db.department.name]
form = SQLFORM.grid(db.department, headers=headers,
orderby=default_sort_order ,links=link, create=True, deletable=True,
editable=True, maxtextlength=64, paginate=25)

return dict(form=form)

View:

{{extend 'layout.html'}}

<div id="dept_form">
{{=LOAD('administration','department.load',ajax=True,target='department_form')}}

</div>
</div>
</div>
</div>
<div id="refreshed"></div>
<script>

jQuery('#dept_form').hide();
jQuery('#department').click(function(){
web2py_component('{{=URL('administration','department.load')}}',
'department_form');
jQuery('#dept_form').show('fade');
});
</script>

The key is this:

The web2py_component reloads the web component ...so before you
display the component reload it...like in my js above i have called it
before displaying my component...and it works...flawless!!

Cool!