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 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">
<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!
On 11/12/12, Teddy Nyambe <[email protected]> wrote:
> 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?
>
> On 11/12/12, Teddy Nyambe <[email protected]> wrote:
>> 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?
>>
>> On 11/12/12, Teddy Nyambe <[email protected]> wrote:
>>> 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 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 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 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
/~
--
