在模态中显示 JSP 页面上按钮的值

Question

我有一个包含多个产品的JSP页面。每个产品都有一个按钮，用于调用包含 JSP：INCLUDE 的页面中包含的模型。 我们将模态代码放入单独的 JSP 中，以便更好地组织它。

我们希望使用此模态，并根据从已单击的按钮传递到模态的值显示文本。它就像"产品一"的按钮将显示模态"产品一"中的文本，也许还有其他一些文本。

我在stackoverflow和谷歌上搜索，但我找不到一些提示来存档这个。我尝试使用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>

它调用一种称为"call-us"的模态

"呼叫我们"模式的代码：

<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}位于模态中的位置应该有将从按钮传递到显示的模态的值的文本。 我们希望在页面的每个按钮上添加不同的文本。

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>