Need help with custom field supporting inline editing

[Wim Deblauwe]

Hi,

I am updating my custom field plugin to work with JIRA 5.1. I have the edit issue and create issue popups working (I have converted from using Scriptaculous to jQuery). However, the inline editing does not work. I have seen https://developer.atlassian.com/display/JIRADEV/Inline+Edit+for+JIRA+Plugins but as a non-JavaScript developer, it does not make any sense at all to me.

Is there any reason if the popups do not work, the inline editing does not work out-of-the-box ?

From that link, I understand that I probably need to add something like this:

AJS.$(function() {
    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {
        var $context = AJS.$(context);
  
        // Find our custom fields. There may be multiple!
        $context.find(".my-custom-field").each(function() {
            var $customField = AJS.$(this);
            // WHAT NEEDS TO BE DONE HERE??
        });
    });
});

But what do I need to add where the comment is? Any ideas? Do I need to somehow insert the "edit" view into the HTML page? if yes, how?

regards,

Wim

[Andreas Knecht · Accepted solution]

Hi Wim,

So you don't need to insert your edit view where that comment is. JIRA will take care of inserting all the static edit HTML for your custom field for you. However what needs to be done is to bind any custom javascript you have to this new edit HTML.

Normally you'd simply bind your javascript on DOM ready events to your html. For example:

AJS.$(function() {
   AJS.$(".my-custom-field").initAutoComplete();
});

(where initAutoComplete() could be a jQuery plugin that you define in a web-resource that's included in the atl.general context for example)

With inline edit this approach doesn't work anymore, since the edit html isn't in the DOM yet when the page loads and the DOM ready event fires. The edit HTML gets loaded asynchronously when you click to inline-edit your custom field. Once it's been inserted into the DOM the NEW_CONTENT_ADDED event is fired. You can then look up your edit html in the context provided and call initAutocomplete(); where the "WHAT NEEDS TO BE DONE HERE??" comment is above.

All this only applies of course if the edit html of your field depends on some custom javascript.

So in summary you this is what you need:

* Write your custom field as usual with the usual edit html template (no inline javascript as that will not work in inline edit)

* Define a web-resource in context atl.general with your javascript

* Bind your custom javascript to your custom field when the NEW_CONTENT_ADDED event fires instead of DOM ready in this web-resource to make sure it also gets attached to your fields edit html for inline edit as well.

Hope this makes sense.

Cheers,

Andreas

[Wim Deblauwe]

Thanks for this, I have managed to get it working with this. However, it only works 1 time. My custom field has a value, I click on it, the edit view appears and works as it should. I click on the 'V' icon to save the changes and the new value is displayed. If I now click again to start inline editing, the 'edit' view shows the OLD value instead of the new value that the 'view' view was showing. Any idea why this would be ?

[Andreas Knecht]

I'm not 100% sure. I'd open the Network tab in Chrome (or Firebug if that's your preferred browser) and have a look at the network requests that are coming back from the server when you go to edit the second time. It should return a JSON object with edit HTML for your custom field. Can you verify if the edit HTML is correct in that JSON object (showing the new value)?

Also what happens if you reload the issue and go to inline edit that field again? Is it showing new new or OLD value? If it's showing the old value after a page reload it would sugget that somehow the edit view of your field isn't rendering correctly.

[Wim Deblauwe]

I will check that network tab if I have the time later, but I can already tell you that, if I reload the page, the new value is shown.

I am wondering, If I add some Javascript on NEW_CONTENT_ADDED, then maybe I need to somehow remove that JavaScript again when the inline edit is being saved ? Or is that automatically? Because the 2nd inline edit will add the same HTML, with the same id's, so the JavaScript will be added again to those new fields I guess, but what happens to the HTML fields from the first inline edit ?

[Andreas Knecht]

The HTML from the first edit is no longer in the DOM. It gets replaced with the HTML from the second edit. I guess events may still be attached so it may be better to use jQuery.delegate or jQuery.live event binding to bind behaviour rather than binding to specific elements directly.