We Keep Coding

Get to display the right product info using json file and Due js

The idea would be selecting a product by clicking on view Details button from PortfolioV3.vue and take you to ProductDetail.vue according to the product selected but I can't seem to find a way to make this link. What would be the most efficient way to configure this value passing information taken from json file from one PortfolioV3.vue to ProductDetail.vue?
portfolio-v3.json
{
"data":[
{
"image_path":"static/products/DELUXE-BATHROBE.jpg",
"title":"Productivity Tools",
"title_color":"bg-info",
"heading":"Deluxe Bathrobe",
"read_more_url":"javascript:void(0);",
"content": "bathrobe posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/HERRINGBONE-THERMAL-BLANKET.jpg",
"title":"Productivity Tools",
"title_color":"badge-warning",
"heading":"Herringbone Thermal Blanket",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
},
{
"image_path":"static/products/MADISON-SPREAD-BLANKETS.jpg",
"title":"Productivity Tools",
"title_color":"bg-yellow",
"heading":"Madison Spread Blankets",
"read_more_url":"javascript:void(0);",
"content": "blanket posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor."
}
]
}
PortfolioV3.vue
<template>
<div>
<PageTitle
headerTitle="Our Latest Work"
headerSubTitle="We build something great in the world."
>
</PageTitle>
<div class="portfolio-wrapper section-gap port-3">
<div class="container">
<div class="blog-alternate" v-for="(portfolio,index) of portfoliov3.data" :key="index">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6">
<div class="overlay-wrap">
<img :src="portfolio.image_path" width="500" height="500" class="img-fluid border-rad w-100" alt="gallery images" />
<a :href="portfolio.image_path" data-fancybox="images" class="card-img-overlay primary-tp-layer pos-center text-center">
<span class="center-holder">
<a class="ih-fade-down square-40 rounded-circle bg-white shadow-md">
<i class="fa fa-plus align-middle"></i>
</a>
</span>
</a>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="portfolio-content">
<h5 :class="portfolio.title_color" class="badge p-2 mb-3 btn-pill"> {{portfolio.title}} </h5>
<h3 class="mb-3">{{portfolio.heading}}</h3>
<p class="mb-4">{{portfolio.content}}</p>
<a :href="portfolio.read_more_url" class="btn btn-outline-secondary btn-chk-dark"> READ MORE </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import portfoliov3 from 'Components/data/portfolio-v3.json'
export default {
data(){
return{
portfoliov3
}
}
}
</script>
ProductDetail.vue
<template>
<div>
<div class="product-wrapper section-gap pb-0">
<div class="container">
<div class="row mb-4">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="mb-4">
<div class="feature-box-thumb">
<img src="static/img/2.jpg" class="img-fluid card-shadow" alt="product image" />
</div>
<!-- feature box thumb closed -->
</div>
<div class>
<ul class="list-unstyled p-gallary-thumb list-p-detail row">
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
<li class="col-6 col-sm-3 col-md-3 mb-4">
<a href="javascript:void(0);">
<img src="static/img/2.jpg" class="img-fluid" alt="product image" />
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 product-detail-content mb-4">
<div class="mb-3">
<h2 class="text-capitalize mb-3">Fleece Jacket</h2>
<!--<h4 class="font-26 text-primary">
<del class="text-muted mr-2">$187</del> $125.00
</h4>-->
</div>
<div class="mb-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis eros lobortis, vestibulum turpis ac, pulvinar odio. Praesent vulputate a elit ac mollis. In sit amet ipsum turpis. Pellentesque venenatis, libero vel euismod lobortis, mi metus luctus augue, eget dapibus elit nisi eu massa. Phasellus sollicitudin nisl posuere nibh ultricies.</p>
</div>
<div class="mb-4">
<p class="mb-0">
<span class="font-weight-bold">Category :</span>
Electronics,
Lights,
Solar
</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
<!-- container closed -->
</div>
<!-- product wrapper closed -->
</div>
</template>
<script>
import RelatedProducts from "Components/Sections/RelatedProducts.vue";
import portfoliov2 from "Components/data/portfolio-v2.json";
export default {
components: {
RelatedProducts
},
data() {
return {
portfoliov2
};
}
};
</script>

