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 = window.open(
frappe.urllib.get_full_url("/api/method/frappe.utils.print_format.download_pdf?"
+“doctype=”+encodeURIComponent(me.frm.doc.doctype)
+"&name="+encodeURIComponent(me.frm.doc.name)
+"&format=None"
+"&no_letterhead=None"
+(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 {{ doc.name }}</h1>
		<input type="hidden" value="{{ doc.name }}" id="nameofdoc" name="nameofdoc">
	</div>
	<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>
	<p></p>
	<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 %}
		</section>
		<button class="btn-download-pdf btn-primary pull-left" id="download" data-field="program">Download Pdf</button>
	</div>
</div>

{%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

@rohit_w

i tried this in includes/pdf.js

$("#download").click(function(){
        new rfq();
});

rfq = Class.extend({
    init: function(){
            this.onfocus_select_all();
            this.change_qty();
            this.change_rate();
            this.terms();
            this.submit_rfq();
            this.navigate_quotations();
    },

    onfocus_select_all: function(){
            $("input").click(function(){
                    $(this).select();
            })
    },

    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());
                    me.update_qty_rate();
                    $(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());
                    me.update_qty_rate();
                    $(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(){
            $('.btn-sm').click(function(){
                    frappe.freeze();
                    frappe.call({
                            type: "POST",
                            method: "erpnext.buying.doctype.request_for_quotation.request_for_quotation.create_supplier_quotation",
                            args: {
                                    doc: doc
                            },
                            btn: this,
                            callback: function(r){
                                    frappe.unfreeze();
                                    if(r.message){
                                            $('.btn-sm').hide()
                                            window.location.href = "/quotations/" + encodeURIComponent(r.message);
                                    }
                            }
                    })
            })
    },

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

bit get error

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

@rohit_w

after i change my script to like this

now it is working

thanks

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