-2
如何處理jQuery對話框上的事件。例如，我想在jQuery對話框上處理onchange事件。onchange事件jquery對話不起作用
任何人都可以在同一
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
label, input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 150%;
}
div#users-contain table td, div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
#dialog-form {
display: none;
}
#button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttondisplay {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttonadd {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttondisplay1 {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#buttonadd1 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 1000px;
}
#first {
border: 2px solid;
top: 500px;
padding: 12px;
background: #F8F9F9;
width: 1200px;
position: absolute;
right: 150px;
}
#firstinfo {
border: 2px solid;
top: 29px;
padding: 12px;
background: #F8F9F9;
width: 1200px;
position: absolute;
right: 150px;
}
#headerlogo {
height: 70px;
background: #0f2d51;
}
#headerlogo1 {
height: 70px;
background: #0f2d51;
}
#centername {
position: absolute;
top: 3px;
padding: 12px;
font-family: verdana;
}
#centername1 {
position: absolute;
font-family: verdana;
top: 3px;
padding: 12px;
right:290px;
}
</style>
</head>
<script type="text/javascript">
var myarr=[];
var finalarr=[];
var infopanelarr=[];
var datagridarray=[];
var switchflag=0;
var datapropertyoptions="";
var entitiyoptions ="";
var projectoptions ="";
var moduleoptions ="";
var datapropertyoptions="";
var projects=[];
var modules=[];
var entity=[];
var projectid=0;
var moduleid=0;
function resetpage() {
location.reload();
loaddetails();
}
function lowercase(value) {
var value = value.replace(/\s+/g, '');
return value.toLowerCase();
}
function upperCamelCase(value) {
var valuearr = value.split(" ");
var val="";
for(var i =0; i < valuearr.length; i++){
val = val + capitalFirstLetter(valuearr[i]);
}
return val;
}
function lowerCamelCase(value) {
var valuearr = value.split(" ");
var val=valuearr[0].toLowerCase();
for(var i =1; i < valuearr.length; i++){
val = val + capitalFirstLetter(valuearr[i]);
}
//alert(val);
return val;
}
function capitalFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function loaddetails(){
// getting projects details from service
$.ajax({
type: "GET",
async:false,
dataType: "json",
url: "http://localhost:8081/GetHelpServices/getProjects",
success: function(data) {
console.log("projects ajax"+JSON.stringify(data));
for(var j=0; j< data.length; j++){
projects.push(data[j]);
projectoptions = projectoptions + "<option>"+data[j].projectName+"</option>";
}
document.getElementById('projects').innerHTML = projectoptions;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(' Error in processing! '+errorThrown);
}
});
// getting modules details from service
$.ajax({
type: "GET",
async:false,
dataType: "json",
url: "http://localhost:8081/GetHelpServices/getModules",
success: function(data) {
console.log("modules ajax"+data.length);
for(var j=0; j< data.length; j++){
modules.push(data[j]);
moduleoptions = moduleoptions + "<option>"+data[j].moduleName+"</option>";
}
document.getElementById('modules').innerHTML = moduleoptions;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(' Error in processing! '+errorThrown);
}
});
entity = ["Employee","Student"];
for(var j=0; j< entity.length; j++){
entitiyoptions = entitiyoptions + "<option>"+entity[j]+"</option>";
}
document.getElementById('entities').innerHTML = entitiyoptions;
/* datapropertyoptions =
"<option >text</option>" +
"<option >number</option>" +
"<option >boolean</option>" +
"<option >date</option>" + entitiyoptions + "";
document.getElementById('dataproperties').innerHTML = datapropertyoptions; */
}
$(document).ready(function(){
$("#generateArtifacts").click(function(){
var cellbl;
var celdpt;
var infocelarr=[];
var infoproject=document.getElementById("mainproject").value;
var infomodule=document.getElementById("mainmodule").value;
var infoentity=document.getElementById("mainentity").value;
for(var k=0; k<modules.length; k++){
console.log("modules "+modules.length);
console.log("modules "+modules[k].moduleName);
console.log("modules "+infomodule);
if(modules[k].moduleName.trim() == infomodule.trim()){
alert(modules[k].moduleId);
alert(infomodule);
moduleid = modules[k].moduleId;
}
}
for(var k=0; k<projects.length; k++){
console.log("projects "+projects.length);
console.log("projects name "+projects[k].projectName);
console.log("projects read name"+infoproject);
if(projects[k].projectName.trim() === infoproject.trim()){
alert(projects[k].projectId);
alert(infoproject);
projectid = projects[k].projectId;
}
}
infoproject = upperCamelCase(infoproject.toLowerCase());
infomodule = lowercase(infomodule.toLowerCase());
infoentity = upperCamelCase(infoentity.toLowerCase());
var dbinfo = {"primaryKey":"Id"};
console.log(projects);
var infopanelobj = {'"projectId"': ""+projectid+"", '"projectName"':infoproject, '"moduleId"': ""+moduleid+"", '"moduleName"':infomodule, '"entityName"':infoentity,'"fields"':myarr,'"dbinfo"':dbinfo};
infopanelarr.push(infopanelobj);
//finalarr.push({infopanel:infopanelarr});
console.log(infopanelarr);
// Posting the data
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
type: "POST",
async:false,
dataType: "json",
data : JSON.stringify(infopanelobj),
url: "http://localhost:8081/GetHelpServices/insertArtifact",
success: function(data) {
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(' Error in processing! '+jqXHR);
console.log(' Error in processing! '+textStatus);
console.log(' Error in processing! '+errorThrown);
}
});
});
});
$(document).ready(function(){
var new_dialog = function (type, row) {
var dlg = $("#dialog-form").clone();
var fieldname = dlg.find(("#fieldname")),
fieldtype = dlg.find(("#fieldtype")),
fieldtobeassociated = dlg.find(("#fieldtobeassociated")),
association = dlg.find(("#association")),
Mandatory = dlg.find(("#Mandatory")),
Unique = dlg.find(("#Unique"));
type = type || 'Create';
var config = {
autoOpen: true,
height: 600,
width: 500,
modal: true,
buttons: {
"Create an account": save_data,
"Cancel": function() {
dlg.dialog("close");
}
},
close: function() {
dlg.remove();
}
};
if (type === 'Edit') {
config.title = "Edit User";
// _.remove(myarr, {"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text()});
console.log(myarr);
get_data();
delete (config.buttons['Create an account']);
config.buttons['Edit account'] = function() {
row.remove();
save_data();
};
}
dlg.dialog(config);
function get_data() {
var _fieldname = $(row.children().get(0)).text();
// _password = $(row.children().get(2)).text();
fieldname.val(_fieldname);
// password.val(_password);
}
function save_data() {
var datatype=fieldtype.find("option:selected").text();
if (datatype == "number" || datatype == "text" || datatype == "date" || datatype == "boolean"){
var ob ={"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text()};
}
else {
var ob ={"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text(),
"fieldToBeDisplayedInDropDown":fieldtobeassociated.find("option:selected").text(),
"associationType":association.find("option:selected").text()
};
}
var temp ={"fieldId":fieldname.val()};
var index = _.findIndex(myarr, {"fieldId":fieldname.val()});
console.log(type);
if (index > -1){
myarr.splice(index, 1, ob);
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
else{
myarr.push(ob);
$("#users tbody").append("<tr>" + "<td>" + fieldname.val() + "</td>" + "<td>" + (fieldtype.find("option:selected").text() + ' ') + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
dlg.dialog("close");
}
console.log(myarr);
}
};
$(document).on('click', 'span.delete', function() {
$(this).closest('tr').find('td').fadeOut(200,
function() {
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$(document).on('click', 'td a.edit', function() {
new_dialog('Edit', $(this).parents('tr'));
return false;
});
$("#create-user").button().click(new_dialog);
});
</script>
<body onload="loaddetails()">
<div class="container" >
<h2>UI Details</h2>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label for="inputdefault">Project</label>
<input class="form-control" list="projects" id="mainproject" name="project">
<datalist id="projects">
</datalist>
</div>
<div class="col-md-4">
<label for="inputdefault">Module</label>
<input class="form-control" list="modules" id="mainmodule" name="module">
<datalist id="modules">
</datalist>
</div>
<div class="col-md-4">
<label for="inputlg">Entity</label>
<input class="form-control" list="entities" id="mainentity" name="module">
<datalist id="entities">
</datalist>
</div>
</div>
</div>
</form>
</div>
<div id="dialog-form" title="Create new user">
<p class="validateTips">
All form fields are required.</p>
<form>
<fieldset>
<label for="fieldname">
Field Name*</label>
<input class="form-control " type="text" name="fieldname" id="fieldname" value="" class="text ui-widget-content ui-corner-all" />
<br>
<label for="fieldtype">
Type*</label>
<select class="form-control " id="fieldtype" >
<option value="1">text</option>
<option value="2">boolean</option>
<option value="3">number</option>
<option value="4">date</option>
<option value="4">Student</option>
</select>
<br>
<label for="fieldtobeassociated">
Field to be associated</label>
<select class="form-control " id="fieldtobeassociated" >
<option value="1">name</option>
<option value="2">address</option>
</select>
<br>
<label for="association">
Association Type</label>
<select class="form-control " id="association" >
<option value="1">Foreign Key</option>
<option value="2">One-to-One</option>
<option value="2">One-to-Many</option>
<option value="2">Many-to-One</option>
<option value="2">Many-to-Many</option>
<option value="2">Many-to-Many+Joint Tables</option>
</select>
<br>
<div class="checkbox">
<label><input type="checkbox" value="Mandatory" id="Mandatory">Mandatory</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="Unique" id="Unique">Unique</label>
</div>
</fieldset>
</form>
</div>
<div class="container" >
<div id="users-contain" class="ui-widget">
<h2>Fields</h2>
<button id="create-user">
Add Fields</button>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Field Name </th>
<th>Type</th>
<th> Update</th>
<th> Remove</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<a class="btn btn-success " id="generateArtifacts">Generate Artifacts</a> <a class="btn btn-danger " onclick="resetpage()">Reset Artifacts</a>
</div>
</body>
</html>
在上面的代碼提示，我想隱藏/顯示jQuery的對話框div上點擊同一個對話框的select option元素onchange事件。
歡迎來到Stack Overflow。請查看以下內容：https://stackoverflow.com/help/mcve您的示例太多了，難以協助。 – Twisty
我也看到你加載jQuery 3.2.1，然後加載jQuery 1.8.3，這將導致一些衝突，並可能導致你的腳本不能按預期運行。你應該只加載其中的一個，我會建議3.2.1。 – Twisty
謝謝。我刪除舊版本1.8.3並修改了我的代碼。最後它的工作。 –