标签: x-editable

我有一个x-editable输入,我用它来编辑用户名.元素的默认操作是单击自身时,可以编辑值.但是我想启用点击元素的.editable并能够编辑输入中的值.为了缩短在这里的东西是一个的jsfiddle我目前的状况.

jQuery的:

$(function(){
  $.fn.editable.defaults.mode = 'inline';
  $('#publicname-change').editable({
    type: 'text',
    url: '/post',
    pk: 1,
    placement: 'top',
    title: 'Enter public name'
  }
);

//ajax emulation. Type "err" to see error message
$.mockjax({
  url: '/post',
  responseTime: 100,
  response: function(settings) {
    if(settings.data.value == 'err') {
      this.status = 500;
      this.responseText = 'Validation error!';
    } else {
      this.responseText = '';
    }
  }
}); 

HTML:

<div class="control-group control-group-inline">
  <label class="control-label labelModified" for="publicname-change">Public name:</label>
  <div class="controls">
    <a href="#" id="publicname-change" class="editable editable-click inline-input">Mr.    Doe</a>
    <div class="edit">edit <i …

如何调整弹出窗口的输入宽度

它似乎没有任何选择

http://vitalets.github.io/x-editable/docs.html#text

我使用x-editable插件进行就地编辑,效果很好.

以下jsfiddle显示了他们的文档中的示例:http: //jsfiddle.net/ibrahima_yock/CFNXM/27/

<div>
     <span>Status:</span>
     <a href="#" id="status"></a>
</div>

.

//make status editable
$('#status').editable({
    type: 'select',
    title: 'Select status',
    placement: 'right',
    source: [
        {value: 1, text: 'status 1'},
        {value: 2, text: 'status 2'},
        {value: 3, text: 'status 3'}
    ]
 });

正如您在jsFiddle中看到的那样,在html窗格中状态为"空"(以红色显示).我们想把这个词翻译成另一种语言.我们怎么指定它？

我有一个自定义的x可编辑输入类型,用于输入城市并选择一个像这样渲染的国家:

注意底部的按钮; 这是因为初始化代码包含showbuttons: 'bottom':

$('#location').editable({
    url: '/post',
    title: 'Enter city and country',
    showbuttons: 'bottom',
    value: {
        city: "Napier",
        country: "nz"
    },
    sourceCountry: [
        {value: "af", text: "Afghanistan"},
        ...
        {value: "zw", text: "Zimbabwe"}
    ]
});

但对于这个小部件,在侧面渲染按钮是没有意义的; 所以我希望按钮默认存在; 因此,我尝试为此可编辑类型设置默认值:

Location.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
    tpl: '' +
        '<div class="editable-location">' +
        '<label><span>City: </span><input type="text" name="city"></label>' +
        '</div>' +
        '<div class="editable-location">' +
        '<label><span>Country: </span><select name="country"></select></label>' +
        '</div>',

    inputclass: '',
    showbuttons: 'bottom',
    sourceCountry: []
});

但showbuttons关键是被忽视; 其他人正在申请罚款,但不是这个.那么如何设置可编辑类型的默认值？

这是可编辑的代码,

