jQuery Mobile
I am starting to get my feet wet with jQuery Mobile and find the lack of documentation frustrating. I will be patient as I know that this is a new framework. But to help anyone running up against my frustration I will start posting issues and solutions that I have come accross.
Scenario: You have a page that has button on it that opens an external page dialog.
<a href="somepage.html" data-rel="dialog" data-role="button" data-icon="info" data-iconpos="notext">Open Dialog</a>
On the somepage.html you want to run some jquery code when the document loads.
$(function () {
$("#myTable tr:nth-child(even)").addClass("even");
});
The problem is, if you put the following javascript in the <head></head> tag the javascript will not execute. I tried adding it to the head of the referring page, looked into the pageshow event, no dice. What you need to do is add the javascript and style declarations that you want to use on the dialog page inside of the element that has the data-role attribute defined.
<div data-role="page" id="myDialog">
<!-- ADD THE JAVASCRIPT AND CSS DECLARATIONS HERE -->
</div>