vitalets / x-editable Goto Github PK

Excellent project! I have a question about new records:

Currently, the UI for entering new information, say a new user signing up, doesn't look like a form, and is not familiar to web users - http://vitalets.github.com/x-editable/docs.html#newrecord

Is there a way to have a classic form look for that case? With empty fields, and Tab going to next field etc.

Hi,

I'm using x-editable Bootstrap template and I'm following the Getting started doc and in my application the popover open with a content empty.

Instead of having regular result list break by "
" coming from checklist successful call, can i replace it with json result? in my example, I have 5 items. if you check all of them, system should return "All" instead of each item named by its name.

Further it could be great if I could replace "
" that is hard-coded in your js file into a variable that user can control, in my example comma ", ".

Thank you for your hard work. x-editable is real nice!

I sort of added Knockout.js support to bootstrap editable prior to realizing x-editable existed. Repo here: https://github.com/atrophic/bootstrap-editable/commits/master

I implemented it by adding a custom knockout binding for koObservable, checking whether an observable is attached (as a data attribute on the editable element or as a setting passed in), and wrapping this.value with this.getValue() and this.setValue() to get/set the view model as appropriate.

I hope to have time to switch to x-editable and get this support built in here too, but if not I'm sure somebody can use my commits as a resource as it is working for me.

Is it possible to send data in some other way?

Like this:
{
username: "Tom Black"
}

Instead of
{
name: "username",
value: "Tom Black"
}

When I need loading two functions，the only click is not enough。It'll be better have different choice.

I am using x-editable in a lazy way.

<a href="#" data-pk="1" data-name="group" data-type="select" data-original-title="" data-url="/mybackoffice/mylikes/editCategory1" data-source="/mywebsite/getEditableCategories"  data-value="123" data-params="1" class="editable editable-click">

Each of my element has editable class. They remain as a simple element until they will be clicked.

A simple click is adding necessary editable functionality in a lazy way as this:

$('body').on('click', '.editable', function(){
       var $this = $(this);
       if(!$this.data("editable")){
           $this.editable().editable("show");
       }
 })

This pattern will let me to use editable for even ajax responses too. And almost all bootstrap components are working like this.

My problem is that when I have multiple elements with same data-source it is not working as It expected.

It seems as an ajax cache problem because when I change data-source urls as this

data-source="/mywebsite/getEditableCategories?1"
data-source="/mywebsite/getEditableCategories?2"
data-source="/mywebsite/getEditableCategories?3"
data-source="/mywebsite/getEditableCategories?4"  

It is working properly.

I could not create a fiddle example because of not having a server currently to fetch ajax responses.

Hi,

This is more a feature request that not a issue report.

There is a way for add input file for upload image?

If not, exist a solution?

Thanks and regards

It would be great if we could use elements with editable popup and others with editable inline in the same page.
Right now, only one can be used in the whole page.

Great work !!!

The plugin requires one to utilize a node's name or id to select it. Why can't I put all editable fields under a single class and use something like $('.editable').editable() to make them all editable?

Isolating this sucked, so at the very least I'm putting this here so somebody else can find it.

I'm not sure why, but the datepicker does not work (but does not error) on jQuery 1.7.1, but works fine on jQuery 1.7.2.

I didn't see documentation of the minimum jQuery version anywhere, but I'd stick to 1.7.2 or greater if you want datepickers :p

An addition that would make this awesome plugin even better would be if the support for field types was extended to support all the field types that HTML 5 support.
As in 'url', 'email', 'number', 'tel'. They basically act as text input field but especially on mobile devices makes inputting data a lot easier.

Is it possible to show multiple editable texts with using only one id. for example;

<a href="#" id="test" data-type="text" data-pk="2" >asd</a><br>

<a href="#" id="test" data-type="text" data-pk="3" >dfg</a><br>

<a href="#" id="test" data-type="text" data-pk="4" >ghj</a>

I want to make editable all lines that above with the code that below.

<script>
$(function(){
 $('#test').editable({
   url: '/post',
   title: 'Enter username'
  });
});
</script>

With the codes that above, only the first line became editable.

Google closure compiler can be used to detect javascript errors and achieve additional compression. x-editable returns a few errors when trying to pass the code through the compiler:
http://closure-compiler.appspot.com/home

