标签: jeditable

我对jquery很新,现在,我使用jeditable让用户在我的网页上编辑一些信息.

所以这是我的问题,如何使用jeditable将多个变量发送到php文件？据我所知,当用户点击提交按钮时,id和值将被POST到php文件.

所以让我说我有这个代码:

var x = 1;
var y = 2;

$('.edit_area').editable('test.php', {
    type      : 'textarea', 
    cancel    : 'Cancel',
    event     : "dblclick",
    submit    : 'OK',
    indicator : '<img src="img/loading.gif">',
    tooltip   : 'Click to edit...'
});

当用户单击jeditable中的OK按钮时,如何将x和y变量发送到test.php？谢谢

我正在使用spservices,datatable,jeditable和datatable.editable处理SharePoint 2010.我的框架版本如下

1. IE 9,10,11
2. jQuery 1.7.2
3. spservices 2013.01
4. 数据表1.9.4
5. 数据表可编辑2.3.3
6. jedittable N/A.

现在问题是数据代码的编辑在FireFox和Chrome中运行良好,但是当我从元素模糊它不消失时它在IE中不起作用.

我的代码如下

  <link rel="stylesheet" type="text/css" href="/sites/MS/Style%20Library/en-us/CSS/forms-simple.css"/>

  <script type="text/javascript" src="/sites/ms/Style%20Library/en-us/JS/jquery.min.js"></script>
  <script type="text/javascript" src="/sites/ms/Style%20Library/en-us/JS/jquery.SPServices-2013.01.min.js"></script>
 <script type="text/javascript" src="/sites/ms/Style%20Library/MarketSurveillance.js"></script>
  <script type="text/javascript" src="/sites/MS/Style%20Library/ar-sa/JS/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="/sites/MS/Style%20Library/en-us/JS/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="/sites/MS/Style%20Library/en-us/JS/jquery.dataTables.editable.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
var oTable, anOpen = [], sImageUrl = "/sites/MS/Style%20Library/Images/", sInner;
var viewFields = "<FieldRef Name='ID' /><FieldRef Name='Title' /><FieldRef Name='TelephoneNo' /><FieldRef Name='PlaceOfProduct' />";
viewFields += "<FieldRef Name='CategoryID' /><FieldRef Name='SubCategoryID' /><FieldRef Name='Status' />";
populateGrid("/sites/ms/", "ComplaintForm", viewFields, "", handleData);

