以模式顯示JSP頁面上按鈕的值

Question

我有一個包含多種產品的JSP頁面。 每個產品都有一個按鈕，該按鈕調用JSP：INCLUDE頁面中包含的模型。 我們將模式代碼放入單獨的JSP中以更好地組織它。

我們要使用此模式，並根據從單擊按鈕到模式的傳遞值來顯示文本。 類似於“產品一”的按鈕將在模式“產品一”中顯示文本，也許還會顯示其他一些文本。

我在stackoverflow和google上進行了搜索，但是找不到一些提示來存檔。 我嘗試使用JSP：PARAM和JSP INCLUDE，但這是在頁面級別上的。 例如，對於用戶單擊標題上的不同文本的每個按鈕，我都需要它。

....預定行程的按鈕。

<button data-aos="fade-up-right" data-aos-duration="2000" data-aos-offset="100" class="gold-btn call-us" onClick="document.getElementId('action').value=this.value;return true;">Book Tour</button>

它稱為“調用”的模式

“調用”模式的代碼：

<div class="callback">
    <div class="callus--modal">
        <div class="grid-container">
            <div class="grid-x grid-margin-x">  
                <div class="cell large-12 medium-12 small-12 text-right">   
                    <div class="callus-close">X</div>
                </div>  
                <div class="cell large-12 medium-12 small-12 text-center">  
                    <img src="http://www.roma-vaticano.com/assets/images/common/divider.png">
                </div>
                <div class="cell large-12 medium-12 small-12 text-center">  
                    <h2>${param.booking_title}</h2>
                    <h3>We will call you back</h3>
                </div>
            </div>
            <form id="callback-form">
            <div class="grid-x grid-margin-x">
                <div class="cell large-12 medium-12 small-12 text-center">
                    <input type="text" name="name" id="callback_name" value="" placeholder="First and Last Name *" required>
                </div>
                <div class="cell large-4 medium-4 small-12 text-center">
                    <input type="text" name="prefix" id="callback_prefix" maxlength="3" value="" placeholder="prefix *" required>
                </div>

                <div class="cell large-8 medium-8 small-12 text-center">
                    <input type="text" name="phone" id="callback_phone" value="" placeholder="Phone Number *" required>
                </div>
                <div class="cell large-12 medium-12 small-12 text-center">
                    <input type="text" name="email" id="callback_email" value="" placeholder="email address *" required>
                </div>
                <div class="cell large-12 medium-12 small-12 text-center">
                    <div class="autorizzazione" style="text-align: left;">
                        <div class="check_box">
                            <input type="checkbox" value="si" id="callback_auth" name="privacy" required>
                            <label for="e_auth"></label>
                        </div> 
                        <p>I confirm that i have read the privacy policy. *</p>
                        <div style="clear: both;"></div>
                    </div>
                    <div class="autorizzazione" style="text-align: left;">
                        <div class="check_box">
                            <input type="checkbox" value="si" id="callback_newsletter" name="newsletter">
                            <label for="e_auth"></label>
                        </div> 
                        <p>I want to recieve special offers about Rome and the Vatican</p>
                        <div style="clear: both;"></div>
                    </div>
                  </div>
                </div>
                    <div class="grid-x grid-margin-x">
                        <div class="cell large-12 medium-12 small-12 text-center">
                            <input class="gold-btn" id="callback_submit" type="submit" value="CALL ME BACK" style="border: none !important; position: relative; float: none;">
                        </div>
                    </div>
                </div>
             </div>
            </form>
        </div>
    </div>
</div>

<script>


$("#callback-form").validate({
   errorClass: "contact-error",
   validClass: "contact-valid",
   rules: {
    name: "required",
    prefix: {
      required: true,
      maxlength: 3
    },
    phone: "required",
    email: "required",
    privacy: "required"
  },
  messages: {},
  submitHandler: function(form) {
    sendCallbackEmail();
  }
});

function sendCallbackEmail() {
    var name = $('#callback_name').val();
    var prefix = $('#callback_prefix').val();
    var phone = $('#callback_phone').val();
        var email = $('#callback_email').val();

    var params = {};
    params.name = name;
    params.prefix = prefix;
    params.phone = phone;
        params.email = email;
    $.get( "/contacts/callback", params ).done(function( data ) {
        if (data.success) {
            $('#callback_submit').val("SENT");
            $("#callback_submit").prop("disabled",true);
        } else {
            alert("Error");
        }
    });
}
</script>

