How to use frappe.call on custom html pages

Frappe Framework Customization
1

I have created a custom app with page_1.html , page_1.py file have also defined page.js in public/js.
Added the js file to hooks as well
app_include_js = “/templates/pages/page.js”

I am trying to call a custom method on a custom page.
but getting error
Uncaught ReferenceError: frappe is not defined

08%20PM
08%20PM1282×511 36.9 KB

2

Refer this.

Edit: On v11, you can use frappe.call on webpages.

1 Like
3

Hi @Aniket_Shinde1
any updates on this issue?

4

I figured out the issue it is resolved now

5

What did you do to resolve this?

6

@Aniket_Shinde1 you didn’t explain your solution well. please help with detailed solution on this.

7

The solution that actually works is in this Tutorial 34 and Tutorial 35 by @mymi14s. Tutorial 34 solves the problem and Tutorial 35 fixes some error in 34.

8

on V14 the issue still

image
image1839×621 57.8 KB

9

did you find any solution for this issue, i am facing same .

10

you must change the path for JS (Permission Issue)

11

Could you please share the directory path?

12

Tested In Version 14.0

Add Below In Your Page’s head section

	<script type="text/javascript" src="/assets/frappe/dist/js/frappe-web.bundle.HL3LQV7I.js"></script>

    <script type="text/javascript" src="/website_script.js"></script>
    <script type="text/javascript" src="/assets/erpnext/dist/js/erpnext-web.bundle.22EWE5JY.js"></script>

Then add below as the last line before closing tag of your page

< script >frappe.csrf_token = “{{frappe.session.csrf_token}}”;</ script >

To test it, open Developer Tool Then Go To Console… The Paste below
frappe.msgprint(__(‘Hello From Frappe UI’));

13

I don’t know if this is the best solution, but you can solve it this way.

in head section;

<head>
.....
.....
	<link type="text/css" rel="stylesheet" href="/assets/css/frappe-web-b4.css?ver={{ build_version }}">
	<script>
		window.frappe = {};
		frappe.ready_events = [];
		frappe.ready = function(fn) {
		  frappe.ready_events.push(fn);
		}
		window.dev_server = {{ dev_server }};
		window.socketio_port = {{ (frappe.socketio_port or 'null') }};
		window.show_language_picker = {{ show_language_picker }};
	</script>
.....
.....
</head>

in body section;

.....
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/frappe-web.min.js?ver={{ build_version }}"></script>
<script type="text/javascript" src="/assets/js/bootstrap-4-web.min.js"></script>
<script>frappe.csrf_token = "{{frappe.session.csrf_token}}"</script>
.....
2 Likes