标签: x-editable

我在Meteor 0.7.2中进行了x-editable工作,但是由于升级到0.8.0,它不再正确呈现.我倾向于最终得到一堆空标签.这是令人沮丧的,因为数据就在那里,而不是在渲染函数被触发时.

<template name="clientPage">
    <header>{{> clientPageTitleUpdate}}</header>
</template>

<template name="clientPageTitleUpdate">
    <h1><span class="title-update editable" data-type="text" data-pk="{{_id}}" data-name="title" data-value="{{title}}">{{title}}</span></h1>
</template>


    Template.clientPageTitleUpdate.rendered = function() {

        console.log(this.$(".title-update").text());

        // set up inline as defaule for x-editable
        $.fn.editable.defaults.mode = 'inline';

        $(".title-update.editable:not(.editable-click)").editable('destroy').editable({

            url:    "empty",
            toggle: "dblclick",

            success: function (response, newValue) {
                // update value in db
                var currentClientId = $(this).data("pk");
                var clientProperties = { title: newValue };

                Clients.update(currentClientId, {$set: clientProperties}, function(error) {
                    if (error) {
                        Errors.throw(error.message)
                    }
                });
            }// success

        });

    }

我曾尝试embeding到另一个模板以此作为解释的"新"的渲染方法在这里,它似乎并没有任何工作.

现在使用x-editable的最佳方法是什么,渲染只会触发一次并且不能确保数据存在. …

在x-editable库中.如何输入数字？这不允许输入框中的任何字母.

我试过这段代码

<a class="items" data-name="itemqty" data-title="Enter Item Quantity" data-type="text" href="#" id="itemqty" onkeypress="return isNumberKey(event)"></a>

<script>
    function isNumberKey(evt) {
      var charCode = (evt.which) ? evt.which : event.keyCode;
      if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
          return false;
      } else {
          return true;
      }      
    }
</script>

但它不起作用.如果我使用普通输入文本它可以工作,但在x-editable中它不起作用.有任何想法吗？

在我的x-editable字段中,我有一个textarea,我想根据返回的值更新.这在我使用时$(this).html(newVal);如下所示

success: function(response, newValue) {
  newVal=unescape(JSON.parse(response).VALUE)
  $(this).html(newVal);
}  

问题是当我第二次点击编辑字段时,输入对象(class editable-input:)中的值保持与发送时相同. 有没有办法来解决这个问题？

使用bootstrap 3,我尝试在x-editable select字段中显示单引号作为可能的选择之一.

<a href="#" class="editable" 
            data-type='select'
            data-value="[{value:'1',text:'I'm happy'},{value:'2',text:'or sad'}]">
  Select  me
</a>

在这个例子中,我试图改变节目"我很高兴"作为选择之一.我通过data-value属性在JSON字符串中提供数据.

使用此函数调用使该链接可编辑(X-editable JS lib):

$('.editable').editable({   
    mode: 'popup',
    type: 'text',
    success: function(response) {
    }
 });

单击"选择我"链接,您将看到X-editable中的红色错误:"加载列表时出错".(可能是因为我的报价打破了JSON结构).

这是我在JSFiddle的问题!

任何解决此问题的建议都是值得欢迎的.谢谢.

在编辑页面上，我使用http://jqueryvalidation.org/来验证表单。

//validate object set using external file linked to page
var myValidateObj = {
    "rules": {
        "foo": {"required": true,"maxlength": 45,"minlength": 2},
        "bar": {"maxlength": 45},
    },
    "messages": {
        "foo": {"required": "Foo is required.",},
        "bar": {"maxlength": "bla bla."},
    }
};

var validator=$("#myform").validate({
    rules: myValidateObj.rules,
    messages: myValidateObj.messages,
});

<form id="myForm">
    Foo: <input type="text" name="foo" />
    Bar: <input type="text" name="bar" />
    <input type="submit" value="SAVE">
</form>

在另一个页面上，我正在显示前面描述的编辑页面的值，并允许使用http://vitalets.github.io/x-editable/进行内联编辑。验证规则和消息仍然适用，但现在只需要验证单个字段。假设myValidateObj此页面上存在该对象，是否可以使用它来验证单个字段？例如，在可编辑的验证回调中，如何在未通过验证时myValidateObj验证foo并返回适当的消息？

$('#foo').editable({
    type: 'text',
    validate: function(value) {
        //How do …

我正在尝试从country_select gem 中提取所有国家/地区名称的列表并将它们放入数组中。在表单中添加选择字段时，如何利用这个 gem 非常清楚：

<%= form_for User.new, url: root_url do |f| %>
  <%= f.country_select :country_code %>
<% end %>

但是如果我需要在表单之外使用相同的国家/地区列表怎么办。就我而言，我使用X-editable-rails gem进行内联编辑。我的目标是使内联版本可用于国家/地区属性。为此，我必须指定选择列表的来源，如下所示：

<%= editable @waiter, :country, type: :select, title: 'Your country', source: ["Country_1", "Country_2", "Country_n"] %>

但是，我无法想出一种方法来提取该列表并将其放入变量中。

我在这个堆栈溢出答案中尝试了这两种建议的方法：

@countries = ActionView::Helpers::FormOptionsHelper::COUNTRIES.zip(ActionView::Helpers::FormOptionsHelper::COUNTRIES)

和

<%= @countries = ActionView::Helpers::FormOptionsHelper::COUNTRIES %>

任何人都可以帮助实现这一目标吗？

我有问题包括boostrap数据时间选择器(https://eonasdan.github.io/bootstrap-datetimepicker/)和X-editable(https://vitalets.github.io/x-editable/)

如果我包含两个CSS文件:

bootstrap-datetimepicker.min.css 
bootstrap-editable.css

bootstrap datatimepicker在单击后不显示日历,只显示时间.但如果我删除

bootstrap-edtiable.css 

datatimepicker正常工作.

如何重新解决冲突？

我在 X-editable bootstrap 3 textarea 中遇到问题，需要更改列和行大小

$('.editable_textarea').editable({
       cancel: "Cancel",
       submit: "Save",
       type: "textarea",
       cols: "55"
});

运行时，它仅采用默认值，而不是我们的列和行值。有什么建议吗？提前致谢

好吧,我正在使用X-Editable,想知道是否可以提交新值和旧值.例如,该领域有"葡萄牙".使用X-Editable内联我将其更改为"西班牙".在AJAX请求中,我想发送主键,旧值和新值,以便在查询数据库时验证其他人是否更改了值.这是可能的,我错过了部分文档吗？

干杯.

我有一个链接，上面启用了x-editabledata-type="text"。

我想向input编辑项目时创建的字段添加一个附加属性。

因此，目前 x-editable 正在生成以下输入字段：

<input type="text" class="form-control input-sm" style="padding-right: 24px;">

我想添加一个模式属性，所以它看起来像（添加模式 attr ）：

<input type="text" class="form-control input-sm" style="padding-right: 24px;" pattern="blah">

我怎样才能添加这个额外的属性？