标签: x-editable

我使用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>

我设置的场景非常类似于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) …

当用户添加新行并单击取消按钮(不放任何数据)时,这是否可行,该行将被删除.否则我怎么能改变取消按钮代码,因为这个代码使用angularJS的默认xeditable代码.(或者如果行为空,我怎么能调用delete函数？)

这是例子.

取消按钮的HTML:

      <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
        cancel
      </button>

Run Code Online (Sandbox Code Playgroud)

我正在使用x-editable js.我的x可编辑弹出窗口未完全显示.

我认为z-index中的问题,我在超链接上尝试过但没有运气.

<script type="text/javascript">
  $(function () {
    $('.extraSectionTitle').editable({
        success: function (response, newValue) {
            if (response.status == 'error') {
                return response.msg;
            }
        }
    });
    $('.extraSectionDescription').editable({
        success: function (response, newValue) {
            if (response.status == 'error') {
                return response.msg;
            }
        }
    });
  });
</script>

<div class="row-fluid">
  <div class="span7">
    <div class="accordion-body collapse in">
        <div class="row-fluid" id="myDiv">
            <div class="box box-color box-bordered">
                <div class="box-title">
                     <h3><i class="icon-th-list"></i> Hi</h3>

                </div>
                <div class="box-content nopadding">
                    <table class="table table-hover table-nomargin table-bordered">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr> …

我使用angular-xeditable来编辑表单中的元素.我希望所有元素始终处于"可编辑"模式,例如,在用户开始编辑之前不需要按下"编辑"按钮.

我一直试图在我的控制器中使用$ show()来启用表单中的元素,但是看起来这些元素再次进入查看状态,例如在尝试保存值时使用"onaftersave"等.

如何始终处于编辑模式,用户永远不需要启用编辑才能开始编辑值？

我是,使用bootstrap x-editable https://vitalets.github.io/x-editable/index.html

这是我的HTML代码:

<a href="#" data-name="category" class="addon" data-value="{{$cat->id}}"
   data-pk="{{$cat->id}}" data-type="select2" data-title="Favor llenar los campos"></a>

javascript代码:

$('.addon').editable({
    placement: 'bottom',
    mode: 'inline',
    showbuttons: false,
    source: categories,
    select2: {
        width: 200
    },
    display: function (value) {
        var elem = $.grep(categories, function (o) {
            return o.id == value;
        });

        $(this).attr('data-value', value);
        $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');

        return $(this).text(elem[0].text);
    }
});

但.我想在没有select2选项的情况下以编程方式更改为普通的x-editable元素.

我已尝试使用jquery将a元素的data-type属性更改为text,但它不起作用.

$('a.addon').attr('data-type', 'text');

还尝试过:

$('a.addon').select2('destroy');

还尝试过:

$('a.addon').editable({type: 'text'});

但两种选择都不奏效.select2仍处于活动状态.如何删除x-editable的select2选项？你能帮我吗

我在我的网络应用程序中使用x-editable进行内联编辑.我想将其他参数传递给服务器,我想从触发元素的数据属性中读取.这是我的可编辑元素:

<a href="#" data-url="save_url" data-pk="271" data-type="text" data-value="Value" class="editable" data-param="XXX">Value</a>

我想传递data-param属性,但我不知道如何访问trigger元素.我尝试过$(this).data('param'),但我得到null ...我的完整可编辑代码:

$.fn.editable.defaults.mode = 'inline';
$('.editable').editable({
    params: { param: $(this).data('param') }
});

$('.editable').data('param')由于我有许多.editable元素,因此不会考虑呼叫.

谢谢

首次在我的应用程序中使用Angular-Xeditable时,我遇到了一个问题,试图弄清楚如何将x可编辑的更改保存到通过ng-repeat循环访问的对象.

该文档主要侧重于使用onbeforesave和onaftersave进行验证,虽然它确实表明它可用于保存内容,但这些示例并没有显示如何将超过$ data(或$ index)的内容传递给onbeforesave/onaftersave方法.样本显示保存类似$ scope.person,如果你有一个项目,这很好.

但如果30个列表中的第3个人被编辑怎么办？你当然不想要全部保存它们.如何只保存编辑的对象而不是数组中的所有内容？

我在尝试获取所选对象而不是传递给成功回调的"newValue"时遇到问题.

这是一个例子:

$("select").editable({
        type : "select",
        title: 'Select Fruit',
        source : [
            {text : "Apple", value: "option_1"},
            {text : "Orange", value: "option_2"},
            {text : "Mango",value: "option_3"},
            {text : "Strawberry",value: "option_4"}
        ],
        success:function(response,newValue){
            console.log(newValue); // newValue contains the "text" string ok..
            // How do I get the selected source object? eg. {text : "Orange", value: "option_2"}
            // So I can access the object like..
            console.log(newValue.value); // output option_*
        }
    });

谢谢卡尔

我想使用angular x-editable指令来处理以下文本字段

(a)我不想显示按钮.我尝试了按钮=没有选项,但它似乎不适用于文本类型的输入.

看这里的小提琴.

(b)我希望基础ng-model属性能够在每次击键时立即更新,而不必等待用户将注意力集中在输入之外.(与香草角度的默认行为一样,例如.<input type=text ng-model="somepropertyname" />

如何用角度x可编辑实现(a)和(b)？链接到小提琴