Using JQuery event.target to work with children - dom

My question refers specifically to http://api.jquery.com/event.target/#example-1
If you use a span in the <li> or other tag to change the style such as <b> as I have done here, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?
HTML:
<ul>
<li><b>This doesn't work,</b> this does
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
JavaScript:
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children("ul").toggle();
}
}
$("ul").click(handler).find("ul").hide();


To keep using your current form, I'd suggest using closest():
function handler(event) {
$(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();
JS Fiddle demo.
Though for my own use I'd prefer:
$('li').on('click', function(e){
e.stopPropagation();
$(this).find('ul').toggle();
});
JS Fiddle demo.
References:
closest().
on().


A complete example of e.target children and closest with datatable and external data.
HtML
<!DOCTYPE html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="col-md-12 sectionone">
<div id="coxtable">
<div class="col-md-3 outerblock" id="section1"><div class="blocks section1"><h6 class="span1">Section1</h6><span class="span1a">Section1a</span></div></div>
<div class="col-md-3 outerblock" id="section2"><div class="blocks section2"><h6 class="span1">Section2</h6><span class="span1a">Section2a</span></div></div>
<div class="col-md-3 outerblock" id="section3"><div class="blocks section3"><h6 class="span1">Section3</h6><span class="span1a">Section3a</span></div></div>
<div class="col-md-3 outerblock" id="section4"><div class="blocks section4"><h6 class="span1">Section4</h6><span class="span1a">Section4a</span></div></div>
</div>
</div>
<div class="sectiontwo col-md-12">
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="testmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="modalbtn btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
$(document).ready( function () {
var tables=$('#example').DataTable( {
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
/*onclick filter*/
$(".outerblock").click(function(e){
$("#testmodal").modal('show');
var item=$(e.target).closest('span').text();
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item)
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
$("#example").delegate("tbody tr td:first-child", "click", function(e){
var item=$(e.target).text();
//alert(item);
$("#testmodal").modal('show');
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item);
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
});
json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]

Related

Vue.js Phone field not required, but not letting me submit if empty

I would like to be able to submit the following form without the phone field being required.
However, I would still like the phone field to be validated with regex before being able to be submit if a user inputs a phone number value.
So if blank, submit, ELSE check that it's valid before submitting. I thought had worked this out, but apparently not...
Any help is very much appreciated!
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
imgSrc:
"",
contact: {
firstName: "",
lastName: "",
email: "",
phone: "",
address: "",
city: "",
state: "",
zip: "",
checked: false,
},
states: [
{
name: "Alabama",
abr: "AL",
},
{
name: "Alaska",
abr: "AK",
},
{
name: "American Samoa",
abr: "AS",
},
{
name: "Arizona",
abr: "AZ",
},
{
name: "Arkansas",
abr: "AR",
},
{
name: "California",
abr: "CA",
},
{
name: "Colorado",
abr: "CO",
},
{
name: "Connecticut",
abr: "CT",
},
{
name: "Delaware",
abr: "DE",
},
{
name: "District Of Columbia",
abr: "DC",
},
{
name: "Federated States Of Micronesia",
abr: "FM",
},
{
name: "Florida",
abr: "FL",
},
{
name: "Georgia",
abr: "GA",
},
{
name: "Guam",
abr: "GU",
},
{
name: "Hawaii",
abr: "HI",
},
{
name: "Idaho",
abr: "ID",
},
{
name: "Illinois",
abr: "IL",
},
{
name: "Indiana",
abr: "IN",
},
{
name: "Iowa",
abr: "IA",
},
{
name: "Kansas",
abr: "KS",
},
{
name: "Kentucky",
abr: "KY",
},
{
name: "Louisiana",
abr: "LA",
},
{
name: "Maine",
abr: "ME",
},
{
name: "Marshall Islands",
abr: "MH",
},
{
name: "Maryland",
abr: "MD",
},
{
name: "Massachusetts",
abr: "MA",
},
{
name: "Michigan",
abr: "MI",
},
{
name: "Minnesota",
abr: "MN",
},
{
name: "Mississippi",
abr: "MS",
},
{
name: "Missouri",
abr: "MO",
},
{
name: "Montana",
abr: "MT",
},
{
name: "Nebraska",
abr: "NE",
},
{
name: "Nevada",
abr: "NV",
},
{
name: "New Hampshire",
abr: "NH",
},
{
name: "New Jersey",
abr: "NJ",
},
{
name: "New Mexico",
abr: "NM",
},
{
name: "New York",
abr: "NY",
},
{
name: "North Carolina",
abr: "NC",
},
{
name: "North Dakota",
abr: "ND",
},
{
name: "Northern Mariana Islands",
abr: "MP",
},
{
name: "Ohio",
abr: "OH",
},
{
name: "Oklahoma",
abr: "OK",
},
{
name: "Oregon",
abr: "OR",
},
{
name: "Palau",
abr: "PW",
},
{
name: "Pennsylvania",
abr: "PA",
},
{
name: "Puerto Rico",
abr: "PR",
},
{
name: "Rhode Island",
abr: "RI",
},
{
name: "South Carolina",
abr: "SC",
},
{
name: "South Dakota",
abr: "SD",
},
{
name: "Tennessee",
abr: "TN",
},
{
name: "Texas",
abr: "TX",
},
{
name: "Utah",
abr: "UT",
},
{
name: "Vermont",
abr: "VT",
},
{
name: "Virgin Islands",
abr: "VI",
},
{
name: "Virginia",
abr: "VA",
},
{
name: "Washington",
abr: "WA",
},
{
name: "West Virginia",
abr: "WV",
},
{
name: "Wisconsin",
abr: "WI",
},
{
name: "Wyoming",
abr: "WY",
},
],
};
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.validEmail(this.contact.email) &&
this.validPhone(this.contact.phone) &&
this.validZip(this.contact.zip);
e.target.classList.add("was-validated");
if (!isValid) {
e.preventDefault();
}
},
validEmail: function (email) {
const re =
/^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
validPhone: function (phone) {
const re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
},
validZip: function (zip) {
const re = /^\d{5}(?:[-\s]\d{4})?$/;
return re.test(zip);
},
},
});
app.mount("#awApp");
<!DOCTYPE html>
<html lang="en" class="vh-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- /Bootstrap 5 CSS-->
<style>
main > .container {
padding: 60px 15px 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
</head>
<body>
<div id="awApp" class="d-flex flex-column vh-100">
<!-- FIXED NAVBAR AND/OR HEADER -->
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img :src="imgSrc" alt="logo" width="120" />
</a>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row my-5">
<div class="col-md-7">
<img
src="http://placehold.it/1200x400"
alt="hero image"
class="img-fluid"
/>
<h2 class="mt-3">Headline goes here...</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corporis dolore eaque, facere id molestias perspiciatis sit?
</p>
<ul>
<li>benefit 1</li>
<li>benefit 2</li>
<li>benefit 3</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
aliquid assumenda consectetur deleniti est ipsam nemo nobis
officiis quasi, quod!
</p>
</div>
<div class="col-md-5">
<div class="card shadow p-3">
<!--<img class="card-img-top rz-card-img-top" src="http://placehold.it/400x100" alt="Card image cap">-->
<div class="card-body">
<h5 class="card-title">Headline</h5>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<form
novalidate
class="needs-validation"
name="mainForm"
#submit="submitForm"
method="post"
>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label mb-0"
>First Name*</label
>
<input
id="firstname"
type="text"
name="firstname"
class="form-control"
v-model="contact.firstName"
id="awValid"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label mb-0"
>Last Name*</label
>
<input
id="lastname"
type="text"
name="lastname"
class="form-control"
v-model="contact.lastName"
required
/>
<div class="invalid-feedback">
Please enter a last name.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="email" class="form-label mb-0"
>Email Address*</label
>
<input
id="email"
type="text"
name="email"
class="form-control"
v-model="contact.email"
pattern="^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,20})$"
required
/>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="phone" class="form-label mb-0"
>Phone
</label>
<input
id="phone"
type="text"
name="phone"
class="form-control"
pattern="^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$"
v-model="contact.phone"
/>
<div class="invalid-feedback">
Please enter a valid phone number.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="address1" class="form-label mb-0"
>Street Address
</label>
<input
id="address1"
type="text"
name="address1"
class="form-control"
v-model="contact.address"
/>
</div>
</div>
<div class="row mb-2">
<div class="col-md-5 mb-3">
<label for="city" class="form-label mb-0">City</label>
<input
id="city"
type="text"
name="city"
class="form-control"
v-model="contact.city"
/>
</div>
<div class="col-md-3 mb-3">
<label for="state" class="form-label mb-0">State</label>
<select
id="state"
name="state"
v-model="contact.state"
class="form-select"
>
<option>##state##</option>
<option
v-for="state in states"
v-bind:value="state.abr"
>
{{state.name}}
</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="zip" class="form-label mb-0"
>Zip Code</label
>
<input
id="zip"
type="text"
name="zip"
class="form-control"
v-model="contact.zip"
pattern="^\d{5}(?:[-\s]\d{4})?$"
/>
<div class="invalid-feedback">
Please enter a valid zip code.
</div>
</div>
</div>
<div class="row mb-2">
<div class="col">
<div class="form-check">
<input
id="checkbox1"
type="checkbox"
class="form-check-input"
name="check-me-out"
v-model="contact.checked"
/>
<label for="checkbox1" class="form-check-label"
>Check me out</label
>
<div></div>
</div>
</div>
</div>
<input
type="submit"
class="btn btn-primary"
value="Submit"
/>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-light text-center">
<div class="container">
<span class="text-muted"
>© {{currentYear}} |
Privacy Policy |
Legal</span
>
</div>
</footer>
<!-- /FOOTER -->
</div>
<!--Bootstrap 5 JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!--/Bootstrap 5 JS-->
</body>
</html>

You could add a condition to the isValid Boolean that checks whether the phone field is empty:
export default {
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.validEmail(this.contact.email) &&
👇
(!this.contact.phone || this.validPhone(this.contact.phone)) &&
this.validZip(this.contact.zip);
//...
}
}
}
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
imgSrc:
"",
contact: {
firstName: "",
lastName: "",
email: "",
phone: "",
address: "",
city: "",
state: "",
zip: "",
checked: false,
},
states: [
{
name: "Alabama",
abr: "AL",
},
{
name: "Alaska",
abr: "AK",
},
{
name: "American Samoa",
abr: "AS",
},
{
name: "Arizona",
abr: "AZ",
},
{
name: "Arkansas",
abr: "AR",
},
{
name: "California",
abr: "CA",
},
{
name: "Colorado",
abr: "CO",
},
{
name: "Connecticut",
abr: "CT",
},
{
name: "Delaware",
abr: "DE",
},
{
name: "District Of Columbia",
abr: "DC",
},
{
name: "Federated States Of Micronesia",
abr: "FM",
},
{
name: "Florida",
abr: "FL",
},
{
name: "Georgia",
abr: "GA",
},
{
name: "Guam",
abr: "GU",
},
{
name: "Hawaii",
abr: "HI",
},
{
name: "Idaho",
abr: "ID",
},
{
name: "Illinois",
abr: "IL",
},
{
name: "Indiana",
abr: "IN",
},
{
name: "Iowa",
abr: "IA",
},
{
name: "Kansas",
abr: "KS",
},
{
name: "Kentucky",
abr: "KY",
},
{
name: "Louisiana",
abr: "LA",
},
{
name: "Maine",
abr: "ME",
},
{
name: "Marshall Islands",
abr: "MH",
},
{
name: "Maryland",
abr: "MD",
},
{
name: "Massachusetts",
abr: "MA",
},
{
name: "Michigan",
abr: "MI",
},
{
name: "Minnesota",
abr: "MN",
},
{
name: "Mississippi",
abr: "MS",
},
{
name: "Missouri",
abr: "MO",
},
{
name: "Montana",
abr: "MT",
},
{
name: "Nebraska",
abr: "NE",
},
{
name: "Nevada",
abr: "NV",
},
{
name: "New Hampshire",
abr: "NH",
},
{
name: "New Jersey",
abr: "NJ",
},
{
name: "New Mexico",
abr: "NM",
},
{
name: "New York",
abr: "NY",
},
{
name: "North Carolina",
abr: "NC",
},
{
name: "North Dakota",
abr: "ND",
},
{
name: "Northern Mariana Islands",
abr: "MP",
},
{
name: "Ohio",
abr: "OH",
},
{
name: "Oklahoma",
abr: "OK",
},
{
name: "Oregon",
abr: "OR",
},
{
name: "Palau",
abr: "PW",
},
{
name: "Pennsylvania",
abr: "PA",
},
{
name: "Puerto Rico",
abr: "PR",
},
{
name: "Rhode Island",
abr: "RI",
},
{
name: "South Carolina",
abr: "SC",
},
{
name: "South Dakota",
abr: "SD",
},
{
name: "Tennessee",
abr: "TN",
},
{
name: "Texas",
abr: "TX",
},
{
name: "Utah",
abr: "UT",
},
{
name: "Vermont",
abr: "VT",
},
{
name: "Virgin Islands",
abr: "VI",
},
{
name: "Virginia",
abr: "VA",
},
{
name: "Washington",
abr: "WA",
},
{
name: "West Virginia",
abr: "WV",
},
{
name: "Wisconsin",
abr: "WI",
},
{
name: "Wyoming",
abr: "WY",
},
],
};
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.validEmail(this.contact.email) &&
(!this.contact.phone || this.validPhone(this.contact.phone)) &&
this.validZip(this.contact.zip);
e.target.classList.add("was-validated");
if (!isValid) {
e.preventDefault();
}
},
validEmail: function (email) {
const re =
/^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
validPhone: function (phone) {
const re = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return re.test(phone);
},
validZip: function (zip) {
const re = /^\d{5}(?:[-\s]\d{4})?$/;
return re.test(zip);
},
},
});
app.mount("#awApp");
<!DOCTYPE html>
<html lang="en" class="vh-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- /Bootstrap 5 CSS-->
<style>
main > .container {
padding: 60px 15px 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
</head>
<body>
<div id="awApp" class="d-flex flex-column vh-100">
<!-- FIXED NAVBAR AND/OR HEADER -->
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img :src="imgSrc" alt="logo" width="120" />
</a>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row my-5">
<div class="col-md-7">
<img
src="http://placehold.it/1200x400"
alt="hero image"
class="img-fluid"
/>
<h2 class="mt-3">Headline goes here...</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Corporis dolore eaque, facere id molestias perspiciatis sit?
</p>
<ul>
<li>benefit 1</li>
<li>benefit 2</li>
<li>benefit 3</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
aliquid assumenda consectetur deleniti est ipsam nemo nobis
officiis quasi, quod!
</p>
</div>
<div class="col-md-5">
<div class="card shadow p-3">
<!--<img class="card-img-top rz-card-img-top" src="http://placehold.it/400x100" alt="Card image cap">-->
<div class="card-body">
<h5 class="card-title">Headline</h5>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<form
novalidate
class="needs-validation"
name="mainForm"
#submit="submitForm"
method="post"
>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label mb-0"
>First Name*</label
>
<input
id="firstname"
type="text"
name="firstname"
class="form-control"
v-model="contact.firstName"
id="awValid"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label mb-0"
>Last Name*</label
>
<input
id="lastname"
type="text"
name="lastname"
class="form-control"
v-model="contact.lastName"
required
/>
<div class="invalid-feedback">
Please enter a last name.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="email" class="form-label mb-0"
>Email Address*</label
>
<input
id="email"
type="text"
name="email"
class="form-control"
v-model="contact.email"
pattern="^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*#[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,20})$"
required
/>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="phone" class="form-label mb-0"
>Phone
</label>
<input
id="phone"
type="text"
name="phone"
class="form-control"
pattern="^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$"
v-model="contact.phone"
/>
<div class="invalid-feedback">
Please enter a valid phone number.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="address1" class="form-label mb-0"
>Street Address
</label>
<input
id="address1"
type="text"
name="address1"
class="form-control"
v-model="contact.address"
/>
</div>
</div>
<div class="row mb-2">
<div class="col-md-5 mb-3">
<label for="city" class="form-label mb-0">City</label>
<input
id="city"
type="text"
name="city"
class="form-control"
v-model="contact.city"
/>
</div>
<div class="col-md-3 mb-3">
<label for="state" class="form-label mb-0">State</label>
<select
id="state"
name="state"
v-model="contact.state"
class="form-select"
>
<option>##state##</option>
<option
v-for="state in states"
v-bind:value="state.abr"
>
{{state.name}}
</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="zip" class="form-label mb-0"
>Zip Code</label
>
<input
id="zip"
type="text"
name="zip"
class="form-control"
v-model="contact.zip"
pattern="^\d{5}(?:[-\s]\d{4})?$"
/>
<div class="invalid-feedback">
Please enter a valid zip code.
</div>
</div>
</div>
<div class="row mb-2">
<div class="col">
<div class="form-check">
<input
id="checkbox1"
type="checkbox"
class="form-check-input"
name="check-me-out"
v-model="contact.checked"
/>
<label for="checkbox1" class="form-check-label"
>Check me out</label
>
<div></div>
</div>
</div>
</div>
<input
type="submit"
class="btn btn-primary"
value="Submit"
/>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-light text-center">
<div class="container">
<span class="text-muted"
>© {{currentYear}} |
Privacy Policy |
Legal</span
>
</div>
</footer>
<!-- /FOOTER -->
</div>
<!--Bootstrap 5 JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!--/Bootstrap 5 JS-->
</body>
</html>

How can I add a <table> to a child node when is lazyloaded in fancytree?

Ive just started using fancytree this week, I'd like to add a table when a node is lazy loaded,the data for the that table will be the output of a GET request and I have the code to generate the table as I want it with jquery but when its time to add it to data.result I have no clue how to do it, it is expecting a list of children and the output for my function will be the table as it is in the snippet
I've tried many and most likely stupid things and I cant find any help in the examples, please help!
const SOURCEDATA = [
{
"title": "group1",
expanded: true,
children: [
{
"title": "Users",
expanded: true,
children: [
{"title": "User1", "lazy": true},
{"title": "User2", "lazy": true},
{"title": "User3", "lazy": true}
]
}]
},
{
"title": "group2",
children: [
{
"title": "Users",
expanded: true,
children: [
{"title": "User4", "lazy": true},
{"title": "User5", "lazy": true},
{"title": "User6", "lazy": true}
]
}]
}
]
$(function() {
$("#tree").fancytree({
source: SOURCEDATA,
focusOnSelect: true,
activeVisible: true,
lazyLoad: function(event, data){
var node = data.node
data.result = [{"title":"this should be the place for the table"}]
}
});
});
<link href="//cdn.jsdelivr.net/npm/jquery.fancytree#2.25/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.fancytree#2.27/dist/jquery.fancytree-all.min.js"></script>
<div id="tree">my tree</div>
<table id="user_2">
<thead>
<tr>
<th>Process Name</th>
<th>Process Hashes</th>
<th>Process Author</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="process_name">
<option>Foo.exe</option>
<option></option>
</select>
</td>
<td>
<select id="process_hash">
<option></option>
<option value="0123ABC">0123ABC</option>
<option value="ABC0123">ABC0123</option>
</select>
</td>
<td>
<select id="process_author">
<option></option>
<option value="Someone">Someone</option>
<option value="Somebody">Somebody</option>
</select>
</td>
<td>
<input id="act_allow" type="radio" name="action" value="allow">Allow</input>
<input id="act_deny" type="radio" name="action" value="deny">Deny</input>
<input id="act_warn" type="radio" name="action" value="warn">Warn</input>
</td>
</tr>
</tbody>
</table>

As long as the escapeTitles option is not enabled, you should be able to add raw HTML markup as a title.
Did you try
lazyLoad: function(event, data){
var node = data.node
data.result = [{title: "<table>...</table>", icon: false}]
}
});
Not sure however how good this will play with styling and event handling of the standard tree.

