JSFiddle - React, Tailwind, and code Playground

by shanabus

HTML

<!DOCTYPE html>  
<html>      
    <head>      
        <title>Sample Page</title>           
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>        
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    </head>   
    <body>              
        <div data-role="page" id="page1">      
            <div data-role="header">         
                <h1>
                    Page 1
                </h1>     
            </div><!-- /header -->      
            
            <div data-role="content">
                <p data-enhance="false">
            <form action="/Home/Search" method="get">
    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Search</li>
        <li>
            <div class="ui-grid-a">
                    <div class="ui-block-a" style="vertical-align: middle;">
                    <input id="Query" name="Query" type="text" value="" />
                </div>
                <div class="ui-block-b" style="vertical-align: middle; max-width: 150px;">
                    <input data-ajax="false" data-icon="search" type="submit" value="Search" data-role="button" data-mini="true" style="vertical-align: middle;" />
                </div>
            </div>
        </li>
    </ul>
            </form>  
</p>
            </div><!-- /content -->      
            
            <div data-role="footer">              
            </div> 
        </div><!-- /page -->      
        
        <div data-role="page" id="page2">         
            <div data-role="header">    
               <h1>
                  Page 2
                </h1>     
            </div><!-- /header -->         
            
            <div data-role="content">         
            </div><!-- /content -->         
            
            <div...

JavaScript

$(function() {
    $("#page1 form").submit(function(e) {
        e.preventDefault();
        alert("I submitted!");
        return false;
    });
});