I am trying to call a JavaScript function in my mustache template, but I keep getting errors when using a script tag to call it.
I have tried using escape tags on the script but it still does not work. I have searched around a bit and have not been able to find anything that helps with my problem.
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet" type="text/css"> <!--So far there may be multiple CSS pages to manage the overall layout -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" type="text/javascript"></script>
<script>
function generateFields(amt){
var htmlElements = "";
for(var i = 0; i < amt; i++)
{
htmlElements += '<div>{{i}}: <input type="text" class="inputAnswer"></div>'
}
}
</script>
</head>
<body>
<script id="studentAnswerTemplate">
var data = {
assignmentName: "Assignment 2",
questionAmt: 5,
generateFields: function(amt){
var htmlElements = "";
for(var i = 0; i < amt; i++)
{
htmlElements += '<div>{{i}}: <input type="text" class="inputAnswer"></div>'
}
}
};
var template = [
'<div class="container">',
'<div class="row">',
'<div class="jumbotron text-center">',
'<div class="col-4"></div>',
'<div class="col-4 mx-auto text-center">',
'<img class="img-fluid" src="UTPB_LOGO.png" alt="n/a">',
'</div>',
'<div class="col-4"></div>',
'<div class="row"></div>',
'<h3>{{assignmentName}}</h3>',
'</div>',
'<nav class="navbar navbar-expand-sm">',
'</nav>',
'</div>',
'<br><br>',
'<div class="row">',
'<div class="col-md-3">',
'<br>',
'</div>',
'<div class="col-md-5" id="middle">',
'<h2>Answers</h2>',
'<form action="/action_page.php">',
'<p>Please answer each question to the best of your ability.</p>',
'<div>',
'<form action="/action_page.php">',
/*need to autogenerate blanks using data from DB here*/
'<script>{{generateFields(5)}}</script>',
/*here is where I run into issues ^^*/
'</form>',
'</div>',
'<button type="submit" class="btn btn-primary">Submit</button>',
'</form>',
'</div>',
'<div class="col-md-4">',
'</div>',
'</div>',
'<br><br><br><br>',
'<div class="row">',
'<footer class="page-footer font-small black">',
'<div class="footer-copyright text-center py-3">© 2019 Copyright --, All rights reserved',
'<br>',
'</div>',
'</footer>',
'</div>',
'</div>'
].join("\n");
var html = Mustache.render(template, data);
$("body").append(html);
</script>
</body>
I'm hoping to generate a number of text fields using this function, but I am unable to execute the function at this point in time. Thank you!
Related
I have taken a small look around here and I can see this is a problem that does occur, but I am still not sure of the solution:
I have a JS Bin illustrating this issue:
https://jsbin.com/toqirix/edit?html,js,output
To replicate the issue:
Put "0" into the first input.
Put "2" into both the next inputs (or any number that is identical).
Click the button and the result should be a popover that says "You have chosen 0, this needs to be non-zero"
Change the "0" in input-a to any non-zero number.
Click the button again - now nothing happens.
What is meant to happen is the next "if" statement should be called. This will tell you that b and c should not be the same.
So, why is this not happening?
How can I make it so that after the button is clicked and the popup is removed that the next popup will come up if the button is clicked again?
The JS (located at JSBin)
Snippet
document.getElementById("submit").addEventListener("click", calc);
function calc() {
let a = parseFloat(document.getElementById("a").value);
let b = parseFloat(document.getElementById("b").value);
let c = parseFloat(document.getElementById("c").value);
let output = document.getElementById("output");
if (a === 0) {
$(this).popover({
placement: "bottom",
content: '<textarea class="popover-textarea"></textarea>',
template: '<div class="popover"><div class="arrow"></div>' +
'<div class="row"><div class="col-3 my-auto">' +
'</div><div class="popover-content col-9">You have chosen 0, this needs to be non-zero' +
"</div></div>",
});
$(this).popover("show");
$(this).click(function() {
$(this).popover("hide");
});
return false;
} else if (b === c) {
$(this).popover({
placement: "bottom",
content: '<textarea class="popover-textarea"></textarea>',
template: '<div class="popover"><div class="arrow"></div>' +
'<div class="row"><div class="col-3 my-auto">' +
'</div><div class="popover-content col-9">You have chosen b and c to be the same, they need to be different' +
"</div></div>",
});
$(this).popover("show");
$(this).click(function() {
$(this).popover("hide");
});
return false;
}
}
<form>
<input type="number" id="a">
<input type="number" id="b">
<input type="number" id="c">
<button type="button" id="submit">Hit me</button>
</form>
<p id="output"></p>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Using #Rob Lao's suggestion:
Put $(this).popover("dispose"); before each of the $(this).popover and remove all the $(this).click(function() { $(this).popover("hide"); });
This gives:
document.getElementById("submit").addEventListener("click", calc);
function calc() {
let a = parseFloat(document.getElementById("a").value);
let b = parseFloat(document.getElementById("b").value);
let c = parseFloat(document.getElementById("c").value);
let output = document.getElementById("output");
if (a === 0) {
$(this).popover("dispose");
$(this).popover({
placement: "bottom",
content: '<textarea class="popover-textarea"></textarea>',
template:
'<div class="popover"><div class="arrow"></div>' +
'<div class="row"><div class="col-3 my-auto">' +
'</div><div class="popover-content col-9">You have chosen 0, this needs to be non-zero' +
"</div></div>",
});
$(this).popover("show");
return false;
} else if (b === c) {
$(this).popover("dispose");
$(this).popover({
placement: "bottom",
content: '<textarea class="popover-textarea"></textarea>',
template:
'<div class="popover"><div class="arrow"></div>' +
'<div class="row"><div class="col-3 my-auto">' +
'</div><div class="popover-content col-9">You have chosen b and c to be the same, they need to be different' +
"</div></div>",
});
$(this).popover("show");
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<title>JS Bin</title>
</head>
<body>
<form>
<input type="number" id="a">
<input type="number" id="b">
<input type="number" id="c">
<button type="button" id="submit">Hit me</button>
</form>
<p id="output"></p>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
when I click the button it will open a pop-up screen with the image ID,image file name , image text output and date with image with in the pop up screen for each rows.I provided a screenshot with the table layout and my code. I’m having trouble when I click on the button it will not show me the information for each row.
$(document).ready(function() {
$("#search").keyup(function() {
_this = this;
$.each($("#article_table tbody tr"), function() {
if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
$.getJSON("../Image_to_text_with_Tesseract/images_content_json.json", function(data) {
console.log(data) //just to log in console as well
var article_data = '';
$.each(data, function(key, value) {
article_data += '<tr>';
article_data += '<td>' + value.Image_id + '</td>';
article_data += '<td>' + value.image_file_name + '</td>';
article_data += '<td>' + value.Image_Text_output + '</td>';
article_data += '<td>' + value.date + '</td>';
article_data += '<td><img src="' + value.image_file_name + '"></td>';
article_data += '<td><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="Show" >' + value.button + '</button></td>';
article_data += '</tr>';
});
$.each(data, function(key, value) {
article_data += '<h4>' + value.Image_id + '</h4>';
});
$('#article_table').append(article_data);
});
});
table {
border: 2px solid #666;
width: 10%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
td {
width: 1%;
}
img {
width: 20%;
}
<head>
<title>Page Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="../webDatabase/css/style.css" rel="stylesheet">
</head>
<body>
<input type="text" class="form-control pull-center" id="search" placeholder="Type to search table...">
<div id="container">
<div id="one_article" style="">
<table id="article_table" class="table table-bordered ">
<td>Image_id</td>
<td>image_file_name</td>
<td>Image_Text_output</td>
<td>date</td>
<td>Show_image</td>
<td>View</td>
</table>
</div>
</div>
<div class="modal fade" id="myModal" 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">{{Image_id}}</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
I am dynamically creating start and end time drop down fields. I have one more remove link fileds also in my app. But when I use 'tab' key I can see the dropdown in remove button also. How should I avoid the droopdown in my remove button. How should I get rid of the time picker drop down in my remove button
my script is
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<input class="btn btn-link" onclick="addtextbox()" type="button" value="Add">
</div>
<div id="ToolsGroup">
</div>
</div>
<script>
var count = 0;
function addtextbox() {
var newTextBoxDiv = document.createElement('div');
newTextBoxDiv.id = 'Tools';
document.getElementById("ToolsGroup").appendChild(newTextBoxDiv);
newTextBoxDiv.innerHTML = '<form class="form-inline"><div class="form-group"><label class="col-md-4 control-label" for="starttime">Start time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dstarttime' + count + '" placeholder="starttime" required> </div></div>' +
'<div class="form-group"><label class="col-md-4 control-label" for="endtime">End time</label><div class="col-md-4"><input type="time" class="form-control input-md" id="dendtime' + count + '" placeholder="endtime"></div></div>' +
'<input type="button" value="Remove" class="reomvetools" onclick="removeTextArea(this);"></div><div id="dresultDiv' + count + '"></div></form>'
count++;
$('#Tools input').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
};
function removeTextArea(inputElement) {
var el = inputElement;
while (el.tagName != 'DIV') el = el.parentElement;
el.parentElement.removeChild(el);
counter--;
}
</script>
</body>
</html>
Instead of ("#tools input").timepicker ,I have tried giving the ("#form -group").timpicker,that doesnt work.
I tried changing the remove button class to 'btn btn-link' .That didnt work.
how should i do this? If I use the mouse I dont see the time dropdown in 'remove' button .If I use tab I see the dropdown. Can someone help me to get rid of the drop down in remove button?
Just define the input type explicity for time and you are good to go
$('#Tools input[type=time]').timepicker({
timeFormat: 'HH:mm',
interval: 30,
use24hours: true,
scrollbar: true,
});
I have created 2 jsp pages.In the 1st jsp screen there is a button called "display".when i click this button the page should redirect to the 2nd jsp screen.
I was able to redirect to the 2nd jsp page using window.location() in javascript but the ajax call fails and goes to the error function(). When i click the display button it does not show any dynamic data that is appended to the 2nd jsp.(shows only static content).`
//this is my javascript
var rowsperpage = 10;
var pageno = 1;
var totalpages = 0;
var tablecount=0;
function display()
{
var flag="two";
$.ajax({
type: "POST",
url: 'maunualmappingloadutility.jsp?value='+flag+'&Rowsperpage='+rowsperpage+'&Pageno='+pageno,
success: function(response)
{
var data = $.parseJSON(response);
var status = data.status;
if(status && status == "sucess")
{
var tbl="";
var textfilemapping=data.textfilemapping;
$.each(textfilemapping, function(key, value)
{
var id = value.id;
var data1 = value.col1;
var data2 = value.col2;
var data3 = value.col3;
var data4 = value.col4;
var data5 = value.col5;
var data6 = value.col6;
var data7 = value.col7;
var data8 = value.col8;
var data9 = value.col9;
tbl += '<tr id="'+id+'">';
tbl += '<td >' + id + '</td>';
tbl += '<td >' + data1 + '</td>';
tbl += '<td >' + data2 + '</td>';
tbl += '<td >' + data3 + '</td>';
tbl += '<td >' + data4 + '</td>';
tbl += '<td >' + data5 + '</td>';
tbl += '<td >' + data6 + '</td>';
tbl += '<td >' + data7 + '</td>';
tbl += '<td >' + data8 + '</td>';
tbl += '<td >' + data9 + '</td>';
tbl += '</tr>';
});
// window.location="display.jsp";
$("#textfiledata").html(tbl);
pageno = data.PAGENO;
totalpages = data.TOTALPAGES;
rowsperpage = data.ROWSPERPAGE;
enablePrevNext();
if(pageno == 1) {
$("#btnPrev").addClass("disabled");
} else if(pageno == totalpages) {
$("#btnNext").addClass("disabled");
}
$("#txtPage").val(pageno);
$('#lblTotalPages').html(totalpages);
}
else
{
alert("Error in displaying snomed info data");
return false;
}
},
error: function()
{
alert("Error in displaying snomed info data");
return false;
}
});
}
function Redirect() {
window.location="display.jsp";
display();
}
function om_nPageRefresh() {
location.reload();
}
//this is the 1st jsp with the display button in it
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/textfileloadutility.js"></script>
</head>
<body>
<div class="blue-nav">
<div class="blue-pad">
<div class="dropdown referal-drop pull-left">
SNOMED CT Manual Mapping Load Utility
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="fileter-wrap">
<form class="form-horizontal" role="form">
<div style=text-align:center;margin:auto;>
<input class="btn btn-blue btn-sm btn-xs " id="clickMe" type="button" value="Load" onclick="check();" />
</div>
<div id="Message"></div>
</form>
<div class="clearfix spacer10"></div>
<div class="clearfix spacer10"></div>
</div>
<div class="fileter-wrap">
<label>Task status:</label>
<div style=text-align:center;margin:auto;>
<input style=text-align:center; id="click" type="submit" value="Display" onclick="Redirect();" />
</div>
</div>
</body>
</html>
//this is the 2nd jsp where the data is to be displayed
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/textfileloadutility.js"></script>
</head>
<body>
<div class="blue-nav">
<div class="blue-pad">
<div class="dropdown referal-drop pull-left">
SNOMED CT Manual Mapping Load Utility
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="fileter-wrap">
<table class="table table-bordered grey-table nomargin" id="">
<thead>
<tr>
<th >ReferenceId</th>
<th >Id</th>
<th >Effective time</th>
<th >Active</th>
<th >Module id</th>
<th >Concept id</th>
<th >Language code</th>
<th >Type id</th>
<th >Term</th>
<th >CaseSignificanceid</th>
</tr>
</thead>
<tbody id="textfiledata">
</tbody>
</table>
<div class="clearfix spacer10"></div>
<div class="col-sm-15 cust-paged">
<div class="col-sm-5">
<button id="btnPrev" class="btn btn-lblue btn-xs" onclick="onClickPrev();">PREVIOUSPAGE</button>
<span>Page</span>
<input type="text" value="" class="search" id="txtPage" onkeydown="search(this)" >
<span>of <label id="lblTotalPages"></label></span>
<button id="btnNext" class="btn btn-lblue btn-xs" onclick="onClickNext();">NEXTPAGE</button>
</div>
</div>
<div class="clearfix spacer10"></div>
</div>
</body>
</html>
I have created 2 jsp pages.In the 1st jsp screen there is a button called "display".when i click this button the page should redirect to the 2nd jsp screen.
I was able to redirect to the 2nd jsp page using window.location() in javascript but the ajax call fails and goes to the error function(). When i click the display button it does not show any dynamic data that is appended to the 2nd jsp.(shows only static content).`
NOTE:if i create the display button in the 2nd jsp the data is getting displayed properly in the 2nd jsp itself.
I can't get <div class="inner"> to append correctly so it wraps:
It should be:
<div class="module">
<div class="<h2>...</h2>
<div class="inner">
...
...
...
</div><!-- end .inner-->
</div><!-- end .module-->
Instead, when I inspect in Chrome developer tools, it has the closing tag next to it:
<div class="inner"></div>
Here's the script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NDM Test</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script>
$(document).ready(function () {
$.get('feed.xml', function (feed) {
$('.module').append('<h2><span>Dynamic heading</span></h2>');
$('.module').append('<div class="inner">');
$(feed).find('section').each(function () {
var title = $(this).find('title').text();
var html = '<div><h3>' + title + '</h3>';
html += '<ol>'
$(this).find('article').each(function () {
var headline = $(this).find('headline').text();
var url = $(this).find('url').text();
html += '<li>' + headline + '</li>';
});
$('.module').append($(html));
$('.module').append('</ol></div>');
});
$('.module').append('</div>'); /* this should close .inner??*/
$('.module').append('<p>More </p>');
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="module">
</div>
</div>
</body>
</html>
Thanks in advance :)
try this code,
var html ='<div class="inner">';
$(feed).find('section').each(function () {
var title = $(this).find('title').text();
html += '<div><h3>' + title + '</h3>';
html += '<ol>';
$(this).find('article').each(function () {
var headline = $(this).find('headline').text();
var url = $(this).find('url').text();
html += '<li>' + headline + '</li>';
});
html += '</ol></div>';
});
html +='</div>';
$('.module').append($(html));