Couldn't connect to node http://localhost:8545

Screenshot of the issues:
Web3.min.js path in my system directory!
Web3.min.js is loaded from folder in my browser
Copy of the web3.min.js in the same folder where index.html file is present.
Code added
info of the node!
I am facing following two issues:
Failed to load resource: web3.min.js:1 net::ERR_CONNECTION_REFUSED
ERROR: Couldn't connect to node http://localhost:8545.
My Index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<h1>Coursetro Instructor</h1>
<h2 id="instructor"></h2>
<label for="name" class="col-lg-2 control-label">Instructor Name</label>
<input id="name" type="text">
<label for="name" class="col-lg-2 control-label">Instructor Age</label>
<input id="age" type="text">
<button id="button">Update Instructor</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
web3.eth.defaultAccount = web3.eth.accounts[0];
var CoursetroContract = web3.eth.contract([
{
"constant": false,
"inputs": [
{
"name": "_fName",
"type": "string"
},
{
"name": "_age",
"type": "uint256"
}
],
"name": "setInstructor",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [],
"name": "getInstructor",
"outputs": [
{
"name": "",
"type": "string"
},
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]);
var Coursetro=CoursetroContract.at('0x95712aa4ff464e56f76af55da6239a368c459ed4');
console.log(Coursetro);
</script>
</body>
</html>

If you are connecting to a local node:
You have included jquery cdn, similarly include a web3 from the link web3_cdn.
You can download one file from the link and connect the file in your webapp by
<script type="text/javascript" src="web3.min.js"></script>
And make sure when you run the app your metamask is disabled. Metamask injects a web3 object right into your application.
For reference check the other answers link

i have this problem and i solve it .
the solution :
you must create index.html and main.css in folder project, not in node_modules folder.

Switch case is not working in Reactjs

I have a json and I'm trying to display a form using the json data. I tried to display the indexes using the Switch case, so based on the html control type the index will be displayed. Below is my code
var React = require('react');
var ReactDOM = require('react-dom');
var DATA = {
"indexList": [{
"Label": "Name",
"Type": "text",
"Regex": "",
"Default_Val": "",
"Values": {
"Key": "",
"Value": ""
},
"Validtion Msg": "",
"Script": "",
"Mandatory": "required",
"maxLength":"16",
"minLength":"7",
"format":"Alphanumeric",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Select Language",
"Type": "dropdown",
"Regex": "",
"Default_Val": "English",
"Values": [{
"Key": "option1",
"Value": "English"
},{
"Key": "option2",
"Value": "Spanish"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Type",
"Field_Type": "radio",
"Regex": "",
"Default_Val": "",
"Values": [{
"Key": "option1",
"Value": "Form1"
}, {
"Key": "option2",
"Value": "Form2"
}, {
"Key": "option3",
"Value": "Form3"
},{
"Key": "option4",
"Value": "Form4"
},{
"Key": "option5",
"Value": "Form5"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
}
]
};
var Menu = React.createClass({
renderForm: function () {
var data = DATA.indexList;
console.log(data);
return data.map(group =>{
return <div>
<label for={group.Label}>{group.Label}</label>
<div>
switch(group.Type) {
case 'text':
return <input className={group.cssClassName}
id={group.Label}
placeholder={group.Placeholder}
{group.Mandatory}/>
case 'dropdown':
return <select className={group.cssClassName}>
<option value="">{group.Placeholder}</option>
<option for="let values of group.Values.value">{values}</option>
</select>
case 'radio':
return <div className={group.Type}>
<div for="let value of group.Values">
<label><input
name="radios"/>{value}</label>
</div>
</div>
case 'chekbox'
return <div className={group.Type}>
<div for="let value of group.Values">
<label><input name="checkbox"/>{value}</label>
</div>
</div>
}
</div>
</div>
});
},
render: function() {
return (
<div className="container">
<br/>
<div className="panel panel-primary">
<div className="panel-heading">Form</div>
<div className="panel-body">
<form>
<div className="form-group">
<div className="col-xs-5">
{this.renderForm()}
<button type="button" className="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
)}
});
module.exports = Menu
With the above code Im getting an error "Unexpexcted token" and the error is pointing towards the "case". Can anyone help to resolve the issue, Im new to react and Im not able to resolve this issue. Any syntax error in the code?

Because you forgot to put {}, use this:
<div>
{
}
To use any javascript code inside HTML element we need to use {}.
Note: We can't directly use if-else/switch statement inside JSX, use either ternary operator or call a function from JSX and use if-else/switch inside that.
Reference: http://reactjs.cn/react/tips/if-else-in-JSX.html
Check the working example:
var DATA = {
"indexList": [{
"Label": "Name",
"Type": "text",
"Regex": "",
"Default_Val": "",
"Values": {
"Key": "",
"Value": ""
},
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"16",
"minLength":"7",
"format":"Alphanumeric",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Select Language",
"Type": "dropdown",
"Regex": "",
"Default_Val": "English",
"Values": [{
"Key": "option1",
"Value": "English"
},{
"Key": "option2",
"Value": "Spanish"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
},
{
"Label": "Type",
"Type": "radio",
"Regex": "",
"Default_Val": "",
"Values": [{
"Key": "option1",
"Value": "Form1"
}, {
"Key": "option2",
"Value": "Form2"
}, {
"Key": "option3",
"Value": "Form3"
},{
"Key": "option4",
"Value": "Form4"
},{
"Key": "option5",
"Value": "Form5"
}],
"Validtion Msg": "",
"Script": "",
"Mandatory": "Y",
"maxLength":"",
"minLength":"",
"format":"",
"cssClassName": "form-control",
"Placeholder": ""
}
]
};
var Menu = React.createClass({
_renderElement: function(group){
switch(group.Type){
case 'text':
return <input className={group.cssClassName}
id={group.Label}
placeholder={group.Placeholder}
required={group.Mandatory == 'Y'? true: false}/>
case 'dropdown':
return <select className={group.cssClassName}>
<option value="">{group.Placeholder}</option>
{group.Values.map(el => <option key={el.Key} for="let values of group.Values.value">{el.Value}</option>)}
</select>
case 'radio':
return <div className={group.Type}>
<div for="let value of group.Values">
{group.Values.map(el=> <label key={el.Value}><input
name="radios"/>{el.Value}</label>)}
</div>
</div>
case 'checkbox':
return <div className={group.Type}>
<div for="let value of group.Values">
<label><input name="checkbox"/>{value}</label>
</div>
</div>
}
},
renderForm: function () {
var data = DATA.indexList;
return data.map(group =>{
return <div>
<label for={group.Label}>{group.Label}</label>
<div>
{
this._renderElement(group)
}
</div>
</div>
});
},
render: function() {
return (
<div className="container">
<br/>
<div className="panel panel-primary">
<div className="panel-heading">Form</div>
<div className="panel-body">
<form>
<div className="form-group">
<div className="col-xs-5">
{this.renderForm()}
<button type="button" className="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
)}
});
ReactDOM.render(<Menu/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>

swithc-case should be within braces
renderForm: function() {
var data = DATA.indexList;
console.log(data);
return data.map(group => {
return <div >
< label
for = {
group.Label
} > {
group.Label
} < /label> < div >{
switch (group.Type) {
case 'text':
return <input className = {
group.cssClassName
}
id = {
group.Label
}
placeholder = {
group.Placeholder
}
/>
case 'dropdown':
return;
}} < /div> < /div>
});
},

JSTree Types plugin not working with Rel attribute

Here is how i configure the jsTree Plugin:
$(function ()
{
$("#FoldersTreeContainer").jstree({
"core": {
"animation": 150
},
"themes": {
"rtl": true,
"theme": "classic",
"dots": false,
"icons": true
},
"types": {
"types": {
"Normal": {
"icon": { "image": "\Content\css\jsTree\default\Folder.png" },
},
"Legend": {
"icon": { "image": "\Content\css\jsTree\default\Legend.png" },
}
}
},
"plugins": ["html_data", "themes", "types"]
});
});
now here is the relevant HTML:
<div id="FoldersTreeContainer">
<ul id="FoldersTree">
<li rel="Normal"><a href="#" >other</a></li>
<li rel="Normal"><a href="#" >item1</a></li>
<li rel="Normal"><a href="" >item2</a></li>
<li rel="Legend"><a href="#" >item3-legend</a></li>
</ul>
</div>
I use the "rel" attribute of the <li> tag for the type but i still get the default folder icons..
what am i dooing wrong ?

You might be using the 3.x version of jstree which does not take the rel attribute into account. If you are using the 3.x version, more information can be found at this link : https://github.com/vakata/jstree/issues/473