1

ユーザーからいくつかの選択を行う Web サイトのページがあります。Web サイトはモバイル ユーザー専用であるため、JQuery Mobile を使用しています。Web サイトも CMS によって管理されているため、VB.net で記述されたコード ビハインド ファイルからページを生成する必要があります。

ユーザーが行う必要があるすべての選択に対してcollapsible、 Collective 内に I make がありますcollapsible-set。一部の選択肢では、radiobuttonlist が生成されます。ラジオボタンの生成は、可能なすべてのピックを通過し、オプションごとにラジオボタンを生成するリピーターを通じて行われます。ユーザーがボタンを押して選択内容を確認すると、選択したオプションが収集され、サーバーに送信されて処理されます。

ここで、リピーターとコード ビハインドを調整して、必要なタグと属性を生成し、JQuery Mobile がレイアウトを設定できるように最善を尽くしましたが、生成されたラジオボタン リストが正常に機能しなくなりました。ページが読み込まれるたびに、最初のオプションが自動的にチェックされ、そのオプションにロックされます。一方、視覚的には、実際にはラジオボタン リスト全体のすべてのオプションを選択できます (別のオプションを選択しても、選択が解除されるオプションはありません)。これは単なる視覚的なものです (実際には、最初の選択のみがバックグラウンドでチェックされ、他の選択を試みても変更されません)。

リストに関して左右にいくつかのことを試しました。field-set生成されたすべてのラジオボタンをまとめてバインドするためにリピーターの周りにタグを配置し、属性が一意であることを確認するためにコードを変更しました( nameID は既に一意です)。これは、私がチェックした質問の1つへの簡単なリンクです。私の問題とは直接関係ありませんが、答えに従うことで解決できると思いました：Jquery mobile radio button selection。

HTML がコンポーネント内のラジオボタン リストの 1 つを探す方法は次のとおりです (CMS 生成前)。

<div class="detailblock thumbs" runat="server" id="div_plants" data-role="collapsible">
    <asp:Literal ID="litTitle_plants" runat="server" />            
    <fieldset data-role="controlgroup">
        <asp:Repeater ID="repDetails_plants" runat="server">
            <ItemTemplate>
                <asp:Literal ID="litValue" runat="server" Visible="false" />
                <asp:RadioButton ID="radPlant" runat="server" GroupName="plant" />
            </ItemTemplate>
        </asp:Repeater>
    </fieldset>
</div>

まずcollapsible、プラントのすべてのオプションを含む があります。最初のリテラルは、のタイトルを設定するために使用されcollapsibleます。次にfield-set、ラジオボタンを一緒にバインドすることになっている があります。最後に、植物ごとに目に見えない値を生成するリピーターと、ラジオボタンがあります。

すべてのアイテムの生成を処理するコードは次のとおりです。

Protected Function ProcessProductPlant(sender As Object, e As System.Web.UI.WebControls.RepeaterItemEventArgs) As Boolean
    Dim plant As em_clsProductSizeColorPlant = e.Item.DataItem

    If plant Is Nothing Then
        Return False
    End If

    Dim litValue As Literal = e.Item.FindControl("litValue")
    litValue.Text = plant.id

    Dim radPlant As RadioButton = e.Item.FindControl("radPlant")
    If Not plant.Image Is Nothing Then
        radPlant.Text = "<img src='" & plant.Image.ToLower & "' alt='" & plant.description & "' />"
    Else
        radPlant.Text = "<img src='" & "/websites/1/uploads/img/wapla/logo.jpg" & "' alt='" & plant.description & "' />"
    End If
    radPlant.Attributes.Add("name", "plant_choice_" & e.Item.ItemIndex)

    If e.Item.ItemIndex = 0 Then
        radPlant.Checked = True
        litCurrentPlantId.Text = "var currentPlantId = '" & plant.id & "';"
    End If

    radPlant.Attributes.Add("onclick", "currentPlantId = '" & plant.id & "'; change_image();")

    Return True
End Function

最後に、生成時に plant-collapsible が HTML でどのように見えるかを次に示します。

<div id="ctl24_div_plants" class="detailblock thumbs" data-role="collapsible">
        <h2>1. choose a plant</h2>
        <fieldset data-role="controlgroup"> 
            <span name="plant_choice_0"><input id="ctl24_repDetails_plants_ctl00_radPlant" type="radio" name="ctl24$repDetails_plants$ctl00$plant" value="radPlant" checked="checked"/><label for="ctl24_repDetails_plants_ctl00_radPlant"><img src='/websites/1/uploads/image/productimages/filrouge/plants/jpg/cycas_thumb.jpg' alt='BUSINESS 01' /></label></span>
            <span name="plant_choice_1"><input id="ctl24_repDetails_plants_ctl01_radPlant" type="radio" name="ctl24$repDetails_plants$ctl01$plant" value="radPlant" /><label for="ctl24_repDetails_plants_ctl01_radPlant"><img src='/websites/1/uploads/image/productimages/filrouge/plants/jpg/sanseveria_kirkii_thumb.jpg' alt='BUSINESS 01' /></label></span>
            <span name="plant_choice_2"><input id="ctl24_repDetails_plants_ctl02_radPlant" type="radio" name="ctl24$repDetails_plants$ctl02$plant" value="radPlant" /><label for="ctl24_repDetails_plants_ctl02_radPlant"><img src='/websites/1/uploads/image/productimages/filrouge/plants/jpg/zamioculcas_thumb.jpg' alt='BUSINESS 01' /></label></span>        
        </fieldset>
    </div>

1 つの項目が既にチェックされていることに注意してください。実際には、3 つのプラントすべてがチェックされているのを確認できますが、HTML では最初の選択のみがチェックされたままになります。

私を助けるためにさらに情報が必要な場合は、お気軽にお問い合わせください。すべてのヘルプは大歓迎です。

編集

すべてのラジオボタンのグループ名が同じである必要があることをどこかで見つけました。でItemTemplate、既にグループ名を設定しましたが、生成された HTML のどこにも表示されません。コードでグループ名を設定する必要がありますか?それとも、生成された HTML にグループ名が表示されないようにする必要がありますか?

EDIT2

最初の選択設定がレイアウトを壊す可能性があるのではないかと疑って、ラジオボタンを強制的に更新してラジオボタンを修正しようとしました。HTML ドキュメント自体で次の JQuery スクリプトを使用して更新を行いました (colorchoices は、ページ上のラジオボタンの 2 番目のセットです)。

$(document).ready(function () {
    $("fieldset[id='plantchoices']").children("input").each("refresh");
    $("fieldset[id='colorchoices']").children("input").each("refresh");
});

注：このスクリプトは私の問題を解決しませんでした。

4

1 に答える 1