Creating and Adding Pages dynamically in Jquery Mobile

Question

I have an array that contains a bunch of Widget Ids[s1,s2,s3...etc]. This array can vary as in sometimes it can have 5 ids and other times it can have 2 ids etc.So basically as i am looping through this array I want to be able to create pages dynamically for every id in the array.

This is the basic format of the page that i want to be able to create dynamically for every id.

  <!--id should eqqual id# like s1,s2,s3,etc -->

   <div data-role="page" id="page5">

              <div data-role="header" data-position="fixed">
               <a data-iconpos="notext" href="#" data-role="button" data-icon="flat-menu"></a>
                    <h1>BasketBall Fanatico</h1>
                     <a data-iconpos="notext" href ="#page2" data-role="button" data-icon="home" title="Home">Home</a>
              </div>

                   <div data-role="content">

                    <ul data-role="listview" data-inset="true">

                     <li data-role="list-divider" data-theme="b">Raptors Score</li>
                     <li><h2>0</h2></li> 
                    </ul>
                   </div>


          </div>

This is the loop where i am iterating through the ids in the array and trying to add pages dynamically.This is what i have attempted in order to achieve my result but have failed.

for(var i=0; i<widgetId.length; i++){

            var makePage = $("<div data-role='page' id="+widgetId[i]+">
              <div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button' data-icon='flat-menu'></a>
              <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div>
              <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li>
              <li><h2>0</h2></li></ul></div></div>");

            makePage.appendTo($mobile.pageContainer);

          }

I am using the chrome console window and its telling me: Uncaught SyntaxError: Unexpected token< . However upon looking at my code i don't see where the error could be. Also is my approach correct for creating pages dynamically? All answers are highly appreciated .

I am new to jquery and web dev in general so apologize in advance.

Answer 1

I had to dynamically add products to an auction page and I used the following code. The issue was that I didn't know exactly how many products I was going to display on the page.

/* takes element type and all options for element returns html string for the element
* Arg1 is the type of element to create 
* Options is an array/list of key-value pairs. The even numbered objects in the array 
* will represent the attribute name, the odd elements will be the value of the attribute*/ 
function addElement(ELEMENT, options)
{
    var element = document.createElement(ELEMENT); //create the element

    var i = 0;//iterate through the array and set each element
    while(i < options.length)
       element.setAttribute(options[i++], options[i++]);
    return element;
}

Then in my index file I do this 'fullProductList' is a div that will hold all divs containing products:

//get the html for each item and write it to the page
for( var i = 0; i < productList.length; i++)
    $("#fullProductList").append(getProductHTML(productList[i], i));

Here is getProductHTML:

/* creates a parent div for each product that will be displayed on the page
 * a picture is displayed in the parent div then a child div is created
 * in order to display product info and a bid button which happens in another function*/
function getProductHTML(prod, id)
{//create the parent div
    var html = document.createElement('div');
    html.className = 'singleProduct';
    html.id = id;
    //append the picture to the parent div
    html.appendChild(addElement('img', ['SRC', prod.pic, 'ALT', prod.name, "height", "400px", 'class', 'pic']));
    //create div for product title
    var title = document.createElement('div');
    title.className = 'prodTitle';
    title.innerHTML = '<b>'+prod.name + "<b><BR>" ;
    html.appendChild(title);
    html.appendChild(writeProductInfo(prod));//this creates another child div for the product data
    return html;
}

Instead of numbering the div's myself I used an ID from the DB which was provided with each product. I didn't include the code for writeProductInfo because I think with this you should be able to see how I made it work. I know that your situation will be different from the situation I encountered but I hope this helps.

Answer 2

I have figured out the error after several trial and error. It seems that the cause of the error was that i had the page structure on different lines . so for instance if everything is on the same line it works fine like this.

for(var i=0; i<widgetId.length; i++){

            var makePage = $("<div data-role='page' id="+widgetId[i]+"><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button'data-icon='flat-menu'></a> <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li><li><h2>0</h2></li></ul></div></div>");

            makePage.appendTo($.mobile.pageContainer);

          }

I don't know what it is but when everything is in on line it seems to be working fine. I hope this can help someone in the future with a similar error or someone who is looking to create pages dynamically in general.