Search jQuery

jQuery Forum

Screen name:
imgonna

imgonna's Profile

2 Posts

8 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

AppendTo and "refresh" advice
[2Replies]
- 22-Dec-2012 05:24 PM
- Forum: jQuery Mobile
Hi

I am reading a csv file with php / ajax and creating a list from the file. That works fine.

I am then using: AppendTo to push the html I've built into the <content>

At this point it breaks, as I now know due to the order in which JQM builds the page

Is there some form of "refresh" I need to do to make JQM "see" the html and respond accordingly?

In action >>>> http://glengilchrist.co.uk/csv/table2.html

Initally I thought I needed a $('#buglist').listview('refresh'); << but

a) I am not sure where to put it
b) There is also a collapsed list being built dynamically.

My code is:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Bacterium Antibiograms reading csv</title>
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
7. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
8. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
9. </head>
11. <body>
13. <div data-role="page">
15. <div data-role="header">
16. <h1>Bacterium Antiobiograms</h1>
17. </div>
19. <script type="text/javascript">
21. $(document).ready(function() {
23. $.ajax({
24. type: 'GET',
25. url: 'get-csv.php',
26. data: null,
27. success: function(text) {
29. var fields = text.split(/\n/);
30. fields.pop(fields.length-1);
32. var headers = fields[0].split(','), markup = '';
34. var data = fields.slice(1, fields.length);
36. for(var j = 0; j < data.length-2; j += 1) {
38. var dataFields = data[j].split(',');
40. markup +='<div data-role="collapsible" data-theme="b" data-content-theme="c">';
42. markup +='<h2>' + dataFields[1] + '</h2>';
43. markup +='<id = "buglist" ul data-role="listview">';
44. markup +='<li>' + headers[2] +"........" + dataFields[2] + '</li>';
45. markup +='<li>' + headers[3] +"........" + dataFields[3] + '</li>';
46. markup +='<li>' + headers[4] +"........" + dataFields[4] + '</li>';
47. markup +='<li>' + headers[5] +"........" + dataFields[5] + '</li>';
48. markup +='</ul>';
50. markup +='</div>';
52. }
54. $('.bugs').append(markup);
56. }
58. });
60. });
62. </script>
65. <div data-role="content" class="bugs">
67. </div>
70. <div data-role="footer">
71. version 0.5
72. </div>
74. </div>
78. </body>
79. </html>
This must be easier than I am making it......

Any advice on refreshing the <content> greatly received.

I have read the documentation on dynamic pages and I cant adapt the example to my case -- must be getting old.

Cheers
Glen

Noob question - read from csv into nested list (I think)
[11Replies]
- 21-Dec-2012 07:43 PM
- Forum: Getting Started
Hi all

I am trying to build a simple app to load csv data from my server into what I think is called a nested list.

I initially want to display data from only one field, which will slide across into the full record when selected.

I can read the csv with some php and ajax to output a table: http://www.glengilchrist.co.uk/csv/table.html

What I am looking to do is to convert this into something That looks:

Screen 1
Staphylococcus aureus (MSSA)
Staphylococcus aureus (MRSA)
Streptoccous pneuoniaeA

When the names are selected, detail is displayed on a "new view"

Staphylococcus aureus (MSSA) (as the title)

Penicillin        5
Ampicillin
Methicillin   100
Norfloacin 79
Fusidic Acid 99

With the relevant back slider.

I just can not for the life of me work out out to:

A) Get my data from the dataFields[0] dataFields[1] etc into a list
B)Make what I think is called a nested list, so that when selected the detail is shown.

Am I making a real hash of this, as I suspect I am -- it seemed like such an easy ask, as the php / html route was quite simple.

Help ;-)
Cheers
Glen

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend