onchange event on jquery dialogue not working

onchange event on jquery dialogue not working - jquery-ui

How to handle events on jQuery dialog box. For example I want to handle onchange event on jQuery dialog.
Can anyone suggest on the same
<%# 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>
In the above code, I want to hide/show div on jQuery dialog on click onchange event on the same dialog's select option element.

Based on your example, you will want to ensure you are only loading jQuery 3.2.1 and not both.
<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" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>

I have just refined my answer and posting below. the below code working properly with my expected requirement. But need some suggestion on reading table outerHTML data.
<%# 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">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>
<style type="text/css">
</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;
var flag=true;
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(){
}
function isPrimitive(datatype){
if (datatype == "text" || datatype == "number" || datatype == "date" || datatype == "boolean"){
flag = true;
}
else {
flag=false;
}
return flag;
}
function onFieldTypeChange(){
var entityoptions = "";
var element = document.getElementById("fieldtype").value;
if (isPrimitive(element)){
//alert('hi');
entityoptions = "<option>id</option><option>name</option><option>address</option>";
$('#entityProperties').hide();
}
else {
entityoptions = "<option value='111'>Student</option><option value='112'>Employee</option><option value='113'>Address</option>";
$('#entityProperties').show();
}
document.getElementById("fieldtobeassociated").innerHTML = entityoptions;
}
function insert_save_row(){
var fieldname=document.getElementById("fieldname").value;
var fieldtype=document.getElementById("fieldtype").value;
var table=document.getElementById("fields");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr class='item' id='row"+table_len+"'><td class='theCell' id='fieldname"+table_len+"'>"+fieldname+"</td><td class='theCell' id='fieldtype"+table_len+"'>"+fieldtype+"</td><td><input type='button' class='btn btn-success' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'></td><td> <input type='button' class='btn btn-danger' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("save").style.display="block";
document.getElementById("edit").style.display="none";
//alert(fieldtype);
if (isPrimitive(fieldtype))
$('#entityProperties').hide();
else
$('#entityProperties').show();
$('#myModal').modal('hide');
}
function edit_row(no)
{
var name=document.getElementById("fieldname"+no);
var type=document.getElementById("fieldtype"+no);
var vname = name.innerHTML;
var vtype = type.innerHTML;
document.getElementById("temp_row_no").value = no;
document.getElementById("fieldname").value = vname;
document.getElementById("fieldtype").value = vtype;
document.getElementById("save").style.display="none";
document.getElementById("edit").style.display="block";
if (isPrimitive(vtype.trim()))
$('#entityProperties').hide();
else
$('#entityProperties').show();
$('#myModal').modal('show');
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function edit_save_row()
{
var no = document.getElementById("temp_row_no").value;
var name=document.getElementById("fieldname").value;
var type=document.getElementById("fieldtype").value;
document.getElementById("fieldname"+no).innerHTML=name;
document.getElementById("fieldtype"+no).innerHTML=type;
if (isPrimitive(type))
$('#entityProperties').hide();
else
$('#entityProperties').show();
$('#myModal').modal('hide');
}
function addField(){
document.getElementById("save").style.display="block";
document.getElementById("edit").style.display="none";
document.getElementById("fieldname").value = "";
document.getElementById("fieldtype").value ="";
$('#entityProperties').hide();
$('#myModal').modal('show');
}
$(document).ready(function(){
var cellbl, celdpt, infocelarr=[];
$("#generateArtifacts").click(function(){
var x = document.getElementById("fields").rows.length;
alert(document.getElementById("fields").tBodies.item(0).innerHTML);
var table = document.getElementById("fields");
for (var i = 3, cell; cell = table.cells[i]; i++) {
alert(i+"--"+cell);
}
var projectid = document.getElementById("mainproject").value
var infoproject=document.getElementById("mainproject").text;
var infomodule=document.getElementById("mainmodule").value;
var infoentity=document.getElementById("mainentity").value;
/* infoproject = upperCamelCase(infoproject.toLowerCase());
infomodule = lowercase(infomodule.toLowerCase());
infoentity = upperCamelCase(infoentity.toLowerCase()); */
var dbinfo = {"primaryKey":"Id"};
var infopanelobj = {'"projectId"': ""+projectid+"", '"projectName"':infoproject, '"moduleId"': ""+moduleid+"", '"moduleName"':infomodule, '"entityName"':infoentity,'"fields"':infocelarr,'"dbinfo"':dbinfo};
console.log(infopanelobj);
});
});
</script>
<body >
<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"> <option value="Chrome"></option></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"><option value="Chrome"></option></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"><option value="Chrome"></option> </datalist>
</div>
</div>
</div>
</form>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Field Details</h4>
</div>
<div class="modal-body">
<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="fieldtype2"> Type*</label>
<input class="form-control" list="fieldtypelist" id="fieldtype" onchange="onFieldTypeChange()">
<datalist id="fieldtypelist"><option >text</option><option >number</option><option >date</option></datalist>
<div id="entityProperties">
<br/><label for="fieldtobeassociated"> Field to be
associated</label> <select class="form-control " id="fieldtobeassociated">
</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>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="save" class="btn btn-primary pull-right" onclick="insert_save_row()">Save</button>
<button type="button" id="edit" class="btn btn-primary pull-right" onclick="edit_save_row()" style="display:none">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Fields</h2>
<a href="#myModal" class="btn btn-lg btn-primary" onclick="addField()">Launch
Demo Modal</a>
<br/><br/><br/>
<table id="fields" class="table table-striped"">
<thead class="thead-default">
<tr >
<th>Field Name</th>
<th>Type</th>
<th>Update</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr id="rows">
</tr>
</tbody>
</table>
<br/><br/><br/>
<a class="btn btn-lg btn-primary" " id="generateArtifacts">Generate
Artifacts</a> <a class="btn btn-lg btn-primary" onclick="resetpage()">Reset
Artifacts</a>
<input id="temp_row_no" style="display:none"></input>
</div>
</body>
</html>
I am adding data to table outerHMTL in javascript. How to read its table contents. Please suggest.

I have modified my code in different way. Initially my problem is that i am unable to populate data for second dropdown onchange event of first dropdown on same jquery ui dialog. I have used jquery ui dialog's clone() method. somehow it did't work. But After cleaning up code and adding different versions of jquery, able to generate another dialog on top of existing dialog box and able to set the data properly.
var nestedfiled="";
var nestedassociation="";
var flag=true;
$(document).ready(function(){
$( "#dialog-form1" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Submit": function(){
var ftb = $( "#dialog-form1");
var kk= ftb.find("#fieldtobeassociated");
var bb= ftb.find("#association");
nestedfiled = kk.find("option:selected").text();
nestedassociation = bb.find("option:selected").text();
flag=false;
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog('close');
}
}
});
var new_dialog = function (type, row) {
var dlg = $("#dialog-form").clone();
nestedfiled = "" ;
nestedassociation = "";
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()};
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");
}
}
else {
flag=true;
$( "#dialog-form1").find(("#fieldtobeassociated")).empty();
$( "#dialog-form1").find(("#fieldtobeassociated")).append("<option>12</option><option>13</option>");
/* .data('param_1', 'whateverdata') */
if(nestedfiled == "" && nestedassociation == "")
$( "#dialog-form1").dialog("open");
var ob ={"fieldId":fieldname.val(),"type":fieldtype.find("option:selected").text(),
"fieldToBeDisplayedInDropDown":nestedfiled,
"associationType":nestedassociation
};
var index = _.findIndex(myarr, {"fieldId":fieldname.val()});
console.log(type);
if (index > -1){
myarr.splice(index, 1, ob);
if(nestedfiled !== "" && nestedassociation !== "")
$("#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);
if(nestedfiled !== "" && nestedassociation !== "")
$("#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="fieldtype2">
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>
<option value="4">Employee</option>
</select>
</fieldset>
</form>
</div>
<div id="dialog-form1" title="Create new user">
<p class="validateTips">
All form fields are required.</p>
<form>
<fieldset>
<br>
<label for="fieldtobeassociated">
Field to be associated</label>
<select class="form-control " id="fieldtobeassociated" >
</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>
Thank you for suggestions.

Related

jquery goes on the first page instead mine

I have 2 pages (data-role="page") in my HTML page, in the list page if you go to one detail, save, and try to go into another detail again, it goes to list instead of the detail page.
I tried to follow the code using chrome but the javascript is correct
To change page i use: $.mobile.changePage("#PageAddCustomer");
but it seems working for just 1/2 second, then it goes to the list (who is the first page in the code)
Chrome does not return any javascript error,
just here in stackoverflow preview it returns :"error loading page", with no clues on it
what is wrong ?
I am thinking to use 2 different HTML files, probably it could be an idea
var lat = 0;
var lng = 0;
var map;
var url = "https:////www.suale.it"; //"http://localhost:65386/";//
var urlSito = url+"//GestionePersonale";// "http://localhost:65386/";//
var urlCartellaIMG =url + "//IMGAnnunci";// url+"//public//IMGAnnunci";//
//tiene in memoria
var Categorie;
var Tipologie;
var TipoAnnunci;
var Razze;
$(document).ready(function () {
$("div[data-role='panel']").panel().enhanceWithin();
VaiCustomers();
});
//target the entire page, and listen for touch events
$('html, body').on('touchstart touchmove', function(e){
//prevent native touch activity like scrolling
e.preventDefault();
});
function caricaCustomer(j) {
var $select = $('#cbbInsAdsCustomer');
$select.find('option').remove();
$select.append("<option ></option>");
$.each(j, function (key, value) {
$select.append('<option value=' + value.CodTipologia + '>' + value.DescTipologia + '</option>');
});
}
function GoPage(page) {
//$.mobile.changePage(page);
$(':mobile-pagecontainer').pagecontainer('change', page, {
transition: 'flip',
changeHash: false,
reverse: true,
showLoadMsg: true
});
}
function DoNothing() { }
function CaricaDettagliClienteDetail(J) {
// J = JSON.stringify(J);
J = JSON.parse(J);
$("#txtDetailCliCognome").text(J.Cognome);
$("#txtDetailCliNominativo").text(J.Nominativo);
$("#txtDetailCliIndirizzo").text(J.Indirizzo);
$("#txtDetailCliEmail").text(J.Email);
$("#txtDetailCliCitta").text(J.Citta);
$("#txtDetailCliCellulare").text(J.Cellulare);
$("#txtDetailCliTelefono").text(J.Telefono);
}
function CaricaDatiDetailIMG(data) {
var codAnn = $("#hidCodRapportino").val();
var ico;
var img;
$("#divDetailIMG").empty('');
//img = img.replace('\\', '//').replace('ICO', '');
var x, txt = "";//aggiungo IMG
for (x in data) {
var ico = urlCartellaIMG + "//" + codAnn + "//" + data[x];
var img = ico.replace('ICO', '');
txt += "<img onclick='OpenPopIMG(`" + img + "`)' src='" + ico + "'>";
}
$("#divDetailIMG").html(txt);
}
function GoHEad() {
$.mobile.changePage("#page1");
}
function getToNextPage() {
$.mobile.changePage("#page2");
}
function ScaricaDatiUser() {
var codAnag = $("#hidCodAnagrafica").val();
if (codAnag == '')
{
Messaggio('you must login to see your ads');
return;
}
s = document.createElement("script");
//var Category = $('#cbbSearchCategory option:selected').val();
s.src = urlSito + "/scriptWS.aspx?func=CaricaDatiListaUser&OnErr=Messaggio&modo=ListaUser&codAnag=" + codAnag
//alert(s.src);
document.body.appendChild(s);
}
//#region Customer
function VaiCustomers()
{
if (ControlloLoggato()==false){return;};
GoPage('#PageListCustomer');
CaricaCustomers();
}
function CaricaCustomers()
{
s = document.createElement("script");
var RCodDitta = $('#hidCodDitta').val();
s.src = urlSito + "/scriptWS.aspx?func=CustomersList&OnErr=Messaggio&modo=GetCustomers&CodDitta=" + RCodDitta;
//alert(s.src);
document.body.appendChild(s);
}
function CustomersList(data) {
$('#DTCustomersList').DataTable({
destroy: true,
data: data,
"columns": [
{ "data": "Cognome" },
{ "data": "Nominativo" },
{
"data": "CodAnagrafica",
"mData": function showIMGLista(data, type, dataToSet) {
var J = JSON.stringify(data);
var CodAnagrafica = data.CodAnagrafica;
return "<img src='IMG\\Detail.jpg' onclick='OpenDetailCustomer(" + CodAnagrafica + ");'>";
}
},
]
});
}
function OpenDetailCustomer(CodAnagrafica)//dal principale annuncio carico tutto
{
s = document.createElement("script");
s.src = urlSito + "/scriptWS.aspx?func=CaricaCurstomerDetail&OnErr=Messaggio&modo=GetDetailAnag&CodAnagrafica=" + CodAnagrafica;
document.body.appendChild(s);
//$.mobile.changePage("#PageAddCustomer");
$(':mobile-pagecontainer').pagecontainer('change', '#PageAddCustomer', {
transition: 'flip',
changeHash: false,
reverse: true,
showLoadMsg: true
});
}
function CaricaCurstomerDetail(J) {
// J = JSON.stringify(J);
//J = JSON.parse(J);
$("#txtInsCliCognome").val(J.Cognome);
$("#txtInsCliNominativo").val(J.Nominativo);
$("#txtInsCliIndirizzo").val(J.Indirizzo);
$("#txtInsCliEmail").val(J.Email);
$("#txtInsCliCitta").val(J.Citta);
$("#txtInsCliTelefono").val(J.Cellulare);
$("#txtInsCliCellulare").val(J.Telefono);
$("#hidCodCustomer").val(J.CodAnagrafica);
}
function ConfirmDeleteCustomer()
{
bootbox.confirm("Are you sure?", function (result)
{
if (result) {
DeleteCustomer();
}
});
}
function DeleteCustomer()
{
var CodAnagrafica= $("#hidCodCustomer").val();
s = document.createElement("script");
s.src = urlSito + "/scriptWS.aspx?func=CaricaCustomers&OnErr=Messaggio&modo=DeleteCustomer&CodAnagrafica=" + CodAnagrafica;
document.body.appendChild(s);
$.mobile.changePage("#PageListCustomer");
}
function SaveCustomer()
{
if (ControlloSaveCustomer() == true)
{
var Cognome= $("#txtInsCliCognome").val();
var Nominativo= $("#txtInsCliNominativo").val();
var Indirizzo= $("#txtInsCliIndirizzo").val();
var Email= $("#txtInsCliEmail").val();
var Citta= $("#txtInsCliCitta").val();
var Cellulare= $("#txtInsCliTelefono").val();
var Telefono= $("#txtInsCliCellulare").val();
var CodAnagrafica= $("#hidCodCustomer").val();
var RCodDitta = $('#hidCodDitta').val();
s = document.createElement("script");
s.src = urlSito + "/scriptWS.aspx?func=DoNothing&OnErr=Messaggio&modo=SaveAnagrafica&CodAnagrafica=" + CodAnagrafica + "&Cognome=" + Cognome + "&Nominativo=" + Nominativo
+ "&Indirizzo=" + Indirizzo + "&Email=" + Email + "&Citta=" + Citta + "&Cellulare=" + Cellulare + "&Telefono=" + Telefono + "&RCodDitta=" + RCodDitta+ "&Cliente=1";
document.body.appendChild(s);
VaiCustomers();
GoPage('#PageListCustomer');
}
// $.mobile.changePage("#PageListCustomer");
}
function ControlloSaveCustomer() {
$("#txtInsCliCognome").removeClass('inputObbligatorio');
$("#txtInsCliCellulare").removeClass('inputObbligatorio')
$("#txtInsCliNominativo").removeClass('inputObbligatorio')
if ($("#txtInsCliCognome").val() == '') { $("#txtInsCliCognome").addClass('inputObbligatorio'); return false; }
if ($("#txtInsCliCellulare").val() == '') { $("#txtInsCliCellulare").addClass('inputObbligatorio'); return false; }
if ($("#txtInsCliNominativo").val() == '') { $("#txtInsCliNominativo").addClass('inputObbligatorio'); return false; }
return true;
}
//#endregion
function CaricaDatiListaUser(data) {
caricaUserDatatable(data);
}
function ControlloLoggato() {
var codAnag = $("#hidCodAnagrafica").val();
if (codAnag == '') {
Messaggio('you must login to manage ads');
return false;
}
}
.img-container { position: relative; }
.img-container .top {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.lblDesc {
font-weight: bold !important;
}
.inputObbligatorio {
border: 2px solid #ff0000 !important;
}
.auto-style1 {
height: 25px;
}
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<input type="hidden" id="hidCodAnagrafica" value="1"/>
<input type="hidden" id="hidCodDitta" value="1"/>
<div data-role="panel" id="menuPanel" data-mini="true" data-rel="popup" style=" z-index: 1;" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" data-transition="pop">
<h4>Menu</h4>
<ul data-role="listview">
<!-- <li>List Admin</li>
<li>Your Reports</li>-->
<!-- <li>New Report</li>-->
<li>Customers</li>
<!-- <li>Jobs</li>
<li>Employees</li>-->
<!-- <li>Register</li>
<li>Login</li>
<li><a href="#" onclick='Website2APK.rateUs();'>Rate us</a></li>-->
<!--<img src="img/head2.jpg" />-->
</ul>
</div>
<!--panel-->
<div data-role="page" id="PageListCustomer" style="background-color: #E5E7E9;">
<h2>Customers</h2>
Menu
<table id="DTCustomersList" class="display" style="width: 100%">
<thead>
<tr>
<th>Surname</th>
<th>Name</th>
<th></th>
</tr>
</thead>
</table>
<input class="btn btn-primary" type="submit" onclick="GoPage('#PageAddCustomer');" value="Add" />
</div> <!--- PageListCustomer --->
<div data-role="page" id="PageAddCustomer" style="background-color: #E5E7E9;">
<h2>Customer</h2>
Menu
<input type="hidden" id="hidCodCustomer" />
<form id="frmAddCustomer">
<table style='border-collapse:collapse;' >
<tr>
<td>
<label class="lblDesc">Surname</label>
</td>
<td>
<input type="text" id="txtInsCliCognome" />
</td>
</tr>
<tr>
<td>
<label class="lblDesc">Name</label></td>
<td>
<input type="text" id="txtInsCliNominativo" />
</td>
</tr>
<tr>
<td>
<label class="lblDesc">Address</label></td>
<td>
<input type="text" id="txtInsCliIndirizzo" />
</td>
</tr>
<tr>
<td>
<label class="lblDesc">Email</label></td>
<td>
<input type="text" id="txtInsCliEmail" />
</td>
</tr>
<tr>
<td>
<label class="lblDesc">City</label></td>
<td>
<input type="text" id="txtInsCliCitta" />
</td>
</tr>
<tr>
<td class="auto-style1">
<label class="lblDesc">Mobile Ph.</label></td>
<td class="auto-style1">
<input type="text" id="txtInsCliTelefono" />
</td>
</tr>
<tr>
<td>
<label class="lblDesc">Phone</label></td>
<td>
<input type="text" id="txtInsCliCellulare" />
</td>
</tr>
</table>
<input class="btn btn-primary" type="submit" onclick="SaveCustomer();" value="Save" />
<input class="btn btn-primary" type="submit" onclick=" VaiCustomers();" value="List" />
</form>
</div> <!--- PageAddCustomer --->

Using a crud api

file:///C:/Users/Adil%20Ali/Downloads/front%20end%20api/intro.html
Above I have a website with some movie-list can anyone list me some suggestions on how to make a crud ui like this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="mystyle.css" rel="stylesheet">
<title>My Movies</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="execute.js"></script>
</head>
<body>
<center>
<ul id = "movielist"></ul>
<button id = "showMovies">All Movies</button>
</center>
<p>idmovielist: <input type="text" id="idmovielist"></p>
<p>name: <input type="text" id="name"></p>
<p>thumnail_path: <input type="text" id="thumnail_path"></p>
<p>description: <input type="text" id="description"></p>
<p>year_released: <input type="text" id="year_released"></p>
<p>language_released: <input type="text" id="language_released"></p>
<button id = "movieAdded">Add Movie</button>
<button id = "deleteMovie">Delete Movie</button>
<button id = "updatedMovie">Update Movie</button>
</body>
</html>
Above is my Html
and below is my CSS
body {
background-color: rgb(10, 200, 196);
font-family: sans-serif
}
h1 {
text-align: center;
font-family: arial;
color: #5a5a5a;
}
ul {
display: flex;
list-style:none;
flex-wrap: wrap;
align-items: flex-start;
justify-content:center;
flex-basis: 80%;
}
and lastly below is my jquery
$(function(){
const $movielist = $('#movielist');
const $idmovielist = $('#idmovielist');
const $name = $('#name');
const $thumnail_path = $('#thumnail_path');
const $description = $('description');
const $language_released = $('language_released');
const $year_released = $('year_released');
$("#showMovies").click(function(){
$.ajax({
method:"GET",
url: "http://localhost:3000/movielist",
dataType: "json",
success: function (response) {
$.each(response, function(i, movie) {
$movielist.append('<li>idmovielist: ' + movie.idmovielist + ',name:' + movie.name + ', thumnail_path: ' +
movie.thumnail_path + ', description: ' + movie.description + ', year_released: ' + movie.year_released +
', language_released: ' + movie.language_released + '</li>');
});
}
});
});
$("#movieAdded").click(function() {
const movies = {
idmovielist: $idmovielist.val(),
name: $name.val(),
thumnail_path: $thumnail_path.val(),
description: $description.val(),
year_released: $year_released.val(),
language_released: $language_released.val(),
};
$.ajax({
method:"POST",
url: "http://localhost:3000/movielist/addMovie",
data: movies,
success: function (newMovie) {
$movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
', language_released: ' + newMovie.language_released + '</li>');
}
});
});
$("#deleteMovie").click(function() {
const movies = {
idmovielist: $idmovielist.val(),
name: $name.val(),
thumnail_path: $thumnail_path.val(),
description: $description.val(),
year_released: $year_released.val(),
language_released: $language_released.val(),
};
$.ajax({
method:"DELETE",
url: "http://localhost:3000/movielist/1",
data: movies,
success: function (newMovie) {
$movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
', language_released: ' + newMovie.language_released + '</li>');
}
});
});
$("#updatedMovie").click(function() {
const movies = {
idmovielist: $idmovielist.val(),
name: $name.val(),
thumnail_path: $thumnail_path.val(),
description: $description.val(),
year_released: $year_released.val(),
language_released: $language_released.val(),
};
$.ajax({
method:"PUT",
url: "http://localhost:3000/movielist/update/2",
data: movies,
success: function (newMovie) {
$movielist.append('<li>idmovielist: ' + newMovie.idmovielist + ', name:' + newMovie.name + ', thumnail_path: ' +
newMovie.thumnail_path + ', description: ' + newMovie.description + ', year_released: ' + newMovie.year_released +
', language_released: ' + newMovie.language_released + '</li>');
}
});
});
});
So what can I add to make this a crud UI application with the code I have all the request are working my goal is to make this webiste of the UI more interactive

If you need to make the Crud ui like that you can use the normal table or (bootstrap table) and if your result is of huge number you can use the DataTables https://cdn.datatables.net/ to link you table so that you can have nice navigation and search panel
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table table-bordered table-hover" width="100%">
<thead style="background-color:#ddd;" class="table-borderless">
<tr>
<th></th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td>Home</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Edit
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Delete
</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>

print layout not equal to screen layout

I have a problem with printing from HTML.
First of all I create a print preview page. Everything works well.
When I go to print only the part that interests me (sequence of A4 pages), only the first page is divided into two, it seems that a 'padding-top' is imposed higher than the imposed one. Basically the first footer is moved to the next page.
Here are two images, screen and print.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Report</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
#*librerie per abilitare la selezione delle righe*#
<link href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
#*libreria per stilizzare una select*#
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
#*<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>*#
<style type="text/css">
##Media print {
#ScreenDiv {
visibility: hidden;
display: none;
}
#PrintDiv {
visibility: visible;
display: normal;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0cm;
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
.panel-footer {
page-break-after: always;
}
}
##media screen{
#ScreenDiv {
visibility: visible;
display: normal;
}
#PrintDiv {
visibility: hidden;
display: none;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 80px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
}
h3 {
margin-top: 0px;
color: dodgerblue !important;
text-align: center;
}
.col-fixed-30 {
width: 30%;
position: fixed;
background-color: white;
height: 100%;
z-index: 1;
}
.row-fixed-70 {
height: 70px;
position: fixed;
background-color: white;
width: 70%;
z-index: 1;
}
.col-offset-30 {
padding-left: 30%;
z-index: 0;
}
</style>
</head>
<body>
<div id="ScreenDiv">
<div class="container-fluid">
<div class="row">
<div class="col-fixed-30" style="padding:2px">
<h3 style="margin-top:30px; color:dodgerblue">Lista Report<span class="badge badge-default"></span></h3>
<div class="form-group">
<select id="AnnoSelect" name="AnnoSelect" class="selectpicker form-control" multiple title="Selezionare Anno"></select>
</div>
<div class="form-group">
<select id="TipoIspezioneSelect" name="AnnoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Ispezione">
<option value="Ispezione Corrente">Ispezione Corrente</option>
<option value="Ispezione Corrente Straordinaria">Ispezione Corrente Straordinaria</option>
<option value="Ispezione Qualitativa">Ispezione Qualitativa</option>
<option value="Ispezione Dettagliata">Ispezione Dettagliata</option>
<option value="Ispezione Dettagliata Eccezionale">Ispezione Dettagliata Eccezionale</option>
<option value="Sorveglianza Speciale">Sorveglianza Speciale</option>
<option value="Sorveglianza Intensificata">Sorveglianza Intensificata</option>
<option value="Alta Sorveglianza">Alta Sorveglianza</option>
</select>
</div>
<div class="form-group">
<select id="TipoOperaSelect" name="TipoOperaSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Opera">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="form-group">
<select id="ElementoSelect" name="ElementoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Elemento">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa1">
Collapsible Group 1
</a>
</h4>
</div>
<div id="Stampa1" class="panel-collapse collapse in">
<div class="panel-body">
<button id="StampaReport" class="btn btn-primary" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-print"></i> Stampa Report </button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa2">
Collapsible Group 2
</a>
</h4>
</div>
<div id="Stampa2" class="panel-collapse collapse">
<div class="panel-body">
seconda Stampa
</div>
</div>
</div>
</div>
</div>
</div>
<div id="LayoutArea" class="col-md-12 col-offset-30" style="background-color:lightgray">
<div class="row row-fixed-70">
<h3 style="margin-top:30px; color:dodgerblue; text-align:center">Anteprima Report</h3>
</div>
<div class="row" id="LayoutStampa">
<page size="A4" id="page0">
<div class="panel-heading" style="height:45px">
<div class="table-responsive">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="headerLeft" style="width:30%" align="left">left</td><td id="headerCenter" align="center">center</td><td id="headerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</div>
<div class="panel-body">
<h3 id="TitoloPagina">Anteprima Report</h3>
<div class="table-responsive" style="height:24cm;background-color:red">
<table class="table table-striped table-condensed" border=0 cellpadding=20 cellspacing=0 style="border-bottom: .13em solid #aaaaaa;font-size:10px">
#*<tr><th style="width:30%">#</th><th>name</th></tr>*#
<tr align="center"><td style="width:30%">1</td><td>100</td><td style="width:30%">DONALD TRUMP</td></tr>
<tr align="center"><td style="width:30%">2</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
<tr align="center"><td style="width:30%">3</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
</table>
</div>
</div>
<div class="panel-footer" style="height:45px">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="footerLeft" style="width:30%" align="left">left</td><td id="footerCenter" align="center">center</td><td id="footerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</page>
</div>
</div>
</div>
</div>
<div id="PrintDiv">
</div>
<script>
var ListaOpere;
$(document).ready(function () {
var d = new Date();
var anno = d.getFullYear();
for (var i = anno; i >= 1990; i--) {
$("#AnnoSelect").append('<option value=' + i + '>' + i + '</option>');
}
$('#StampaReport').on('click', function () {
var clone = $('#LayoutStampa').clone();
$("#PrintDiv").append(clone);
$('#LayoutStampa').remove();
window.print();
$("#LayoutStampa").remove();
$('#LayoutArea').append(clone);
})
var testo = '<div class="panel-heading" style="height:45px">' +
'< div class="table-responsive" >' +
'<table class="table" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">' +
'<tr><td align=left> left</td><td align=right> right</td></tr>' +
'</table> </div > </div >'
var cloneCount = 1;
for (var i = cloneCount; i <= 10; i++) {
var clone = $('#page0').clone();
clone.attr('id', 'page' + i);
clone.find('h3[id=TitoloPagina]').text('Titolo' + i);
clone.find('td[id=headerLeft]').text('Macerata');
$("#LayoutStampa").append(clone);
//alert(i);
}
});
</script>
</body>
</html >
Where is the error?
Thanks

