Currently, I am utilizing jquery, jquery mobile, js, html, and css within Phonegap to develop my android/ios application.
However, my understanding of js & jquery is somewhat limited.
In my index.html file, I use .load to load other html files into specific divs based on their names.
Is there a way to streamline the following code:
$('#page01001').load('cards/01001.html');
$('#page01002').load('cards/01002.html');
$('#page01003').load('cards/01003.html');
$('#page01004').load('cards/01004.html');
..
$('#page01900').load('cards/01900.html');
(which currently takes up nearly 2000 lines in my .js file), with a single rule that would work like this:
$('#pageIDENTIFIER').load('cards/IDENTIFIER.html');
so that any div with the name "pageWHATEVER" will automatically load an html file with the corresponding name (minus the word "page")?
I have researched jquery wildcards, but haven't been able to figure out how to then implement that wildcard input in the second part of the command.
To make it slightly more complex, there are multiple instances in index.html where references to the same html file occur:
$('#page01001').load('cards/01001.html');
$('#pageX01001').load('cards/01001.html');
$('#pageH01001').load('cards/01001.html');
Therefore, the divs "page01001", "pageX01001", & "pageH01001" all need to load 01001.html.
Additionally, there are numerous divs that are merely placeholders and do not require loading any content. I only want to target divs that begin with "page.." for loading purposes.
Can you suggest any improvements to simplify this process?