When adding this package to my package list, I'm getting the following error. Afterwards, my Meteor server shuts down.

Changes to your project's package version selections:

natestrauser:x-editable-bootstrap  added, version 1.5.2_2

=> Meteor server restarted                    
http.js:732
    throw new Error('Can\'t render headers after they are sent to the client.'
          ^
Error: Can't render headers after they are sent to the client.
  at ServerResponse.OutgoingMessage._renderHeaders (http.js:732:11)
  at ServerResponse.writeHead (http.js:1153:20)
  at ProxyServer.<anonymous> (/home/tim/.meteor/packages/meteor-tool/.1.1.3.1ezhh7++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/tools/run-proxy.js:96:21)
  at ProxyServer.emit (/home/tim/.meteor/packages/meteor-tool/.1.1.3.1ezhh7++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/http-proxy/node_modules/eventemitter3/index.js:100:27)
  at ClientRequest.proxyError (/home/tim/.meteor/packages/meteor-tool/.1.1.3.1ezhh7++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:140:16)
  at ClientRequest.emit (events.js:117:20)
  at Socket.socketOnData (http.js:1593:9)
  at TCP.onread (net.js:528:27)

I guess this has something to do with Bootstrap loading more than once?

My .meteor/packages file:

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-platform
insecure
meteorhacks:fast-render
twbs:bootstrap
aldeed:collection2
aldeed:simple-schema
aldeed:autoform
mquandalle:jade
accounts-base
accounts-password
reactive-var
iron:router
hitchcott:ez-modal
zimme:iron-router-active
rajit:bootstrap3-datepicker
aldeed:autoform-bs-datepicker
aslagle:reactive-table
anti:i18n
dburles:collection-helpers
reactive-dict
msavin:mongol
autopublish
manuel:viewmodel-explorer
manuel:viewmodel
coffee:script
babrahams:editable-list
yogiben:autoform-modals
babrahams:editable-text
natestrauser:x-editable-bootstrap

I believe that the version of Rangy used by this project is causing this warning in Chrome as you can see here timdown/rangy#223.

Warning:

'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach). 

Can you update Rangy, please ?

Hey,

I created an empty Meteor project (1.1.0.2), and simple added meteor-x-editable-bootstrap.

When I execute Meteor and load the client, I get to following error message in my browser's debug console:

[Error] TypeError: undefined is not an object (evaluating '$.fn.popover.Constructor')
(anonymous function) (natestrauser_x-editable-bootstrap.js, line 4741)
(anonymous function) (natestrauser_x-editable-bootstrap.js, line 4953)
global code (natestrauser_x-editable-bootstrap.js, line 17232)

I'm not sure, but might it be possible that x-editable-bootstrap is loaded before jQuery?

Hello!

this is the only problem I found using this great package.

Accounts ui dropdown stopped working suddenly and after some testing removing packages one by one I found it was x-editable who was causing the problem.
I'm trying to find why but I'm pretty new to meteor and I can't find the reason by now.

I've noticed that for an example editable text field, if I edit the value and in the success attribute I do a Meteor collection update with the newValue the value gets double populated into the Meteor template. For example, if have a documentTitle field set to Noodle Recipe and I update its value to Spicy Noodle Reciple after the update the Meteor template will show Spicy Noodle RecipeSpicy Noodle Recipe. I assume this is because x-editable and Meteor are both updating the DOM behind the scenes. x-editable does it after a successful edit and Meteor does it once it sees the value update in Mongo. To fix this I had to add data-display="false" to all my x-editable fields to disable x-editable's updating.

It might be good if this was built in and/or at least mentioned in the docs.

I'm just testing this out before including it in a larger project. I created a new meteor >1.0 project, added bootstrap3 and x-editable, and tested by making simple edits to main.html and main.js. I know I have the right syntax for the wysihtml5 editor and the options for controlling the toolbar buttons, because I can hide the emphasis and font-styles. As far as I can tell, lists and links should be showing up by default, but aren't. Enabling them explicitly in the options does not work. I can post details if that will help, but what I've done seems pretty basic. As I don't see any posting about a similar bug, I could well just be missing something simple. My apologies if so.

So, not sure if this is an issue with the package or an issue with my knowledge/understanding of Meteor's new Blaze engine.

In Meteor 0.7.2 I had the package working correctly and everything was functioning fine with the .editable() call within a rendered template function. But now after upgrading my project to Meteor 0.8.0 the rendered function is being called before the variables are being loaded in by Spacebars so I end up with x-editable fields showing up as empty.

Any light you could shed on the subject would be super appreciated. I am still pretty new to Meteor and trying to get my sea legs.

Thanks again

[Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See https://www.chromestatus.com/features/6680566019653632 for more details.

I am storing some content in html and displaying with triple {{{}}} like so
<p id="textArea" class="editable" data-type="wysihtml5" data-placeholder="Enter text" data-emptytext="Click to enter text" data-rows="4">{{{content}}}</p>

If the content is

hello

hello

If you can post an example in the readme, can you indicate where each piece of code is being stored. I'm confused as to how the editable field is being updated (or where each piece of code is being called from).

Thanks

Hello,

I have a template that is used to display a "card". When the page first loads, sometimes the first few "card" templates have no selectable options, yet all the others do.

Is this an issue with x-editable or my Meteor code? It is in a rendered callback, following the pattern set forth. Please let me know, thank you.

Hi there.
On Meteor 0.9.3.1 (OS X 10.9.5) I have issue with loading.gif.
At start-up console prints warning:

Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3000/packages/natestrauser:x-editable-bootstrap/lib/bootstrap-editable/img/loading.gif".

As your css override file implies:

.editableform-loading {
    background-image: url('/packages/natestrauser:x-editable-bootstrap/lib/bootstrap-editable/img/loading.gif');
}

But all packages path that I have on local machine is like natestrauser/x-editable-bootstrap, not natestrauser:x-editable-bootstrap.
So the right path for this resource should be

http://localhost:3000/packages/natestrauser_x-editable-bootstrap/lib/bootstrap-editable/img/loading.gif

As I digg deeper in Meteor-generated general (Big-Daddy) CSS in .meteor/local/build/programs/web.browser/ there is 2 rules:
Right one, that generated from you package lib bootstrap-editable.css with right path

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

and wrong one, generated from your path-override.css

.editableform-loading {
  background-image: url('/packages/natestrauser:x-editable-bootstrap/lib/bootstrap-editable/img/loading.gif');
}

Why would you override the right path Meteor generated with wrong path?

I have two browsers open and when I make changes to one, the template in the other reflects the change. However, the form element when engaged does not reflect the updated value...

I have the data-value set to a {{}}; although I am not sure if Meteor applies reactivity here?

I'm using this package to insert a new document that I then want to edit immediately using x-editable in Meteor. It's basically an insert form, but you actually end up editing an inserted document with default values. So when a user hits a certain route, in the waitOn attribute the route calls a Meteor method to insert a new document with default values, it passes that document ID to the Session, and then in the data attribute I query for that document to pass to the template for editing.

I was getting a problem on the template page in that the editable() calls were running before the data was inserted into the template and thus all the x-editable fields were showing empty instead of being populated with the default values. To fix this I had to add an if(this.data()) check in the action attribute of the route. This makes sure the data is ready and then the x-editable fields all start with their appropriate default values. I thought you may want to add this to the documentation. I'm using Meteor 0.9.X

So my route looks like this:

this.route('displayDocument', {
    path: '/displayDocument',
    waitOn: function() {
        //  Insert a new document for them to edit using x-editable
        Meteor.call('insertBlankDocument', function(error, success) {               
                if(error)
                        return alert(error.reason);   
                else {
                    if(success) {    
                        Session.set("newDocumentId", success);

                        //  Subscribe to document
                        Meteor.subscribe('documents', success);

                        return;
                    }
                    else
                        return alert("There was a Meteor Method problem on inserting a blank document.");
                }
          });   
    },

    data: function() {  
        return newDocument = Documents.findOne(Session.get("newDocumentId"));
    },

    action: function() {
        if(this.data())
            this.render();
        else
            this.render('loading');
    }
});

The new 0.6.0 version of meteor seems to break it. The error is a Uncaught TypeError: Cannot read property 'defaults' of undefined

Perhaps its to do with the variable scoping?

Can you please update this package for Meteor 0.6.5?

Thanks!

So I recently downloaded this package into my meteor project, and right away when I started my app it threw this error.

bootstrap-editable.js line 4707 is below:

When researching the problem I have found some possible causes, but have not been able to solve the error.

One theory is that popover.js is being loaded after x-editable.js - if this is true, does anyone know how I can create a specific order?

Also, I personally am not looking to use the Default Popover form, I'm looking to implement the inline version of the package. If there is an easy way to just ignore the popover code, that'd work for me as well!

Any help will be greatly appreciated!
Here is the list of packages within my project:

Firstly when I added the package the Meteor server died and then after being restarted it simply doesn't seem to work, as I keep getting the following error:

Uncaught TypeError: Cannot read property 'Constructor' of undefined(anonymous function) @ bootstrap-editable.js:4707

We are noticing that text appears twice on the screen after disabling the x-editable widget. This may have something to do with Meteor and x-editable trying to manage the DOM at the same time. Has anyone else experienced, and or resolved, this issue?

The example in the readme simply calls insert from a success callback.

Could you add to the example how to wire up validation and insert errors, for example those returned from collection2 inserts or updates, so that they are shown with the x-editable UI, if that is possible?

I'd like to use the datetime picker but this appears to be added in 1.4.4. Are there plans to update to a new release anytime soon?

I am using this syntax to make template helpers in my application.

THESE EXAMPLES ARE OUTDATED. SEE REPOSITORY: https://github.com/ecwyne/meteor-x-editable-27/tree/master
template.html

<template name="editableSpan">
    <span class="editable" data-value="{{value}}" data-collection="{{collection}}" data-id="{{id}}" data-field="{{field}}"></span>
</template>

Template.js

function traverse(context, field){
    var arr = field.split('.');
    while(arr.length && (context = context[arr.shift()]));
    return context;
}

Template.editableSpan.rendered = function(){
    var defaults = {
        mode: 'inline', //my preference
        toggle: 'dblclick', //my preference
        success: function(response, newValue) {
            var obj = {};
            obj[this.dataset.field] = newValue;
            var collection = traverse(window, this.dataset.collection);
            console.log(obj);
            collection.update(this.dataset.id, {$set: obj});
            console.log(this.dataset);
        }
    }
    var obj = _.extend(defaults, _.omit(this.data, 'doc', 'field', 'collection'))
    $('.editable').editable(obj);
}

Template.editableSpan.helpers({
    value: function(){
        return traverse(this.doc, this.field);
    },
    id: function(){
        return this.doc._id;
    }
})

app.html

{{> editableSpan collection="MyCollection" field="my.deep.field" doc=this}}
<!-- all additional settings can be placed as arguments on this (eg. toggle="click")-->

See example below

I would be more than willing to implement this and create a pull request, but wanted to throw it out there and get any feedback.

Hey @nate-strauser,

Submit button does not work in some cases is a known issue
as you can see here vitalets/x-editable#105.

Would be cool if you add this work-around in your package.

Change line 103 on boostrap-editable.js

from
this.$form.submit($.proxy(this.submit, this));
to
this.$form.find('.editable-submit').click($.proxy(this.submit, this));

If it's possible I can do a pull-request =)

After install with Meteorite this component introduces a client side crash.

(something with "defaults")

after remove of the package my app worked again

After installing and using the code in the README I get the error

Uncaught TypeError: Cannot read property 'template' of undefined 

in the file bootstrap-editable.js:4504

innerCss: $.fn.popover && $($.fn.popover.defaults.template).find('p').length ? '.popover-content p' : '.popover-content',

Environment: Meteor Release 0.6.6.3

i did the same example

<p id="textArea" class="editable" data-type="textarea" data-placeholder="Enter text" data-emptytext="Click to enter text" data-rows="4">{{textAreaContent}}</p>

and on onRendered

$('#textArea.editable').editable({
  success: function(response, newValue) {
    <do something with newValue - usually a collection.update call>
}});

i have this error

Uncaught TypeError: Cannot read property 'Constructor' of undefined
    at natestrauser_x-editable-bootstrap.js?hash=7e0b900…:4736
    at natestrauser_x-editable-bootstrap.js?hash=7e0b900…:4948
    at natestrauser_x-editable-bootstrap.js?hash=7e0b900…:17237