jQuery Mobile listview save all items to database

Question

I have a dynamically obtained Listview with a H3 and 2 P tags. As in:

<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>

The listview may contain 1 items (li) or 10-15 items. I cannot know from the beginning. I also have a button on my page that Is destined to save the contents of the listview to a database. I actually need the productID, quant and price TAG contents from all the list items in order to be able to save the item properly in my database. How can I get each list item's inner tags so I can post them to a PHP that will do the work?

Is there a way to send all list items in one post so there would be no lost items?

I assume I should have the listview inside a form and the button onclik should be something like:

$("#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...
});       

But I have no idea how to post a form containing dynamic elements from jquery.

Any help would be appreciated

Answer 1

Working example: http://jsfiddle.net/ZmtW3/

What you want to do is create an array of objects that will be saved into a database. Each loop will go through a listview and parse only needed data. Every listview element is going to be stored into a single object, and that object will be pushed into an array.

Javascript used:

$(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);
    });
});

This example is create on a basis of your listview example so you can use it directly.

When listview is parsed we will stringify an array and send that string to server side. Form is not needed but you can use it, here's my older answer on how to properly submit a form when working with jQuery Mobile. Basically you will use AJAX to communicate with a server.

Whey you read that data back from a database you will need to use JSON.parse() function to create an object from a stringified text. After that just loop through an array and recreate a listview.

Take a look at my other ARTICLE to find how a listview can be created dynamically.