JSC_PARSE_ERROR: Parse error. invalid property id at line 1798 character 30
$.extend($.fn.editabletypes, {abstract: Abstract});

Possible Fix: quoting the abstract {'abstract': Abstract}

JSC_PARSE_ERROR: Parse error. missing name after . operator at line 1813 character 52
$.fn.editableutils.inherit(List, $.fn.editabletypes.abstract);

Possible Fix: using another word than abstract. I think that is a reserved word not legal for JS use. http://www.javascripter.net/faq/reserved.htm

In my rails app:

I do:

head :ok

in my controller which gives a 200 response. However, this doesn't cause the pop up to go away (I just get a red border around the input.

However,
render :text=>""

Seems to work fine.

Is it still possible not to display all selected values from checklist?

Like: "Selected 3 of 7"

It has been default behaviour yet, but doesn't work now.

When working with lists, the checklist input type works well except that it cannot output the content to a standard markup :

<ul>
<li></li>
</ul>

The viewseparator option is not really useful in this case since you cannot prepend the first <li>and append the final one to the list.

Any idea / improvement possible to make this input type work better with ul/li ?

Maybe the select input type with an option multiple could work as well ..

When using the date picker in the (bootstrap) demo, if you "zoom out" into months or years range, the picker escapes its boundaries.

http://i.imgur.com/t0dcX

I see in the docs how you can make it all editable, but I don't understand how I'm sending my POST data through to a page?

$('#username').editable({
type: 'text',
pk: 1, //I understand this is the ID in the database? Right? =/
url: '/post', //What is /post? Shouldn't this be /post.php for example?
title: 'Enter username'
});

I don't understand at all how I am transferring this POST data, lets say I want to take my table on my PHP page displaying my users, and edit one so I can change the username? If I'm using the PHP PDO Library, and using a foreach to echo all of my results, how can I change the pk: option every time? I'm sorry, I'm new to AJAX I don't quite understand, but this plugin would be so amazing to have with my project.

Thank you for all who help,

• Necro (nCMS)

Hi,

I am using a PHP framework which is using 'clean urls'. Is there a way to override the default url's that are used when loading data from a server?

For example I use a checklist but I can't alter the url that is used for loading data from my server.

Checklist will load data from my server based on a url like:

sample.com/my-clean-url?name=checklist

It would be nice if I can modify the load url to something like:

sample.com/my-clean-url/name/checklist

where name and checklist are parameters send to the server. (Frameworks like Laravel, Codeigniter and many more are working like this).

I also tried to use "POST" to load data from my server:

$("#checklist").editable({
ajaxOptions: {
   type: 'POST'
}
});

But that doesn't seem to work?

Hi, really nice job you have done with x-editable. been looking for something like this for a while now.

I will like to have some content use inline edit, while some will use the pop edit. so my question is can inline-edit and pop-edit work together?, while there be any conflict if i include both js files?

jQuery UI is already used in the App where i want to use x-editable. though i like the bootstrap version UI of x-editable better, i'm thinking of using the jquery UI version because of reason above. my second question is: how will jQuery UI Bootstrap work with x-editable? since jQuery UI Bootstrap will give me similar UI look of bootstrap?

Finally, how can i drag the x-editable pop box around the page, instead of it just been fixed to where it pops out?

Can anyone suggest me to solve this error:

TypeError: this.container(...)._off is not a function
..... /js/jquery/jqueryui-editable/js/jqueryui-editable.js
Line 2438

Using inline way it works fine.

Any ideas ?

I'm using:

• X-editable - v1.1.1
• jQuery JavaScript Library v1.8.2
• jQuery UI - v1.9.1 - 2012-10-25

Hi
Pls provide the future type headmap. like this.
http://www.redlab.be/blog/2012/typeahaed/

We need a way to reset all x-editable elements so that they can be reused.

My personal example is that I'm using elements in a modal to create a new record, on creating the new record I'm not setting the pk of the elements, I'm simply closing the modal and refreshing a table in the parent window to show the new record. When I click the New Record button again the modal launches with the previously entered state/values and I cannot find a way to "reset" programatically all the fields to their initial state again.

Your own demo does the same thing, after a record is created the values persist in the fields instead of being reverted to "New Record" state of "Empty"

http://vitalets.github.com/x-editable/docs.html#newrecord

