AUI Restful Table events not firing

Jira Development
,
1

I am using AUI Restful table and it is very useful, but I need to execute some JavaScript after the create row is initialized, but I have challenges to register for the Restful Table events.

INITIALIZED event is fired (actually twice, but okay) and I can successfully register for these events using the code from the documentation.

// Works fine
AJS.$(document).bind(AJS.RestfulTable.Events.INITIALIZED, function () {
    alert("INITIALIZED called");
});

But this does not work as described in the documentation for the other events especially AJS.RestfulTable.Events.ROW_INITIALIZED. With the following event binding, the alert is never called.

// Does NOT work
AJS.$(document).bind(AJS.RestfulTable.Events.ROW_INITIALIZED, function (row) {
    alert("ROW_INITIALIZED called");
});

Also the sample code from the documentation does not work

// Does NOT work even copied straight from the official documentation
AJS.$(document).bind(AJS.RestfulTable.Events.ROW_INITIALIZED, function (row) {
    row.bind(AJS.RestfulTable.Events.RENDER, function () {
        this.$el.addClass("myclass");
    });
});

Does anyone knows, what wrong here? Do you experience similar problems with event binding for AUI Restful table?

Best regards
Holger

1 Like
2

I have used this successfully in a single plugin, but it was so difficult to implement I am considering removing it the next time I need to rework the UI in that plugin.

I am specifically binding on ROW_INITIALIZED. I can’t share my exact plugin, but would a simple JS file with a simple table working be useful? I should be able to whip something up.

I noticed that you’re calling .bind() on $(document), but I am calling bind on the object returned from the new AJS.RestfulTable call. This isn’t a good example, I wrote it from memory, but:

    new AJS.RestfulTable({
        el: $('#my-table'),
        resources: {
            ...
        },
        columns: [
            {
                ...
            }
        ]
    }).bind(AJS.RestfulTable.Events.ROW_INITIALIZED, function (context) {
        ...
    });

For me this worked fine, but I’m not sure how I stumbled on it. I may have just dug around the jira source code.

3

Also random note, big fan of your work.

1 Like
4

Okay, great! Binding to the table and not the document works for ROW_INITIALIZED. Thank you very much for the hint!

But for the create row the ROW_INITIALIZED is not called. I want to catch an event, when a new create row is rendered after a successful create. Do you know how to do that?

INITIALIZED is only called once after initial rendering, but if a new row was created, that the create row form is create again and I need some JavaScript adjustment then applied.

5

I will try to get an example, but my current one does not have that case in it. Might I suggest getting an instance of the CreateRow and then binding on its render event? I suspect that might be it.

6

I found an alternative by extending CreateRow.

    var ContextEditRow = AJS.RestfulTable.EditRow.extend({
        render: function ( renderData ) {
        	// Call original render method of Backbone super class  
        	this.constructor.__super__.render.apply(this, arguments);

        	// Do you custom JavaScript code like here applying auiSelect2
        	this.$('#selectprojects').auiSelect2({
  			  placeholder: AJS.I18n.getText("admin.common.words.optional")
        	});
        }
    });

    var editableManageContextsTable = new AJS.RestfulTable({
		el: jQuery("#jpssf-customfield-context-config-table"),
		allowCreate: true,
...
		views: {
			createRow: ContextEditRow
		}
	})

P.S. The original problem I wanted to solve was rendering issues of the placeholder text of auiSelect2 in RestfulTable. I solved these placeholder text rendering issue by setting autoFocus: false.

7

Hi @Holger,

Nice solution, but it breaks some inner backbone logic. After I try your solution and edit a row, the Cancel button stops working. I’m guessing based on some error not thrown in the console.
Here’s my broken codepen with just the aui code from the documentation page + your code
views: {createRow: ContextEditRow}

8

Simple change to make it work, just return the object from the method as such:
…
render: function (renderData) {
// Call original render method of Backbone super class
var rendered = this.constructor.super.render.apply(this, arguments);
console.log(“JS baby”);
return rendered;
}
…
Awesome !