jQuery Forum

1.     function showRecords() {
2.     results.innerHTML = '';
3.     results.innerHTML = '<div id="accordion">';
4.     db.transaction(function(tx) {
5.         tx.executeSql(selectAllStatement, [], function(tx, result) {
6.             dataset = result.rows;
7.             for (var i = 0, item = null; i < dataset.length; i++) {
8.                 item = dataset.item(i);
9.                 results.innerHTML += 
10.                 '<h3>' + item['term'] + '</h3><div><p>' + item['definition'] + '<button    
11.                 class="glossaryButton2" onClick="loadRecord('+i+')">Edit</button>  ' +  
12.                 '<button  class="glossaryButtonDel" style="float:right;" 
13.                 onClick="deleteRecord('+item['id']+')">Delete</button></p><hr></div>';
14.             }
15.             });
16.         }); results.innerHTML += '<div id="accordion">'; 
17.     }
18. 
    
19.     /*
20.   
21.     <div id="accordion">
22. 
    
23.     <h3>Section 1</h3>
24.     <div>
25.         <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
26.     </div>
27.   
28.     </div>
29. */

1.     <script>
2.     $(function() {
3.         $( "#accordion" ).accordion({
4.             collapsible: true
5.         });
6.     });
7.     </script>

1.     <link rel="stylesheet" href="../stylesheets/foundation.css">
2.     <link rel="stylesheet" href="../stylesheets/cheatsheet-styles.css">
3.     <link rel="stylesheet" href="../stylesheets/app.css">  <!-- styles the top bar -->
4.     <link rel="stylesheet" href="../stylesheets/buttons.css">
5.     <link rel="stylesheet" href="../stylesheets/demos.css">  <!-- accordion -->
6. 
   
7.     <script src="../cordova-2.3.0.js"></script>   <!-- PhoneGap -->
8.     <script src="../javascripts/jquery.js"></script>
9.     <script src="../javascripts/jquery.ui.core.js"></script>
10.     <script src="../javascripts/jquery.ui.widget.js"></script>
11.     <script src="../javascripts/jquery.ui.accordion.js"></script>
12.   
13.     <script src="../javascripts/copyright.js"></script>
14.     <script src="../javascripts/topbar_a.js"></script>  <!-- top bar dropdown nav contents on mobile -->
15.     <script src="../javascripts/wide_a.js"></script>  <!-- left nav contents on tablets -->

//get path from current hash, or from a file path

get: function( newPath ) {

if( newPath === undefined ) {

newPath = location.hash;

}

return path.stripHash( newPath ).replace( /[^\/]*\.[^\/*]+$/, '' );

},

//return the substring of a filepath before the sub-page key, for making a server request

getFilePath: function( path ) {

var splitkey = '&' + $.mobile.subPageUrlKey;

return path && path.split( splitkey )[0].split( dialogHashKey )[0];

},

The above "commented-out" section ends here, many lines later:

}

} : undefined;

/*

internal utility functions

--------------------------------------*/

//direct focus to the page title, or otherwise first focusable element

function reFocus( page ) {

var pageTitle = page.find( ".ui-title:eq(0)" );

if( pageTitle.length ) {

pageTitle.focus();

}

else{

page.focus();

}

}

<li><a href="#aboutApp">About this App</a></li>

This is how the above "page" is styled, further down the HTML page:

<!-- Start of About this App -->

<div data-role="page" id="#aboutApp">

<div data-role="header">

<h1>About this App</h1>

</div><!-- /header -->

<div data-role="content">

<p>I'm first in the source order so I'm shown as the page.</p>

<p><a href="#home">Back to home</a></p>

</div><!-- /content -->

<div data-role="footer">

<h4>Page Footer</h4>

</div><!-- /footer -->

</div><!-- /page -->

The first "page" begins like this ...

<!-- Start of first page -->

<div data-role="page" id="home" data-theme="b">

<div data-role="header">

<h1>Setups</h1>

</div><!-- /header -->

<div data-role="content"><form name="form2">

... and ends like this (right out of the docs):

</form></div><!-- /content -->

<div data-role="footer">

<h4>Page Footer</h4>

</div><!-- /footer -->

</div><!-- /page -->

<input class="saveButton" type="button" value="Save/Update" onclick="persistData()">

            <script type="text/javascript">

                $(document).ready(function() {

                                  var $dialog = $('<div></div>')

                                  .html('This dialog will show every time!')

                                  .dialog({

                                          autoOpen: false,

                                          title: 'Basic Dialog'

                                          });

                                  $('#opener').click(function() {

                                                     $dialog.dialog('open');

                                                     // prevent the default action, e.g., following a link

                                                     return false;

                                                     });

                                  });

                </script>

But I don't know how to fire it (cause the dialog box to appear) using <input> to keep the button's styling in line with the rest of the page. This does not work:

<input class="loadButton" type="button" value="open dialog box" onclick="opener">

So how else do you fire the script?

Thanks!