Add a refresh button to the member list for viewing additions made by…

… other users without refreshing. Fixes AEROGEAR-221
kborchers · Mar 30, 2012 · 2735260 · 2735260
1 parent f913200
commit 2735260
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git a/kitchensink-html5-mobile/src/main/webapp/css/d.screen.css b/kitchensink-html5-mobile/src/main/webapp/css/d.screen.css
@@ -157,9 +157,14 @@ legend {
 #mem_tbl tfoot {
     font-size: 10px;
     background-color: #EAECEE;
+    text-align: center;
+}
+
+#refreshButtonD {
+    float: right;
 }
 
 /* Hide Mobile Site Elements */
-.header, .footer, .mobileicon {
+.header, .footer, .mobileicon, #refreshButtonM {
     display: none;
 }
diff --git a/kitchensink-html5-mobile/src/main/webapp/css/m.screen.css b/kitchensink-html5-mobile/src/main/webapp/css/m.screen.css
@@ -161,6 +161,10 @@ a {
     border: none;
 }
 
+#member-art .ui-content .ui-btn {
+    float: right;
+}
+
 /* Hide column header rows if present */
 .columnNames {
     display: none;
@@ -231,6 +235,6 @@ a {
 }
 
 /* Hide Desktop Items */
-section > h1, article > h2, aside > h3, footer, .desktop-only {
+section > h1, article > h2, aside > h3, footer, .desktop-only, #mem_tbl .ui-btn {
 	display: none;
 }
diff --git a/kitchensink-html5-mobile/src/main/webapp/css/screen.css b/kitchensink-html5-mobile/src/main/webapp/css/screen.css
@@ -61,7 +61,6 @@ span.success {
 #mem_tbl tfoot {
     height: 20px;
     font-weight: bold;
-    text-align: center;
 }
 
 /* Using new CSS3 selectors for styling*/

diff --git a/kitchensink-html5-mobile/src/main/webapp/index.html b/kitchensink-html5-mobile/src/main/webapp/index.html
@@ -138,6 +138,10 @@
                         $('span.invalid').remove();
                         $('span.success').remove();
                     });
+
+                    $("#refreshButtonD, #refreshButtonM").click(function(event) {
+                        updateMemberTable();
+                    });
                 });
 
                 $.fn.serializeObject = function() {
@@ -278,7 +282,7 @@ <h2>Current Members</h2>
 
                 <div data-role="content">
                     <p class="desktop-only">This table is populated and constructed using restful GET calls to the server, and uses CSS3 based selectors for styling. When the page is requested jQuery is used to send the JAX-RS request for the current list of members. The table is them populated dynamically using JavaScript. See app.js for more details.</p>
-
+                    <button id="refreshButtonM" data-role="button" data-inline="true" data-icon="refresh">Refresh Members</button>
                     <table id="mem_tbl">
                         <thead>
                             <tr>
@@ -295,6 +299,7 @@ <h2>Current Members</h2>
                                     <!-- Sets the JAX-RS URLs to retrieve all members either as XML or JSON data.-->
                                     REST URL for all members: 
                                     <a href="rest/members" target="_blank" rel="external">JSON</a>
+                                    <button id="refreshButtonD">Refresh Members</button>
                                 </td>
                             </tr>
                         </tfoot>

diff --git a/kitchensink-html5-mobile/src/main/webapp/js/app.js b/kitchensink-html5-mobile/src/main/webapp/js/app.js
@@ -43,6 +43,7 @@ function updateMemberTable() {
         cache: false,
         success: function(data) {
             $('#members').empty().append(buildMemberRows(data));
+            if ($.mobile) $.mobile.fixedToolbars.show();
         },
         error: function(error) {
             //console.log("error updating table -" + error.status);