如您所見，我們使用JSP：PARAM進行了嘗試，並且可以正常工作。 但不是在按鈕級別上，它為每個正常按鈕顯示相同的值。 ${param.booking_title}在模式中${param.booking_title}的位置，應該是將從按鈕傳遞到所顯示模式的值的文本。 我們想在頁面的每個按鈕上添加不同的文本。

Answer 1

jsp:param適用於后端（服務器）中設置的值。

但是，如果您想在modify DOM element without sending requests （例如h:button, h:link ），則需要調用js函數並對其進行修改。

為您的h2元素設置id並調用showDlg函數

 function showDlg(text){ $("#booking-title").text(text); $(".callback").show(); document.getElementById('action').value=this.value; return true; } $("#callback-form").validate({ errorClass: "contact-error", validClass: "contact-valid", rules: { name: "required", prefix: { required: true, maxlength: 3 }, phone: "required", email: "required", privacy: "required" }, messages: {}, submitHandler: function(form) { sendCallbackEmail(); } }); function sendCallbackEmail() { var name = $('#callback_name').val(); var prefix = $('#callback_prefix').val(); var phone = $('#callback_phone').val(); var email = $('#callback_email').val(); var params = {}; params.name = name; params.prefix = prefix; params.phone = phone; params.email = email; $.get( "/contacts/callback", params ).done(function( data ) { if (data.success) { $('#callback_submit').val("SENT"); $("#callback_submit").prop("disabled",true); } else { alert("Error"); } }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <button data-aos="fade-up-right" data-aos-duration="2000" data-aos-offset="100" class="gold-btn call-us" onClick="showDlg('Book Tour')">Book Tour</button> <input type="hidden" id="action" /> <hr/> <div class="callback" style="display:none"> <div class="callus--modal"> <div class="grid-container"> <div class="grid-x grid-margin-x"> <div class="cell large-12 medium-12 small-12 text-right"> <div class="callus-close">X</div> </div> <div class="cell large-12 medium-12 small-12 text-center"> <img src="http://www.roma-vaticano.com/assets/images/common/divider.png"> </div> <div class="cell large-12 medium-12 small-12 text-center"> <h2 id="booking-title">${param.booking_title}</h2> <h3>We will call you back</h3> </div> </div> <form id="callback-form"> <div class="grid-x grid-margin-x"> <div class="cell large-12 medium-12 small-12 text-center"> <input type="text" name="name" id="callback_name" value="" placeholder="First and Last Name *" required> </div> <div class="cell large-4 medium-4 small-12 text-center"> <input type="text" name="prefix" id="callback_prefix" maxlength="3" value="" placeholder="prefix *" required> </div> <div class="cell large-8 medium-8 small-12 text-center"> <input type="text" name="phone" id="callback_phone" value="" placeholder="Phone Number *" required> </div> <div class="cell large-12 medium-12 small-12 text-center"> <input type="text" name="email" id="callback_email" value="" placeholder="email address *" required> </div> <div class="cell large-12 medium-12 small-12 text-center"> <div class="autorizzazione" style="text-align: left;"> <div class="check_box"> <input type="checkbox" value="si" id="callback_auth" name="privacy" required> <label for="e_auth"></label> </div> <p>I confirm that i have read the privacy policy. *</p> <div style="clear: both;"></div> </div> <div class="autorizzazione" style="text-align: left;"> <div class="check_box"> <input type="checkbox" value="si" id="callback_newsletter" name="newsletter"> <label for="e_auth"></label> </div> <p>I want to recieve special offers about Rome and the Vatican</p> <div style="clear: both;"></div> </div> </div> </div> <div class="grid-x grid-margin-x"> <div class="cell large-12 medium-12 small-12 text-center"> <input class="gold-btn" id="callback_submit" type="submit" value="CALL ME BACK" style="border: none !important; position: relative; float: none;"> </div> </div> </div> </div> </form> </div> </div> </div>