CODEWITHSUNDEEP
jquery-mobile
Soatl
Soatl

Reputation: 10592

jQuery Mobile: Turn off all mobile styling for a div

I found this post, but had no luck getting it to work for me. I am trying to implement a jQuery Spinner on my mobile page, but I do not want it to have any jQuery mobile styles.

CODE:

In masterpage:

<script type="text/javascript">
    $(document).bind("mobileinit", function () {
        $.mobile.ajaxEnabled = false;
        $.mobile.ignoreContentEnabled = true;
    });

    $(document).on('pageinit', function () {        
        $.mobile.silentScroll();
    });
</script>
<script src="Scripts/jquery.mobile-1.4.2.js"></script>

Control:

<td class="diary_control_cell" data-enhance="false" data-role="none">
    <div data-enhance="false" id='noMobileHere'>
        <input type="text" name="OtherTravelersCountTextBox" id="OtherTravelersCountTextBox" value="60" min="0" max="100"  runat="server" data-enhance="false" data-role="none"/>                                                
    </div>    
</td>

Though it is made into a spinner, the UI created is still contained within the <td> and <div>, so you would assume that the data-enhance="false" (at least one of them) would still apply. When I turn off the spinner, the data-enhance="false" does work. Is there a better way to turn off jQuery Mobile styles for a small portion of the page?

Edit

To resolve this issue, I removed the jQM classes causing the issue using the following line (after adding the id noMobileHere to the div containing the spinner:

$('#noMobileHere').find('div').removeClass('ui-btn');

Upvotes: 0

Views: 89

Answers (1)

frequent
frequent

Reputation: 28493

Check the JQM API for textinput - the attribute you want to set is called data-enhanced (you are missing the d).

If you don't want JQM to touch your input, set the attribute on the actual element, not any of it's parents.

<input data-enhanced="true" ... />

As this will tell JQM "the input is already enhanced".

Should work.

Upvotes: 1

Related Questions