How can I dont show the divisions between cells in this divs?

I have this simple screen of an application in Vue.js:
Sample screen
I want to hide these divisions between cells, in a manner that the lines of the itens are continous.
I had tried to alter the classes of the columns to "col-md" and "col-sd", but witout sucesss.
Here is the code of the template session of the application:
<template>
<div class="container">
<h1> Animais </h1>
<br>
<div class="row">
<div class="col-md-6">
<h3>
Animais Cadastrados
<span class="badge badge-info">{{animais.length}}</span>
</h3>
<ul>
<div class="row">
<div class="col">
Nome
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.nome}}
</li>
</div>
<div class="col">
Idade
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.idade}}
</li>
</div>
<div class="col">
Raça
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
{{animal.raca}}
</li>
</div>
<div class="col">
Informações
<li class="list-group-item" v-for="animal in animais" v-bind:key="animal">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</li>
</div>
</div>
</ul>
</div>
<div class="col-md-6">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</template>

To make things easier, you can just copy the generated HTML into JsFiddle. I'm trying to guess what you are trying to achieve and I think you can try something like that:
<div class="row" v-for="animal in animais" v-bind:key="animal">
<div class="col-md-3">{{animal.nome}}</div>
<div class="col-md-3">{{animal.idade}}</div>
<div class="col-md-3">{{animal.raca}}</div>
<div class="col-md-3">
<i #click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
</div>
</div>
Again, I'm not sure what you're trying to do but looping 4 times on the same array is probably not the way to go. And yes, you may nest Bootstrap a row inside another.

My Bootstrap carousels are not working

