How to identify click event on text box

Frappe Framework Customization
1

Hi, i would like to know to how to show a alert box when i click on text box

the html of above textbox is

after searching i got a post in erpnext

so i tried to do same on my program.js file where program is my doctype

cur_frm.cscript.department = function(doc) {
alert(“test”);
}

but i did’t get any output even no error in console please help me

1 Like
2

@shahid_khan021

Use jQuery for this.

e.g.

 $('[data-fieldname = department]').click(function() {
	frappe.msgprint("Clicked")
})
2 Likes
3

@Sangram i don’t want to use jquery for this i want to use frapee’s js syntax

but thanks for your time

4

Have a look at: https://frappe.github.io/frappe/user/en/guides/app-development/adding-custom-button-to-form

1 Like
5

@JoEz
i don’t add custom button i want identify when a user is clicked on textbox with frappe’s own js function

thanks for replay

6

I’m not getting ur point …can u better explain with an example?

1 Like
7

@shahid_khan021 Refer to that post.

2 Likes
8

@shahid_khan021

Currently, there is no method for on click event. [quote=“shahid_khan021, post:3, topic:23100”]
i want to use frapee’s js syntax
[/quote]

You have to use jQuery for it.

1 Like
9

@JoEz i have text box with field

<input type="text" autocomplete="off" class="input-with-feedback form-control" maxlength="140" data-fieldtype="Data" data-fieldname="program_abbreviation" placeholder="" data-doctype="Program">

when i click on this text box i want to show a alert box

that’s all but i don’t want use jquery because if in feature if want to access name of doctype
it will be difficult if i use jquery

10

@mibrahim i tried this

cur_frm.fields_dict.my_field.department.on(“click”, function(evt){

})

but i get error in console

Uncaught TypeError: Cannot read property ‘department’ of undefined(…)

1 Like
11

@shahid_khan021 Try this:

$(cur_frm.fields_dict.department.input).on('click', function(e) {
    // your code goes here
});
12

@mibrahim i tried this but nothing is happening but there no error also

thanks for giving knowledge of functionality that i was not aware

13

did u try:

cur_frm.fields_dict.program_abbreviation.input.on("click", function(evt){

})
2 Likes
14

Replace fieldname with your actual field name:

frappe.ui.form.on(cur_frm.doctype, {
    'onload_post_render': function(frm) {
        $(frm.fields_dict.fieldname.input).on('click', function(e) {
            // your code goes here
        });
    }
});
4 Likes
15

@JoEz

when i done

cur_frm.fields_dict.program_abbreviation.input.on(“click”, function(evt){

})

i am getting an error
`VM4484:71 Uncaught TypeError: Cannot read property ‘on’ of undefined(…

16

@mibrahim that’s was awesome bro thanks it worked like a charm

thank you very very much

2 Likes
17

@mibrahim
I tried your below code but don’t know why it didn’t work for me.

this

frappe.ui.form.on(cur_frm.doctype, {
    'onload_post_render': function(frm) {
        $(frm.fields_dict.variation.input).on('click', function(e) {
            msgprint("Clicked");
        });
    }
});

and this

frappe.ui.form.on(cur_frm.shipping_list, {
    'onload_post_render': function(frm) {
        $(frm.fields_dict.variation.input).on('click', function(e) {
            msgprint("Clicked");
        });
    }
});

and this too

frappe.ui.form.on("Shipping List", {
    'onload_post_render': function(frm) {
        $(frm.fields_dict.variation.input).on('click', function(e) {
            msgprint("Clicked");
        });
    }
});

Shipping List is my Child Table
shipping_list is my child table field
variation is the field of type text in child-table shipping_list.

Any idea, what I am doing wrong here?

Edit: First Code worked but only on the main form not if the field is a child table field.
Any idea how to use it for child table field?

frappe.ui.form.on(cur_frm.doctype, {
    'onload_post_render': function(frm) {
        $(frm.fields_dict.shipping_authority.input).on('click', function(e) {
            msgprint("Clicked");
        });
    }
});

Regards
Ruchin Sharma

18

You can use:

frm.fields_dict.child_table_field.grid.wrapper.on('click', 'input[data-fieldname="field_name"][data-doctype="Child Table Name"]', function(e) {
    // Your code goes here
});

replacing child_table_field with your child table field name, field_name with your field name and Child Table Name with tour child table name.

But this has an issue if you added a new row then clicked on the field for the first time, because it is not ready yet.

I don’t know your use case, but if it is suitable you can use focus event instead of click like this:

frm.fields_dict.child_table_field.grid.wrapper.on('focus', 'input[data-fieldname="field_name"][data-doctype="Child Table Name"]', function(e) {
    // Your code goes here
});

Or a combination of both events:

var input = 'input[data-fieldname="field_name"][data-doctype="Child Table Name"]';
var isFocus = false;

frm.fields_dict.child_table_field.grid.wrapper.on('focus', input, function(e) {
    doSomething();
    isFocus = true;
});

frm.fields_dict.items.grid.wrapper.on('click', input, function(e) {
    if (!isFocus) {
        doSomething();
    }
    isFocus = false;
});

function doSomething() {
    // Your code goes here
}

but this has an issue: the first click does not work if the field already focused. I didn’t find a fix yet.

Anyway, I hope that this will help you. If you still need help please let me know.

1 Like
19

@mibrahim
Thanks the code is working for me, but it is not fulfilling my requirement.
Actually the use case is:
I have a child table in which there is a Link field name: variation but that get filtered based upon another field in the same table field name: item_code.
So, whatever item code is passed to the filter based upon that item code the link field get filtered.

Now, the issue is I get the item code to pass for the filter when I use the below trigger:

frappe.ui.form.on("Shipping List", "form_render", function(frm, cdt, cdn){

But, user can also click from the grid too where I do not get the item code to pass for the filter, so I want to stop the user do not click on the grid whereas click in field itself.

If I use the blow code:

frappe.ui.form.on(cur_frm.doctype, {
    'onload_post_render': function(frm) {
        frm.fields_dict.shipping_list.grid.wrapper.on('focus', 'input[data-fieldname="variation"][data-doctype="Shipping List"]', function(e) {

    msgprint("To Select Variation, edit the row by clicking arrow in the right hand side");
            console.log(e.type);
        isFocus = false;
      });

It get fired both the times when I click in the grid and when I click in the row in editing mode.

Regards
Ruchin Sharma

20

Probably you need to fire action on item_code chafe instead of on_load_post_render

1 Like