I have a EJS variable i use to render a list of products in my template; prodArray
. EJS lists these in <div>
's and each has three buttons. These buttons are controlled by jQuery scripts and I would like jQuery to have access to the prodArray
array. I would like a way to pass the EJS local variable to a client side script like so.
<script>
var prodArray = <%= prodArray %>
</script>
It's not this simple for me unfortunately. The script gives an error.
If i try to call prodArray
in my client side javascript it gives the error that it is undefined.
prodArray
contains date objects and id objects that need to passed along without turning to undefined
. Maybe I'm missing something really simple as can't find anyone else with this problem. Any help would be greatly appreciated.
Code as requested: (I'm currently working on it. It's a mess. current work around to my problem is to save the objectId of each product as a string in a hidden p
tag. But this is not what I want... I would much be able to pass the array on to my script as a whole.)
EJS:
<h2>Producnts</h2>
<p>You currently have <%= prodArray.length %> active products. </p>
<a href="/camphome/products/new" class="btn btn-info">Add New Product</a>
<% prodArray.forEach(function (product,idx) { %>
<% var editlink = "/camphome/products/edit/" + product._id %>
<% var removelink = "/camphome/products/remove/" + product._id %>
<div class="prod">
<!--<div class="prodImage"></div>-->
<h2><%= product.name %></h2>
<p>Starting: <span class="moment"><%= moment(product.startDate).format('MMM Do YYYY hh:mm') %></span><br/>
Other Starting:
Places: <%= product.places.max %><br/>
Number Booked: <%= product.places.booked %><br/>
Price: €<%= product.cost %>
</p>
<p hidden class="prodIdx"><%= idx %></p>
<p hidden class="prodId"><%= product._id %></p>
<a class="btn btn-info btn-sm" role="button" href="<%= editlink %>">Edit Product</a>
<% if (product.places.booked > 1 || 1===1) { %>
<a class="btn btn-info btn-sm" role="button" href="<%= removelink %>">Remove Product</a>
<% } %>
<!--<span hidden class="prodId" value="<%= product._id %>"></span>-->
<a class="btn btn-info btn-sm reserveButton" role="button" data-toggle="modal" data-target="#selfReserve">Reserve Place(s)</a>
<!-- Modal -->
<div id="selfReserve" 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">Reserve places on your own product.</h4>
</div>
<div class="modal-body">
<form id="selfReserveForm" action="" method="post">
<input class="form-control" name="selProd" id="selProd" type="hidden"></input>
<input class="form-control" name="action" id="action" type="hidden" value="reserve"></input>
<p>How many Places?</p>
<label for="reserveNum"></label>
<input class="form-control" style="width:30%" id="reserveNum" name="reserveNum" type="number" min='1' max="<%= product.places.max - product.places.booked %>" id="selfReservePlaces"></input>
<br/>
<button type="submit" class="btn btn-primary">Update!</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!--End of Modal-->
</div>
<% }) %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var prodArray = <%= prodArray %>; //THIS IS WHAT I WOULD LIKE!!.
// DIRTY WORK AROUND BELOW!!
$(document).ready(function(){
$('.reserveButton').click(function () {
//var prodIdx = $(this).siblings('.prodIdx').text();
//console.log(prodIdx);
var ID = $(this).siblings('.prodId').text();
$('#selProd').val(ID)
})
});
</script>
INDEX.js
router.get('/products', function (req,res, next) {
var Product = mongoose.model('products');
Product.find({campID:req.user.data._id})
.sort({startDate:1})
.exec( function (error, results){
res.render('camphome',{
title: 'Products',
middle: 'products',
classname: 'products',
prodArray: results,
moment: moment,
socialIcons: socialIcons,
user: req.user,
userdata: req.user.data,
isAuthenticated: req.isAuthenticated()
})
})
})