Get click event in inline-edit grid

PHPMaker General Discussion (PHPMaker)
1

Hi,we are creating a simple todo module with online inline-edit and inline-add options only… one of the fields is a tinyint “completed” using checkbox, another field is the date_completed field which is R/O and will be set when the completed field is checked/unchecked.in the list startup script code, we have:

loadjs.ready("load", function () {
    // Startup script
        $(document).ready(function() {        
    		$('#x_compl').change(function() {
    			if(this.checked) {
                            alert('completed... set completed date.');
    			} else {
                            alert('Complete cleared... clear completed date.');
                        }
    			$('#x_compl').val(this.checked);        
    		});    
        });
});
</script>

Inspect “x_compl” checkbox:<input type=“checkbox” class=“form-check-input ew-custom-option” data-table=“todolist” data-field=“x_compl” name=“x1_compl_392332” id=“x1_compl_392332” value=“1” data-index=“0”>when viewing debugger, it gets initialized on “startup”, but when we click the checkbox no event is fired… I’m suspecting this needs to be handled differently due to being a grid?, the id is different on each load of the page.thanks

2

Your code using Startup Script won’t work for Inline-Edit because the controls are not created yet on page load. You may use Client Side Events.

3

thanks for that…added sample code to client events as recommended, but click and edit box change events not being fired.


// User event handlers
ew.events = {
    "todolist": {
        "x_no_decals": { // keys = event types, values = handler functions
                "change": function(e) {
                    alert('count changed');
                }
            },
        "x_compl": { // keys = event types, values = handler functions
                "click": function(e) {
                    alert('completed clicked.. do something');
                }
            }
    }
};

the form is a straight inline-edit and inline-add, when i checked the generated code there is no todolistedit.php file as well.not sure where the issue sits…

4
  1. If both fields are checkboxes, don’t use different events, the behavior may be different for different browsers, you better use “click” only.
  2. Client side events are for all pages, no need to be generated for different pages. Inline-Edit is in the List page, not in the Edit page. However, since the controls for Inline-Edit are not created yet on page load, it appears that your events are not added automatically even using client side events.
  3. You may try to add event handlers by Startup Script of the List page, e.g.
$document.on("click", "[data-ew-action=inline]", () => { // On Inline-Edit button click
	$("[data-rowtype=3] #x_no_decals").on("click", () => { ... }); // [data-rowtype=3] is the Inline-Edit row
	$("[data-rowtype=3] #x_compl").on("click", () => { ... });
});