jqueryasp.net-mvcasp.net-mvc-3jquery-mobileie-mobile

JQuery Mobile not working on IE Mobile. (MVC)


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.

Chrome - With mobile agent Mobile device

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?


Solution

  • 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>