Using Jinja to display modal

1

I have a page that has a modal to display when clicked on an item.
No issue in displaying the modal with bootstrap.

Then I want to display dynamic data in the modal based on what item is clicked. I understand that jinja is a template that is rendered once so the click will not be regarded.
Hence I use js and frappe.call. No issue here. I get the callback to use in the modal.

But there are too many data/variables.

So I want to try alternative way which is separating the modal in other html file, create def get_context(context) in modal.py, and use jinja {{vars}} in the modal. Then using js to load the modal.html.

My problem is it seems the modal is not getting the context from the modal.py.

Hypothetically this should be a viable solution, shouldn’t it?
Is there any steps that I missed? Or is there any way to do it correctly?

Thank you

2

I’m not really able to understand what you are trying to do.

Data you receive from frappe.call on the client side can it be rendered in jinja, which is rendered on the server.

I may be misunderstanding, but I think you are likely approaching this all in the wrong way.

3

There are 2 cases:

  • displaying data in modal with js (get data via frappe.call) is no problem.

  • then I want to try an alternative by getting data via jinja, by separating the modal in other file modal.html which has modal.py to get_context. This scenario is not a success because the modal.html doesn’t seem to pick up the context.

4

Where is the html file and how are you requesting it?

5

The modal.html is in the same place as the main.html (in www directory). Also the respective .py files.

Three ways I tried to call it:

  • using macro (import modal.html, etc)
  • using jinja’s include
  • using js/jQuery
6

I just tested the following:

www/modal.html

<div>
    {{ hi }}
</div>

www/modal.py

import frappe
def get_context(context):
    context.hi = "hello"

Then, in the javascript console:

> $.get("http://localhost:8000/modal").then(r => console.log(r))
<div>
    hello
</div>

Is that the approach you’re taking, and it’s not working for you?

7

The difference is on the js script.
I will try yours and see if it works for me.
Thank you