2

"JQuery Mobile Components in React"

I'm quite new to this concept an still need to figure things out. I built an app for mobile purposes and decided to wrap it in React components. My Code:

index.html

<!DOCTYPE html>

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>shounds</title>

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.squareui.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script src="./ext/react.js"></script>
    <script src="./ext/jsx-transform.js"></script>
    <script src="//fb.me/react-with-addons-0.11.0.js"></script>
</head>
<body data-theme="e">
    <div id="container" >
        <!--<div data-role="page" id="login"><div data-role="header" id="loginHeader"></div></div>-->
    </div>
    <script type="text/jsx" src="./comp/main.js"></script>
</body>
</html>

main.js //react components

var App = React.createClass({
    render: function () {
        return Page({id: 'login'});
    }
})

var Page = React.createClass({
    constants: { dataTheme: 'e' },
    render: function () {
        return React.DOM.div({ id: this.props.id + 'Page', 'data-role': 'page', 'data-theme': this.constants.dataTheme },
            Header({ dataTheme: this.constants.dataTheme, id: this.props.id }))
    }
})

var Header = React.createClass({
    render: function(){
        return React.DOM.div({'data-role': 'header', 'data-theme': this.props.dataTheme, id: this.props.id+'Header' })
    }
})


// Render application.
    React.render(App(null), document.getElementById('container'))

The DOM gets created in the container div as expected.

Heres my Problem:

JQM probably isnt aware of the virtual DOM getting created by React and creates an initial page by itsself outside the container div. Even though the DOM is created correctly it wont be displayed as JQM page with Header.

Anyone gone through the same stuff?

Thanks in advance.

EDIT: if it helps in any way -> this is what is created during runtime

    <head></head>
    <body class="ui-mobile-viewport ui-overlay-a" data-theme="e">
        <div class="ui-page ui-page-theme-a ui-page-active" data-role="page" data-url="/E:/dev/workspace/visual/shounds/index.html" tabindex="0" style="min-height: 483px;">
            <div id="container">
                <div id="loginPage" data-reactid=".0" data-theme="e" data-role="page">
                    <div id="loginHeader" data-reactid=".0.0" data-theme="e" data-role="header"></div>
                </div>
            </div>
            <script src="./comp/main.js" type="text/jsx"></script>
        </div>
        <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"></div>
    </body>

</html>
Max Bumaye
  • 1,017
  • 10
  • 17
  • 1
    1. you need to set `#container` as _pagecontainer_ 2. disable auto-initializing and do it manually once your page is added to DOM 3. can you setup a fiddle? – Omar Nov 13 '14 at 23:14
  • 1. why should i rename #container to pagecontainer? 2. how can i do this? I thought about doing this - but simpy cant find it in the JQM Docs 3. I have allot of other dependencies but ill get one up asap. 4. is the jqm rendering going to interfere with my react rendering in any other point? – Max Bumaye Nov 13 '14 at 23:23
  • 1. because pagecontainer by default is `body`, you have to override this. 2. http://stackoverflow.com/a/24173950/1771795 3. thanks, i'm trying to setup one too 4. it depends, I dont know the way React works. – Omar Nov 13 '14 at 23:30
  • 1
    Okay first of all thanks for the answer - I will try to get this to work and set up a Fiddle with the working code. Just watched a video from pete hunt where a related question is asked quite at the end of his presentation (40 mins) http://www.youtube.com/watch?v=DgVS-zXgMTk I'll check this out... – Max Bumaye Nov 13 '14 at 23:42
  • I managed to get it running now! setting the pagecontainer on mobileinit was enough. Maybe im just lucky though and it just renders its DOM elements faster than JQM. I should definitly add manual initialization – Max Bumaye Nov 14 '14 at 00:09
  • didn't work without auto-init disabled http://plnkr.co/edit/gZPjmOurvio6NRIQpZex?p=preview – Omar Nov 14 '14 at 00:16

1 Answers1

3

Update

Apply the following styles to remove extra height in page and make it fit viewport, since pagecontainer is no longer body.

.ui-mobile body {
  height: auto; /* reset height */
}
#container {
  height: 99.9%; /* new viewport (pagecontainer) */
}

First step, you have to inform framework (jQuery Mobile) that you want to use a different pages wrapper (:mobile-pagecontainer) than the default body. Also, you should disable auto-initialization of jQuery Mobile's until React renders the page and push into DOM. Those steps should be executed on mobileinit which is the first event that fires before jQuery Mobile is initialized. Also, note that is should be placed after jQuery Core and before jQuery Mobile in head.

$(document).on("mobileinit", function(e, data) {
  $.mobile.autoInitializePage = false; /* disable auto-initialization */
  $.mobile.pageContainer = $("#container"); /* set new "pagecontainer" */
});

After that, run your React code followed by $.mobile.initializePage(); to initialize framework.

Demo

Community
  • 1
  • 1
Omar
  • 32,302
  • 9
  • 69
  • 112
  • like I said in the comment above.. didnt need to handle the initilization, but that is probably just due to react randomly loading quicker on my Device -> I will add the manual initialization now. Thanks so far - great help! – Max Bumaye Nov 14 '14 at 00:12
  • @MaxBumaye You're welcome. Try it with auto-initialization, it should work. Edit: on plunker it didn't work without disabling auto-init. http://plnkr.co/edit/gZPjmOurvio6NRIQpZex?p=preview – Omar Nov 14 '14 at 00:13
  • thanks for the update - probaby $.mobile.initializePage(); should also go in the components "componentDidMount" event to trigger when the component loaded the DOM – Max Bumaye Nov 14 '14 at 00:40
  • 1
    @MaxBumaye it's a jQM error `.ui-mobile body { height: 99.9%; }` it should be `.ui-mobile .ui-mobile-viewport` because `body` isn't always pagecontainer. https://github.com/jquery/jquery-mobile/pull/7841 – Omar Nov 14 '14 at 00:46
  • @MaxBumaye `auto` is better than `0`. – Omar Nov 14 '14 at 00:58