JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css">
<div id="site" data-role="page" data-add-back-btn="true">
    <div data-role="header"><h1>Site</h1></div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="#section?id=1">Section 1</a></li>
            <li><a href="#section?id=2">Section 2</a></li>
            <li><a href="#section?id=3">Section 3</a></li>
        </ul>
    </div>
</div>

<div id="section" data-role="page" data-add-back-btn="true">
    <div data-role="header"><h1>Section</h1></div>
    <div data-role="content">
    </div>
</div>

JavaScript

$(document).on("pagebeforechange", function( e, data ) {
    console.log(data);
    if ( typeof data.toPage === "string" ) {

        var u = $.mobile.path.parseUrl(data.toPage);

        if ( u.hash.match(/^#section/)) {

            var str = "<p>I should be: " + u.href + "<br />";
            str += "I'm url:" + $.mobile.activePage.data('url') + "<br />";
            str += "I'm location.hash: " + document.location + "</p>";
            console.log(str);        
            $('#section').find('[data-role="content"]').html(str); 
            
            
        }
    }
        
    
    
});