My Bootstrap carousels are not working. When I click on the slider left or slider right buttons, the webpage just moves down and #bannerCarousel appears in the browser address bar. As for the "Testimonials" carousel, it is supposed to play automatically, but it doesn't do anything. Can someone please help me resolve this issue?
Here is my HTML and Javascript:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('.carouselBanner').carousel(),
$('.carouselTestimonial').carousel()
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RialedUp</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<section class="hero-unit">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
RialedUp
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div><!-- end navbar -->
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<div> </div>
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
<div class="item">
<div class="hero-unit-inner text-center">
<h1>We build well designed websites</h1>
<h4>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</h4>
Get Started!
Learn More
<img src="img/browser.png" alt="Browser" />
</div><!-- end hero-unit-inner -->
</div><!-- end item -->
</div><!-- end carousel inner -->
<a class="carousel-control left" href="#bannerCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#bannerCarousel" data-slide="next">›</a>
</div><!-- end bannerCarousel -->
</div>
</section><!-- end hero-unit -->
<section id="process">
<div class="container">
<div class="row">
<div class="h-line hidden-phone"> </div>
<div class="span3">
<div class="plan text-center">
<span class="process-icon iplan"> </span>
<h4 class="heading">Plan</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="design text-center">
<span class="process-icon idesign"> </span>
<h4 class="heading">Design</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="develop text-center">
<span class="process-icon idevelop"> </span>
<h4 class="heading">Develop</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
<div class="span3">
<div class="launch text-center">
<span class="process-icon ilaunch"> </span>
<h4 class="heading">Launch</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
Read More
</div>
</div>
</div>
</div>
</section><!-- end process -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="span3">
<div class="p-item">
<h4 class="heading">Portfolio</h4>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<strong>Our Portfolio</strong>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-1.png" class="img-polaroid" alt="Web Design" />
<h5 class="title">LeafireDesigns</h5>
<small class="category">Web Design</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-2.png" class="img-polaroid" alt="Web Development" />
<h5 class="title">Unity</h5>
<small class="category">Web Development</small>
</div>
</div>
</div>
<div class="span3">
<div class="p-item">
<div class="text-center">
<img src="img/thumbnail/thumb-3.png" class="img-polaroid" alt="Logo Design" />
<h5 class="title">Ingenious</h5>
<small class="category">Logo Design</small>
</div>
</div>
</div>
</div>
</div>
</section><!-- end portfolio -->
<section id="partners">
<div class="container">
<div class="row">
<div class="span3 text-center">
<img src="img/thumbnail/partner-1.png" alt="Graphic Driver" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-2.png" alt="Theme Forest" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-3.png" alt="Code Canyon" />
</div>
<div class="span3 text-center">
<img src="img/thumbnail/partner-4.png" alt="Active Den" />
</div>
</div>
</div>
</section><!-- end partners -->
<section id="widgets">
<div class="container">
<div class="row">
<div class="span4">
<div class="testimonials">
<h4 class="heading">Testimonials</h4>
<div id="testimonialCarousel" class="carouselTestimonial">
<div class="carousel-inner">
<div class="active item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
<div class="item">
<img src="img/thumbnail/small-thumb-1.png" class="pull-left" alt="Moron" />
<blockquote>
<p>This is Photoshops version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibhid elit.</p>
<cite>Moe Ron <br />
www.moron.com
</cite>
</blockquote>
</div>
</div><!-- end carousel-inner -->
</div><!-- end testimonialCarousel -->
</div><!-- end testimonials -->
</div>
<div class="span4">
<div class="blog">
<h4 class="heading">Our Latest Posts</h4>
<ul class="blog-lists">
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 4, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 3, 2017 | Posted by Admin</small>
</li>
<li>
<h5>This is Photoshops version of Lorem Ipsum</h5>
<small>October 2, 2017 | Posted by Admin</small>
</li>
</ul>
</div><!-- end blog -->
</div>
<div class="span3">
<div class="tweets">
<h4 class="heading">Latest Tweets</h4>
<ul class="tweet-lists">
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
<li class="clearfix">
<img src="img/thumbnail/small-thumb-2.png" class="pull-left" alt="Clown" />
<p>Proin gravida nibh vel velit auctor a iquet. http://this.is.me247</p>
</li>
</ul>
</div><!-- end tweets-->
</div>
</div>
</div>
</section><!-- end widgets -->
<footer>
<div class="container">
<div class="row">
<div class="span12 text-center">
<div class="table">
<ul class="footer-links">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
<div id="social">
<span class="social-sprite twitter"> </span>Follow Us on Twitter
<span class="social-sprite facebook"> </span>Like Us on Facebook
</div>
<small> © Rialed Up 2017</small>
</div>
</div>
</div>
</footer>

Change
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active-item">
to
<div id="bannerCarousel" class="carouselBanner slide">
<div class="carousel-inner">
<div class="active item"> <!-- active item not active-item -->
https://jsfiddle.net/jv6xzgm6/

Using react.js, I receive no errors, but content doesn't load

