JQuery Mobile not working on IE Mobile. (MVC)

Question

I've created a small mobile interface inside my MVC app that basicly needs to submit a number selected from a select list to the server.

CODE:

@{
    ViewBag.Title = "Freezer Status";
}
<div style="width: 210px">
    <div>
        <select style="width: 160px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
    <div>
        <input type="submit" id="submit" value="Save" style="width: 200px" />
    </div>
</div>
<div id="result">
</div>
<script type="text/javascript">
    $("select").change(function () {
        $("select option:selected").each(function () {
            $.ajax({
                data: {
                    fridgeNo: $(this).val()
                },
                type: 'GET',
                url: '@Url.Action("GetLastSubmitAction", "BlastFreezer")',
                cache: false,
                success: function (html) {
                    $("#submit").attr('value', html.Value);
                    $("#submit").prev().html(html.Text);
                }
            });
        });
    }).change();

    $("#submit").click(function () {
        $.ajax({
            data: {
                fridgeNo: $(this).val()
            },
            type: 'GET',
            url: '@Url.Action("ClockFridgeTime", "BlastFreezer")',
            cache: false,
            success: function (html) {
                $("#submit").attr('value', html.Value);
                $("#submit").html(html.Text);

                $("#result").html("Saved!");
            }
        });
    });
</script>

When I developed it, i tested the interface using an agent switched add-on for chrome, and it seemed to work fine.

Agent string:

Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; Nokia;N70)

But its not working on the device that needs to make use of the interface. All that i can tell you (been trying to snoop around on the device for a specific IE version to no avail) is that its windows mobile and some form of Mobile of pocket IE.

The save button text should be determined based on text sent back from the server. And then i need to be able to just do a simple submit/ajax call. My best guess is that Mobile IE is as temperamental as its big brother, and JQuery mobile doesn't work on it. If that's the case, how else would I do any calls to the server without posting?

Answer 1

This is just a partial answer for now. (I'll update and mark it as resolved once i have it figured out :P)

I ended up taking JQuery mobile out. And my view now looks something like this. the on Change event still isn't firing on IE Mobile (but it works when i run it in chrome under a different agent), the form submits the fridgeNo at least...

@{
    ViewBag.Title = "Freezer Status";
}
@using (Html.BeginForm("ClockFridgeTime", "BlastFreezer", FormMethod.Get, new { name = "UpdateForm" }))
{
    <div style="width: 210px">
        <div>
            @Html.DropDownList("fridgeNo", (List<SelectListItem>)ViewBag.Options, new { onChange = "PostForm(this, '/Index')", Style = "width:160px; height 80px;" })
        </div>
        <br />
        <div>
            <input type="submit" id="submit" value="@ViewBag.FridgeStatus" style="width: 200px; height:80px" />
        </div>
    </div>
}
<script type="text/javascript">
    function PostForm(btnClicked, newLocation) {
        var $form = $(btnClicked).parents('UpdateForm');

        $.ajax({
            type: "GET",
            url: document.UpdateForm.action.replace('/ClockFridgeTime', newLocation.toString()) + "?fridgeNo=" + document.getElementById('fridgeNo').value,
            success: function (response) {
                document.body.innerHTML = response;
            }
        });
        return false;
    }
</script>