[$.fn.checkbox.methods[_53a] is not a function]

I want to run some code when a checkbox is clicked, but I don't want to use the onChange event because that is triggered when the checkbox state is changed programatically. I want it to execute only when clicked by the user.

I tried this code to bind to the click event:

Code:

$('#chkCanceled').checkbox('checkbox').bind('click', (function(e) { CalculateSpecialCharge() }));

But that produced the error message $.fn.checkbox.methods[_53a] is not a function

So is there a way to set a click event on the checkbox?

The issue is that every other property listed in the docs can be set using an attribute but these can't. So maybe not exactly a bug, but inconsistent behavior.

Can you please respond to my last question about why this doesn't work? Thanks.

I don't want to use data-options since I already have a page with over 100 textboxes defined as in the code I posted. Why do the other properties work and width doesn't? They should all behave consistently. This is a bug!

It seems that setting the width attribute of a textbox doesn't work and it has to be done in a style tag.

This doesn't work - the width is ignored:

Code:

<INPUT class='easyui-textbox' ID='txtPatient' label='Patient' labelWidth=70 width=350>

This does work:

Code:

<INPUT class='easyui-textbox' ID='txtPatient' label='Patient' labelWidth=70 style='width: 350px'>

Am I missing something here or is this a bug?

I don't understand why a timeout would make a difference. Can you please explain that? I tried your code and it doesn't work. You didn't answer my question about whether it's possible to trigger the blur only on selection.

I'm having a problem binding to the blur event of the combobox. I need the event to be triggered only when the user leaves the combobox, not when the dropdown arrow is clicked. Using the following code, the blur event is triggered just by clicking the arrow.

Code:

  
// selCategory is a combobox
$('#selCategory').textbox('textbox').bind('blur', (function(e){ GetNextOrderNumber() } ));

I tried this but then it doesn't trigger at all.

Code:

  
$('#selCategory').combobox.bind('blur', (function(e){ GetNextOrderNumber() } ));

Is there a way to trigger the blur only on selection? I certainly hope so otherwise I can't use this component.

On the combobox, the width property doesn't seem to work. If I use this code:

Code:

<SELECT class='easyui-combobox' panelHeight='auto' label='Category' editable=false labelWidth=90 width=320>

the combo looks like this:

http://galcott.com/combo1.jpg

I have to use a style tag to get the width to work.

Code:

<SELECT class='easyui-combobox' panelHeight='auto' label='Category' editable=false labelWidth=90 style='width: 320px'>

Then it works properly like this:

http://galcott.com/combo2.jpg


That doesn't seem like the way it's supposed to work. Is there an issue with the width property?

That works but why isn't that the normal behavior? A datebox should only accept digits and separators. This is definitely a bug.

I have just found that the datebox component accepts alphabetic characters (a-z) which it definitely should not. Obviously it should only accept digits and date separators. I have tried to fix this by binding the keypress event to a function that checks the character typed and returns false if it's not a digit or separator but that doesn't work. How can this be fixed?

I am using the datagrid with the cell editing extension. Initially the grid is empty and I append a bunch of blank rows for the user to enter data. There are 2 columns, and when the user enters data in the first column I need to validate it against a database. The problem is that I can't find any event that's triggered when the user leaves a cell. The extension has an onCellEdit event but that is triggered while the cell is being edited. I need an event that's triggered when the edit is done and returns the value entered. Is there a way to do that?

I checked my code again and it turns out that the PHP code to retrieve the records was inadverdently adding a blank record at the beginning. But the line being half height definitely is a bug, which can be fixed by using min-height in the CSS.

Actually I have found a workaround for this. If you look in the debugger you can see that EasyUI creates IDs for each individual item in the combobox, as shown here.

The ID I used for the combobox is selShipMethod. So it takes this and adds on the rest of what you see here. I don't know what the "i4" part means, but the last digit is sequential so the first (blank) item will always be _0.

Code:

<div id="selShipMethod_easyui_combobox_i4_0" class="combobox-item combobox-item-selected"></div>
<div id="selShipMethod_easyui_combobox_i4_1" class="combobox-item">Next Day Priority</div>
<div id="selShipMethod_easyui_combobox_i4_2" class="combobox-item">Next Day Standard</div>

So in my style section I just add this CSS and that eliminates the blank line. Strangely, using display: none instead of visibility: hidden doesn't work.

Code:

#selShipMethod_easyui_combobox_i4_0 {visibility: hidden} 

Even if there is a blank record, it is a bug because the line is only half height which makes no sense. But in this case the table has no blank records, and I don't want an option for the field to be blank.

When populating a combobox from a URL, I've noticed that the combobox has a blank item at the top even though the data doesn't have any blank records. This line is only about half the height of the data lines, as seen in this screen shot:
http://galcott.com/comfitdemo/combobox.jpg.

I don't want this line to appear at all so how can I get rid of it? This seems like a bug.