Please, pretty please :-)

Hi, is it possible to use put method instead of post for ajax call? I'd like to integrate x-editable in a rails project.
Thank you
Luca

Some of my dates coming from the mysql db are "0000-00-00"
when clicking on these bootstrap editable datepicker sets the year to 1900 ....
So its a bit tricky to reset to a current date....

I was wondering if there could be a button for "todays date" or something...

Thanks,

Andras

I used this option to customize my button labels and placement, why not getting it back ?

Hi
shown : fired when popover is shown (for select will wait for loading dropdown options).

This method not in this plugin.

For some reason I can't seem to figure out what I'm doing wrong, but when I click on the link the text box that comes up only shows one character. I've followed the examples for twitter bootstrap (the one I downloaded).

Ah, figured it out. You may want to put a warning (or see what to do to fix it), but it won't work with container-fluid or row-fluid.

Can I use this thing to change options, that rendered as links?

Example: http://clip2net.com/s/2wC73

Hello,

we can change several fields at the same time ?

It would be nice to have an onblur option. I would like to be able to submit the form when the input field is blurred.

Firstly, great job with this library, I love how it integrates into Bootstrap (almost) perfectly.

I can't seem to get this to work in a Bootstrap modal though. As a standalone page it works perfectly, but when using Twitter-Bootstrap's href method so it's loaded into the .modal-body using .load(), although the emptytext shows up, clicking an element has no effect.

Has it been tested in a modal ? Could I be doing something wrong ? Seems unlikely as it works as expected when I load it as a full standalone page.

First off, I just wanted to say great job on the re-write! : )

The issue I discovered in the course of my migration from the old bootstrap-editable codebase to x-editable today relates to specifying a function as the value for the 'url' parameter. When I do this and return a deferred object as the brief notes for the 'url' documentation say to do, I get errant behavior. That errant behavior is that after I handle saving the data in my own custom way, the updated anchor tag that the editable object is linked to incorrectly has the ''editable-unsaved' class attached to it (and thereby shows up as bold).

My current workaround is to just have the function always return true instead of a deferred promise (this results in the errant class not being added), but clearly that's not optimal because I have no way to then indicate that a save has failed (e.g. deferred.reject()).

I've whipped up a fiddle that shows what I'm doing and the behavior I'm seeing. Please let me know I've made a mistake in my coding ways or if you need any additional information.

http://jsfiddle.net/yzap/pg55p/14/

Thanks!

Hi, I want to use x-editable in my ExpressJS project. But I currently use Express's csrf middleware, so all POST request must have csrf token. Is x-editable currently support adding additional parameters in the Ajax request? If so, how can I do it?

I have already datepicker plugin. Does it make sense having x-editable without datepicker plugin or customized build as in twitter bootstrap?

By they way, thanks for this great plugin.

http://foundation.zurb.com

Currently bootstrap-editable.css use

.editableform-loading {
    background: url('img/loading.gif') center center no-repeat;
    height: 25px;
    width: auto;
    min-width: 25px;
}

which mean I have to put loading.gif in app/css/img/loading.gif folder, but I want to put img files in
a separate folder like app/img. bootstrap use this strategy like:

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

So I think it might be better.

After bootstrap last update, the inputs doesn't show up into popovers.... there is no javascript error.

I know you've integrated your own datepicker into the plugin, but is there any way you can add a time element in conjunction with the date element?

Great project! Is there a delay on the spinning ajax saving indicator? According to Chrome's tools it appears as if the full ajax post completes in 100ms, but the saving indicator is shown on the screen for a longer time than that. If there is a delay on the indicator can that be optionally changed or removed?

Hello Vitaliy.

I'm trying to use autotext option and have no results. I'm using SPAN tags instead of A and have next init-configuration:

$field.editable({
    url: ajax_url,
    toggle: 'manual', // for separated trigger button (<strong>)
    autotext: 'never',
    success: function(response, newVal) {
        console.log(arguments); // debug
        $field.html(response); // I want to set new value recieved from server
    }
});

and next HTML-markup:

<strong>Edit</strong>
<span data-type="select" data-name="select" data-pk="1" data-value="xxx" data-source="xxx" data-original-title="Select">xxx</span>

When I select new value with dropdown, span html is still changing automatically.
If you need, I can show you the live demo of my code.

