Is there any Trigger to capture the onClick event of a Text Box?

Frappe Framework App Development
1

Hi,
I have a use case where I want to track the value of a field when I click on that field without even changing anything.

That field is actually a child table field.

Child Table: Shipping List
Child Table Name: shipping_list
Child Table Field: variation

So, what I want it whenever a user click on the variation field in the Child Table Shipping List, I should be able to capture the value of that field and also should be able to know that the field is clicked.

Regards
Ruchin Sharma

1 Like
2

An example on items table:

frappe.ui.form.on(cur_frm.doctype, {
    'onload_post_render': function(frm) {
        frm.fields_dict.items.grid.wrapper.on('click', 'input[data-fieldname="item_name"][data-doctype="Sales Invoice Item"]', function(e) {
            console.log(e.type);
        });
    }
});
2 Likes
3

@mibrahim the code works fineā€¦if we have 4 items then it alerts all 4 itemsā€¦how to identify focused item_code where mouse is clickedā€¦

4

@jof2jc You can use focus event instead of click.

frappe.ui.form.on(cur_frm.doctype, {
    'onload_post_render': function(frm) {
        frm.fields_dict.items.grid.wrapper.on('focus', 'input[data-fieldname="item_name"][data-doctype="Sales Invoice Item"]', function(e) {
            console.log(e.type);
        });
    }
});
3 Likes
5 
frappe.ui.form.on(cur_frm.doctype, {
  'onload_post_render': function(frm, cdt, cdn) {
    frm.fields_dict.items.grid.wrapper.on('focus', 'input[data-fieldname="item_code"][data-doctype="Sales Invoice Item"]', function(e) {

      console.log(e);
      var d = locals[cdt][cdn];

      frappe.call({
        method: "frappe.client.get_list",
        args: {
          doctype: "Sales Invoice Item",
          fields: ["*"],
          filters: [
            ["item_code", "=", d.item_code]
          ],
          limit_page_length: 5
        },
        callback: function(r) {
          console.log(r.message);
          if (r.message) {
            msgprint(d.item.code);// it showed me all item codes
          }
        }
      });
    });
  }
});

How to identify item code where the cursor/click is on?

6

Sorry for late response.

This will throw an error.

This will write all items into the console.

To bind multiple events you can use a syntax similar to this:

frm.fields_dict.items.grid.wrapper.on('mouseenter click', 'input[data-fieldname="item_code"][data-doctype="Sales Invoice Item"]', function(e) {

For more events check jQuery events.

I also donā€™t know why you are using frappe.client.get_list to get items that already included in the current document.

The items is stored in frm.doc.items.

1 Like
7

What would be the use case for the Sales Invoice doctype, and the ā€œcustomerā€ field?

Again, I just want to add an event listener to an event of mousenter in the the field

[UPDATE][SELF-ANSWERED]
This post has the solution for what I wanted, and it worked for main DocType field customer

JavaScript handler when clicking into a field