nicolascarpi/jquery_jeditable

jQuery edit in place plugin. Extendable via plugin architecture. Plugins for plugin. Really.

jquery_jeditable's Issues

patch: catch loadurl ajax error

i've added "loaderror" as a callback function in the jEditable options.

if the "loadurl" page returns an error (eg. permission denied 403 or page not found 404) then this will get called.

i've emailed the patch to tuupola at appelsiini dot net

clearTimeout(t) - t is undefined

In this block:

                var t;
                if ('cancel' == settings.onblur) {
                    input.blur(function(e) {
                        /* prevent canceling if submit was clicked */
                        t = setTimeout(function() {
                            reset.apply(form, [settings, self]);
                        }, 500);
                    });
                    alert(t);
                } else if ('submit' == settings.onblur) {
                    input.blur(function(e) {
                        /* prevent double submit if submit was clicked */
                        t = setTimeout(function() {
                            form.submit();
                        }, 200);
                    });
                } else if ($.isFunction(settings.onblur)) {
                    input.blur(function(e) {
                        settings.onblur.apply(self, [input.val(), settings]);
                    });
                } else {
                    input.blur(function(e) {
                        /* TODO: maybe something here */
                    });
                }

t is not getting set inside the event functions.

Therefore:

                    if (t) {
                        clearTimeout(t);
                    }

is not clearing the setTimeouts.

To reproduce this, set the onblur to cancel, then alert out t in the form.submit function.

please add form parameter when using apply on onblur function

