jquery - 使用 jQuery UI .sortable 的序列化方法获取排序元素的 html 作为值-6ren

jquery - 使用 jQuery UI .sortable 的序列化方法获取排序元素的 html 作为值

转载作者：行者123 更新时间：2023-12-01 01:31:59

我使用 PHP，但 Jquery 是我遇到的问题。经过长时间的搜索找不到答案。我对 Ajax、Jquery 的了解有限。这只是一个测试脚本，如果有效我可以在项目中实现它。

目标:使用自动保存更改列表的顺序 - 但仍然可以使用自动保存进行编辑。

什么有效:更改顺序(无自动保存)，内联编辑适用于自动保存，但没有“可排序列表”的脚本!

问题:当左键单击列表元素(li)时，它可以拖动到新位置，但内联编辑不再起作用!

问题:如何解决上述问题？通过 $.post 链接将提供新订单头寸的哪些数据？ (我需要元素 ID 和新订单的 ID)。两者都会通过链接给予吗？每个

都有一个需要的ID，而不是需要来自DIV的ID。

可能的解决方案:制作一个 handle 来拖动元素，以便列表元素的其余部分可编辑或只是更正代码。

每一个小步骤都是迈向宏伟解决方案的一步。谁来帮助我？

生成的 HTML

<html>
<head>
<script src="jquery-1.10.2.js"></script>
<script>
    function showEdit(editableObj) {
        $(editableObj).css("background","#FFF");
    } 

    function saveToDatabase(editableObj,column,id) {
        $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
        $.ajax({
            url: "saveedit.php",
            type: "POST",
            data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
            success: function(data){
                $(editableObj).css("background","#FDFDFD");
            }        
       });
    }
    </script>

<script type="text/javascript" src="inc_link_jquery-1.js"></script>
<script type="text/javascript" src="inc_link_jquery-ui-1.js"></script>  

<script type="text/javascript">
$(document).ready(function(){                  
    $(function() {
        $("#listorder ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable("serialize") + '&action=orderlist'; 
                $.post("saveedit2.php", order); 
        }                                 
        });
    });
}); 
</script>   

</head>
<body>      
<br><br><br>

<div id="listorder">
<ul class="ui-sortable">
<li id=1><div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3<br></div></li>

<li id=2><div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1<br></div></li>

<li id=3><div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2<br></div></li>

</ul>
</div>


</body>
</html>

最佳答案

问题是您的可排序列表的 id 必须以特定方式格式化，并且您无法从已排序项目的 html 中填充值。该值必须位于 id 属性中。:

From the docs:

serialize( options )Returns: String

Serializes the sortable's item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

It works by default by looking at the id of each item in the format "setname_number" ("key_value" might have been more apt here IMHO), and it spits out a hash like "setname[]=number&setname[]=number".

Note: If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number"

For example, a 3 element list with id attributes "foo_1", "foo_5", "foo_2" will serialize to "foo[]=1&foo[]=5&foo[]=2".

You can use an underscore, equal sign or hyphen to separate the set and number. For example "foo=1", "foo-1", and "foo_1" all serialize to "foo[]=1".

注意:

也就是说，.sortable("serialize") 只有在您有已知的数字或少量文本时才有效。

以下是 sortable("serialize") 工作原理的示例:

$(".sortableList").sortable({
  scroll: true,
  axis: "y",
  containment: "parent",
  handle: $("div.sortableListTitleText").add("div.handle.move"),
  update: function() {
    var newList = $(".sortableList").sortable("serialize", {
      attribute: "itemid"
    });
  }
});

$("#listorder ul").sortable({
  opacity: 0.6,
  cursor: 'move',
  update: function(event, ui) {
    var incorrect = $(this).sortable("serialize");
    var correct = $(this).sortable("serialize",{attribute: "innerHTML"}); 
    console.log(incorrect);
    console.log(correct);
    
  }
});


function showEdit(editableObj) { 
  //....
}

