CODEWITHSUNDEEP
jquerymobileinputstylessubmit
user1257942
user1257942

Reputation: 1

jQuery mobile: input isn't in jquery mobile style

@using (var form = Html.BeginForm("SearchCustomer","Home")){
@Html.ValidationSummary(true)
<table>
    <tr>
        <td>
            @Html.EditorFor(m => Model.SearchString)
        </td>
        <td>

        </td>
        <td>
                <input type="submit" name="foo" data-role="none" />
        </td>
    </tr>
</table> 

}

I want that input to be in jQuery mobile style, but if I set the data-role to "button" the page is empty. What can I do?

Upvotes: 0

Views: 368

Answers (1)

Andrew Frank
Andrew Frank

Reputation: 31

From the jQuery Mobile docs:

For ease of styling, the framework automatically converts any button or input element with a type of submit, reset, button, or image into a custom styled button — there is no need to add the data-role="button" attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:

$('[type='submit']').button();

To preserve events bound to the original button or input, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the data-role="none" attribute and the native control will be rendered.

Upvotes: 1

Related Questions