Response title
This is preview!
Move this topic
Creating a list view database
in jQuery Mobile
•
10 years ago
Hello,
I am in the process of creating a mobile application using html5 and jQuery mobile. I have an excel database from a website that is a directory of categories and names. I am trying to import this database into my app and make it searchable using lists (there are 4 tiers of information). Is there away I can import this information into my application without having to build a page for every tier of information?
I hope that makes sense. Thanks in advanced for any assistance.
1
Replies(4)
Re: Creating a list view database
10 years ago
jQuery Mobile doesn't have anything that will help.
Look into HTML5 database features or using a static site generator. If you use an HTML5 database, you will need to use some sort of run-time templating system, or you will have to write some very ugly Javascript. A static site generator can avoid the need for that. I use Middleman.
With a static site generator, there usually is some means of defining simple data structures - lists, etc. You can loop through data then and apply a template for each list item.
It also may be possible with some static site generators to pull data directly from a database at build time.
For example, Middleman is written in Ruby, so you could install a Ruby database connector, ActiveRecord (or other ORM) and run data you get from the database through templates.
If you aren't using a static site generator to create your webapp or static pages for native app (PhoneGap, in particular) you are probably doing way too much work.
For native apps, I use Rhodes, which has a database, ERB templates, and uses Ruby for business logic. So, this avoids the whole mess of having to generate dynamic content in Javascript in a different way.
Look into HTML5 database features or using a static site generator. If you use an HTML5 database, you will need to use some sort of run-time templating system, or you will have to write some very ugly Javascript. A static site generator can avoid the need for that. I use Middleman.
With a static site generator, there usually is some means of defining simple data structures - lists, etc. You can loop through data then and apply a template for each list item.
It also may be possible with some static site generators to pull data directly from a database at build time.
For example, Middleman is written in Ruby, so you could install a Ruby database connector, ActiveRecord (or other ORM) and run data you get from the database through templates.
If you aren't using a static site generator to create your webapp or static pages for native app (PhoneGap, in particular) you are probably doing way too much work.
For native apps, I use Rhodes, which has a database, ERB templates, and uses Ruby for business logic. So, this avoids the whole mess of having to generate dynamic content in Javascript in a different way.
Leave a comment on watusiware's reply
Re: Creating a list view database
10 years ago
If I understand your question. You could try loading your data into a javascript array, then search this array via form selects, and then display the results in a listview with a filter. Would that be suitable? Does depend on the size of the array. I have a 12000 line data file (about 500kb) and it is very quick to sort.
A snippet of my code doing something similar:
- function showresults()
{
$.mobile.showPageLoadingMsg();
resultstable = '';
foundresults = 0;
$agegroup = $searchgender + $('#AgeGroup').val();
$resultsdate = $('#ResultsDate').val();
if($agegroup != "GAge Group" && $agegroup != "BAge Group" && $resultsdate != "Date"){
var rows = new Array();
rows = document.getElementById('data-results').innerHTML.split('\n');
resultstable += '<ul data-role="listview" id="resultslist" data-filter="true" data-filter-placeholder="Search results..." data-filter-theme="b">'
for(var i = 0; i < rows.length-1; i++) {
var columns = rows[i].split(',');
if (columns[2] == $agegroup && columns[0] == $resultsdate)
{
foundresults = 1;
resultstable += '<div class="ui-grid-results">';
resultstable += '<div class="ui-block-a"><div class="ui-bar ui-bar-d"><div class="results-name">' + columns[1] + '</div></div></div>';
resultstable += '<div class="ui-block-b"><div class="ui-bar ui-bar-d"><div class="results-event">' + columns[3] + '</div></div></div>';
resultstable += '<div class="ui-block-c"><div class="ui-bar ui-bar-d"><div class="results-perf">' + columns[4] + '</div></div></div>';
resultstable += '</div>';
}
}
resultstable += '</ul>';
$("#table-results").html(resultstable);
// $("#ResultsForm").css("display","none");
if (foundresults == 0)
{
$("#table-results").css("display","none");
$("#no-results").css("display","block");
}
else
{
$("#table-results").css("display","block");
$("#no-results").css("display","none");
}
$.mobile.hidePageLoadingMsg();
$(".ui-page").trigger( "create" );
}
else
{
$.mobile.changePage("entersearchterms.htm", {transition: 'pop', role: 'dialog'});
}
// return false;
}
An example of my data:
- <div id="data-results" style="display:none;">
81011,Name 1,G6,150m,33.83 sec
81011,Name 2,G6,150m,36.51 sec
81011,Name 3,G6,150m,38.44 sec
81011,Name 4,G6,150m,38.81 sec
81011,Name 5,G6,150m,39.08 sec
81011,Name 6,G6,150m,39.96 sec
81011,Name 7,G6,150m,43.19 sec
</div>
Leave a comment on AnthonyC's reply
Re: Creating a list view database
10 years ago
I'm dubious on a 12,000-line data file handled like this in a mobile device. On desktop, sure, it's a viable solution.
It would be useful to describe in more detail what you are trying to do. I don't know exactly what you mean by "make it searchable using lists". Do you mean you want a "search" box, or simply that you want the user to be able to drill-down through lists? I assumed from your post you meant the latter.
In any case, if you put the data into an HTML5 database, or some simple Javascript data structure as shown above, you can then do either. But to format the lists for the user to drill-down is going to either require a lot of ugly Javascript or some run-time templating (mustache/icanhaz, etc.) And both are unnecessary and will just slow-down the app.
If you just need the HTML-formated lists for the user to drill-down through, then a static site generator can save you the work of creating all those pages manually. Let the SSG do the work for you. It can take your data and churn-out static pages.
It would be useful to describe in more detail what you are trying to do. I don't know exactly what you mean by "make it searchable using lists". Do you mean you want a "search" box, or simply that you want the user to be able to drill-down through lists? I assumed from your post you meant the latter.
In any case, if you put the data into an HTML5 database, or some simple Javascript data structure as shown above, you can then do either. But to format the lists for the user to drill-down is going to either require a lot of ugly Javascript or some run-time templating (mustache/icanhaz, etc.) And both are unnecessary and will just slow-down the app.
If you just need the HTML-formated lists for the user to drill-down through, then a static site generator can save you the work of creating all those pages manually. Let the SSG do the work for you. It can take your data and churn-out static pages.
Leave a comment on watusiware's reply
Re: Creating a list view database
10 years ago
^Understandable, and primarily I used this method as opposed to using PHP via the server as I wanted to be able to use the cache on the local device for offline use (works well by the way).
Nevertheless on an iPhone 4S running iOS 5, I can sort through this data and display results in less than 1 second (yes that fast), which is quite remarkable, not sure about 'older' phones though.
Leave a comment on AnthonyC's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to rockwiler29's question