Display html details in HTML field type

Hi there,

I have created a HTML field type in web form with the following as Option.
Field Type : HTML
Option :

I also have the JS file like so.

frappe.ready(function() {
	{% if event %}
	$('.event-details').html(`
	<h3>{{ event.title }}</h3>`);

	{% endif %}

})

However, on the webform, the event.title does not seem to display.
I have checked that event.title has a value. However, does not display at the HTML field type.

Kindly advice if there is anything wrong with the way am using the HTML field type.

Thank you.

Which doc type are you trying to customize?
Try using doc.event and doc.title

Hi @Mohammad_Ahmad_Zulfi

Thank you for the reply.
This HTML field is at a webform actually. This is following the video at Rushabh - Frappe Portal, Website + Web Forms + E-commerce - YouTube

I am trying to display similarly as HTML in the webform:

Thank you.

Try following the tutorial again and produce the same first. Then try your modifications. I suspect that you have not written the additional required code in .py file.
See the video where is talks about defining event by writing code in the .py file. See the video from 36:00 mins

Hi @Mohammad_Ahmad_Zulfi

Thank you for the reply. Yes, it works with the example.

Also, I have done the .py file as well. And it is able to fetch the context.

However, its with the JS file and the field type HTML that am not able to display it.
If I were to simply print the event title with frappe.msgprint it works. The issue seems to be at displaying it in the HTML field.
Hence, anything you notice at my webform HTML field setup or at the JS file mentioned above?

Thank you.

Thank you.

Hi @Mohammad_Ahmad_Zulfi

Any update on this?
Or any reference I can use to populate information on HTML field in a web form?
Any help in this area would be much appreciated.

Thank you.

I’ll try to reproduce for you as soon as I get some time.

For my ease. Can you please share the modification you are trying to produce and how it differs from the example code? As you said example works fine so where exactly the codes stops working after modification

Hi @Mohammad_Ahmad_Zulfi

Sorry, my bad, what I meant by the example works is that, I have tried the example and it fetches the value required at the PY file. However, I am not able to receive it at the JS file and then display at the Web Form.

My .py file is the following. All fine here, same as example. If I do a print, it is able to fetch value into the context.event. Till this part, the example works. https://discuss.frappe.io/uploads/default/original/3X/b/1/b1c70543aee815d35341b72a9ac062bd615c3a52.png

My .js file is the following. If I do a console.log here, nothing is printed. This is a simplified version of the example, where from the context, I am html formatting the title only (event.title). But this does not seem to work, cause there is no value being displayed on the html field on the web form.

frappe.ready(function() {
	{% if event %}
	$('.event-details').html(`
	<h3>{{ event.title }}</h3>`);

	{% endif %}

})

Lastly, the following is the HTML field in the web form. Same as the example.
https://discuss.frappe.io/uploads/default/original/3X/8/f/8f9112befba4aee74a857c24f00a4f8308e98174.png

Thank you.

yes it is not working, I have the same issue,