How to run a function inside js file of doctype from html of website

I have html at gnerator/program.html

and i have js file inside program/program.js where program program is a doctype

so i have following code inside program.js

frappe.ui.form.on(“click”, “#download”, function(frm) {
var w =
+(me.lang_code ? (“&_lang=”+me.lang_code) : “”)));
if(!w) {
msgprint(__(“Please enable pop-ups”)); return;


now i want to run this code when i click a button on html file on gnerator/program.hrml

html file has following content

{% extends “templates/web.html” %}

{% block content %}

<div class="row">
	<div class="">
		<h1>Details of the Program {{ }}</h1>
		<input type="hidden" value="{{ }}" id="nameofdoc" name="nameofdoc">
	<div class="col-md-3">
		{% if doc.image -%}
			<img itemprop="brand" src="{{ doc.image }}" class="program-logo col-md-12"
				alt="{{ doc.program_name }}" title="{{ doc.program_name }}" />
		{%- endif %}
	<div class="col-md-9">
	    <section class="col-md-12" id="pgm">
			<label>Name of programs:</label><h2 id="pgmName">{{ doc.program_name }}</h2>
			<label>Programm abbrevation</label><p id="pgmAbbr">{{ doc.program_abbreviation }}</p>
			<label>programme code</label><p id="pgmCode">{{ doc.program_code }}</p>
			<label>Programme department <p id="pgmDepartment">{{ doc.department  }}</p>	
			<p>Courses Offered in this program : </p>  {% for c in courses %} <p id ="pgmCourse">{{ c.course }} </p>{% endfor %}
			<p>Total Fees For This Program: </p>  {% for c in fees %} <p id="pgmAmount">{{ c.amount }} </p>{% endfor %}
		<button class="btn-download-pdf btn-primary pull-left" id="download" data-field="program">Download Pdf</button>

{%endblock %}

is that a common procedure if yes please help me with this

if no can i run the above javascript code inside a custom javascript i mean same function same syntax

1 Like

Hi @shahid_khan021

You can make custom js file and write code to call the js code, include js file in the html file. For example check below files

1 Like


i tried this in includes/pdf.js

        new rfq();

rfq = Class.extend({
    init: function(){

    onfocus_select_all: function(){

    change_qty: function(){
            var me = this;
            $('.rfq-items').on("change", ".rfq-qty", function(){
                    me.idx = parseFloat($(this).attr('data-idx'));
                    me.qty = parseFloat($(this).val()) || 0;
                    me.rate = parseFloat($(repl('.rfq-rate[data-idx=%(idx)s]',{'idx': me.idx})).val());
                    $(this).val(format_number(me.qty, 2));

    change_rate: function(){
            var me = this;
            $(".rfq-items").on("change", ".rfq-rate", function(){
                    me.idx = parseFloat($(this).attr('data-idx'));
                    me.rate = parseFloat($(this).val()) || 0;
                    me.qty = parseFloat($(repl('.rfq-qty[data-idx=%(idx)s]',{'idx': me.idx})).val());
                    $(this).val(format_number(me.rate, 2));

    terms: function(){
            $(".terms").on("change", ".terms-feedback", function(){
                    doc.terms = $(this).val();

    update_qty_rate: function(){
            var me = this;
            doc.grand_total = 0.0;
            $.each(doc.items, function(idx, data){
                    if(data.idx == me.idx){
                            data.qty = me.qty;
                            data.rate = me.rate;
                            data.amount = (me.rate * me.qty) || 0.0;
                            $(repl('.rfq-amount[data-idx=%(idx)s]',{'idx': me.idx})).text(format_number(data.amount, doc.number_format, 2));

                    doc.grand_total += flt(data.amount);
                    $('.tax-grand-total').text(format_number(doc.grand_total, doc.number_format, 2));

    submit_rfq: function(){
                            type: "POST",
                            method: "erpnext.buying.doctype.request_for_quotation.request_for_quotation.create_supplier_quotation",
                            args: {
                                    doc: doc
                            btn: this,
                            callback: function(r){
                                            window.location.href = "/quotations/" + encodeURIComponent(r.message);

    navigate_quotations: function() {
                    name = $(this).attr('idx')
                    window.location.href = "/quotations/" + encodeURIComponent(name);

bit get error

Networking:243 Uncaught ReferenceError: Class is not defined(…)


after i change my script to like this

now it is working


I had similar problem in html page i was using code in script tag

$(document).ready(function() {
i tried to put in script tag
It gave error
Uncaught ReferenceError: $ is not defined
It was solved using

see \frappe\frappe\www\desk.html for reference

1 Like