I'm currently working on a site on freelance, and the client is requesting form verification via react.js. I've never used it before, so I'm trying to learn, and of course, my first goal is to get the content on the page. After some fiddling, and finding my mistakes, I finally received no errors, but the content isn't loading on the page. I'm also using bootstrap. File structure is all correct.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site Name</title>
<!-- Bootstrap -->
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-defualt dc-navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle dc-navbutton collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">
Toggle navigation
</span>
<span class="toggle-bar icon-bar"></span>
<span class="toggle-bar icon-bar"></span>
<span class="toggle-bar icon-bar"></span>
</button>
<a class="navbar-brand unfloat" href="#">
<img id="logo" src="img/Service2Rev2.png" alt="DockChain">
</a>
</div>
<div id="navbar" class="dc-navbar collapse navbar-collapse">
<ul class="fnt-sec nav-pad nav navbar-nav navbar-left">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Settings
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</header>
<section>
<div class="container-fluid">
<div class="main jumbotron">
<center class="fnt-secondary">
<h1>Client's Service</h1>
<p>Lorem Ipsum Dolor</p>
<a href="#">
<button class="btn btn-default">Learn More</button>
</a>
</center>
</div>
</div>
</section>
<section class="sections">
<div class="container">
<div class="center row">
<div class="col-sm-4">
<h2>Safe</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
<div class="col-sm-4">
<h2>Secure</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
<div class="col-sm-4">
<h2>Verified</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit.</p>
</div>
</div>
</div>
</section>
<section class="sections info-section">
<div class="container">
<div class="some-room row">
<div class="col-md-6">
<img class="center" src="img/Service3.png" alt="flow chart">
</div>
<div class="info-text col-md-6">
<h2>This is how we work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. Aliquam ipsum mi, ultrices et posuere id, ornare non quam. Fusce nec augue bibendum, eleifend ipsum viverra, maximus urna. Nullam tincidunt quam id faucibus suscipit. Aenean in enim at est porttitor vestibulum eu quis ipsum. Morbi ac tortor tempus, pulvinar nisi at, sodales urna. In facilisis ut diam vel aliquam. Mauris tempor, nulla non hendrerit rhoncus, leo diam dictum elit, nec molestie ex arcu ac erat. Vivamus malesuada libero eget erat bibendum rutrum. Nunc tempus posuere ornare. Sed eleifend, nisl non ultricies pretium, elit diam dictum orci, in aliquet nisi neque luctus lacus. </p>
</div>
</div>
</div>
</section>
<div id="formDiv">
</div>
<section>
<div class="container-fluid">
<div class="main jumbotron">
<center>
<h1>Here's another focal point</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non accumsan nulla. Quisque rutrum rutrum condimentum. Aenean lacinia semper egestas. Pellentesque nec tortor eu erat ullamcorper lobortis vitae ut leo. </p>
<a href="#">
<button class="btn btn-default">Call to Action</button>
</a>
</center>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="fnt-sec pull-left">
<p><i class="fa fa-copyright"></i> 2015 Client</p>
</div>
<div class="fnt-sec pull-right">
<p>You can have some stuff here too.</p>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- React.js -->
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<!-- Form jsx -->
<script src="comp/Form.jsx" type="text/jsx"></script>
<script type="text/jsx">
var form = React.createElement(Form);
function run() {
React.render(form, document.getElementById('formDiv'));
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', run);
} else {
window.attachEvent('onload', run);
}
</script>
</body>
</html>
And here's Form.jsx:
var Form = React.createClass({
render: function () {
return(
<div className="container form-border">
<h2>Enter your info to subscribe.</h2>
<form>
<div classNameName="form-group has-success has-feedback">
<label className="control-label" for="name">Name</label>
<input type="text" className="form-control" id="nameInput" placeholder="Name" />
<span className="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div className="form-group has-warning has-feedback">
<label className="control-label" for="emailInput">Email address</label>
<input type="email" className="form-control" id="emailInput" placeholder="Enter email" />
<span className="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div className="form-group has-error has-feedback">
<label className="control-label" for="passInput">Password</label>
<input type="password" className="form-control" id="passInput" placeholder="Password" />
<span className="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div className="form-group">
<label for="comments">Comments</label>
<textarea className="form-control" id="commentInput" rows="3" placeholder="Enter comments here"></textarea>
</div>
<div className="row">
<div className="col-xs-6">
<div className="form-group">
<div className="checkbox-inline">
<label>
<input type="checkbox" value="" checked /> Option one
</label>
</div>
<div className="checkbox-inline">
<label>
<input type="checkbox" value="" />Option two
</label>
</div>
<div className="checkbox disabled">
<label>
<input type="checkbox" value="" disabled /> Option three (disabled)
</label>
</div>
</div>
<div className="form-group">
<div className="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked />Option one
</label>
</div>
<div className="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />Option two
</label>
</div>
<div className="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled /> Option three (disabled)
</label>
</div>
</div>
</div>
<div className="col-xs-6">
<div className="form-group">
<label for="jobForm">How would you describe yourself?</label>
<select name="profession" id="profession" className="form-control">
<option value="default">Select an option...</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="director">Director/Manager</option>
<option value="joke">Puppet Maker</option>
</select>
</div>
<div className="form-group">
<label for="useForm">How will you be using this service?</label>
<select name="use" id="use" className="form-control" multiple>
<option value="personal">Personal</option>
<option value="production">Production</option>
<option value="corporate">Corporate</option>
<option value="joke">With gusto</option>
</select>
</div>
</div>
</div>
<button type="submit" className="center btn btn-default">Submit</button>
</form>
</div>
);
}
});
I removed references to the client's service in file names and headers for confidentiality. I can't find why it isn't loading. Can anyone see something I can't?