(function ($) { …

我正在玩x-editable,我想知道他们如何在他们的演示页面中做最后一个例子.

http://vitalets.github.io/x-editable/demo-bs3.html?c=inline (自定义输入,多个字段)

我找不到任何实际显示每个部分代码的东西.我只能用firebug挖掘它,但这更耗时,我只是看到我需要的部分.

有没有代码片段呢？

我试图在Django中进行X-Editable内联编辑模型.我只是想尝试更改模型实例的属性(在本例中,是数据集对象的名称).

我不确定如何编写视图,以便正确捕获ajax请求中的信息:

POST /datasets/9/update_name/
{
    pk:    3            //primary key (record id)
    value: 'The Updated Name' //new value
}

然后将新名称保存到数据集对象.

urls.py

# ex: /datasets/3/update_name
url(r'^(?P<pk>\d+)/update_name/$', update_name ,
    name='update_name'),

detail.html

<h1 class="page-title center">
    <a href="#" id="datasetName">{{ dataset.name }}</a>
</h1>
<script>
$('#datasetName').editable({
  type: 'text',
  pk: {{ dataset.pk }},
  url: '{% url 'datasets:update_name' dataset.pk %}',
  title: 'Edit dataset name'
  params: { csrf: '{% csrf_token %}'} # // This isn't working
});
</script>

views.py

def update_name(request, dataset_id):   
    # ... Update Dataset object ... …

我想为所有正在使用的过滤器设置一个重置/清除按钮,但我无法弄清楚与该按钮相关的点击事件会触发什么...例如:

为了重置所有这些select2,选择和输入字段并将所有过滤器恢复为空/空值,我需要触发和/或附加并传递给什么？

我使用x-editable引导程序,我试图让它工作一旦点击x-editable的保存按钮应该执行php文件.

我已经尝试了我所知道的一切来解决这个问题,但我不是一个铁杆的javascript程序员,所以将它改为Json试一试是我的观点一点努力.

我已经阅读了x-editable的文档,这应该是使用它的方法.

所以这是html:

  <a href="#" class="username">superuser</a> 

Javascript:

      $.fn.editable.defaults.mode = 'inline';

      $('.username').editable({
           type: 'text',
           pk: 1,
           url: 'post.php',
         });

一旦post.php丢失,x-editable就会出错,但是如果它看到php文件就什么都不做.来自php文件的内容是无关紧要的,因为那里只有一个带有测试的控制台日志.

控制台日志永远不会被执行,我无法弄清楚为什么它不工作,我已经看到1或2个问题,如St​​ackoverflow上的东西等,但没有使用完整的信息.

这是我第一次在互联网上问一些东西,所以我希望有人能帮助我解决这个问题.

我试着之类的东西改变url到localhost/dir/etc但是没有效果.还设置/posturl,并添加var posturl = "post.php";没有帮助

哦,我已经测试了所有资源:但如果它有帮助:

<!-- Le styles -->  
<!-- jQUERY -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Sharre -->
<script src="recources/assets/js/jquery.sharrre-1.3.4.js"></script>
<!-- Minnified bootstrap -->
<script src="recources/assets/min/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="recources/assets/css/pagestyle.css" rel="stylesheet">
<!-- X - Editable -->
<link href="recources/assets/css/bootstrap-editable.css" rel="stylesheet">
<!-- External link -->
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.4/bootstrap-editable/js/bootstrap-editable.min.js"></script>

在使用XEDITABLE进行编辑时,如何使用jquery验证插件验证信息？

这是我当前未经验证的x-editable字段

这就是我假装的

我设置的场景非常类似于x-editable演示站点中的Editable Row示例.在这种情况下,有一个简单的表,其中三列用于数据,第四列用于编辑和删除按钮.表格外的第三个按钮会在表格中添加一行.当表单可编辑时,数据列将变为可编辑(x-editable库的主要功能).对于此演示,第一列成为简单的文本编辑,后两列成为下拉列表.

通过在行模板上使用ng-repeat来创建表.我需要做一些不同的事情,都涉及访问ng-repeat创建的范围.我需要

• 检测行何时可编辑以及何时不可编辑
• 当第一个下拉列表更改时,筛选第二个下拉列表的选项

为了尝试使用这个演示,我为各行添加了一个控制器.这让我可以访问表单(name = rowform),但我仍然无法在"make"属性上设置监视.当用户做出选择时,我甚至无法找到表单的哪些属性正在发生变化.

如何在'make'属性上设置手表？

页面控制器

    angular.module('app').controller("quoteBuckingRaterController",
    function ($scope, $q, $filter, listService, transactionDataService) {

        $scope.equipment = []; 
        $scope.makes = []; 
        $scope.models = [];

        $scope.showModel = function(equip) {
            if(equip.model) {
                var selected = $filter('filter')($scope.models, {id: equip.model});
                return selected.length ? selected[0].name : 'Not set';
            } else {
                return 'Not set';
            }
        };

        $scope.showMake = function(equip) {
            if (equip.model) {
                var selected = $filter('filter')($scope.models, { id: equip.model });
                if (selected.length && selected.length > 0) {
                    if (equip.make != selected[0].make) …