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>
Related
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 --->
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.
// 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
I am using jquery mobile.Actually my problem is the my page is call 3 time when user come switching from different pages .At first time my "Home" call one time.i add some data on data base using (+)button in header .it show in list view. But after clicking to row it show second page .on click the second page row it show third screen.while using back button it show second the again first .But again user press + button now page call three time .? why it call three time i don't know?
here is my code in fiddle..
http://jsfiddle.net/ravi1989/AkX7t/2/
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- Case Information Pop up-------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="caseNameValue" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="caseDate" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="caseTextArea"></textarea>
</div>
</div>
</div>
<!-- Case Information Pop up End-------------------------->
<!-- User setting Pop up-------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
</div>
<!-- User setting Pop up End-------------------------->
</div>
<script>
$(document).on('pagebeforeshow', '#Home', function() {
});
</script>
</div>
<!-----------Document screen------------------->
<div data-role="page" id="DocumentScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<div><img src="img/Connect-Realtime.png" id="realTimeImaage"/></div>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderInside_Data" >
</ul>
</div>
<script>
$(document).on('pagebeforeshow', '#DocumentScreen', function() {
console.log("init");
loadFolderContent();
});
function loadFolderContent() {
for (i = 0; i < 40; i++) {
$('#folderInside_Data').append(
'<li class="rowID" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span>' + '</li>'
);
}
$('#folderInside_Data').listview('refresh');
}
$(document).on('click', '.rowID', function() {
// $.mobile.changePage($("#realTimeScreen"));
$.mobile.changePage($("#realTimeScreen"), {
transition: "pop",
reverse: false,
changeHash: false
});
console.log(this.id)
});</script>
</div>
<!-----------Document screen End------------------->
<!-----------------------Real Time screen----------------------------->
<div data-role="page" id="realTimeScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
Back
<h1 class="ui-title" id="" style="text-align:left;margin-left: 100px;">Document name</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<a><img src="img/Follow-Realtime.png" id=""/></a>
<a><img src="img/Stop-Realtime.png" id=""/></a>
<a><img src="img/Email-Document.png" id=""/></a>
<a><img src="img/Connect-Realtime.png" id=""/></a>
<a><img src="img/Manage-Case-Folders.png" id=""/></a>
<a><img src="img/Export-Realtime.png" id=""/></a>
</div>
</div>
<div data-role="content" data-theme="d">
<div id="realTimeContents"></div>
</div>
<script>
<!-----------------------add data Time screen----------------------------->
for (i = 0; i < 400; i++) {
$('#realTimeContents').append(
'<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>'+ '<br>'+ '<br>'
);
}
</script>
</div>
$(document).ready(function() {
$.mobile.loading('hide');
onDeviceReady();
});
$(document).bind('pagecreate', function(e) {
if (e.target.id == 'Home') {
$("#headerButtons").on("click", "a", function() {
if ($(this).attr("id") == "Add") {
$('#caseNameValue').val('');
$('#caseDate').val('');
$('#caseTextArea').val('');
} else if ($(this).attr("id") == "Setting") {
} else if ($(this).attr("id") == "Edit") {
}
});
}
$(document).on('click', '.caseRowClick', function() {
// $.mobile.changePage($("#DocumentScreen"));
$.mobile.changePage($("#DocumentScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});
console.log(this.id)
});
$("#AddButton").click(function() {
var isvalid = validationField();
if (isvalid) {
insertData();
window.localStorage.setItem("isAddSomeData", "yes");
$.mobile.changePage($("#Home"));
/*$.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});*/
}
});
$("#Cancel").click(function() {
$.mobile.changePage($("#Home"));
/*$.mobile.changePage($("#Home"), {
transition: "pop",
reverse: false,
changeHash: false
});*/
});
$("#CancelSettingButton").click(function() {
$.mobile.changePage($("#Home"));
/* $.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});*/
});
});
function validationField() {
if ($('#caseNameValue').val() == '') {
alert("Please Enter the Case Name");
return false;
} else if ($('#caseDate').val() == '') {
alert("Please Enter the Case Date");
return false;
} else if ($('#caseTextArea').val() == '') {
alert("Please Enter the Case Text Area");
return false;
}
return true;
}
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
document.addEventListener("deviceready", onDeviceReady, false);
var db = "";
//will create database Dummy_DB or open it
//function will be called when device ready
function onDeviceReady() {
db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
if (window.localStorage.getItem("isAddSomeData") == "yes") {
alert("Yes");
db.transaction(queryDB, errorCB);
}
// db.transaction(populateDB, errorCB, successCB);
}
function insertData() {
db.transaction(populateDB, errorCB, successCB);
}
//create table and insert some record
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName TEXT NOT NULL,CaseDate INTEGER ,TextArea TEXT NOT NULL)');
tx.executeSql('INSERT INTO CaseTable(CaseName,CaseDate,TextArea) VALUES ("' + $('#caseNameValue').val() + '", "' + $('#caseDate').val() + '","' + $('#caseTextArea').val() + '")');
}
//function will be called when an error occurred
function errorCB(err) {
alert("Error processing SQL: " + err.code);
}
//function will be called when process succeed
function successCB() {
console.log("success!");
db.transaction(queryDB, errorCB);
}
//select all from SoccerPlayer
function queryDB(tx) {
tx.executeSql('SELECT * FROM CaseTable', [], querySuccess, errorCB);
}
function querySuccess(tx, result) {
var len = result.rows.length;
$('#folderData').empty();
for (var i = 0; i < len; i++) {
$('#folderData').append(
'<li class="caseRowClick" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>' + result.rows.item(i).CaseName + '</h2>' + '<p>' + result.rows.item(i).CaseDate + '</p>' + '<p>' + result.rows.item(i).TextArea + '</p>' + '<span class="ui-li-count">' + i + '</span>' + '</li>'
);
}
$('#folderData').listview('refresh');
}
I hope I understood you correctly, this is a common jQuery Mobile problem with multiple event binding. Basically, depending on page events you are using, when you reopen some page all event bindings like click will be bound again. So you can have more then one click event on an object.
Best solution to handle this problem is, bind click and every other events (except page events, they don't suffer from this problem) ONLY like this:
$(document).off('click', '.caseRowClick').on('click', '.caseRowClick', function() {
// $.mobile.changePage($("#DocumentScreen"));
$.mobile.changePage($("#DocumentScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});
console.log(this.id)
});
In this case each time this click event is going to be bound, jQuery Mobile will first try to remove previous click even (if it exist) and then add a new one.
There are some other solutions to this problem and they can be found in this ARTICLE, to be transparent it is my personal blog. Just search for a chapter called: Prevent multiple event binding/triggering. This problem is described here with much more details + examples.
here is the html file which calls the above method. When call "callAjax" is clicked, i can get the listview displayed. These listview when clicked will not show navigation bar title.
<body>
<div data-role="page" >
<div data-role="header" data-theme="b" >
<h1>NDUS Directory</h1>
</div><!-- /header -->
<div data-role="content" >
<div id ="divsearch" class ="LogoImage" >
<img src="Images/logo.gif" align="middle" />
</div>
<p></p>
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" value="" />
<label for="lname">Last Name: </label>
<input type="text" name="lname" id="lname" value="" />
<p></p>
<input id="callAjax" type="button" value="Search" data-theme="b" />
<!-- TO SHOW PEOCESSING LAG INFORMATION -->
<span id="sp" class = "spanRed"></span>
<div id="resultLog">
</div>
<div id="ajaxBusy" class ="busyAJAX">
<p>
<img src="Images/progress.gif">
</p>
</div>
<span id="placeholder"></span>
<ul id = "idul" data-role="listview" data-theme="b" data-inset="true">
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
here is a sample ajax call which dynamically generates the listview. The code does its job..but the window which shows the details about the listview(when clicked) does not get any title for the navigation bar. In code..it needs to display the txt.firstname and txt.lastname.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "DirectoryData.asmx/TestSearch",
data: argument,
dataType: "json",
beforeSend: function () {
$("#resultLog").html("Loading" + '<img src="Images/progress.gif" />');
},
success: function (msg) {
var items = [];
$("#unfinshed").remove();
var public_tweets = JSON.parse(msg.d);
if (public_tweets.length > 0) {
// remove older values
$("#placeholder").after('<ol id="unfinshed" data-role="listview" data-theme="b" data-inset="true" data-dividertheme="c"></ol>');
$('<li data-role="list-divider">Records found: ' + public_tweets.length + '</li>').appendTo("#unfinshed");
// $('#unfinshed').empty();
for (var x = 0; x < public_tweets.length; x++) {
var txt = public_tweets[x];
var imageName;
if (txt.type == "Faculty") {
imageName = "Images/BusinessPerson.png";
} else {
imageName = "Images/StudentPerson.png";
}
//<img src="images/gf.png" alt="France" class="ui-li-icon">
$('<li><img src="' + imageName + '" class="ui-li-icon">
<a href="#" >' + txt.firstname + ' ' + txt.lastname + '
</a><p></p><p>' + txt.title + '</p>' +
'<ul data-theme="c" data-inset="true">' +
'<li><span class="dirHeaderFont">' + 'Institution:</span><p></p>
<span class="footerTextFont">' + txt.institution + '</span></li>' +
'<li><span class="dirHeaderFont">' + 'Department:</span><p></p>
<span class="footerTextFont">' + txt.department + '</span></li>' +
'<li><span class="dirHeaderFont">' + 'Title:</span><p></p>
<span class="footerTextFont">' + txt.title + '</span></li>' +
'<li data-icon="grid"><span class="dirHeaderFont">' +
'Phone:</span><p></p><span class="footerTextFont">
<a href="tel:' + txt.phonenumber + '">' + txt.phonenumber +
'</a></span></li>' +
'<li data-icon="search"><span class="dirHeaderFont">' +
'Email:</span><p></p><span class="footerTextFont">
<a href="mailto:' + txt.email + '">' + txt.email +
'</a></span></li>' +
'<li><span class="dirHeaderFont">' + 'Active:</span><p>
</p><span class="footerTextFont">' + txt.active +
'</span></li>' + '</ul>' +
'</li>').appendTo("#unfinshed");
}
$("#unfinshed").page();
} else {
// display no records found
$("#placeholder").after('<ul id="unfinshed" data-role="listview" data-theme="c" data-inset="true"></ul>');
$('<li>' + 'No records found' + '</li>').appendTo("#unfinshed");
$("#unfinshed").page();
} // end of public_tweets check
$("#resultLog").html(' '); // remove the loading image
}
}); // end of ajax
$("#resultLog").ajaxError(function (event, request, settings, exception) {
$("#resultLog").html("Error connecting to database. Try again later.");
//$("#resultLog").html("Error connecting to database. Try again later.: " + settings.url + "<br />HTPP Code: " + request.status);
});
You could try to add a custom title like this:
$("div:jqmData(role='header')").prepend('<h1>Custom Title</h1>');
Might need to tinker with it a tad but it works
UPDATE:
Live Example:
http://jsfiddle.net/phillpafford/trdYP/51/
JS:
$("div:jqmData(role='header') > h1").replaceWith('<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">New Title</h1>');
HTML:
<div data-role="page" id="home">
<div data-role="header">
<h1 >Home</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Home Page</li>
<li>Page 2</li>
</ul>
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1 >Page 2</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Home Page</li>
<li>Home Page</li>
</ul>
</div>
</div>