Javascript Bootbox 中的函数 jquery
Javascript function inside Bootbox jquery
嗨,我如何调用引导箱中的函数 jquery?
这是一个示例,位于
select name="Status"
如果可能的话,我会调用一个函数来显示和隐藏 table
的 tr
,在 html_form
var 中调用。我该怎么做?
function ChangeStatusDossier(UtenteCreatore) {
var html_form = '<form name="ChangeStatusDossier" id="ChangeStatusDossier" class="ChangeStatusDossier"><table><tr><th colspan="2"><h2 class="blue">Change Dossier Status</h2></th></tr><tr><td><strong>Choose status </strong> </td><td><select name="Status" onchange="Show(this.value);"><option value="0">Under process</option><option value="1">Under collection</option><option value="2">Cargo collected</option><option value="159">In Warehouse</option><option value="1485">To Destination</option></select></td></tr><tr id ="HubChoose" style="display:none;"><td>Choose hub</td><td><select name="Hub"><option>HUB MILANO</option></select></td></tr><input type="hidden" name="UtenteCreatore" value="' + UtenteCreatore + '"></table><form>';
bootbox.confirm(html_form, function (result) {
if (result) {
$('#ChangeStatusDossier').submit();
}
});
function Show(value) {
if (value == "159") {
$("#HubChoose").show();
}
}
}
在您的情况下,最好使用 dialog
方法而不是 confirm
。
您可以这样做:
function ShowHub(value) {
if (value == "159") {
$("#HubChoose").show();
}
else {
$("#HubChoose").hide();
}
}
jQuery("#default").on("click", function() {
bootbox.dialog({
title: "This is a form in a modal.",
message:
'<form class="ChangeStatusDossier" id="ChangeStatusDossier" name="ChangeStatusDossier">' +
'<input name="UtenteCreatore" type="hidden" value="' + UtenteCreatore + '">' +
'<table>' +
'<tr>' +
'<th colspan="2">' +
'<h2 class="blue">Change Dossier Status</h2>' +
'</th>' +
'</tr>' +
'<tr>' +
'<td><strong>Choose status</strong> </td>' +
'<td><select name="Status" onchange="ShowHub(this.value);">' +
'<option value="0">' +
'Under process' +
'</option>' +
'<option value="1">' +
'Under collection' +
'</option>' +
'<option value="2">' +
'Cargo collected' +
'</option>' +
'<option value="159">' +
'In Warehouse' +
'</option>' +
'<option value="1485">' +
'To Destination' +
'</option>' +
'</select></td>' +
'</tr>' +
'<tr id="HubChoose" style="display:none;">' +
'<td>Choose hub</td>' +
'<td><select name="Hub">' +
'<option>' +
'HUB MILANO' +
'</option>' +
'</select></td>' +
'</tr>' +
'</table>' +
'</form>',
buttons: {
success: {
label: "Submit",
className: "btn-success",
callback: function () {
$('#ChangeStatusDossier').submit();
showResult("Form submitted!");
}
},
cancel: {
label: "Cancel",
className: "btn-danger",
callback: function() {
showResult("Canceled!");
}
}
} // buttons
}); // dialog
});
function showResult(result) {
if (typeof result !== "undefined" && result !== null) {
console.log(result);
}
}
这是一个有效的 DEMO
嗨,我如何调用引导箱中的函数 jquery?
这是一个示例,位于
select name="Status"
如果可能的话,我会调用一个函数来显示和隐藏 table
的 tr
,在 html_form
var 中调用。我该怎么做?
function ChangeStatusDossier(UtenteCreatore) {
var html_form = '<form name="ChangeStatusDossier" id="ChangeStatusDossier" class="ChangeStatusDossier"><table><tr><th colspan="2"><h2 class="blue">Change Dossier Status</h2></th></tr><tr><td><strong>Choose status </strong> </td><td><select name="Status" onchange="Show(this.value);"><option value="0">Under process</option><option value="1">Under collection</option><option value="2">Cargo collected</option><option value="159">In Warehouse</option><option value="1485">To Destination</option></select></td></tr><tr id ="HubChoose" style="display:none;"><td>Choose hub</td><td><select name="Hub"><option>HUB MILANO</option></select></td></tr><input type="hidden" name="UtenteCreatore" value="' + UtenteCreatore + '"></table><form>';
bootbox.confirm(html_form, function (result) {
if (result) {
$('#ChangeStatusDossier').submit();
}
});
function Show(value) {
if (value == "159") {
$("#HubChoose").show();
}
}
}
在您的情况下,最好使用 dialog
方法而不是 confirm
。
您可以这样做:
function ShowHub(value) {
if (value == "159") {
$("#HubChoose").show();
}
else {
$("#HubChoose").hide();
}
}
jQuery("#default").on("click", function() {
bootbox.dialog({
title: "This is a form in a modal.",
message:
'<form class="ChangeStatusDossier" id="ChangeStatusDossier" name="ChangeStatusDossier">' +
'<input name="UtenteCreatore" type="hidden" value="' + UtenteCreatore + '">' +
'<table>' +
'<tr>' +
'<th colspan="2">' +
'<h2 class="blue">Change Dossier Status</h2>' +
'</th>' +
'</tr>' +
'<tr>' +
'<td><strong>Choose status</strong> </td>' +
'<td><select name="Status" onchange="ShowHub(this.value);">' +
'<option value="0">' +
'Under process' +
'</option>' +
'<option value="1">' +
'Under collection' +
'</option>' +
'<option value="2">' +
'Cargo collected' +
'</option>' +
'<option value="159">' +
'In Warehouse' +
'</option>' +
'<option value="1485">' +
'To Destination' +
'</option>' +
'</select></td>' +
'</tr>' +
'<tr id="HubChoose" style="display:none;">' +
'<td>Choose hub</td>' +
'<td><select name="Hub">' +
'<option>' +
'HUB MILANO' +
'</option>' +
'</select></td>' +
'</tr>' +
'</table>' +
'</form>',
buttons: {
success: {
label: "Submit",
className: "btn-success",
callback: function () {
$('#ChangeStatusDossier').submit();
showResult("Form submitted!");
}
},
cancel: {
label: "Cancel",
className: "btn-danger",
callback: function() {
showResult("Canceled!");
}
}
} // buttons
}); // dialog
});
function showResult(result) {
if (typeof result !== "undefined" && result !== null) {
console.log(result);
}
}
这是一个有效的 DEMO