You shouldn't need the event loader or the call to createElement. Try this instead:
<script type="text/jsx">
React.render(<Form />, document.getElementById('formDiv'));
</script>

How to bind event with dynamic data generated

I'm unable to bind jQuery events with dynamically generated html data. This is my code. Please help me through it.
I've tried on() function but still it doesn't not working. Multiple guidelines guide to resolve this problem with on() method but it's not working. Please guide me through this. Thanks
<span class="btn btn-warning addnew">Add New Question</span>
<div class="clearfix"></div>
<br/>
<script>
var div = '<section class="panel default red_border horizontal_border_1 h2"> <div class="block-web"> <div class="header"> <div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div> <h3>Default Block</h3> </div> <div class="body-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p> </div> </div> </section>';
$(".addnew").click(function(){
$(".insertafter").after(div);
});
</script>
<div class="insertafter"></div>
<div class="col-lg-4 col-md-4">
<section class="panel default red_border horizontal_border_1 h2">
<div class="block-web">
<div class="header">
<div class="actions"> <a class="minimize" href="#"><i class="fa fa-chevron-down"></i></a> <a class="refresh" href="#"><i class="fa fa-repeat"></i></a> <a class="close-down" href="#"><i class="fa fa-times"></i></a> </div>
<h3>Default Block</h3>
</div>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non lectus molestie, condimentum quam et, iaculis justo. Nunc vel ultricies nunc. Aliquam tempus sodales eros vel tincidunt. Proin ultricies bibendum urna et aliquam. Nunc quis nisl sit amet erat bibendum aliquet.</p>
</div>
</div>
</section>
</div>
<script>
/*==Porlets Actions==*/
$('.minimize').click(function(e){
var h = $(this).parents(".header");
var c = h.next('.body-content');
var p = h.parent();
c.slideToggle();
p.toggleClass('closed');
e.preventDefault();
});
$('.refresh').click(function(e){
var h = $(this).parents(".header");
var p = h.parent();
var loading = $('<div class="loading"><i class="fa fa-refresh fa-spin"></i></div>');
loading.appendTo(p);
loading.fadeIn();
setTimeout(function() {
loading.fadeOut();
}, 1000);
e.preventDefault();
});
$('.close-down').click(function(e){
var h = $(this).parents(".header");
var p = h.parent();
p.fadeOut(function(){
$(this).remove();
});
e.preventDefault();
});
</script>
jsfiddle: http://jsfiddle.net/nfqz4bqq/

Instead of...
$('.minimize').click(function(e){
//..
});
You can write...
$('body').on('click', 'a.minimize', function() {
var h = $(this).parents(".header");
var c = h.next('.body-content');
var p = h.parent();
console.log(this);
c.slideToggle();
p.toggleClass('closed');
//e.preventDefault();
});
I tried it and it works because there is a related question