JQuery Mobile Tips #3

Here are some more JQuery Mobile Tips I have found today.

For textual updates on your JQuery Mobile Dialog box you want to make, it is best to do a <p> update on a text in the javascript in your ascx or aspx page for the content of your JQuery Mobile dialog page. For example: -

<% Html.BeginForm() %>
<script language="javascript" type="text/javascript">
    $("#selectBox").bind('change', function (e) {
        var str = "";
        $("select option:selected").each(function () {
            if ($.jStorage.storageAvailable()) {
                $.jStorage.set('SelectedValue', $(this).val());
                $('#setText').text("You have selected: " + $(this).text() + ". ");
            }
        });
        e.preventDefault();
    });
</script>
<!-- Form content goes here -->
            <%= Html.DropDownList("selectBox")%>
<% Html.EndForm() %>

<p id="setText"></p>

As you can see here, I want to change the <p> tag with ID setText with the selected list box value you have selected from ID selectBox, abnd the results are far quicker than placing it in the .js file you added in the header in the Master Page, it is almost instantaneous, this is to improve performance loading issues. Hope that helps!