Click here to Skip to main content
15,892,059 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Im creating a mobile web app.
I have 3 .html documents. 1: products1.html 2: products2.html 3: allproducts.html

On products1.html and products2.html, I have div elements showing my products, example from product1.html:

<div data-role="content" id="product1items">

    <ul data-role="listview">
        <li>
        <a href="item1.html" data-ajax="false" data-transition="slide">
            <img src="images/item1.jpg">
            <h2>Item1</h2>

        </a>
        </li>
</ul>
</div>


On allproducts.html I would like to get/fetch the elements from products1.html and products2.html, so this page will showing all my products. How would I do this in JQuery/JQuery Mobile ?

Please bear in mind Im (almost) a total beginner
Posted

1 solution

In jQuery there is selector concept same as in css we used to select any element from HTML DOM.

Like to select a div by its id is :-
JavaScript
$("#divTest").html();


Here in your scenario you have
    element in both product1.html and product2.html you can simply give a id to both of them like
    In products1.html
    HTML
    <ul id="ulPoducts1"></ul>
    similarly
    in products1.html
    HTML
    <ul id="ulPoducts1"></ul>


    Now get the inner html of both the ul element and put them in two variables like below :-
    JavaScript
    var products1 = $("#ulProducts1").html(); // contains all products as <ul><li> elements from products1.html page
    var products2 = $("#ulProducts2").html(); // contains all products as <ul><li> elements from products2.html page</li></ul></li></ul>


    Now we can have a
      element in allproducts.html page and set the both above html appended here like :-

      Ex :-
      JavaScript
      $("#ulAllProducts").html(products1 + products2 );



      Now the main concern here for you is to pass these product list as 'li' elements to allproducts.html page from those two pages for which this link might be of help to you, please check here :- Click Here


      Hope this will be helpful.
 
Share this answer
 
v3
Comments
Member 10813004 13-May-14 8:47am    
Thanks a lot for your help, this points me in the right direction for sure :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900