function saveToDatabase(editableObj, column, id) { 
  //....
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="listorder">
  <ul class="ui-sortable">
    <li id="foo_1">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3
        <br>
      </div>
    </li>

    <li id="foo_d">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1
        <br>
      </div>
    </li>

    <li id="foo_5">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2
        <br>
      </div>
    </li>

  </ul>
</div>

由于您使用的是动态的 contenteditable div，并且可能包含 = - _ 和 html 等任何字符，因此我建议您不要使用 .sortable("serialize") at all 并 instea 循环遍历可排序列表中的元素，并为每个元素手动设置键和值对，然后在 ajax 中发送该字符串。

这是我的做法:

$("#listorder ul").sortable({
  opacity: 0.6,
  cursor: 'move',
  update: function(event, ui) {
       var params=['action=orderlist'];
      $(this).find(".ui-sortable-handle").each(function () {
            var $this=$(this);
            var key=$this.attr('id');
            var value=encodeURIComponent($this.html());  // you MUST encode this val since it may have chars thatll muck up the string
            var param = key+'='+value;
            params.push(param); 
      });
      var paramsString=params.join('')
      console.log(paramsString);
    
    
		   $.ajax({
			  type: "POST",
			  url: "page.php",
			  data: paramsString,
			  success: function(response) { 
			   
			  },
			  error: function(xhr, status, error) { 
			  }
		   });
    
  }
});


function showEdit(editableObj) { 
  //....
}

function saveToDatabase(editableObj, column, id) { 
  //....
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="listorder">
  <ul class="ui-sortable">
    <li id="foo_1">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3
        <br>
      </div>
    </li>

    <li id="foo_2">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1
        <br>
      </div>
    </li>

    <li id="foo_3">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2
        <br>
      </div>
    </li>

  </ul>
</div>

关于jquery - 使用 jQuery UI .sortable 的序列化方法获取排序元素的 html 作为值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39781135/

文章推荐： python - 如何使用Python Pandas使用动态字符串来过滤数据帧

文章推荐： javascript - 关于禁用按钮的基本 javascript 问题

Python word_tokenize 化
我是 python 的新手。我试图找到我的文本的频率分布。这是代码， import nltk nltk.download() import os os.getcwd() text_file=open(
安卓 fragment 化
我对安卓 fragment 感到困惑。我知道内存 fragment 但无法理解什么是 android fragment 问题。虽然我发现很多定义，比如 Android fragmentation re
wordpress - Docker 化 WordPress
尝试对 WordPress 进行 dockerise 我发现了这个场景: 2个数据卷容器，一个用于数据库(bbdd)，另一个用于wordpress文件(wordpress): sudo docker
javascript - 了解页面是否被 iframe 化
这个问题已经有答案了: From the server is there a way to know that my page is being loaded in an Iframe (1 个回答)
php - 如何 docker 化
我正在玩小型服务器，试图对运行在其上的服务进行docker化。为简化起见，假设我必须主要处理:Wordpress和另一项服务。在Docker集线器上有许多用于Wordpress的图像，但是它们似乎都
jquery - 如何使我的新注册设计表单实现 AJAX 化？
我想要发生的是，当帐户成功创建后，提交的表单应该消失，并且应该出现一条消息(取决于注册的状态)。如果成功，他们应该会看到一个简单的“谢谢。请检查您的电子邮件。” 如果不是，那么他们应该会看到一条适当
c# - 添加元数据以对客户进行 strip 化
就是这样，我需要为客户添加一个唯一标识符。通过 strip 元数据。这就是我现在完全构建它的方式，但是我只有最后一部分告诉我用户购买了哪个包。我试着看这里: Plans to stripe 代码在这
java - 是否可以出于测试目的将类包私有(private)化
我有一个类将执行一些复杂的操作，涉及像这样的一些计算: public class ComplexAction { public void someAction(String parameter
java - 使用自定义打包类型对遗留项目进行 Maven 化
这个问题已经有答案了: maven add a local classes directory to module's classpath (1 个回答) 已关闭10 年前。我有一些不应更改的旧 E
Android 相互 fragment 化
我使用 fragment 已经有一段时间了，但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在，我设法为此隔离了一个用例，它是这样的: Add fragment A(也使用 ad
html - 包含号码的OL strip 化
我的 html 中有一个 ol 列表，上面有行条纹。看起来行条纹是从数字后面开始的。有没有办法让行条纹从数字开始？我已经包含了正在发生的事情的片段 h4:nth-child(even) {
html - 主菜单 html 化
如何仅使用 css 将附加图像 html 化？如果用纯 css 做不到，那我怎么能至少用一个图像来做最佳答案这不是真正的问题，而是您希望我们为您编写代码。我建议您搜索“css breadcrum
java - 锁拆分与锁 strip 化
以下是 Joshua 的 Effective Java 的摘录: If you do synchronize your class internally, you can use various te
http - REST 化 URL
在这里工作时，我们有一个框向业务合作伙伴提供 XML 提要。对我们的提要的请求是通过指定查询字符串参数和值来定制的。其中一些参数是必需的，但很多不是。例如，我们要求所有请求都指定一个 GUID 来标
c - 如何对像素数据进行位 strip 化？
我有 3 个缓冲区，其中包含在 32 位处理器上运行的 R、G、B 位数据。我需要按以下方式组合三个字节: R[0] = 0b r1r2r3r4r5r6r7r8 G[0] = 0b g1g2g3g4
javascript - 需要帮助了解如何对网站进行 ajax 化
我最近发现了关于如何使用 History.js、jQuery 和 ScrollTo 通过 HTML5 History API 对网站进行 Ajax 化的要点:https://github.com/br
spring - Camel 化 Spring 启动应用程序
我们有一个 Spring Boot 应用程序，由于集成需要，它变得越来越复杂——比如在你这样做之后发送一封电子邮件，或者在你之后广播一条 jms 消息等等。在寻找一些更高级别的抽象时，我遇到了 apa
android - 指定Google Pay token 化
我正在尝试首次实施Google Pay。我面临如何指定gateway和gatewayMarchantId的挑战。我所拥有的是google console帐户，不知道在哪里可以找到此信息。 priva
azure - AWVERIFY 未进行属性(property)化
昨天下午 3 点左右，我为两个想要从一个 Azure 帐户转移到另一个帐户的网站设置了 awverify 记录。到当天结束时，Azure 仍然不允许我添加域，所以我赌了一把，将域和 www 子域重新指
elasticsearch - Elasticsearch Facet token 化
我正在使用terms facet在elasticsearch服务器中获取顶级terms。现在，我的标签"indian-government"不被视为一个标签。将其视为"indian" "governm

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 使用 jQuery UI .sortable 的序列化方法获取排序元素的 html 作为值

注意:

这是我的做法: