I'm trying to create a query using Coldfusion (cfquery) to retrieve several dollar amounts, add them, and then see if it matches the dollar amount being calculated in the application. But, it's not doing anything.
I'm attempting to do all of this in javascript.
Here is the code.
function ValidateFunding(){
var casenum = document.getElementById('CaseNum').value;
var cycle = document.getElementById('Cycle').value;
var year = document.getElementById('FSYear').value;
var cnty = document.getElementById('selCounty');
var cntyID = cnty.options[cnty.selectedIndex].value;
<cfquery name="PSP" datasource="QueryTest">
SELECT g.Fee220 + g.Fee330 + g.Fee456 + g.Fee225 AS GrandTotal
FROM ProgFees g INNER JOIN County ON g.CountyID = cntyID
WHERE g.Year = year
AND g.Cycle = cycle
AND g.CaseNum = casenum
</cfquery>
if (document.getElementById('totbud').value = PSP.GrandTotal){
alert('The fee matches.');
return false;
}
else
{
alert('Fees do not match.');
}
return true;
}
Here is a page I worked up for a test. There are comments in the code to help explain what's going on. Two key lines are the <cfajaxproxy> tag and jd.getData(); is my AJAX call to CF.
<cfscript>
variables.folders = {"client":["Favorites","Not Used"],"org":["2012","2011"],"public":["New","Old"]};
</cfscript>
<cfajaxproxy cfc="cfc.jsondata" jsclassname="emaildata" />
<!DOCTYPE html>
<html>
<head>
<title>DevJSON</title>
<script src="js/jquery.1.7.2.js" type="text/javascript" language="JavaScript"></script>
<script src="js/handlebars.js" type="text/javascript" language="JavaScript"></script>
<link rel="stylesheet" href="css/json.css" type="text/css"/>
<script type="text/javascript">
<!--- toScript will output CF vars as js vars --->
<cfoutput>
var #toScript(variables.folders, 'folders')#;
var #toScript(cgi.http_host & '/data/emaildata.json','jsonPath')#;
</cfoutput>
var jd = new emaildata();
// setup my js object from cfajaxproxy above
var buildGrid = function(dataObj){
var menus;
var source = $('#grid').html();
var template = Handlebars.compile(source);
$("#mainContent").hide();
$("#mainContent").children().remove();
$("#mainContent").append(template(dataObj));
$("#mainContent").fadeIn('slow');
}
// Error handler for the asynchronous functions.
var badJson = function(statusCode, statusMsg){
alert('Status: ' + statusCode + '<br /><br /> ' + statusMsg);
}
// output data
var buildmenu = function(){
$.each(folders, function(fkey,fval) {
if(this.indexOf() < 1){
$('li[data-type="' + fkey + '"] > div').append('<ul class="' + fkey + '"></ul>');
}
$.each(fval, function(dkey, dval){
$('[class="' + fkey + '"]').append('<li id="' + fkey + '">' + dval + '</li>');
});
});
}
$(document).ready(function(){
buildmenu();
$('.directory > ul > li').click( function() {
//set callback, errorhandler and then call the getData function in my CFC
jd.setCallbackHandler(buildGrid);
jd.setErrorHandler(badJson);
jd.getData(this.id);
$(".directory > ul > li").removeClass("highlight");
$(this).addClass('highlight');
});
$("#mainContent").css('display','none');
$('li[data-type]').css('cursor','pointer');
});
</script>
<!--- Setup handlebars template --->
<script id="grid" type="text/x-handlebars-template">
<div class="gridDetail">
{{#each DATA}}
<div class="row">
{{#each this}}
<span class="cell">
{{.}}
</span>
{{/each}}
</div>
{{/each}}
</div>
</script>
</head>
Related
I am trying to print objects from an API using JSON and AJAX and it works when I use console.log to view it. But my generateCreatureDiv function does not work for some reasons.
This is my code:
$(document).ready(function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
var creatureData = JSON.parse(response);
console.log(creatureData);
// get a creature from the data
for (var i = 0; i < creatureData.creatures.length; i++) {
var creature = creatureData.creatures;
console.log(creature[i]);
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
}
function generateCreatureDiv(creature) {
var CreatureDiv = $("<div />");
console.log("hoe");
CreatureDiv.id = "CreatureInfo";
console.log("hoe")
$("CreatureDiv").append("<h1>" + creature.name + "</h1>");
console.log("hoe");
$("CreatureDiv").append("<img>" + creature.image + "</img>");
return CreatureDiv;
console.log("hoe");
}
// create a select option for the object
// Have a
}
};
xhttp.open("GET", "https://api.myjson.com/bins/17f3jl", true);
xhttp.send();
});
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.1.1.min.js"></script>
<script src="./script.js"></script>
<script src="./stylesheet.css"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="CreatureEntry">
<select id="SelectOption">
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
remove the " quotes in $("CreatureDiv") .Its not select with any ID or Class.And on your code Already declare with var CreatureDiv = $("<div />"); .So change as like this
function generateCreatureDiv(creature) {
var CreatureDiv = $("<div />");
console.log("hoe");
CreatureDiv.id = "CreatureInfo";
console.log("hoe")
$(CreatureDiv).append("<h1>" + creature.name + "</h1>");
console.log("hoe");
$(CreatureDiv).append("<img>" + creature.image + "</img>");
return CreatureDiv;
console.log("hoe");
}
And change like this
document.getElementById("CreatureEntry").innerHTML += generateCreatureDiv(creature[i]);
instead of
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
Because innerHTML =generateCreatureDiv(creature[i]); it will reset previous value on each time call
This line is erasing all of the content of your DIV for each element of your array:
document.getElementById("CreatureEntry").innerHTML = generateCreatureDiv(creature[i]);
Remove the first part and just call your method and append the results?
$("CreatureEntry").append(generateCreatureDiv(creature[i]));
Also, you need to remove the quotes wherever you're referencing $("CreatureDiv") and use $(CreatureDiv).
I have a PHP script hosted in the root of a working LAMP server which provides me with the output of a MySQL query. The typical output of values.php:
2017-01-12 22:02:17/12/2017-01-12 22:03:18/12/2017-01-12
22:04:18/12/2017-01-12 22:05:18/12/2017-01-12 22:06:18/12/2017-01-12
22:07:19/12/2017-01-12 22:08:19/12/2017-01-12 22:09:19/12/2017-01-12
22:10:20/12/2017-01-12 22:11:20/12/2017-01-12 22:12:20/12/2017-01-12
22:13:21/12/2017-01-12 22:14:21/12/2017-01-12 22:15:21/12/2017-01-12
22:16:21/12/2017-01-12 22:17:22/12/2017-01-12 22:18:22/11/2017-01-12
22:19:22/11/2017-01-12 22:20:23/12/2017-01-12 22:21:23/11/2017-01-12
22:22:23/11/2017-01-12 22:23:24/11/2017-01-12 22:24:24/11/2017-01-12
22:25:24/11/2017-01-12 22:26:25/11/2017-01-12 22:27:25/11/2017-01-12
22:28:25/11
I am trying to use $.get to break it up and list it on a page. My code is as follows but it won't work:
<!DOCTYPE html>
<html>
<body>
<script>
function() {
var switch1 = true;
$.get('values.php', function(data) {
data = data.split('/');
for (var i in data)
{
if (switch1 == true)
{
document.write(data[i] + " Temp: ");
switch1 = false;
}
else
{
document.writeln(data[i]);
switch1 = true;
}
}
});
};
</script>
</body>
</html>
Any ideas where I am going wrong?
I should have added the code <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> in the html. Final code is as follows and works fine:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var switch1 = true;
$.get('values.php', function(data) {
data = data.split('/');
for (var i in data)
{
if (switch1 == true)
{
document.write(data[i] + " Temp: ");
switch1 = false;
}
else
{
document.write(data[i] + "<br>");
switch1 = true;
}
}
});
</script>
</body>
</html>
Thanks to all.
I don't know what your PHP script actually returns but if I store manually to data it seems to work the way you expected. Can you explain what exactly does not work?
I would shorten code bit though:
var switch1 = true;
var data = "2017-01-12 22:02:17/12/2017-01-12 22:03:18/12/2017-01-12 22:04:18/12/2017-01-12 22:05:18/12/2017-01-12 22:06:18/12/2017-01-12 22:07:19/12/2017-01-12 22:08:19/12/2017-01-12 22:09:19/12/2017-01-12 22:10:20/12/2017-01-12 22:11:20/12/2017-01-12 22:12:20/12/2017-01-12 22:13:21/12/2017-01-12 22:14:21/12/2017-01-12 22:15:21/12/2017-01-12 22:16:21/12/2017-01-12 22:17:22/12/2017-01-12 22:18:22/11/2017-01-12 22:19:22/11/2017-01-12 22:20:23/12/2017-01-12 22:21:23/11/2017-01-12 22:22:23/11/2017-01-12 22:23:24/11/2017-01-12 22:24:24/11/2017-01-12 22:25:24/11/2017-01-12 22:26:25/11/2017-01-12 22:27:25/11/2017-01-12 22:28:25/11"
data = data.split('/').map(function(i){
document.write(i + (switch1 ? " Temp: " : ""));
switch1 = !switch1;
});
Give this a try, should do what you are looking for...
var content = "2017-01-12 22:02:17/12/2017-01-12 22:03:18/12/2017-01-12 22:04:18/12/2017-01-12 22:05:18/12/2017-01-12 22:06:18/12/2017-01-12 22:07:19/12/2017-01-12 22:08:19/12/2017-01-12 22:09:19/12/2017-01-12 22:10:20/12/2017-01-12 22:11:20/12/2017-01-12 22:12:20/12/2017-01-12 22:13:21/12/2017-01-12 22:14:21/12/2017-01-12 22:15:21/12/2017-01-12 22:16:21/12/2017-01-12 22:17:22/12/2017-01-12 22:18:22/11/2017-01-12 22:19:22/11/2017-01-12 22:20:23/12/2017-01-12 22:21:23/11/2017-01-12 22:22:23/11/2017-01-12 22:23:24/11/2017-01-12 22:24:24/11/2017-01-12 22:25:24/11/2017-01-12 22:26:25/11/2017-01-12 22:27:25/11/2017-01-12 22:28:25/11";
var regexp = /(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})\/(\d{2})/g;
var matches;
while ( matches = regexp.exec( content ) ) {
document.write( matches[1] + " Temp: " + matches[2] + "<br/>");
}
Hope this helps!
I've created this simple code that I'll use to store in the user's browser, so, I'd like to know how can I run a function when there's a selected radio and when I click the delete button, using JS or JQuery. Any help is appreciated.
Thanks in advance.
check it on liveweave
P.S.: Your browser should have WebStorage support
var taskCounter = 1 + Number(localStorage.getItem("count"));
var name = "de"+ taskCounter;
for(var i=1;i<taskCounter;i++){
var temp = "de" + i;
document.writeln("<br/>"+'<input type="radio" name="rad" value="'+localStorage.getItem(temp)+'" /> <label>'+localStorage.getItem(temp)+'</lable>');
}
function saveItUp(){
var desc = $('#descrip').val();
alert(desc);
// Store
localStorage.setItem(name, desc);
localStorage.setItem("count", taskCounter);
// Retrieve
console.log(localStorage.getItem(name));
console.log(localStorage.getItem("count"));
}
//This is where I'm trying to do that, I know selected doesn't exist, but I put it just for a better comprehension
function deleteItUp(){
$('input:radio').selected(function(){
if (this.checked) {
alert(this.value);
}
});
}
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="main">
<label>Task</label> <textarea id="descrip"></textarea>
<button onclick="saveItUp();" id="save">Save it</button>
<button onclick="deleteItUp();" id="delete">Delete</button>
</div>
</body>
</html>
I have edited your snippet. Use $('input[type="radio"]').prop('checked') to see whether the radio button is checked. You will need to modify the selector to get the appropriate radio button if there are multiple on the page.
var taskCounter = 1 + Number(localStorage.getItem("count"));
var name = "de" + taskCounter;
for (var i = 1; i < taskCounter; i++) {
var temp = "de" + i;
document.writeln("<br/>" + '<input type="radio" name="rad" value="' + localStorage.getItem(temp) + '" /> <label>' + localStorage.getItem(temp) + '</lable>');
}
function saveItUp() {
var desc = $('#descrip').val();
alert(desc);
// Store
localStorage.setItem(name, desc);
localStorage.setItem("count", taskCounter);
// Retrieve
console.log(localStorage.getItem(name));
console.log(localStorage.getItem("count"));
}
//This is where I'm trying to do that, I know selected doesn't exist, but I put it just for a better comprehension
function deleteItUp() {
if ($('input[type="radio"]').prop('checked')) {
alert('Deleting!');
} else {
alert('Delete radio not checked!');
}
}
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="main">
<label>Task</label>
<textarea id="descrip"></textarea>
<button onclick="saveItUp();" id="save">Save it</button>
<button onclick="deleteItUp();" id="delete">Delete</button>
<input type="radio">Check to delete
</div>
</body>
</html>
I've been trying other ways to achieve it, and I found a nice way that gave me the expected result, thank all of you who tried to help me.
var taskCounter = 1 + Number(localStorage.getItem("count"));
var name = "de" + taskCounter;
for (var i = 1; i < taskCounter; i++) {
var temp = "de" + i;
document.writeln("<br/>" + '<input type="radio" name="rad" value="' + temp + '" /> <label>' + 'Code: ' + temp + ' | Value: ' + localStorage.getItem(temp) + '</lable>');
}
function saveItUp() {
var desc = $('#descrip').val();
alert(desc);
// Store
localStorage.setItem(name, desc);
localStorage.setItem("count", taskCounter);
// Retrieve
console.log(localStorage.getItem(name));
console.log(localStorage.getItem("count"));
}
var selectedRadioId = 0;
$('input:radio').change(function() {
if (this.checked) {
selectedRadioId = this.value;
}
});
function deleteItUp() {
if (selectedRadioId !== 0) {
alert('Deleting!');
} else {
alert("Radio hasn't been checked!");
}
}
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="main">
<label>Task</label>
<textarea id="descrip"></textarea>
<button onclick="saveItUp();" id="save">Save it</button>
<button onclick="deleteItUp();" id="delete">Delete</button>
</div>
</body>
</html>
You are talking about firing an event when a radio button is checked and then calling a callback function: https://api.jquery.com/checked-selector/
When using the code below I am unable to add the HTML string to the innerHTML of the target HTMLElement. What am I doing wrong? Is there a better way to do this?
<html>
<head>
<title>Add HTML input with jQuery</title>
<!--
* This code is meant to include the jQuery library v.1.9.1
* from Google API
-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script>
$('document').ready(function(){
$('#add').click(function(){
var src = $('#src'); // alert(src);
var trgt = $('#src'); // alert(trgt);
var x = null;
var child = null;
var str = null;
if(null != src.val()){
alert(1);
x = trgt.children().length;
str = '<input type="text" name="array[]" id="index' + x + '" value="' + src.val() + '" />';
trgt.html().append(str);
src.val() = null;
}else{
alert('src value is emppty');
}
});
});
</script>
</head>
<body>
<div id="box">
<label></label> <input type="text" name="src" id="src" value="" /> <button id="add">+</button>
<div id="trgt">
</div>
</div>
</body>
</html>
var trgt = $('#src'); ... Your source and target selectors are the same.
This var trgt = $('#trgt') is not the only problem I noticed.
There is trgt.html().append(str); which should be trgt.append(str);.
And then src.val() = null;, are you trying to reset the <input> value? You can simply do it with src.val('');
See this jsfiddle.
I am making my first foray into javascript + jQuery, designing a simple page but encountering errors, I'm sure it's something silly but I've been over the code several times and can't spot it.
The error I receive is below:
The entire code is below (I've changed the dynamic '#' + elementname + 'perc' to a string and I get the same error), can anyone offer any insight?
<DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<!--<script src="js/dealercalc.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
$(".val-adjust").click(function(){
var name = $(this).attr('name');
var bit = $(this).attr('value');
setvalue(name,bit);
//discountbits['basic'] = false;
//$("#basedisper").text(discountlist['basic']);
});
$("#basdisyes").click(function(){
discountbits['basic'] = true;
//$("#test1").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val(gettotal());
});
}
);
function getpercbypurc(value){
return 0;
};
function setvalue(elementname,yesno){
discountbits[elementname] = yesno;
if (yesno) {
$("#basicperc").hmtl(discountlist[elementname] + "%");
} else {
$('#' + elementname + 'perc').hmtl("0%");
}
};
function gettotal() {
var total = 0;
for (var i=0; i<keys.length; i++){
if (discountbits[keys[i]] = true) {
total += discountlist[keys[i]];
}
}
return total;
};
function displaytotal(){
$('#totalper').html(gettotal());
};
var keys = ['basic', 'marketing'];
var discountlist = {
basic:20,
marketing:2
};
var discountbits = {
basic:true,
marketing:false
};
</script>
</head>
<body>
Base Discount<br>
<button class="val-adjust" name="basic" value="false">No</button>
<button class="val-adjust" name="basic" value="true">Yes</button>
<span id="basicperc">0</span>
<br>
<br>
Marketing Plan<br>
<button class="val-adjust" name="marketing" value="false">No</button>
<button class="val-adjust" name="marketing" value="true">Yes</button>
<span id="marketingperc">0</span>
<br>
<br>
Total<br>
<span id="totalper">0</span>
</body>
</html>
You have wrong spelling for html, hmlt should be html
Change
$("#basicperc").hmtl(discountlist[elementname] + "%");
To
$("#basicperc").html(discountlist[elementname] + "%");
you have a typo
$("#basicperc").hmtl(discountlist[elementname] + "%");
//-----^^^^---here
should be
$("#basicperc").html(discountlist[elementname] + "%");
you've made a typo, it's html not hmtl :)
Very obvious typo. It's html, not hmtl !