jQuery Mobile listview 将所有项目保存到数据库

Question

我有一个动态获取的带有 H3 和 2 P 标签的 Listview。如：

<li>
  <h3>Product no.4</h3>
  <p><strong>Product description</strong></p>
  <p>_price_</p>
  <p>_quant_</p>
  <p class="ui-li-aside"><strong>productID</strong></p>
</li>

列表视图可能包含 1 个项目 (li) 或 10-15 个项目。我不能从一开始就知道。 我的页面上还有一个按钮，用于将列表视图的内容保存到数据库中。 实际上，我需要所有列表项中的 productID、quant 和 price TAG 内容，以便能够将该项正确保存在我的数据库中。 如何获取每个列表项的内部标签，以便将它们发布到可以完成工作的 PHP 中？

有没有办法在一个帖子中发送所有列表项，这样就不会有丢失的项目？

我假设我应该在表单中包含列表视图，并且 onclik 按钮应该是这样的：

$("#saveinv").click(function() { //When save button is clicked...
       var optionTexts = [];
       $("#listaproduse li").each(function() { optionTexts.push($(this).text()) });
       var text = '"' + optionTexts.join('"<br/> "') + '"';
       ... some post function here...
});       

但我不知道如何发布包含来自 jquery 的动态元素的表单。

任何帮助将不胜感激

Answer 1

工作示例：http://jsfiddle.net/ZmtW3/

您要做的是创建一个将保存到数据库中的对象数组。每个循环都将通过一个列表视图并仅解析所需的数据。每个 listview 元素都将被存储到一个对象中，并且该对象将被推入一个数组中。

使用的Javascript：

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#save-list', function(){ 
        var listview_array = new Array();
        $( "#list li" ).each(function( index ) {
            listview_el = new Object();
            listview_el.id=$(this).find('h3').text()
            listview_el.price=$(this).find('p').eq(2).text();
            listview_el.quantity=$(this).find('p').eq(3).text();
            listview_array.push(listview_el) 
        });
        var stringifyObject = JSON.stringify(listview_array);
        alert(stringifyObject);
    });
});

这个例子是在你的listview例子的基础上创建的，所以你可以直接使用它。

解析列表视图时，我们将字符串化一个数组并将该字符串发送到服务器端。不需要表单，但您可以使用它，here's 我的旧答案是关于如何在使用 jQuery Mobile 时正确提交表单。基本上，您将使用 AJAX 与服务器进行通信。

如果您从数据库中读回该数据，则需要使用 JSON.parse() 函数从字符串化文本创建对象。之后只需遍历一个数组并重新创建一个列表视图。

看看我的另一个ARTICLE，了解如何动态创建列表视图。