jQuery Mobile is a somewhat unique framework. From the point when you include it into your project, it will ultimately take over project UI. Usually, this is expectable but sometimes we only need to improve part of our UI, be it mobile or classic desktop application. To make our life easier, jQuery Mobile provides us with several methods of a markup enhancement prevention. Each one is different in its unique way, and you will need to decide which one best suits your needs.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Solution 1

 
First solution requires data-enhance=”false” attribute added to element(s) you want left unstyled. This is a perfect solution if you want to prevent a markup enhancement of large parts of your UI. For example, if some div container holds this attribute, it and everything inside it will stay as it is, without jQuery Mobile messing everything.
 
HTML:
 
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script>
            $(document).on('mobileinit', function () {
                $.mobile.ignoreContentEnabled = true;
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>   
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header" data-enhance="false">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>
            
            <div data-role="content" id="test-main-container">
                <a href="#" data-role="button" id="test-button">Test button 1</a>
                <!-- Every content inside this div will not be enhanced -->
                <div data-enhance="false" id="test-container">
                    <a href="#" data-role="button" id="test-button">Test button 2</a>                
                    <div>
                        <a href="#" data-role="button" id="test-button">Test button 3</a>                
                    </div>                
                </div>
                <a href="#" data-role="button" id="test-button">Test button 4</a>
            </div>
            
            <div data-theme="a" data-role="footer" data-position="fixed" data-enhance="false">
                <h3>
                    Footer
                </h3>
            </div>
        </div>   
    </body>
</html>    
 
Working jsFiddle example: http://jsfiddle.net/Gajotres/UZwpj/
 
 
There are few things you need to know before reusing this code. For it to work you must enable it before jQuery Mobile js file is initialized, so do it during the mobileinit event. For those of you who don’t know, this is the very first event that fires – even before .ready(), it fires after loading core jQuery and before loading jQuery Mobile. This event is used to override default settings of jQuery Mobile, aka Global Settings (Defaults).
 
This code snippet will do it:
 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script>
            $(document).on('mobileinit', function () {
                $.mobile.ignoreContentEnabled = true;
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>   
 
Remember, execute it after core jQuery is initialized and before jQuery Mobile is initialized, it won’t work in any other case. There’s one other thing if everything is initialized successfully, even dynamically added content will not be styled if a parent container has data-enhance=”false”. You can check it in provided jsFiddle example:
 
$(document).on('pagebeforeshow', '#index', function(){       
    $('<div>').attr({'data-enhance':'false','id':'dynamic-container'}).appendTo('#test-main-container');
    $('#dynamic-container').append('<a href="#" data-role="button" id="test-button">Test button 5</a>');
});
 

Solution 2

 
The second solution is an easy one, unlike a previous one, this one is used if you want to prevent enhancement of only one element. Do it using attribute data-role=”none”, simply add it to wanted element and it will stay as it is.
 
HTML:
 
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
  <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <form method="get" action="/show.php?" target="showframe" id="custom-form">
                <select name="week">
                    <option value="1">Week</option>
                </select>
                <select name="id" data-role="none">
                    <option value="1">ID</option>
                </select>
                <div data-role="fieldcontain">
                    <label for="text">Text Input:</label>
                    <input type="text" id="text" name="name" value="" data-role="none" />
                </div>
                <div data-role="fieldcontain">
                    <label for="text">Text Input:</label>
                    <input type="text" id="text" name="name" value=""/>
                </div>
                
            </form>        
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>      
 
Working jsFiddle example: http://jsfiddle.net/Gajotres/LqDke/
 
 

Solution 3

 
The last solution works somewhere in the middle. Instead of manually selecting which content should stay as it is, we can configure jQuery Mobile to skip automatically some UI elements. This is again done through mobileinit event.
 
HTML:
 
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script>
            $(document).bind('mobileinit',function(){
                $.mobile.page.prototype.options.keepNative = "select,input";
            });        
        </script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>
            
            <div data-role="content">
                <form method="get" action="/show.php?" target="showframe" id="custom-form">
                    <select name="week">
                        <option value="1">Week</option>
                    </select>
                    <select name="id">
                        <option value="1">ID</option>
                    </select>
                    <select name="id">
                        <option value="1">ID</option>
                    </select>                
                    <a data-role="button" id="lonely-buttton">Lonely Buttton</a>
                </form>        
            </div>
            
            <div data-theme="a" data-role="footer" data-position="fixed">
                
            </div>
        </div>    
    </body>
</html>        
 
Working jsFiddle example: http://jsfiddle.net/Gajotres/gAGtS/
 
 
As you can see this solution works just through javascript, you don’t need to change anything in your HTML:
 
$(document).bind('mobileinit',function(){
    $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher*/
    /*$.mobile.page.prototype.options.keepNative = "select,input";*/ /* jQuery Mobile 1.4 and lower (deprecated in jQuery Mobile 1.4)*/
}); 
 
If you take a look at provided jsFiddle example you will see that button is not affected with this change, even thou we have selected input as element type not to be enhanced. This solution only works on real existing HTML elements, the button used in our case is classic jQuery Mobile button done with <a> tag.
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Omar

    As of jQM 1.4 $.mobile.keepNative replaces $.mobile.page.prototype.options.keepNative

  • SRB

    even after using data-enhance = false , the links inside test container are having font-weight = 700.
    Is there a way to get rid of that??

    • If nothing mentioned works you will need to override them manually (CSS), also be careful, if you can override them with basic CSS use !important.

  • Angel

    Hi,

    I’m trying to use datatables in jQuery Mobile 1.4.5.

    The jquery.mobile-1.4.5.min.css is overriding the responsive.dataTables.css file.

    1st pic shows that its working perfectly without jQuery Mobile.

    2nd pic shows if it runs injQuery Mobile.

    3rd shows if i remove jquery mobile css file, the datatables working fine. but the rest is messed up.

    Any help you can provide on this.

    Thnx