Frappe.render_template error

Frappe Framework Customization
1

I am trying to understand this error behind this code because it seems like an odd construction with the ()().

frappe.render = function(str, data, name) {
return frappe.template.compile(str, name)(data);
};

Log:

Uncaught TypeError: frappe.template.compile(…) is not a function
at Object.frappe.render (desk.min.js:2155)
at Object.frappe.render_template (desk.min.js:2166)
at Object.callback (eval at setup (form.min.js:2502), :18:24)
at Object.callback [as success_callback] (desk.min.js:1151)
at _ (desk.min.js:1175)
at Object. (desk.min.js:1271)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at z (jquery.min.js:4)
at XMLHttpRequest. (jquery.min.js:4)
frappe.render @ desk.min.js:2155
frappe.render_template @ desk.min.js:2166
callback @ VM1577:18
callback @ desk.min.js:1151
_ @ desk.min.js:1175
(anonymous) @ desk.min.js:1271
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
z @ jquery.min.js:4
(anonymous) @ jquery.min.js:4

2

@tmatteson,

This can occur due to the syntax error in the template, can you share your HTML template?

3

Here’s the HTML:

<div class="clearfix"></div>
<div class="clearfix"></div>
<div class="row">
{% if (laying_flocks.length == 0){ %}
    <div class="col-xs-12">
        <h2 class="text-muted text-center">There are no laying flocks in the database.</h2>
    </div>
{% } else { %}
<form>
<table style="width:100%">
{% for (var i=0, i<=laying_flocks.length -1; i++) { %}
  <tr><td>{%= laying_flocks[i] %}<td><input type="text"></td></tr>
  {% } %}
</table>
</form>
{% } %}
</div>

<style type="text/css">
    .center-block span {
        margin-top: 75%;
    }
    @media screen and (min-width: 320px) {
        .center-block span {
            margin-top: 45%;
        }
    }
</style>

And the JS:

frappe.provide("erpnext.utils");

frappe.ui.form.on('Egg Collection', {
	refresh: function (frm) {
		frappe.call({
			method: "get_laying_flocks",
			doc: cur_frm.doc,
		callback: function (r) {
			console.log(r.message);
			var wrapper = $(cur_frm.fields_dict['htmlpopulate'].wrapper);
			wrapper.html(frappe.render_template("eggcollection", r.message))
			}
		})
	}
})

This is based on the excellent work by MN Technique and if you think any of this is clever, it’s them, not me.

4

@makarand_b I have been looking at this code for a long time but I don’t see a syntax error. How would you recommend debugging this?

5

Found it.
var i=0;

1 Like
6

Since I don’t like posting broken code, here are the pieces again and they seems to be working:
HTML:

{% if (laying_flocks.length == 0) { %}
    <div class="col-xs-12">
        <h2 class="text-muted text-center">There are no laying flocks in the database.</h2>
    </div>
{% } %}
<form>
<table style="width:67%">
  <tr><th>Flock</th><th>Yield</th></tr>
  {% for (var i = 0; i < laying_flocks.length; i++) { %}
    <tr><td>{%= laying_flocks[i].flock_identifier %}</td>
      <td><input type="text" id="{%= laying_flocks[i].flock_identifier %}"></td></tr>
    {% } %}
</table>
</form>

<style type="text/css">
    .center-block span {
        margin-top: 75%;
    }
    @media screen and (min-width: 320px) {
        .center-block span {
            margin-top: 45%;
        }
    }
</style>

And the JS:

frappe.provide("erpnext.utils");

frappe.ui.form.on('Egg Collection', {
	refresh: function (frm) {
		frappe.call({
			method: "get_laying_flocks",
			doc: cur_frm.doc,
		callback: function (r) {
			console.log(r.message);
			laying_flocks = r.message;
			var wrapper = $(cur_frm.fields_dict['htmlpopulate'].wrapper);
			wrapper.html(frappe.render_template("eggcollection", laying_flocks))
			}
		})
	}
})

Thanks @makarand_b, you were with me in spirit.

2 Likes