I found a solution. If imposed -60px on 'media print page margin-top', it adjusts everything.
But I realized that, all the solution, it does not work well on edge and explorer.

How to i can keep selected tag in select2 when i change element options

// js i call select2
$('#select-user-multiple').select2({
closeOnSelect: false,
tags: true,
allowClear: true
});
// my code to get list users by select organization and suborganization
$('#slc-UserOrganization').change(function(){
var parentId = $('#slc-UserOrganization').val();
var subOrgId = $('#slc-UserSubOrganization').val();
getListUserForSendEmail(parentId, subOrgId);
if (parentId != -1) {
getListSubOrganizationEmail(parentId);
} else {
$('#slc-UserSubOrganization').find('option').remove();
}
});
$('#slc-UserSubOrganization').change(function(){
var parentId = parseInt($('#slc-UserOrganization').val(), 10);
var subOrgId = parseInt($('#slc-UserSubOrganization').val(), 10);
getListUserForSendEmail(parentId, subOrgId);
});
function getListUserForSendEmail(unitId, partId) {
$('#select-user-multiple').find('option').attr("disabled", true);
// $('#select-user-multiple').find('option').attr("style", "display:none");
// $('select2-select-user-multiple-results').find('li').hide();
$.ajax({
url : URL_vBooking,
jsonp : "jsoncallback",
dataType : 'jsonp',
data : {
_f : 122,
unitId: unitId,
partId: partId,
start: 0,
limit: 1000,
ownerId: communityIdGlobal,
communityId: communityIdGlobal
},
success: function (response) {
if(response.success){
$.each(response.object, function(key, value){
// var checkboxHtml = '';
// var user_community = value.community;
// var attendeeInfo = '{"email":"' + value.email + '", "communityId":' + value.communityId + ', "name":"' + user_community.name + '", "partId":' + value.partId + ', "unitId":' + value.unitId + '}';
// checkboxHtml += '<option user_id="'+ value.communityId + '" value="'+ attendeeInfo +'">'+ user_community.name +'</option>'
// $('select#select-user-multiple').append(checkboxHtml);
// console.log(checkboxHtml);
var checkboxHtml = '';
var user_community = value.community;
var attendeeInfo = '{"email":"' + value.email + '", "communityId":' + value.communityId + ', "name":"' + user_community.name + '", "partId":' + value.partId + ', "unitId":' + value.unitId + '}';
checkboxHtml += "<option value='"+ attendeeInfo +"' user_id='"+ value.communityId + "'>"+ value.name +"</option>";
$('select#select-user-multiple').append(checkboxHtml);
});
}
},
error: function(response){
console.log("getListUserForSendEmail() ==> error:\n" + JSON.stringify(response));
}
});
}
http://stackoverflow.com/posts/41798617/edit#
// my modal
<div class="modal fade" id="modalBooking" tabindex="-1" role="dialog" aria-labelledby="modalBooking">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 800px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Thêm Ngư?i Tham D?</h4>
</div>
<div class="modal-body">
<div class="modal-body-header">
<div class="form-group col-sm-12">
<select id="slc-UserOrganization" class="form-control input-sm col-sm-4" style="text-align: center; width: 35%">
<option value="-1">-----------Đơn V?-----------</option>
<!-- append các đơn v? vào t?i đây -->
</select>
<div class="input-sm col-sm-4" style="width: 5%">
</div>
<select id="slc-UserSubOrganization" class="form-control input-sm col-sm-4" style="text-align: center; width: 30%">
<option value="-1">---Ph?ng Ban---</option>
<!-- append các ph?ng ban vào t?i đây khi select đơn v?-->
</select>
<div class="input-sm col-sm-4" style="width: 15%; padding: 0px 10px;">
<button class="btn-add-suborganization" onClick="addSuborganization();" style="background-color: #3c8dbc; border-color: #367fa9; color: #fff; height: 100%;">Ch?n Ph?ng</button>
</div>
</div>
</div>
<div class="form-group col-sm-12">
<div>
<label for="id_label_multiple">Danh sách thành viên</label>
</div>
<select class="js-example-basic-multiple js-states form-control" id="select-user-multiple" multiple="multiple" style="width: 100%">
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Quay l?i</button>
<button type="button" class="btn btn-primary" data-
<!-- begin snippet: js hide: false console: true babel: false -->
</div>
</div>
</div>
</div>
hi everyone!
I'm using select2 bootraps to select and show multi selected users for sending mail to them. When i change 1 other dropdown, elements option in select2 change. And, selected tags i chose before will be removed auto. Is there anyway to i keep them? please tell me. Many thanks.
first, i choose some option.
Then, i change other dropdown, elements option will change and selected tags are removed.
https://i.stack.imgur.com/nNNyX.png

