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

时间:2013-07-10 14:13:51

标签: listview jquery-mobile

我有一个动态获得的Listview,带有H3和2个P标签。如:

<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个项目。我从一开始就不知道。 我的页面上还有一个按钮,用于将listview的内容保存到数据库中。 我实际上需要所有列表项中的productID, quant price TAG内容,以便能够在我的数据库中正确保存项目。 如何获取每个列表项的内部标记,以便将它们发布到可以完成工作的PHP中?

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

我假设我应该在表单中包含listview,而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的动态元素的表单。

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:3)

工作示例: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示例创建的,因此您可以直接使用它。

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

当您从数据库中读取数据时,您需要使用 JSON.parse() 函数从字符串化文本创建对象。之后,只需遍历一个数组并重新创建一个listview。

查看我的其他 ARTICLE ,了解如何动态创建列表视图。