2

クラスのクイズWebサイトを作成していますが、ユーザーが質問を作成するページのフォーマットに問題があります。ユーザーがラジオボタンをクリックしたときに、特定の質問タイプに関する追加情報がポップアップ表示されるようにしたいと思います。次に、ユーザーが最初の追加情報で作成されたボタンをクリックした場合に、さらに多くの追加情報をポップアップ表示させたいと思います。

だから、このように見えることから始めます

初期表示

するとこんな感じになります

追加情報を追加した後に表示する

次に、ユーザーが[オプションの追加]ボタンを数回クリックすると、次のようになります。

詳細情報が追加された後に表示する

これを実現するために、jqueryを使用して新しいコンテンツを追加しようとしています。しかし、そのコンテンツを表示させることができないようです。これが現在のコードです

jspで

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="QuestionsCreate.js"></script>
    <meta charset="UTF-8">
    <title>Quiz Creation</title>
</head>
<body>
    <h1>Create Your Quiz</h1>

    <form action="QuestionsCreateServlet" method="post">
        <h2>Question Type</h2>

        <input type="radio" name="type" class="type" id="multipleChoice"
            value="multipleChoice" />
        <label for="multipleChoice">Multiple Choice</label><br/>

        <input type="radio" name="type" class="type" id="fillBlank"
            value="fillBlank" />
        <label for="fillBlank">Fill-in-the-Blank</label><br/>

        <input type="radio" name="type" class="type" id="pictureResponse"
            value="pictureResponse" />
        <label for="pictureRsponse">Picture Response</label><br/>

        <input type="radio" name="type" class="type" id="textResponse"
            value="textResponse" />
        <label for="textResponse">Text Response</label><hr/>

        <div class="jspf"></div>

        <input type="submit" name="button" id="button" value="Finish" />
    </form>
</body>
</html>

JavaScriptで

$(document).ready(function() {
    $(".type").click(function(){
    $(".jspf").html("<jsp:include page='WEB-INF/" +
            $(".type").attr("value") + ".jspf' />");
    $("#button").attr("value", "Add");
    });

    var nOptions = 1;
    $("#add-option").click(function(){
    ++nOptions;
    $(".options").append("<input type='checkbox' name='option" +
            nOptions + "' value='" + nOptions + "' /> " +
            "<input name='name" + nOptions + "' /><br />");
    });

    var nBlanks = 1;
    $("#add-answer").click(function() {
    ++nBlanks;
    $(".fill-blank-answer").append("<input name='answer" + nBlanks +
            "' /><br/>");
    });
});

サンプルjspf

<h3>Question</h3>
<input name="prompt" />
<h3>Options</h3>
Check the options that denote the correct answer<br/>
<div class="options">
<input type='checkbox' name='option1' value='1' />
<input name='name1' /><br />
</div>
<input type="button" value="Add Option" id="add-option" /><hr/>

また、jspfコードをjavascriptに移動しようとしましたが、それも機能しませんでした。

動的に追加されたコンテンツに基づいて、Webページにコンテンツを動的に追加する方法はありますか？よろしくお願いします！

4

2 に答える 2

2

あなたが抱えている問題は、サーバー側のJSPタグをクライアントのブラウザに挿入しようとしていることです。この行を例にとってみましょう。

$(".jspf").html("<jsp:include page='WEB-INF/" +
        $(".type").attr("value") + ".jspf' />");

javascriptのその行が実行されると、CLIENTのブラウザにマークアップが追加されます。

<div class="jspf"><jsp:include page="wEB-INF/pictureResponse.jspf" /></div>

Broswersは、<jsp：include>タグをどう処理するかわからないため、黙って無視します。

実行する必要があるのは、インクルードしようとしているjspfをURLにマップし、次のようなものを使用することです。

$(".jspf").load("/fragments/pictureResponse.jspf");

$ .loadは、クライアントブラウザからサーバーにAJAXリクエストを送信し、サーバーからHTMLを少し取得して、CSSセレクター「.jspf」に一致する要素に挿入します。

また、最初のクリックハンドラーにも問題があります。

$(".type").attr("value")

$ .attrは常に最初に一致した要素の属性値を返すため、ユーザーが何をクリックしても、その行は「multipleChoice」と評価されます。おそらくやりたいことは次のとおりです。

$(this).attr("value")

クリックハンドラーのコンテキストでは、「これ」はユーザーがクリックしたものを指します。

アップデート

セカンダリコンテンツが読み込まれたら、「オプションの追加」クリックハンドラーを追加する方法は次のとおりです。

$('jspf').load('/fragments/pictureResponse.jspf', function() {
    $('#add-option').click(function() {
        nOptions++;
        $('.options').append('<input type="checkbox" name="option' + nOptions +
        '" value="' + nOptions + '" />  <input name="name' + nOptions + '" /><br />");
    });
});
于 2012-08-08T00:16:14.127 に答える
1

$ .get（ "$ {ctx} / store / terminalApply / applyTemplate？terminalType = $ {terminalType}＆index =" + num、function（data）{$（ "＃contentDiv"）。append（data）;}）;

データはページコンテンツでした

于 2015-09-17T02:43:01.747 に答える