Hope that explained clearly.

Isolating this sucked, so at the very least I'm putting this here so somebody else can find it.

I'm not sure why, but the datepicker does not work (but does not error) on jQuery 1.7.1, but works fine on jQuery 1.7.2.

I didn't see documentation of the minimum jQuery version anywhere, but I'd stick to 1.7.2 or greater if you want datepickers :p

When newlines ("\n") are present in the HTML value they are left as is by html2value() method.

When the value is converted back to HTML by value2html() the newlines become extra
tags.

Example:

Original HTML: This<br>\nis<br>my<br>sentence
Transformed value: This\n\nis\nmy\nsentence
Transformed HTML: This<br><br>is<br>my<br>sentence

Actually, it's not only about the tab, if the target element is too closed to the uppder bound of the container, since the popform html codes were append by the target element, so the form might be partially covered by the container bound. Please check the following screenshot:

https://www.evernote.com/shard/s6/sh/8c27f482-c768-4a65-a82a-894830b3c957/0d92aac2578e79fb3b56a0284ade5a90

The idea is, if the placement option can be decided according to the space between the target element and the upper bound, that would be great. Take the screenshot as exampe, ideally, the placement should be "bottom". And for those target elements which are very closed to the south bound of the container, it should be "up".

Hi,
First of all, I'd like to thank you for this great library.
I'd like to know if it is possible to let people use 'submit' with a 'PUT' verb (it seems like 'POST' is hardcoded). In fact, I want to update all my editable fields at once clicking on an 'update' button. Currently, I'm using your example for creating a new record but with the following url : /records/pk that I'd lijke to be associated with 'PUT'. Is it the right way to do it?
Thanks

Hello,

this is related to the older https://github.com/vitalets/bootstrap-editable/issues/47

safari, firefox (osx) : works
google chrome osx : not working correctly

created a jsfiddle:
http://jsfiddle.net/5pjuQ/4/

Can you verify if this is the correct way to create a select list ?

Thanks,

Andras

I have started implementing your code along side my .net application. I have ran into an issue with passing the form data to my webmethod. Is there a way to send the data in JSON format rather than plain form data?

MEMO -

|ruby-1.9.3-p194| Tylers-MacBook-Pro in ~/Desktop/code/phpfog/affiliaterockstar.phpfogapp.com/edit
± |master ✗| → npm install -g grunt
npm http GET https://registry.npmjs.org/grunt
npm http 200 https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/grunt/-/grunt-0.3.17.tgz
npm http 200 https://registry.npmjs.org/grunt/-/grunt-0.3.17.tgz
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/grunt'
npm ERR! { [Error: EACCES, mkdir '/usr/local/lib/node_modules/grunt']
npm ERR! errno: 3,
npm ERR! code: 'EACCES',
npm ERR! path: '/usr/local/lib/node_modules/grunt',
npm ERR! fstream_type: 'Directory',
npm ERR! fstream_path: '/usr/local/lib/node_modules/grunt',
npm ERR! fstream_class: 'DirWriter',
npm ERR! fstream_stack:
npm ERR! [ 'DirWriter._create (/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23)',
npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:37:53',
npm ERR! 'Object.oncomplete (fs.js:297:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! System Darwin 12.2.0
npm ERR! command "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "grunt"
npm ERR! cwd /Users/tyler/Desktop/code/phpfog/affiliaterockstar.phpfogapp.com/edit
npm ERR! node -v v0.8.8
npm ERR! npm -v 1.1.59
npm ERR! path /usr/local/lib/node_modules/grunt
npm ERR! fstream_path /usr/local/lib/node_modules/grunt
npm ERR! fstream_type Directory
npm ERR! fstream_class DirWriter
npm ERR! code EACCES
npm ERR! errno 3
npm ERR! stack Error: EACCES, mkdir '/usr/local/lib/node_modules/grunt'
npm ERR! fstream_stack DirWriter._create (/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23)
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:37:53
npm ERR! fstream_stack Object.oncomplete (fs.js:297:15)
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/tyler/Desktop/code/phpfog/affiliaterockstar.phpfogapp.com/edit/npm-debug.log
npm ERR! not ok code 0

./////////////////////////////

please elaborate - mac osx install - need to integrate to bootstrap

////////////////////