Develop Reference

Display results from api after user input

I'm learning JS and I need some help figuring out why my info isn't getting populated in the html. I'm just trying to get the basic functionality to work, so that I can continue to expand on it.
User is supposed to input a 3 digit route value, which will then return all the route information from an api call. I was able to get the route info to display earlier when I got the api call set up, but I'm struggling to figure why it's not displaying now that I tried adding in a feature to allow the user to input the route. See attached pen
HTML
<div class='container'>
<h1 id='header'>Route Info</h1>
<input id="input" type="text" placeholder="Enter 3 digit route ex 005" >
<input type="button" value="Get Route" onclick="getRoute()">
<br>
<p id = 'p'><span id="routeInfo"></span></p>
</div>
Javascript
$(document).ready(function() {
var route = $('#input');
getRoute.click(function() {
var scriptTag = document.createElement('SCRIPT');
scriptTag.src = "https://wsdot.wa.gov/Traffic/api/Bridges/ClearanceREST.svc/GetClearancesAsJson?AccessCode=59a077ad-7ee3-49f8-9966-95a788d7052f&callback=myCallback&Route=" + route;
document.getElementsByTagName('HEAD')[0].appendChild(scriptTag);
var myCallback = function(data) {
var myarray = Array.prototype.slice.call(data);
document.getElementById("routeInfo").innerHTML = JSON.stringify(myarray);
}
});
});

It looks like you are jumping through a lot of hoops you don't need to. As long as you are using Jquery, you should look into getting the api data with an ajax request. It's much easier and more intuitive. Also you have a few problems such as trying to get the input value with var route = $('#input'); which return the actual input element. You are also processing the returned data in a way that won't work.
Here's a basic example to get you going on (IMO) a better track:
function getRoute() {
var route = $('#input').val();
var url = "https://wsdot.wa.gov/Traffic/api/Bridges/ClearanceREST.svc/GetClearancesAsJson?AccessCode=59a077ad-7ee3-49f8-9966-95a788d7052f&Route=" + route;
$.ajax({url: url, success: function(data){
var retValue = "";
var i = 0
for(i; i< data.length; i++) {
retValue += data[i].BridgeName + "<br>"
}
document.getElementById("routeInfo").innerHTML = retValue;
}});
}

If you intend functionality in the getRoute.click callback to run, you need to rewrite that as a method function getRoute(), or get the button element via jQuery and assign that to the variable getRoute. As it stands, you have the click method wired via the markup to a function named getRoute which does not exist. In the JS you are trying to register a click event to a jQuery object named getRoute which does not exist.

getRoute needs to be a global function for it to be called from html :
getRoute = (function() {
Also, myCallback needs to be a global function for it to be called from your loaded script (just remove the var):
myCallback = function(data) {

How to set variable value from javascript to JSP?

I need to draw a table dynamically depending on the data store in a database. When the first web page (validator.jsp) is loaded it goes to a dataBase and returns an ArrayList called cert. (cert hast Description, value, etc).
<% java.util.ArrayList<Certificate> cert = OperacionesVidaDollars.getCertificates();%>
After that when the page finishes loading, a javascript function is called (function drawCertificates). This function will draw as many tables as certificates the ArrayList has.
<script type="text/javascript">
window.onload = drawCertificates;
function drawCertificates(){
alert("page finish loading, staring to draw certificates");
var i;
for(i=0;i<<%=cert.size()%>;i++){
createTable(i);
}
}
</script>
As you can see in the function create table, the variable text is suppost to change depending on i
text = document.createTextNode("<%=cert.get(i).getDescription()%>");
In order to update that variable i, I first call the JSP setVariable, to update the counter and then I try to use it in getDescription like:
text = document.createTextNode("<%=cert.get(request.getAttribute("count")).getDescription()%>");
I have this setVariable.jsp
<%
int num = Integer.valueOf(request.getParameter("number"));
request.setAttribute("count", num);
request.getRequestDispatcher("VidaDollarsCC.jsp").forward(request, response);
Cookie cookie = new Cookie("countCookie",String.valueOf(num));
cookie.setMaxAge(60*60*24);
response.addCookie(cookie);
%>
In other JSP (validator.jsp)I have this javascript function who it supposed to change the variable value.
function setVariable(number){
alert("setting the number " + number);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
}
xmlhttp.open("POST", "setVariable.jsp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("number="+number);
}
In the same jsp (validator.jsp) I have this function to createTable(uniqID) where I need that the number is updated depending on the uniqID because I have an ArrayList which has some information that I want to be shown.
function createTable(uniqID){
setVariable(uniqID);
text = document.createTextNode("<%=cert.get(request.getAttribute("count")).getDescription()%>");
}
But is not working. Does someone knows why? How can I solve it? if you have other ideas that I can implement, that also would be great.

I am assuming that your AJAX call is successfully sending number to setVariable.jsp.
1) You have to realize that AJAX call is a different request and is different then the request you have in your validator.jsp page.
2) You cant write JSP expression from Javascript and have it being resolved to HTML since your JSP needs to be reprocessed by server side.
To answer to your question on how to solve this, we need to know what you are trying to do in the first place.
Update:
1) Looks like the uniqID and count are same number. Why not just use uniqID in your javascript.
2) Why not pass certificate description into the createTable too. Like so:
<% java.util.ArrayList<Certificate> cert = OperacionesVidaDollars.getCertificates();
StringBuilder jsCerts = new StringBuilder("[");
boolean first = true;
for (Certificate cr : certs){
if (!first) jsCerts.append(",");
first = false;
jsCerts.append("\"").append( cr.getDescription() ).append("\"");
}
jsCerts.append("]");
%>
<script type="text/javascript">
window.onload = drawCertificates;
function drawCertificates(){
alert("page finish loading, staring to draw certificates");
var certArray = <%=jsCerts.toString()%>;
var i;
for(i=0;i<certArray.length;i++){
createTable(i, certArray[i]);
}
}
</script>
function createTable(uniqID, desc){
setVariable(uniqID);
text = desc;
}
The point here is that you need to write all the necessary data into the HTML to be able to use it in JavaScript, you cant access request attributes from JavaScript.

