2

I'm trying to generate a header with some heading text, but the JQuery Mobile theme isn't supported in the dynamically content that's added. Same result occurs when anything else is added button, input textbox, etc: etc: Is there anyway to fix this?

Here's my fiddle - http://jsfiddle.net/fABC7/

Here's my code:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<meta name='Description' content="Describe your website here...">
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'>
<meta name='Keywords' content='words, describing, your, website'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style type="text/css">
</style>
<script type='text/javascript'>
$(document).ready(function() {
  var fixgeometry = function() {
    /* Some orientation changes leave the scroll position at something
    * that isn't 0,0. This is annoying for user experience. */
    scroll(0, 0);

    /* Calculate the geometry that our content area should take */
    var header = $(".header:visible");
    var footer = $(".footer:visible");
    var content = $(".content:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

    /* Trim margin/border/padding height */
    content_height -= (content.outerHeight() - content.height());
    content.height(content_height);
   }; /* fixgeometry */

   $(window).bind("orientationchange resize pageshow", fixgeometry);

  $("input#submitheader").click(function() {
    var headeropen = "<div data-role='header' "
    var headercloseopenmark = "'>"
    var headerheadingopen = "<h1>"
    var pageheaderheading = $("input#headerheading").val();
    var headerheadingclose = "</h1>"
    var headerclose = "</div>"

    $("#1stpagename").append((headeropen) + (headercloseopenmark) + (headerheadingopen) + (pageheaderheading) + (headerheadingclose) + (headerclose));});

});
</script>
</head>
<body>
<div data-role="page" class="pages" id="1stpagename">
    <div id="genoptions">
        Theme:<br>
        <select name="selectthemeheader">
            <option value="a" selected="selected">Black</option>
            <option value="b">Blue</option>
            <option value="c">Gray</option>
            <option value="d">Light Gray</option>
            <option value="e">Yellow</option>
        </select><br><br>

        Fixed:<br>
        <select name="selectfixedheaderoption">
            <option value="1">Yes</option>
            <option value="2" selected="selected">No</option>
        </select><br><br>

        Heading:<br>
        <input type="text" id="headerheading" placeholder="My Website" value="Placeholder"><br><br>

        Heading Size:<br>
        <select name="selectheaderheadingsize">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="selected">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select><br><br>

        <input value="Submit" type="submit" id="submitheader">
    </div>
</div>
</body>
</html>
tshepang
  • 12,111
  • 21
  • 91
  • 136
Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144
  • I forgot to mention one important issue. Don't use `.ready()` with jQuery Mobile, its equivalent is `pageinit`. – Omar May 19 '13 at 13:05

1 Answers1

3

To create [data-role=header] and [data-role=footer] dynamically, you need to enhance their markup by using $('[data-role=page]').trigger('pagecreate');.

Each widget in jQuery Mobile should be enhanced using create, pagecreate, updatelayout or refresh. Using those methods depends on the items you want to enhance. Check this for more about Enhancing Dynamic Contents.

Demo

After appending the new header, add

$('[data-role=page]').trigger('pagecreate');
Community
  • 1
  • 1
Omar
  • 32,302
  • 9
  • 69
  • 112