how to add data from a dialog form using jquery ui into a html table

I have a button which opens a dialog box with a form with following fields : name, age and email.
I want that upon clicking the submit button , the data from the form appends the html table on the page.
jQuery script:
<script>
$(document).ready(function() {
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#button").on("click", function() {
$("#dialog").dialog("open");
});
});
$("#submit").click(function(e) {
var email = $("#email").val();
var name = $("#name").val();
var age = $("#age").val();
var ageReg = /^[0-9]{2}$/;
var ageReg1 = /^[0-9]*$/;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if (email === '' || name === '' || age === "")
{
alert("Please fill all fields");
e.preventDefault();
}
else if (!(email).match(emailReg))
{
alert("Invalid Email");
e.preventDefault();
}
else if((!(age).match(ageReg)) || (!(age).match(ageReg1)))
{
alert("Invalid Age");
e.preventDefault();
}
else {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
dialog.dialog( "close" );
}
});
});
CSS Code:
<style>
table{
border: 1px solid black
border-collapse: collapse;
border-spacing: 0;
width:600px;
height:100%;
margin:0px;padding:0px;
}th{
text-transform : uppercase;
letter-spacing: 0.1em;
font-size : 90%;
border-bottom : 2px solid #111111;
border-top : 1px solid #111111;
}
tr.hover{
background-color:gray;
}
.tablemain{
margin-left: 300px;
margin-right: 300px;
margin-top: 50px;
}
.container{
margin-left: 450px;
margin-right: 300px;
margin-top: 5px;
}
HTML code :
<body>
<div class="container">
<div class="main">
<div id="dialog" title="Dialog Form">
<form action="" method="post">
<label>Name:</label>
<input id="name" name="name" type="text">
<label>Email:</label>
<input id="email" name="email" type="text">
<label>Age:</label>
<input id="age" name="age" type="text">
<input id="submit" type="submit" value="Submit">
</form>
</div>
<h2>jQuery Dialog Form Example</h2>
<p>Click below button to see jQuery dialog form.</p>
<input id="button" type="button" value="Open Dialog Form">
</div>
</div>
<div class= "tablemain">
<table id="users">
<thead>
<tr class="headers">
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aditya</td>
<td>AAA</td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

