Develop Reference

Handlebars lookup to make an href

I am trying to make a mod on an existing app. All I want to do is create an href that contains a url, but using the handlebars lookup function. When I try it just returns a blank value.
Here is my function:
var cardLink = function generateCardLink() {
var url = `"url/container-scan-reports/${vendor}/${product}/${image}"`
return url;
}
//...
res.render('vendor', {
title: 'Vendor Images',
images: images,
tags: tags,
cardLink: cardLink
});
I am then trying to pass in href this way on the top div of template.
<div class="row row-cards-pf ">
{{#each images}}
<div href={{lookup ../cardLink #index }} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
<div class="card-pf-body">
<div class="card-pf-top-element">
<span class="pficon-image card-pf-icon-circle"></span>
</div>
<h2 class="card-pf-title text-center">
{{ this }}
</h2>
<div class="card-pf-items text-center">
<div class="card-pf-item">
{{{ lookup ../tags #index}}}
</div>
</div>
<!-- <p class="card-pf-info text-center"><strong>Most recent image</strong> {{ lookup ../mostRecentImages #index}}</p> -->
</div>
<div class="card-pf-view-checkbox">
<input type="checkbox">
</div>
</div>
</div><!-- /col -->
{{/each}}
Can anyone help me?

You don't need lookup in this case. I think you want to display the url, so #index is not the right reference. Try it this way:
<div href={{../cardLink}} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

How to count number of classes generated using jQuery?

I have following HTML code.
Here 2 add/remove link exists. 1) Add More Details(+) 2) Add(+)
when I click on Add(+) link its clone the tour_wrap class div and counting the number of trip_counting class div cloned/added. Like: Trip 1, Tip 2, Trip 3 etc..
And, I have another link called Add More Details (+) which is clone the tour_wrap div.
So when I click on this link twice for e.g then it's clone the tour_wrap div 2 times, That's good.
Now I have 3 tour_wrap div. In this div's you can see that I have the link Add(+) 3 times, right? Yes. So when I click on any Add(+) link then it's counting the Total number of trip_counting classes added But I want to count only corresponding trip_counting classes.
Check this image:
HTML Code:
<div class="tour_wrap">
<!-- some other html code for the tour -->
<div class="trip_wrap">
<h5 class="badge badge-success trip_counting">Trip 1</h5>
<div class="col-md-4">
<div class="form-group">
<label>From</label>
<input type="text" name="ow_from[]" class="form-control" placeholder="From">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>To</label>
<input type="text" name="to[]" class="form-control" placeholder="To">
</div>
</div>
<div class="col-md-12">
<div class="change_trip text-right">
<a class="btn add_button_trip trip_btn">Add(+)</a>
</div>
</div>
</div> <!-- end trip_wrap -->
</div> <!-- end tour wrap -->
<div class="row">
<div class="col-md-12">
<div class="form-group change text-right">
<a class="btn add_button add_more add_more_btn"><strong>Add More Details (+)</strong></a>
</div>
</div>
</div> <!-- end row -->
jQuery Code:
// for all way
$("body").on("click",".add_button",function(){
var html = $(".tour_wrap").first().clone();
$(html).find(".change").html("<a class='btn remove remove_more'>Remove Details(-)</a>");
$(".tour_wrap").last().after(html);
$('.counting').each(function(i, elm) {
$(elm).text('Detail ' + (i + 1));
});
});
$("body").on("click",".remove",function(){
$(this).parents(".tour_wrap").remove();
});
// add more trip
$("body").on("click",".add_button_trip",function(){
var html = $(".trip_wrap").first().clone();
$(html).find(".change_trip").html("<a class='btn remove_trip remove_more trip_btn_remove'>Delete(-)</a>");
//$(".trip_wrap").last().after(html);
$('.trip_wrap').each(function(i, elm) {
$(elm).last().after(html);
});
$('.trip_counting').each(function(i, elm) {
$(elm).text('Trip ' + (i + 1));
});
});
$("body").on("click",".remove_trip",function(){
$(this).parents(".trip_wrap").remove();
});

How to Show and Update hidden div element by hovering on one of three buttons in Javascript?

I want to hover over on the buttons and want to show a hidden div/panel underneath it by using java script. My Javascript is externally included and works fine, i am trying to use the DOM model to change the style and innerHTML of the div but isnt working. This is my HTML, Javascript and CSS code below. I am even passing parameters to verify which button was hovered but failing.
HTML
<div class="container">
<div class="row anchorbutton">
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
<a href=#><div class=" mainbuttons b1 text-center"
onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout
Programs</div></a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
<a href=#><div class=" mainbuttons b2 text-center"
onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet
Plans</div></a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
<a href=#><div class=" mainbuttons b3 text-center"
onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food
Supplements</div></a>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default hidden">
<div class="hoverable panel-body hidden"> </div>
</div>
</div>
JS
function hidepanel(){
var panel=document.getElementsByClassName("hidden");
panel.style.display=none;
}
function updatepanel(x){
var desc1="Get fully customized workout programs from our dedicated fitness
experts.";
var desc2="Nutrional advice and diet plans just for your needs!";
var desc3="Our very own state-of-the-art line of supplementations.Click to
Order";
if(x==1){}
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc1';
}
if(x==2){
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc2';
}
if(x==3){
document.getElementsByClassName('hidden').style.display='block';
document.getElementsByClassName('hidden').innerHTML='desc3';
}
}
CSS
.hidden{
display: none;
}
I have also tried to change the functionality by changing the function to work on onClick instead of onmousehover but it wont work.Please help me out i have been banging my head.

document.getElementsByClassName() returns an HTML Collection, which is a collection of elements, so saying things like collection.style.display or collection.innerHTML doesn't make a whole lot of sense. I think what you are wanting to do is grab the individual element and update the properties, like so:
document.getElementsByClassName("hidden")[0].
If you need to iterate over the collection, you can access a length property and do a traditional for loop, or you can do an Array.from() using ES6.
function hidepanel() {
var panel = document.querySelector(".hidden");
panel.style.display = "none";
}
function updatepanel(x) {
var desc1 = "Get fully customized workout programs from our dedicated fitness experts.";
var desc2 = "Nutrional advice and diet plans just for your needs!";
var desc3 = "Our very own state-of-the-art line of supplementations.Click to Order";
// make variable so we don't have to search the DOM 2 times for every panel
var hiddenElem = document.querySelector(".hidden");
var panelBody = document.querySelector(".panel-body");
if (x == 1) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc1';
}
// don't evaluate unnecessarily
else if (x == 2) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc2';
}
// don't evaluate unnecessarily
else if (x == 3) {
hiddenElem.style.display = 'block';
panelBody.innerHTML = 'desc3';
}
}
.hidden{
display: none;
}
<div class="container">
<div class="row anchorbutton">
<div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
<a href=#>
<div class=" mainbuttons b1 text-center" onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout Programs
</div>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
<a href=#>
<div class=" mainbuttons b2 text-center" onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet Plans
</div>
</a>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
<a href=#>
<div class=" mainbuttons b3 text-center" onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food Supplements
</div>
</a>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default hidden">
<div class="hoverable panel-body"> </div>
</div>
</div>
Alternatively, you can use the built in document.querySelectorAll(), which returns a NodeList, which does have a built in iterator function (forEach), which makes iterating over the list cleaner/easier.
That would look like so:
document.querySelectorAll(".hidden").forEach(function (elem) {
elem.syle.display = "block";
// etc...
});

First document.getElementsByClassName returns an HTML Collection so you must specify the index of the element you want to use, like: document.getElementsByClassName('hidden')[0].
Second panel.style.display must be a defined as a string, so change none to "none" in your hide function
Working codepen: https://codepen.io/sunrisem/pen/QagPLG

Don't use inline javascript in your html, instead loop the elements and attach an event listener to them. You can set data-attributes on the button, so you could either create an array like shown below holding the texts, or you could put the text as a data-attribute. You'll also need a listener that reacts on the mouse leaving the button, to hide the div again. You should be easily able to change the code to fit your classes...
let div = document.getElementById('d');
let descriptions = [
"Get fully customized workout programs from our dedicated fitness experts.",
"Nutrional advice and diet plans just for your needs!",
"Our very own state-of-the-art line of supplementations.Click to Order"
];
document.querySelectorAll('.btn').forEach(e => {
e.addEventListener('mouseover', ({
target
}) => {
div.innerHTML = descriptions[target.getAttribute('data-nr')];
div.classList.remove('hidden');
}, false);
e.addEventListener('mouseout', () => {
d.classList.add('hidden');
}, false)
});
.hidden {
display: none;
}
div {
margin-top: 10px;
color: red;
}
<button class="btn" data-nr="0">
1
</button>
<button class="btn" data-nr="1">
2
</button>
<button class="btn" data-nr="2">
3
</button>
<div id="d" class="hidden">
</div>

submit bootstrap wizard form to sql database

I am developing my website using some free bootstrap template and I working with asp.net and c# to implement this website.
The template comes with form wizard template page that has 3 steps with some question in each step. And 3 buttons : next, prev, and finish.
The wizard page template use:
<!-- jQuery Smart Wizard -->
<script src="../vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
I want to submit the form data into sql database but, i have no control on the finish button and also others buttons.
<!-- jQuery Smart Wizard -->
<script>
$(document).ready(function() {
$('#wizard').smartWizard();
$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');
});
</script>
<!-- /jQuery Smart Wizard -->
This is my form:
<!-- Smart Wizard -->
<form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps">
<li>
<a href="#step-1">
<span class="step_no">1</span>
<span class="step_descr">
Step 1<br />
<small>General Information</small>
</span>
</a>
</li>
<li>
<a href="#step-2">
<span class="step_no">2</span>
<span class="step_descr">
Step 2<br />
<small>Assign User</small>
</span>
</a>
</li>
<li>
<a href="#step-3">
<span class="step_no">3</span>
<span class="step_descr">
Step 3<br />
<small>Create Project</small>
</span>
</a>
</li>
</ul>
<div id="step-1">
<!-- Project Name -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="project_name">Project Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox id="project_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
</div>
</div>
<!-- PI name -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="pi_name">PI Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox id="pi_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div id="step-2">
<!-- Assign Developer dropdown -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Assign Developer</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:DropDownList ID="developers_DropDownList" runat="server" Width="100px">
</asp:DropDownList>
</div>
</div>
</div>
<div id="step-3">
<p>
Click on 'Finish' to create the new database.
</p>
</div>
</div>
<!-- End SmartWizard Content -->
</form>
I know how to submit form data using the button "onclick" function in c#. but here, i dont have access on the buttons. how can i submit my form in this case?
I can show you the "jquery.smartWizard.js" file but it huge.
For clarification:
I don't know what is the proper way to submit the form in this case.
1- I s it ok to put the code of insert data into database in PHP file and call it from action=" " in the form tag?
2- Or can I put the code of insert data into database in c# function? in this case how can I call this function from my asp file and how to pass form data to this function?
3- Or can I use js function to insert data into database?
Remember: I don't have control of Finish button

Ok, I'm assuming this problem has been fixed but for anyone else having problems I'll try an cast a bit of light on the solution or at least a partial solution.
Firstly your intention was to insert data from an HTML form to a database.
Your HTML form looks like this:
<form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">
If you have a web application handling this form it should be making a "post" request to the backend like so:
<form class="whatever-your-using" id="whatever-you-like" action="/handle-html-form" method="post">
This will make a post to the server/app point to the route /handle-html-form which should have a function which takes the data from the form and save it to the database.
Obviously, you need to has a submit button in order to actually send the form. My approach was to download the smartWizard.js and had it to my own project
I then edited the file to suit my purpose. For example here is a small snippet of the code change.
Original smartWizard.js:
function SmartWizard(target, options) {
this.buttons = {
next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
finish : $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish")
};
My smartWizard.js:
function SmartWizard(target, options) {
this.buttons = {
next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
finish: $('<a>' + options.labelFinish + '</a>').attr({
type: 'submit',
name: 'buttonFinish',
value: 'Submit'
}).addClass('buttonFinish')
};
I've added the attributes for the submit button directly to the finishButton. This was the first solution i found to get around the problem.
Its worth mentioning that the whole of the HTML for the smartWizard must be nested inside a form element. Otherwise, all the element from each step of the wizard would be saved.
Here is a HTML example to clearify what im trying to say:
<form class="whatever" id="whatever" action="/handle-html-form" method="post">
<div class="form_wizard wizard_horizontal" id="wizard">
// Then all the steps below but still inside the form
Hope this helps

Unable to use $.after() to close a div tag

This problem is best illustrated by example:
http://jsbin.com/lavonexuse
The desired effect is for clicking "Insert Row" to insert a full-width row after the indicated column (indicated by the class .insertion-point). The problem I'm running into is that instead of closing the current row first, and starting a new one, it just embeds a new row within the main row.
How do I close out the current row after any given column, make a new row, close that one, then resume showing the "data" columns?
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
<button class="btn btn-primary insert-row">Insert Row</button>
</body>
</html>
CSS:
.item {
border: 1px solid #f00;
}
.pane {
background: #999;
height: 100px;
}
JavaScript:
$('.insert-row').on('click', function() {
code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';
$('.insertion-point').after(code);
});
EDIT:
The code string above probably should end with <div class="row"> to re-open the row. But I tried that and it still doesn't work.
The problem here is that visually it looks like my solution works. Though in reality, it's creating bad HTML.
Further explanation (I think this is hard to explain). Here is what's happening, and this is NOT what I want:
I need that inserted row to be at the same level as the row it was erroneously inserted into.
Desired HTML after jQuery manipulation
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
</div>
<div class="row">
<div class="col-sm-12 pane"></div>
</div>
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
Further Ramblings
Maybe, since this is Bootstrap, there's some way I can use the grid system to have the same effect.

The code below should resolve your issue. Check out the code snippet and demo:
$('.insert-row').on('click', function() {
var row = $('<div/>',{class:"row"}),
code = '<!--end row--><div class="row"><div class="col-sm-12 pane">New</div></div>',
rest = $('.insertion-point').nextAll(),
dest = $('.insertion-point').closest('.row');
dest.after( row.append( rest ) ).after( code );
});
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item insertion-point">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
<div class="col-sm-4 item">
Data
</div>
</div>
</div>
<button class="btn btn-primary insert-row">Insert Row</button>

i worked out this four you: JsFiddle
$(document).ready(function() {
var firstRow = $('.row');
$('.insert-row').on('click', function() {
var code = $('<div/>', {clas: 'row'}).append($('<div/>', {class: "col-sm-12 pane"})),
row = $('<div/>', {class: 'row'}),
items = $('.insertion-point').nextAll();
row.append(items);
firstRow.after(row);
firstRow.after(code);
});
});
Update:
after seen the nextAll function by jQuery .. this will be much faster:
updated fiddle

I think what you need is appendTo which will append html onto the specified tag. In this case you want to append a div onto your row.
http://api.jquery.com/appendto/

Just get rid of the closing tag in the code variable and your code will work and be well formed
code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';
should be
code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
Also you need to insert rows after / before other rows like so
$('.insert-row').on('click', function() {
code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
$('.insertion-point').closest(".row").after(code);
});
The above code finds where you want to insert (which I changed to be an id selector since you want to insert after one unique element). However you want to find the closest parent element (or this one) that is a row so that you insert a row after that row. This way you can choose a row or a column to insert after and it will always insert a row after the closest row properly.
Lucky for you browsers are very forgiving when it comes to syntax errors in HTML. They will remove the initial closing tag (which is unnecessary) and use the rest of your HTML. But some browser may behave differently and that is what you have to be careful of.

You need to add a new row after the first by removing the elements after the insertion point and including them in the new row.
You can't treat the DOM like a text editor when inserting html.
$('.insert-row').on('click', function() {
var $insertEL=$('.insertion-point');
var code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
/* create new row and append all siblings after insertion point element*/
var $newRow=$(code).append($insertEL.nextAll());
/* add new row to DOM*/
$insertEL.closest('.row').after($newRow);
});
DEMO

Got it!
Layout solved by using Bootstrap grid, very little jQuery DOM manipulation. I don't know why I didn't think of this earlier. Sheesh. I've been coding for hours non-stop, my brain is fried.
Solution: http://jsbin.com/zopiquzore
This is correct, yes?