Component Load AJAX onclick

108 views
Skip to first unread message

Kevin Keller

unread,
Feb 25, 2021, 2:57:56 PM2/25/21
to py4web
Hello, 

I would like to show a grid with a custom button and when clicked I want to invoke a component (LOAD) to load a subgrid based on the row id. 

I know how I can fetch the row id in javascript and I know how to make the onlick button work to get JS code fired up (I still need to submit the PR for the modifications I made to grid to get this to work sorry.. will do this weekend). 

Now the only piece that I am missing is to get a subgrid loaded. 

I would need to invoke the myfunction.load and pass the row id to the load component so I can pass that to the (sub) grid. 

The goal is to render a normal grid and then when I click a button in that grid it will render 
a subgrid via ajax on the same pages displaying the references tables. 

Pretty much a master/detail table scenario. 

Can a load component also receive a value and be loaded via JS so I can pass on the row ID via JS?

I saw something in web2py that goes into a similar direction here:



cloudHQPowered by
cloudHQ

Kevin Keller

unread,
Feb 25, 2021, 3:07:41 PM2/25/21
to py4web
Answering my own question:

Yes, I can pass on values in the URL to the ajax function: 

Controller:

@action("mycomponent.load/<name>", method=["GET", "POST"])
@action.uses(flash)
def mycomponent(name=None):
    flash.set('Welcome')
    #form = Form([Field("your_name")])
    #return DIV("Hello " + request.forms["your_name"] if form.accepted else form).xml()
    return DIV("Hello " + name).xml()

template:

[[extend 'layout.html']]

<ajax-component id="component_1" url="[[=URL('mycomponent.load/kevin')]]">
    <blink>Loading...</blink>
</ajax-component>

result: 

image.png

Neat!

So nothing should be able to stop me now :) 
cloudHQPowered by
cloudHQ
Reply all
Reply to author
Forward
0 new messages