0

誰も答えなかった私の正確な問題に関する質問を見つけました：

https://stackoverflow.com/questions/11218707/jquery-mobile-data-rel-dialog-not-firing

ユーザーがボタンを押したときに開くダイアログがあります。すべてのデスクトップ ブラウザーと Android ブラウザーで問題なく動作します。iPhone または iPad の Safari では機能しません。iDevice でページを更新すると、機能します。

これが私のボタンです：

<a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right" data-transition="slidedown">@Model.selectedDate.ToShortDateString()</a>

これが私のダイアログです：

<div data-role="dialog" id="popup">

<div data-role="header" data-theme="b">
    <h1>Production Date</h1>
</div>

<div data-role="content" data-theme="b">

@using (Html.BeginForm()) { 
    <div data-role="fieldcontainer">
        @Html.LabelFor(model => model.selectedSystem, "Select a date for System " + Model.selectedSystem)
        @Html.HiddenFor(model => model.selectedSystem)
        @Html.LabelFor(model => model.selectedDate, "Date:")
        @Html.TextBoxFor(model => model.selectedDate, new { type = "date" })
    </div>

    <button type="submit" data-theme="b">Select</button>
}
</div>

レンダリングされたページのページ ソースは次のとおりです。

    <div data-role="page" id="mainpage" data-theme="b">
    <div data-role="header" data-theme="b" data-position="fixed">
        <center>
            <a href="/Home/Main">
                <img src="/mobileDemo/Images/company_header_logo_mobile.png" border="0" /></a>
        </center>
    </div>
    <div style="text-align: center; padding-top: 5px">
        <center>
            <a href="/mobileDemo/Home/Main">
                <img src="/mobileDemo/Images/menu_home.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/Counts">
                <img src="/mobileDemo/Images/menu_prodcounts.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/Inventory">
                <img src="/mobileDemo/Images/menu_inventory.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/Vehicle">
                <img src="/mobileDemo/Images/menu_vehicle.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/SSAR">
                <img src="/mobileDemo/Images/menu_ssar.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/STAR">
                <img src="/mobileDemo/Images/menu_star.png" style="width: 40px" border="0" /></a>
            <a href="/mobileDemo/EXECDASH">
                <img src="/mobileDemo/Images/menu_dashboard.png" style="width: 40px" border="0" /></a>
        </center>
    </div>
    <div style="padding-left: 20px; padding-top: 10px">
        <strong>Body Dashboard for System 1</strong>
    </div>
    <div style="padding-right: 15px; padding-left: 15px; padding-top: 10px">
        <a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right"
            data-transition="pop">11/7/2012</a>
        <hr />
        <ul data-role="listview" data-inset="true">
            <li><a href="/mobileDemo/ExecDash/BodyProd/1/11-07-2012">Production</a></li>
            <li><a href="/mobileDemo/ExecDash/BodyOEE?system=1&amp;date=11-07-2012">Body OEE</a></li>
            <li><a href="/mobileDemo/ExecDash/BodyDKS?system=1&amp;date=11-07-2012">Doukie-Seisan
                KPI</a></li>
            <li><a href="/mobileDemo/ExecDash/BodyDT?system=1&amp;date=11-07-2012">Down Time</a></li>
        </ul>
    </div>
</div>

製造日

システム 1 の日付を選択してください 日付: 選択

また、注目に値するのは、ビューにパラメーターを渡していることです。URL は次のようになります。

http://internal-server/mobileDemo/ExecDash/Body/1

ダイアログが表示されているときにこれに行くのは次のとおりです。

http://internal-server/mobileDemo/ExecDash/Body/1#&ui-state=dialog

iDevice で (リフレッシュ前に) が機能しない場合、ボタンを押したままにすると、次のように表示されます。OPEN/OPEN IN NEW TAB オプションが表示されます。

http://internal-server/mobileDemo/ExecDash/Body/1#popup

私は何を間違っていますか？

4

1 に答える 1

0

私はあなたの例をいくつかの小さな調整で動作させました。

  1. VS2012 を使用して新しいプロジェクトを作成し、モバイル テンプレートを選択しました。
  2. 次に、Home/Index.cshtml にタグ、つまりポップアップを起動するボタンを追加しました。モデルがなかったので、コードを@DateTime.Now.ToShortDateString()のテキストに変更します。

  3. 私はあなたのダイアログを取り、 data-role="page" を閉じた直後に _Layout.cshtml に貼り付けました。以下のコードを参照してください。

    <body>
<div data-role="page" data-theme="b">
    <div data-role="header">
        @if (IsSectionDefined("Header")) {
            @RenderSection("Header")
        } else {
            <h1>@ViewBag.Title</h1>
            @Html.Partial("_LoginPartial")
        }
    </div>
    <div data-role="content">
        @RenderBody()
    </div>
</div>

<div data-role="dialog" id="popup">
    <div data-role="header" data-theme="b">
        <h1>Production Date</h1>
    </div>
    <div data-role="content" data-theme="b">

    @using (Html.BeginForm()) { 
        <div data-role="fieldcontainer">
            <label>hello world</label>

        </div>

        <button type="submit" data-theme="b">Select</button>
    }
    </div>
</div>

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)

ご覧のとおり、モデルを持っていないため、コードの一部を取り出したので、代わりに「hello world」ラベルを代用しました. では、なぜ私はそのようにしたのですか？さて、ダイアログを index.cshtml に入れようとしましたが、これは、ダイアログ HTML が data-role="page" 内に出力されていたことを意味します。だから、それは私のために発砲していませんでした。data-role="page" div の外に移動すると、機能しました。iPhone5でテストしたところ、うまくいきました（リフレッシュなし）。この投稿であなたのマークアップについて気付いたことの 1 つは、終了 DIV が 1 つ欠けていることでした。したがって、コピー/貼り付けエラーかどうかはわかりません。私の正確な手順を試してみてください.

于 2012-11-07T22:51:58.603 に答える