Web2py: Update table content after submit action

[Cristina Sig]

Hello everyone,

I have a table filled with records from a database.

Also, I have a button to add a new record. Once I enter all the data for the new record and press the submit button, I want to update the content of the table without reloading the page (without F5).

I'm struggling to find a solution to this so any suggestions would be welcomed.

Database

db.define_table('Student',
                Field('name', 'string', label='Name'),
                Field('last_Name', 'string', label='Last Name'),
                Field('age', 'integer', label='Age'),
                Field('nationality', 'string', label='Nationality'),
               )

Controller (Tools.py)

def studentNew():
    formStudent=crud.create(db.Student)
    if formStudent.accepted:
        response.js = '(function($) {$("#myModalADD").modal("hide");}(jQuery));'  //hide modal after press submit button
        response.flash = 'Record added successfully!' //displays message after press submit
    return dict(formStudent=formStudent)

View

<script>
    $(document).ready(function(){
       tabla= $('#table').DataTable( {
           'scrollX': true,
           'responsive':true,
           'sRowSelect': "single",
          });
</script>

<div id="some_btn"><a class="btn btn-success btn-mini" data-target="#myModalADD" data-toggle="modal" 
data-backdrop="static" data-keyboard="false">Add New Student</a></div>

<table id="table" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
   <thead>
       <tr>
          <th>Name</th>
          <th>Last Name</th>
          <th>Age</th>
          <th>Nationality</th>
       </tr>
    </thead>
    <tbody>
        {{for student in formListar:}}
            <tr>
                <td>{{=student.Student.name}}</td>
                <td>{{=student.Student.last_name}}</td>
                <td>{{=student.Student.age}}</td>
                <td>{{=student.Student.nationality}}</td>
            </tr>
        {{pass}}
    </tbody>
</table>

<div id="myModalADD" class="modal fade"> //Modal that contains the Add New Student Form and Submit button
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
       <h4 class="modal-title">Add New Student</h4>
      </div>
      <div class="modal-body"> {{=LOAD('Tools','studentNew', ajax=True, ajax_trap=True)}}</div>
      <div class="modal-footer">
          <div class="col-md-6 col-md-offset-3 ">
        <button type="button" id="cancelar" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
         </div>
      </div>
    </div>
  </div>
</div>

[Dave S]

On Saturday, May 25, 2019 at 6:59:44 PM UTC-7, Cristina Sig wrote:

Hello everyone,

I have a table filled with records from a database.

Also, I have a button to add a new record. Once I enter all the data for the new record and press the submit button, I want to update the content of the table without reloading the page (without F5).

I'm struggling to find a solution to this so any suggestions would be welcomed.

Sounds like a job for jQuery or for the LOAD() helper .  I use one to have a secondary form on the same page as another; the DIV used by the LOAD gets refreshed when I submit the secondayr form, but the page doesn't relaod.

<URL:https://web2py.com/books/default/chapter/29/11/jquery-and-ajax#>

<URL:https://web2py.com/books/default/chapter/29/12/components-and-plugins#Components-LOAD-and-Ajax>

Good luck!

/dps

[original post continues]

[Lovedie JC]

Hi Dave. I have struggled with this for long but never got a good answer.

Do you have an example where in the view page:

{{=form}}

in the primary page is used but the page is not refreshing 

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/aa06f194-1787-4551-abc0-204e03b15146%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Lovedie JC]

I tried with www.web2py.com/AlterEgo/default/show/252

I have to keep refreshing the page for the form to reappear. 

[John Bannister]

Hi Lovedie JC,

 

Is there any reason why you don’t just use the SQLFORM.gird? You can check for the ‘new’ , ‘edit’ etc in request.args in the view and put the form in a modal or whatever styling you want to use.

 

The alternative if you need to use the LOAD helper is probably to put both the form and the grid in the same function you are loading from the view.

 

My personal preference is to use the standard Web2py SQLFORM.grid which has all the crud functionality already embedded which greatly simplifies coding.

 

BR

John

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CAAcHJF934Qw%2BpLYwKDTRMVxuZ38aFbnafWSS%2BDMrcM7Rp3WGdA%40mail.gmail.com.

[Dave S]

On Sunday, May 26, 2019 at 4:44:06 AM UTC-7, Lovedie JC wrote:

Hi Dave. I have struggled with this for long but never got a good answer.

Do you have an example where in the view page:

{{=form}}

in the primary page is used but the page is not refreshing 

 No.  If your  page is primarily the table, then you might look at the Datatables library, as I understand it works well with jQuery.  I haven't tried this yet.  Or scan the archives for "single page app",  You might also look at Massimo's examples for web3py.

/dps

To unsubscribe from this group and stop receiving emails from it, send an email to web...@googlegroups.com.