JEditable and jquery refactoring of two classes

Question

I am trying to improve my hacking skillz, and was wondering of the best way to refactor two separate selectors:

<script type="text/javascript">
        $(document).ready(function() {
            $('.editable_row').editable('${context_path}/self_report_event/update_attribute', {
                        indicator : 'Saving...',
                        style  : "inherit",
                        tooltip : 'click to edit...',
                        placeholder : '-',
                            submitdata : function() {
                                var eventId = $(this).parent('tr').attr("event_id");
                                var attrType = $(this).attr("attr_type");
                              return {event_id: eventId, attr_type: attrType};
                            },
                        callback : function(value, settings) {
                          //Do nothing if successful yet
                         },
                        onerror : function(value, settings, xhr) {
                            alert('Update failed for following reasons: '+xhr.responseText);
                        }
            });


            $('.edit_gender_select').editable('${context_path}/self_report_event/update_attribute', {
                        indicator : 'Saving...',
                        style  : "inherit",
                        data   : "{'M':'Male','F':'Female', '':'None'}",
                        type   : 'select',
                        tooltip : 'click to edit...',
                        placeholder : '-',
                        submit : 'OK',
                            submitdata : function() {
                                var eventId = $(this).parent('td').parent('tr').attr("event_id");
                                var attrType = $(this).attr("attr_type");
                              return {event_id: eventId, attr_type: attrType};
                            },
                        callback : function(value, settings) {
                          //Do nothing if successful yet
                         },
                        onerror : function(value, settings, xhr) {
                            alert('Update failed for following reasons: '+xhr.responseText);
                        }
            });
        });
    </script>

For the following html:

 <tr event_id="${event.id}">
    <td class="editable_row">${event.id!""}</td>
    <td class="editable_row" attr_type="title">${event.title!""}</td>
    <td class="editable_row" attr_type="age">${event.age!""}</td>
    <td><span class="edit_gender_select" attr_type="gender">${event.gender!""}</span></td>
    <td class="editable_row" attr_type="mnemonic">${event.mnemonic!""}</span></td>
</tr>

Answer 1

If you're talking about making your code DRY, you could cache the url and reuse quite a bit of the jEditable settings:

$(document).ready(function() {
    var url = '${context_path}/self_report_event/update_attribute',
        settings = {
            indicator: 'Saving...',
            style: "inherit",
            tooltip: 'click to edit...',
            placeholder: '-',
            submitdata: function() {
                var eventId = $(this).parent('tr').attr("event_id");
                var attrType = $(this).attr("attr_type");
                return {
                    event_id: eventId,
                    attr_type: attrType
                };
            },
            callback: function(value, settings) {
                //Do nothing if successful yet
            },
            onerror: function(value, settings, xhr) {
                alert('Update failed for following reasons: ' + xhr.responseText);
            }
        };

    $('.editable_row').editable(url, settings);

    $('.edit_gender_select').editable(url, $.extend({}, settings, {
        data: "{'M':'Male','F':'Female', '':'None'}",
        type: 'select',
        submit: 'OK'
    }));
});