for example, i modified the jeditable js to look like:

            } else if ($.isFunction(settings.onblur)) {
                input.blur(function(e) {
                    settings.onblur.apply(self, [input.val(), settings, form]);
                });

Submitting a form with multiple fields

Instead of submitting each individual field's change, I'd like to submit a form at the end (when the user clicks Save, after editing multiple fields).

My purpose for using jeditable is mainly aesthetic. I want fields to have click-to-edit capability, but not to immediately POST the change once a single field is edited.

How can I accomplish having a Save button at the end of a bunch of textboxes (each of which have .editable() applied). So I can then use AJAX to post this form when Save is pressed. I couldn't find a single example of this. BTW, beautiful plugin :)

EDIT: Even if this is not exactly possible, I basically just want to prevent any immediate POST, so I can collect the fields and POST it myself when the user presses Save.

Add hook into select creation

It'd be nice to have a way to override/modify the creation of the select element with a hook that receives the element after it's been created (assuming it's stored somewhere once and not created dynamically every time).

For example, if you want to add a custom option at the end of a select that triggers an event.

self.editing out of sync

I'm looking at a case where I'm using jeditable with datatables, and if the datatable row gets updated when I'm editing something in that row, the input form goes away but the "editing" attribute on the node is left set to true. Then next time I click on the cell to edit it, it hits the "if (self.editing)" case, and skips out.

So self.editing should be unset at some point where it isn't. I'm not quite sure where the right place to add that hook is. At the moment I'm binding to "DOMNodeRemoved" on the editable form node.

The form submitted twice when redefining the submit element

Hi everybody,

Today, I found a small problem with the jeditable widget.

When I redefined the submit parameter, with a button (without a type attribute), the form is submitted twice.

In fact, if we do not specify a type attribute to a button, its default value is "submit". But, in the jeditable script, we test if the type is null, and if it is the case, we add a new handler to the button, which will submit the form.

if (settings.submit.match(/>$/)) {
                        var submit = $(settings.submit).click(function() {
                            if (submit.attr("type") != "submit") {
                                form.submit();
                            }
                        });
                    /* Otherwise use button with given string as text. */
   }

Do you already find a solution to this problem ?

Thanks a lot.

Emmanuel

file input type causes error

hey is this a bug? I have input type="file" on my page (unrelated to my use of jeditable). but on page load, I get this error. when i remove that input the error goes away.

"$.editable.types[settings.type] is undefined"

Default content of inputs contain escaped html

For example, if editable text element is A & B, input will contain A & B.

Edit mode got lost without preserving changes

I've found an issue with the editable fields when navigating to another browser tab or application while editing.

Scenario:

1. Goto Jeditable demo page http://www.appelsiini.net/projects/jeditable/default.html
2. Edit Normal Textarea
3. Change it's value (without clicking ok or cancel)
4. Change to another browser tab or application
5. Go back to browser tab with Jeditable demo page

Now the editable Normal Textarea is not in edit mode anymore and the changes are lost. While when I left the page the field was in edit mode.

I found out this happens in IE, FF and Chrome. Only Safari seems to remember the field was in in edit mode.

Use case is that end-users are changing the field in edit mode and want to open another browser tab or application to copy paste some text.

Getting message "Disallowed Key Characters"

When trying to edit content, it returns an "Disallowed Key Characters" message

$('#list li:not(.checked) span').editable(CI.base + 'lists/update_item', {
    id:         function(){ var item_id = $(this).parent().attr('id').split('_'); return item_id[1]; },
    indicator:  'Saving',
    tooltip:    'Double click to edit',
    event:      'dblclick',
    submit:     'Save',
    submitdata: {action: 'update'}
});

Does anyone know what's wrong?

No indication than an element is editable

I've installed this on my wiki and new users didn't realize that some text elements were editable until they clicked on them.

Would it be a good idea for editable() to add a :hover pseudoclass to the elements that become editable? This competing project has a nice example at http://davehauenstein.com/code/jquery-edit-in-place/example/

ajaxfileupload is obsolete

Hi there,
Thank you for the great plugin! Unfortunately ajaxfileupload (since jquery 1.5) is unusable since it used undocumented jquery functions which are not supported any more.
I was wondering, would it be possible to make your plugin compatible with popular ajaxForm plugin (http://jquery.malsup.com/form/).

Alex

HTML entities should be unescaped when editing

How to reproduce:

1. Go to the live demo
2. Enter this in the "Normal textarea" example: a < b > c && d
3. Save. The text is rendered correctly.
4. Edit again. This time, you'll be editing a < b > c && d

clicking on text area to move cursor does not work

In FF 3.6 if you edit a text area and try to click to move the cursor position, it fails to register the click. This also effects highlighting.

Seems to work fine in Chrome.

Need ability to define target function in terms of click target

I like to avoid hard-coding URLs in my JS. To that end, I tend to put them as data-attributes on my elements. This way I can have my templating technology (e.g. django template language or haml) appropriately resolve the URL and attach it to the element in this way. This also helps keep my JS static and not also templates (a choice that we could debate, but that's the choice I've made).

So, using that practice with jquery_jeditable, I would want to have a data attribute for the target. Currently, if the target argument is a function it receives the edit-value and settings object. This leaves me without the target element to read attributes off of this.

I can currently work around it by calling editable on each element individually, e.g., by setting each up in a $(".editable").each(function(e) {}) block, but this is not quite ideal. It would be nice if the target resolution support built-in were more robust, and the target function could receive the original elements to read data attributes off of.

Since I have a workaround, this isn't urgent. I wouldn't mind submitting the pull request if I can set aside some time in the intermediate future, but that won't be right now.

cancel and blur bindings not useful on hidden input

I'm working with a custom input type, and like the timepicker demo, I have my element function returning a hidden input. But that means that the various keycode and blur bindings bound to input returned by "element" are not useful. Can these be bound to the form instead, or provide some other hook?

Add support for onEditCallback function

It is currently not possible to extend the edition mechanism (for example to modify other elements of the page when editing: hide the images, put the rest of the page in grey...)

It is simple to add an onEditCallback parameter called just after that the edit form is displayed (based on the callback model):

• @param Function options[onEditCallback] Function to run before editing the content **
  [...]
  var onEditCallback = settings.onEditCallback || function() { };
  [...]
  onEditCallback.apply(self, [self.innerHTML, settings]);

Move the "onedit" event to a point after the form has been loaded, and is (really) ready for editing

Moving this event would allow plugin users to bind keypress events, for example to map ctrl+return, or similar, to the (newly created) submit button.
I patched the plugin to try this out and it works well in combination with the jquery.hotkeys plugin.

Text Input

This is more of a suggestion than an issue, but the default input when passing 'text' does not have a 'type' property on it, see:
text: {
element : function(settings, original) {
var input = $('');

My suggestion is to alter this to:
text: {
element : function(settings, original) {
var input = $('');

My reasoning is:

1. I don't think the tag is valid without the "type" attribute
2. (and actually more important to me) Having the type makes the field easier to custom style plus it will then automatically inherit all of my "input[type='text']" styles that already exist.

allow using live() instead of bind() to make things editable

jQuery.live is pretty useful! But I can't figure out how to use it with .editable.

Transmitted Value

I noticed that the key-value assignement in the option "data" with "type:select" always send to the webserver the content of the select instead of the key.

I patched it by modifying this line :

var option = $('').val(key).append(json[key]);

by this one

var option = $('').val(key).attr('value', key).append(json[key]);

Hope it can help.

Add class to editable item

It would be nice to add a classname (perhaps as a param) to the item that becomes editable. I'm adding this to individual elements using #id selectors, and would rather have editable add a class name to these so I can style them with css (or even addition javascript pizazz). I thought that's what the cssclass param does, but that doesn't seem to be the case.

Edit Button

Hello, Thank you for an excellent plugin. It works superbly, and is extremely easy to use.
I have a feature suggestion, maybe you can add an option that would add an icon or text next to the editable field, and once this icon/text is clicked the edit form activates.
Tooltip helps in guiding users what to do, but a more visual aid could be very handy.
Thanks

Chrome sorts select elements by id not text

This is a chrome-specific bug but there should be a workaround withing Jeditable code. When creating select data, Chrome will sort the resulting select element by the option ids not option text.

Tabbing from input to submit button fails

Given the following the following conditions are met:

• you are using "submit", "cancel" or a function for onblur option
• you have defined "submit" and/or "cancel" buttons

When you navigate with the TAB key from the input element to either of the buttons, the input element is blurred and the "onblur" option is triggered although from the user's point of view the focus is not lost from the editable input.

So if you want to navigate to OK button using a tab key', you lose any changes you have made.

I think the onblur should be triggered only after the focus is in none of the controls: the input, the submit button or the cancel button.

do input.focus(), not only $(input).focus()

I really should construct a test case for you for this one, but I'll have to get back to that.

The symptom I'm seeing is that when I

1. put a tabindex on a jeditable span (with $().live, using the approach you suggested in issue #18)
2. I tab to the element, and it opens as editable
3. keyboard input doesn't go in to the input element
4. pushing tab moves on without triggering the blur handler

This is because the input element never actually received focus. There's a line that does $(':input:visible:enabled:first', form).focus(); , and that does fire, but according to
http://www.w3.org/TR/wai-aria-practices/#focus_tabindex :

Use element.focus() to set focus - Do not use createEvent(), initEvent() and dispatchEvent() to send focus to an element, because these functions do not change the focus. DOM focus events are informational only, generated by the user agent after an element has acquired focus, but not used themselves to set focus.

this is perhaps a bug/feature request for jQuery, but in the meantime, I think it would help for jeditable to do the element.focus explicitly.

jEditable Custom Form submit

I am using jeditable to edit form and stuck at custom form submit to server.

There is product description box I need to edit. when some click edit it pops-up a window with product description in editable mode with a extra drop-down box (asking for reason what is user changing). However, I need only description to display on webpage but not reason.

How can I do this?

Example code

$.editable.addInputType('autogrow', {
 element : function(settings, original) {
 var hourselect = $('');
 var textarea = $('<textarea id="text" />');
 $(hourselect).append(
 $('').text('Select a reason').val(''),
    $('').text('Adding new Description').val('1'),
    $('').text('Editing Grammar').val('2')
  );
 $(this).append(hourselect);

 if (settings.rows) {
  textarea.attr('rows', settings.rows);
  } else {
  textarea.height(settings.height);
  }
  if (settings.cols) {
   textarea.attr('cols', settings.cols);
  } else {
  textarea.width(settings.width);
  }
    $(this).append(textarea);
    /* Last create an hidden input. This is returned to plugin. It will */
    /* later hold the actual value which will be submitted to server.   */
   var hidden = $('');
    $(this).append(hidden);

    return(hidden);
},
plugin : function(settings, original) {
    $('textarea', this).autogrow(settings.autogrow);
},
submit: function (settings, original) {
var value = $('#text').val();
    $('input', this).val(value);
 }
});

I can only send one value to server i.e. text or reason using hidden input field. However, I want to send reason and update description to server.

Has anybody came across this problem or use-case and provide some guidance?

I was using timepicker as my example.

Viral

Using jeditable with custom function returns undefined

Hi tuupola,

I need to use a custom function to save my input from the jEditable element, as I need to show a dialog (jQuery UI's) to propmt the user that he/she made the correct edit before saving it.

Unfortunately it seems that jEditable doesn't wait for the AJAX call and instead of the returned value from the AJAX call, returns undefined which shows on the page while the AJAX call continues in the background.

Any ideas?

Here's the code:

$('#quickEdit').editable(quickEditable, { 
    loadurl:   url.quickEditable
});

function quickEditable(value, settings) {

    var defaultValue = this.revert;

    // Check that the value is changed.
    if (defaultValue == value) {
        return defaultValue;
    }

    $("#dialog").dialog({
        buttons: {
            "OK": function() {
                $(this).dialog("close");
                return $.ajax({
                    type: "POST",
                    url: url.quickEdit
                    async: false,
                    data : {/* Some data */}
                }).responseText;
        },
            "Abort": function() {
                $(this).dialog("close");
                     return defaultValue;
                }
        }
    });   
}

Untitled

Setting data to blank string leaves original text in input field

After setting the data attribute to be a blank string, expected to get an empty input field when editing, instead it had the original text value.

http://pastebin.com/kzJP6U3M

HTML placeholder source presented for editing for empty elements

If I use HTML in the 'placeholder' option it is not detected correctly when editing an element and the HTML placeholder source is presented for editing for empty elements.

I have modified the following code to fix the problem for myself (tested on WebKit and Gecko):

    if ($(this).html().toLowerCase().replace(/(;|"|\/)/g, '') == 
                settings.placeholder.toLowerCase().replace(/(;|"|\/)/g, '')) {
                    $(this).html('');
            }

The only change was to add "|/" to the replace-regexp.

Suppressing form submission

Apologies if this is fixed in the current version, I'm having real trouble figuring out where the latest code is.

When I upgraded to jquery 1.7.1 the forms started submitting and the page would reload, causing the ajax request to fail. I had to add return false here:

                            var submit = $(settings.submit).click(function() {
                                if (submit.attr("type") != "submit") {
                                    form.submit();
                                    return false;
                                }
                            });

And that then caused a preventDefault() in jquery.

Jeditable submitting to function not working in chrome/safari

I created a basic example that highlights the issue: http://bl.ocks.org/1462746

Basically, in chrome/safari, the content temporarily changes, but returns back to the original after a short delay. This does not happen in firefox. I attempted to debug it, and nothing stood out to me as to why it was changing back (only did so once within the jquery code). Any help would be much appreciated.

Event propagation seems buggy on nested .editable elements

Hi, I have the following html structure, with nested div.wrapper element on which are binded dbbclick event to trigger jeditable:

<article>
    <section class="annotation1" data-section="1" id="section_data-section1" typeof="aa:section">
        <div class="wrapper" title="Doubleclick to edit...">
            <h1>Section </h1>
            <p>some content</p>
            <section class="annotation2" data-section="2" id="subsection_data-section2" typeof="aa:section">
                <div class="wrapper" title="Doubleclick to edit...">
                    <h2>Subsection </h2>
                    <p>some more content</p>
                </div>
            </section>
        </div>
    </section>
</article>

The problem is the event propagation seems incorrect and when I double-click a nested section it triggers .editable on the top-most parent. (see http://stackoverflow.com/questions/7429583/jeditable-propagation).

I tried to debug it by re-writing my javascript code like this:

$(document).ready(function() {
     $('div.wrapper').editable('edit/', { 
         loadurl   : 'edit/',
         //id        : 'section',
         name      : 'content',
         submitdata  : function(value, settings) {
             var section = $(this).parent('section').attr("data-section");
             return {
                 section: section,
                 type: 'ajax',
             }
         },
         loaddata  : function(value, settings) {
             var section = $(this).parent('section').attr("data-section");
             return {
                 section: section,
                 type: 'ajax',
             }
         },
         rows      : 6,
         width     : '100%',
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : 'Saving changes',
         tooltip   : "Doubleclick to edit...",
         onblur    : 'ignore',
         event     : "edit",
         style     : 'inherit',
         callback : function(value, settings) {
             // console.log(this);
             //console.log(value);
             //console.log(settings);
             $('section[class^="annotation"]').each(function(index) {
                $(this).attr('data-section', index + 1);
             });
         }
     }).live('dblclick', function(e) {
         e.stopPropagation();
         console.log("srcElement: ", e.srcElement);
         console.log("target: ", e.target);
         console.log("currentTarget: ", e.currentTarget);
         console.log($(e.currentTarget).parent('section'));
         var target;
         $(e.currentTarget).trigger('edit');
     });
 });

It logs $(e.currentTarget) correctly (it shows the right div.wrapper) but for some reason $(e.currentTarget).trigger('edit') still triggers .editable on the top most parent div.wrapper (or rather it gets wrong after I dblclick a parent div.wrapper element, cancel, and then dblclick a nested element.

Any idea?

Thanks

Not able to select from the list using Chrome

http://www.appelsiini.net/projects/jeditable/default.html

Using chrome, not able to select any values from the list. The moment the list is clicked, its getting closed. Please check if this is a issue..

"loadtext" setting does not seem to be applying

I am currently using "loadtext" and "loadurl" and according to the code it should be working.

The element type I am using is a textarea.

Supporting select autocomplete

Hi,

I've been trying to get jeditable to work with select-autocomplete:

http://github.com/gabehollombe/jquery-select-autocomplete

Do you think it's possible with a custom input?

Thanks,
Shige

unbinding via destroy does not work correctly

jeditable should use namespaced events (http://docs.jquery.com/Namespaced_Events) to bind the specified event. Otherwise calling editable('destroy') will unbind all other events bound to the selector.

Example:
$('div').click(function() {
alert('Hanlder 1 running');
});

$('div').editable('http://www.example.com/save.php');

Now calling $('div').editable('destroy') will unbind both the first handler and the handler bound via editable.

Solution:
Let jeditable bind a namespaced event. Add the following code somewhere to the initialization part of jeditables code:
settings.event += '.editable';

Dynamically Created Dom object does not gets editable

eg.
$('.cont').editor(......);

In my page there is only one

After this if by some reason dynamically a new "

" is created then editor does not works on the same?

Thanks in advance

CSJakharia

Custom html tags in submit cause failure

If i include custom html tags in the submit attribute then the jeditable never returns back to a normal div. the form remains. see below

$('.editable').editable( function(value, settings) {
//console.log(settings);
return(value);
}, {
type : 'textarea',
tooltip : 'Click to edit...',
onblur : 'ignore',
height : '50px',
//submit : "ok1", // this works
submit : "
ok1", // this doesnt.
cancel : "",
});

jQuery.parseJSON

Use jQuery.parseJSON instead of eval.

select fields don't take current value as selected for me

This code didn't work for me on Firefox.

                /* Loop option again to set selected. IE needed this... */
                $('select', this).children().each(function() {
                    if ($(this).val() == json['selected'] ||
                        $(this).text() == $.trim(original.revert)) {
                            $(this).attr('selected', 'selected');
                    }
                });

The following, hopefully simpler and faster did:

        if(json['selected'] == undefined)
        {
            json['selected'] = $.trim(original.revert);
        }
                /* Loop option again to set selected. IE needed this... */ 
                $('select', this).children().each(function() {
                    if ($(this).val() == json['selected'] ) {
                            $(this).attr('selected', 'selected');
                    }
                });

request: add onEdit event

I would like to request an "onEdit" event.

This would make it easier for people to detect when an edit event has begun, allowing them to fully customise the text prior to editing.

This will help solve your "please strip markup", newline or formatting issues and allow for some more customisation to jEditable.

It should be a small tweak to the code block which checks if it is an Ajax load.

a) stores the original element html() somewhere
b) retrieves the ajax content from "loadurl"
c) puts it into the element for editing

altered:
a) stores the original element html() somewhere
b) passes the original html to "onEdit" handler
c) retrieve the output and store the same way the ajax content is saved
d) puts it into the element for editing

loadurl fix (for slow response)

$.ajax({
type : settings.loadtype,
url : settings.loadurl,
data : loaddata,
async : true,
success: function(result) {
window.clearTimeout(t);
input_content = result;
input.disabled = false;

   content.apply(form, [input_content, settings, self]);  

}
});

if (!settings.loadurl) {
content.apply(form, [input_content, settings, self]);

}

A somewhat different usage scenario: sending a complete form instead

Hi,

assuming an object with a number of editable properties: if the user clicks into any of those, a inplace editor appears. If the user is done, however, instead of posting his/her change to the server an "OK/Revert" button pair appears, and only after the user clicks "OK" the entire object - not only the changed property - is sent to the server.

This would probably need rewiring in a number of places in the plugin; but maybe someone did this already?

Create git tags for individual releases

Hi Mika,

it would be helpful to add tags for the different releases so that one can check the differences between a specific release and the current version in git. Right now i'm trying to track down why onblur doesn't fire and I would like to compare the git version with the 1.7.2 release version. Having tags would help me here.

You can add the tags afterwards like this

git tag tagname commit

Then sync them with

git push --tags

Thanks
Frank

Cache select element

The display of the inline editing select could be sped up if the element would be cached after its first creation (given that no function was supplied to fill in the data, ie it contains only static data). When the input editor is canceled/submitted the select is simply hidden and not removed from the DOM tree.

onBlur function should support a return value to allow for normal cancellation

I've noticed that if I define an onBlur function, it will run that function but leave the form intact without "cancelling".

It would be nice if we were able to return "true" to maintain this "halt the cancellation" behaviour, but return false to keep the standard behavior (if no onBlur is defined)

This way, people can keep track of both "on cancel" and "on submit" events.

Disable value in select combobox

Hi,
thanks for this plugin
how to disable a value in "select" combobox ?
it's possible ?
Thanks