oTable = $("#tbComplaintForm").dataTable({
  "bProcessing": …

我正在使用Jeditable进行就地编辑.我正在使用的控件之一就是select类型.当用户单击该字段时,将select生成以下控件:

<div id="status" class="editable_select">
    <form>
        <select name="value">
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
        </select>
        <button type="submit">Save</button>
        <button type="cancel">Cancel</button>
    </form>
</div>

我想弄清楚的是如何使用jQuery来检测何时该select控件被更改,特别是因为它没有ID属性.

这是我到目前为止,但事件没有被触发:

$(document).ready(function () {
    $('#status select').change(function () {
        alert("Change Event Triggered On:" + $(this).attr("value"));
    });
});

UPDATE

更新到jQuery 1.4.2解决了我的问题以及使用Matt的解决方案.

我正在尝试使用我的rails 3应用程序进行jeditable.我想内联编辑一些字段.实际上它在我的客户端工作,但数据没有在我的应用程序中更新.

你能看看吗？提前致谢!

我的看法:

<dt>Overview :</dt>
<dd class="edit_textfield" id="<%= @project.id %>" name="overview"><%= @project.overview %></dd>

我的控制器:

 def update
    project = Project.find(params[:id])
    overview = params[:value]
    project.save
    render :text => params[:value]
  end

我的application.js:

$(".edit_textfield").each( function() {    
      $(this).editable('update', {
            type    :   'textarea',
            cancel  :   'Cancel',
            submit  :   'OK',
            indicator   :   'Saving...',
            tooltip :   'Click to edit...',
            rows        :       10,
            method      :       "put",
            submitdata  :   {id: $(this).attr('id'), name:$(this).attr('name') }
        });
});

感谢kschaper,它有效.

但是当我在页面中使用2个字段的jeditable并且我编辑它们时,只保存了一个.Rails认为第二个值是0

我认为问题来自我的控制器:

  def update
    @project = Project.find(params[:id])
    @project.name = params[:name] 
    @project.overview = params[:overview] …

我在页面上有一组文本(为了简单起见,假设我有两个),我希望它可以单独编辑,所以我使用JEditable来实现它并且它完美 - 我点击一个文本,它转换为下拉,我更改值,单击外部,它已保存.我点击另一个,它转换为输入字段,我键入其他内容,在其外部单击 - 它也被保存.大.

现在我需要一个按钮(图像,链接 - 无论如何),点击它可以将我的两个可编辑字段切换到编辑模式.即,我点击这个"编辑"控件,现在我会看到一个下拉菜单和一个输入字段而不是我的两个文本,我可以在两个地方编辑值,然后点击它们两个外部(理想的)或点击另一个按钮/图像/链接,"保存",好吧,保存它(不太好,但可以忍受).

有可能实现吗？如果是这样......怎么样？

不,我不想在这里使用jqGrid或类似的东西.

我正在使用jQuery UI sortable交互和Jeditable。用户可以重新排序元素并影响这些元素的内容。我onblur event遇到的是jQuery可排序侦听器吞没了我要监听的Jeditable设置。

用户可以单击Jeditable元素，然后该元素变为可编辑状态，但是如果单击了li可排序元素，则单击该按钮时，onblur事件将被忽略。如果他们在外部单击，则不会忽略该事件li。当它们在内部单击时，如何使Jeditable知道模糊事件li？

这是一个说明问题的jsFiddle

HTML标记

<ul class="elementlist">
    <li id="elementSk_10">
        <span class="editable-element" id="10">TEXT!</span>
    </li>
    <li id="elementSk_33">
        <span class="editable-element" id="33">Some text</span>
    </li>
</ul>

可编辑的

$('.editable-element').editable('http://jsfiddle.net/echo/jsonp/', {
    onblur: 'submit',
    width: 250,
    indicator: 'Saving...'
});

jQuery UI可排序

$(".elementlist").sortable({
    update: function(event, ui) {
        var elementSerialized = $(this).sortable('serialize');
        $.post('http://jsfiddle.net/echo/jsonp/', {
            elementSk: $(this).sortable('serialize')
        });
    }
});?

编辑：为了弄清楚正在发生的事情，让我逐步给出带有屏幕截图的演练。

1. 请点击 Some Text
2. 点击li包含TEXT!
3. 释放点击 TEXT!

目前，我还没有重新排序任何东西。单击li和释放并没有触发 …

我正在使用best_in_placegem在Rails应用程序中进行就地编辑.但是,我需要在某些文本区域进行(X)HTML编辑,因此我需要一个富文本编辑器.TinyMCE正在网站的其他地方使用.

但是,添加编辑器并非易事best_in_place.为了大大过度简化,gem使用jQuery来动态插入textarea标签,TinyMCE在页面加载时初始化,用textarea编辑器替换可用的s,所以当best_in_place放入它时textarea,TinyMCE已经来去匆匆.之后我尝试重新初始化TinyMCEbest_in_place插入textarea,但我不认为我在代码中找到了正确的位置来做到这一点,因为到目前为止它还没有用.

有传言称这种集成是可行的,但在我的网络搜索中没有可见的文档,所以欢迎指点.(同样,这个答案是无益的,指向两个断开的链接.)我认为我的首选解决方案顺序是这样的

• 以下是如何将TinyMCE与 best_in_place
• 它不能用TinyMCE完成,但这里是如何使用另一个富文本编辑器
• 它不能用,best_in_place但这是Rails 3.2.x 的另一个富文本编辑就地解决方案.

我使用jEditable,我想知道,如果,如果有可能有一个选择(类型=选择)与optgroups？

我正在尝试使用jeditable更新表格单元格,因此当用户单击单元格时,它变得可编辑.下面的代码工作正常:

    $(".click").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
                indicator : "<img src='img/indicator.gif'>",
                tooltip   : "Click to edit...",
                style  : "inherit"
            });

<b class="click" style="display: inline">Click me if you dare!</b></> 

但是当我尝试使用jQuery编辑已动态添加到表中的单元格时:

$("#rounded-corner tbody").append("<td class='clicked'>row</td>");

事件不会发生.怎么解决这个问题？我想我可能不得不使用.on函数？

这是我用来使用jEditable向表行添加选择下拉列表的代码:

$('tr',this).find('td:eq(8)').css('cursor','pointer')
    .editable( 'update.php', {
        'type': "select",
        'loadurl': 'json.php',
        'onblur': 'submit',
        'callback': function( value, settings ) {
         // etc.
        }); 

问题是下拉列表中的选项未按所需顺序排序.来自的原始JSON json.php按名字排序(根据客户的要求):

{"0":"Select driver...", "48":"Ashley Solis", "43":"Casey Segal", // etc. 

但在最终的网页中,选择下拉列表中的选项按编号排序.

似乎jEditable在我不想要的时候重新排序JSON数据.我该如何解决？