Show image after button click

I have a controller method that returns image in byte array, from MongoDB, and I want to show it in my view:
<HttpPost()>
Function ShowImage(id As String) As FileContentResult
Dim Handler = New MongoDBHandler()
Dim newString = id.Replace(vbLf, "").Trim().Replace("""", String.Empty)
Dim byteArray = Handler.ReadImage(newString)
Return File(byteArray, "image/png")
End Function
I have the javascript function:
function postCardNumber(elm) {
var CardNumber = $(elm).closest("tr").find(".card-number").html();
var $img = $('<img>');
$img.attr("src", "/MyController/MyMethod/CardNumber");
$("#myModal").append($img);
}
The Table:
When the "Show" button click, on the table, the "No." cell (and is data) is sent to the JS function, and pass to the controller, then i try to create new image element with, and add it to my popup modal for show.
The problem is i cant get the controller response, and spent hours in google search for it, any solutions please?

try following and check if it work. Please verify that the controller name you are specifying in following URL is correct.
I am not sure that your controller name is "MyController". check it and change if it is wrong.
If following code doesn't work, send me the url it generated in comment
function postCardNumber(elm) {
var CardNumber = $(elm).closest("tr").find(".card-number").html();
var $img = $('<img>');
$img.attr("src", "#(Url.Action("ShowImage","CreditCard"))/" + CardNumber);
$("#myModal").append($img);
}

Calling same function multiple times with different arguments jquery

I am dynamically creating html elements like this
<li> Schedule</li>,
titleObj.id and titleObj.profile_id are data from ajax response
The created elements will look like the below one.
<li> Schedule</li>
The above anchor tag calls scheduleInterview(id,profile_id).
scheduleInterview() gets the parameters and stores it to pass to ajax function and open a modal(has a form) to get more form input values which will also be passed to the same ajax function along with the parameters value. Now the issue is, modal form action is set to the same function scheduleInterview() cause i need both parameters and form input values.
function scheduleInterview(id,profile_id){
console.log("The student id is "+id);
console.log("the profile id is "+profile_id);
$('#myModal').modal('show');
var candidate_id = id;
var profile_id = profile_id;
var inter_name = $('#inter_name').val();
var date = $('#inter_date').val();
var time = $('#inter_hr').val();
var meridian = $('#inter_mr').val();
candidate_id = $("#m_can_id").val();
profile_id = $("#m_can_p_id").val();
var dataString = 'inter_name=' +inter_name+ '&inter_date=' +date+ '&inter_time=' +time+ '&inter_meridian=' +meridian+ '&candidate_id=' +candidate_id+ '&profile_id=' +profile_id;
console.log(dataString);
$.ajax({
})
}
The above method log the id and profile_id as 15 and 22 exactly. After that it opens the modal which has a form whose action points to the same function but without parameters.
<form action ="javascript:scheduleInterview()" method= "post" id = "sche_inter_form">
</form>
So it overrides parameters value to undefined. But I need the parameters value along with the form input values of the modal. I really don't know how to go about this. Finally after modal submission i have dataString value like this
inter_name=Jonathan&inter_date=12/06/1995&inter_time=02:30&inter_meridian=AM&candidate_id=undefined&profile_id=undefined

How to grab value of read-only text field and use in angular js result

I have a textfield that is read only and pulling it's value from the query string. I can't get the value set in an output of javascript when bound with AngularJS.
<input type="text" class="form-control accountNumber" name="accountNumber" id="accountNumber" ng-model="accountNumber" ng-controller="main" data-placement="top" readonly>
function main($scope) {
var url = window.location.href;
var accountId = url.substr(url.indexOf("=") + 1);
$scope.accountNumber = accountId;
}
The account number needs to be placed into the "publisherId" field within the resulting javascript:
<script type="text/javascript" src="//cdnstatic.domain.com/"></script>
<script type="text/javascript">
window.addEventListener("load", function(e) {
var playerH = new Player({
adTag:"{{adTag}}",
fontElClass:"{{fontTag}}",
playerClass:"{{playerClass}}",
publisherId: "{{accountNumber}}"<===NEEDS TO BE REPLACED WITH VALUE FROM READ ONLY FIELD
});
});
</script>
To clarify:
1) function main($scope){} grabs the URL (which is also displayed in the textfield which is readonly), does some work on it and the value is stored in accountId.
2) That value is then supposed to be set in $scope.accountNumber, and used in the "publisherId:" field.
The resulting JavaScript is displayed to the user as text(not to be run on the page), and should have the {{accountNumber}} replaced with the value of the accountId.
The issue is that when the field is read only, its not showing the account number. It is also not setting the value in the publisherId field.

Here's my plnkr : Link,
I think your problem is that your controller is not defined for the entire view, just for your input.