How to dynamicly add SQLFORM.grid using JQuery

[Tu Duong]

Hi,

I want to display the table's content when user clicks the button, here is my code and it does not work. I can display the SQLFORM, but for some reason, it does not work with SQLFORM.grid

--default.py

def index():
    return dict( list_program       = SQLFORM.grid(db.Program) )

--index.html

<script>
jQuery(document).ready(function(){
   jQuery('#btn_list_program').click(function(){   jQuery('#selected_form').html( '{{=list_program}}' ) });
</script>


<div class="container-fluid">
    <div class="row">
        <div class="col col-sm-2">
              <div class="btn-group-vertical" role="group" style="width:100%">
                    <button id="btn_list_program"   type="button" class="btn btn-outline-primary">ListProgram</button>
              </div>
        </div>
        <div class="col offset-sm-1" id="form_wrapper">
            <div id="selected_form"></div>
        </div>
   </div>
</div>

[Anthony]

You say it works with a SQLFORM but not a grid -- what happens when you try with a grid?

[Tu Duong]

It shows part of the HTML code on the browser. Seems like the code structure behind the grid is different than the form

[Anthony]

Why don't you just put the grid right where you want it in the HTML but hidden, and then when the button is clicked, just use jQuery to un-hide the div?

[Tu Duong]

I have more than 1 grid on the same page (about 10). I could do it, but it is not a best solution because I need to keep track of which gird is visible, hide that grid, and show the new selected one. I hope there is a better way to solve this... wondering why it does not work. It works beautiful with form

[Anthony]

On Tuesday, January 16, 2018 at 1:01:54 AM UTC-5, Tu Duong wrote:

I have more than 1 grid on the same page (about 10). I could do it, but it is not a best solution because I need to keep track of which gird is visible, hide that grid, and show the new selected one. I hope there is a better way to solve this... wondering why it does not work. It works beautiful with form

The grid HTML includes some single quotes, so you cannot wrap it in single quotes in your Javascript code, as you have done. Depending on which browsers you need to support, you can instead put the grid HTML inside a Javascript template literal. Alternatively, put each grid in a hidden div, and simply copy a given grid to the visible div whenever you want to show it:

jQuery('#visible_div').html(jQuery('#hidden_div_1').html());

Also, rather than building all the grids when the page is first requested, you might consider loading each grid asynchronously via Ajax only when needed. For example, clicking a button could call $.web2py.component() to retrieve a given grid as a web2py Ajax component.

Anthony

[Tu Duong]

Thanks

1. "you can instead put the grid HTML inside a Javascript template literal"

You mean like this? 

jQuery('#btn_list_program').click(function(){   jQuery('#selected_form').html( `{{=list_program}}` ) });

Unfortunately, this does not work

2. Yes, the jQuery('#hidden_div_1').html()  approach works. 

3. "Also, rather than building all the grids when the page is first requested, you might consider loading each grid asynchronously via Ajax only when needed. For example, clicking a button could call $.web2py.component() to retrieve a given grid as a web2py Ajax component."

I don't know Ajax, could you please give me an example based on my code? Thanks

[Dave S]

On Tuesday, January 16, 2018 at 9:08:59 AM UTC-8, Tu Duong wrote:

[...]

3. "Also, rather than building all the grids when the page is first requested, you might consider loading each grid asynchronously via Ajax only when needed. For example, clicking a button could call $.web2py.component() to retrieve a given grid as a web2py Ajax component."

I don't know Ajax, could you please give me an example based on my code? Thanks

The place to start is the web2py book, because there are some useful helpers ... Anthony  mentioned component() which is discussed in this chapter:

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

/dps

[Anthony]

On Tuesday, January 16, 2018 at 12:08:59 PM UTC-5, Tu Duong wrote:

Thanks

1. "you can instead put the grid HTML inside a Javascript template literal"

You mean like this? 

jQuery('#btn_list_program').click(function(){   jQuery('#selected_form').html( `{{=list_program}}` ) });

Unfortunately, this does not work

Yeah, I forgot the grid also includes a script tag, so this isn't the best approach.

 

Anthony