You're trying to append text in a function that expects a jQuery object. When you use append, wrap what you're appending with $().
$( "#users tbody" ).append( $("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" ));
dialog.dialog( "close" );
}
I'm not sure about all the line breaks and white space - you might have to fiddle with that some, or even break the build out like so:
var t = $('<tr />');
t.append($("<td>" + name.val() + "</td>"));
etc...
I stopped looking for errors after seeing that first one. In addition to using text where you needed an object, you were running .val() on strings that came from the .val() functions, and trying to append a nonexistent string 'password' instead of the age field. You also neglected to add e.preventDefault() in the else block after validation, I moved it to the top of the function since it seems unconditional. I'm also curious that you say the dialog closed, since it was giving me an error because the dialog variable wasn't defined.
Also, while it didn't break anything, this structure is redundant (I would just remove the $(function() {} block, which does the same thing as $(document).ready(function() {}):
$(document).ready(function() {
$(function() {
Fully corrected code follows:
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#button").on("click", function() {
$("#dialog").dialog("open");
});
$("#submit").click(function(e) {
e.preventDefault();
var email = $("#email").val();
var name = $("#name").val();
var age = $("#age").val();
var ageReg = /^[0-9]{2}$/;
var ageReg1 = /^[0-9]*$/;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if (email === '' || name === '' || age === "") {
alert("Please fill all fields");
} else if (!(email).match(emailReg)) {
alert("Invalid Email");
} else if((!(age).match(ageReg)) || (!(age).match(ageReg1))) {
alert("Invalid Age");
} else {
$( "#users" ).append( $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + age + "</td>" +
"</tr>" )
);
$("#dialog").dialog( "close" );
}
});
});

Develop Reference

ios ruby-on-rails asp.net-mvc docker delphi jenkins grails google-sheets machine-learning dart

onchange event on jquery dialogue not working - jquery-ui

Related

jquery goes on the first page instead mine

Using a crud api

print layout not equal to screen layout

How to i can keep selected tag in select2 when i change element options

how to add data from a dialog form using jquery ui into a html table

Categories

Resources