This is actually an Adobe AIR app, but since the problem I'm having is with very basic JavaScript, I thought I should put it here.
Here is the code:
<!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>
<title>KM Ciclo de Servicio</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ciclo.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function changefield()
{
#('#ciclo').append('ASD');
}
</script>
</head>
<body oncontextmenu="return false;">
<div id="topMenu">
<button class="menuItem" id="new" title="Nuevo"><img src="images/new.png" alt="Nuevo"/></button>
<button class="menuItem" id="save" title="Guardar"><img src="images/save.png" alt="Guardar"/></button>
<button class="menuItem" id="open" title="Abrir"><img src="images/open.png" alt="Abrir"/></button>
<input type="text" value="Momento cambiado" onkeypress="changefield()"/>
<div style="display: inline-block; float: right;">
Nuevo:
<button class="menuItem" id="momento">Momento</button>
<button class="menuItem" id="atributo">Atributo</button>
</div>
</div>
<div id="main" align="center">
<div id="ciclo"></div>
</div>
<script src="script/init.js" type="text/javascript"></script>
</body>
</html>
This is the function I'm trying to call:
<script type="text/javascript">
function changefield()
{
#('#ciclo').append('ASD');
}
</script>
However, my terminal tells me there's an error on line 20, which is:
<input type="text" value="Momento cambiado" onkeypress="changefield()"/>
The error says:
ReferenceError: Can't find variable: changefield
onkeypress at app:/index.html : 19
I have checked some tutorials on JavaScript functions to make sure (including the one at w3schools), and there doesn't seem to be anything wrong. I am calling the function exactly how these tutorials suggest I do so.
Any ideas on what's going on?
The proper syntax is this:
function changefield()
{
$('#ciclo').append('ASD');
}
This was a javascript syntax error:
#('#ciclo').append('ASD');
which caused the changefield function to not be defined.
Problem might be that jQuery creates $ variable, not #
function changefield()
{
$('#ciclo').append('ASD');
}
Because # should be $
function changefield() {
$('#ciclo').append('ASD');
}
This SyntaxError was causing the changefield function to not be created so the inline onkeypress couldn't find it.
Related
Below is the HTML. I load in the cdn hosted lib for PapaParse in the header. But when I run my JavaScript file and it runs the function where I call Papa.unparse(data); It throws an error saying that Papa is not defined. So
I am a bit confused on what the exact issue here is because I clearly have loaded it into the html and before my JavaScript scripts are loaded as well.
Help is much appreciated.
Edit: I have fixed the issue. The problem was the cdn itself. I assume the links are broken or the file is not on their server. It may also be that specific version, I suspect this is most likely the cause. Tested same version with cdnjs still does not work. Weird.
<script src="https://fastcdn.org/Papa-Parse/4.1.2/papaparse.min.js"></script>
This version and cdn seems to work. Thanks!
function makeThatExcelFilePapa(data, title) {
var csv = Papa.unparse(data);
return csv;
}
// Make sure the DOM is loaded before trying to add listeners
window.onload = function () {
// Set dropdown list for Brand to be empty on start
document.getElementById("dealerSearchForm").elements["brand"].selectedIndex = -1;
// Call submit method when submit button is clicked
var submitButton = this.document.getElementById("submitButton");
$(submitButton).on('click', getFormData);
$(exportToExcel).on('click', callJSONConverter);
}
var items;
function callJSONConverter() {
//JSONToCSVConvertor(JSON.stringify(items), "Results for " + dealerName, true);
makeThatExcelFilePapa(items, "Results for " + dealerName);
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dealer Tab</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script type="test/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.0/papaparse.min.js"></script>
<link rel="stylesheet" href='cnh_dealer_tab.css'>
</head>
<body>
<div class="form-style">
<h3>Find Dealer:</h3>
<form id="dealerSearchForm" method="POST" action="cnh_dealer_tab.html">
Brand:
<select name="Brand" id="brand" required>
<option value="NHAG">NHAG</option>
<option value="NHCE">NHCE</option>
<option value="CSCE">CSCE</option>
<option value="CSAG">CSAG</option>
</select>
<div id="goRight">
SAP Code:
<input type="text" id="sapCode" name="SAPCode" required>
</div>
<br>
<br> Dealer:
<input type="text" id="dealer" value="" readonly>
<br>
<br>
<button id="submitButton">Submit</button>
<input type="reset" name="reset">
<button id="goToCountyTab">Go to County Tab</button>
<button id="exportToExcel">Export to Excel</button>
</form>
</div>
<div id="jsGrid" class="form-style">
<span class="grid">
<script type="text/javascript" src='cnh_grid_data'></script>
<script type="text/javascript" src='cnh_ssm_assignments'></script>
</span>
</div>
</body>
</html>
Thanks.
Try doing:
$(document).ready(function() {
function makeThatExcelFilePapa(data, title) {
var csv = Papa.unparse(data);
return csv;
}
});
And, as others have pointed out, don't load the Papa library twice.
I'm trying to call a function in click function from my html page ,
added all typescript definition files from nuget but something is going wrong
My Click Function is not Working .... No error in console even
Here is my Hrml and Controller Code
Html Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="test">
<input type="button" ng-click="click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class test {
constructor() { }
click() {
alert();
}
}
angular.module("testModule").controller("test", test );
This does not work because ng-click="click()" tries to call $scope.click() which is not defined.
I would highly advise you to use the controller as-Syntax when working with AngularJS and Typescript
Demo
Here is the corrected code. Don't mark this as the answer, #Aides got here before me.
Html Page
<!DOCTYPE html>
<html> <!-- its 2016 -->
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="Test as test">
<input type="button" ng-click="test.click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class Test {
click() {
alert();
}
}
angular.module("testModule").controller("Test", Test );
I am attempting to run an method after the DOM is ready, but cannot access the element. It is coming back as undefined. The code is below. I know the element is accessible because code ran after the DOM elements processes fine. The alert in the separate js file come back undefined. The alert at the bottom of the html returns the correct value.
HTML
<%# Master Language="C#" inherits="test.master"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head runat="server">
<title>test</title>
<link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('<%= varthing %>'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="hdr_toolslct_cursys_payer" runat="server"></span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="hdr_toolslct_name" class="hdr_toolslct_name" runat="server"></span>!
Thing1:
<select id="hdr_toolslct_gp" runat="server">
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="nav" class="nav" runat="server">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
<asp:ContentPlaceHolder id="cntnt_phldr" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help.
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Javascript
function ajaxStuff(vartest) {
alert($("#ftr").html());
}
ViewSource
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>
test
</title><link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('no'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="ctl00_hdr_toolslct_cursys_payer">Mcaid</span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="ctl00_hdr_toolslct_name" class="hdr_toolslct_name">Name Name</span>!
Thing1:
<select name="ctl00$hdr_toolslct_gp" id="ctl00_hdr_toolslct_gp">
<option selected="selected" value="OP1">Option 1</option>
<option value="OP2">Option 2</option>
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="ctl00_nav" class="nav">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Please bear in mind that the reason you're getting undefined is because the function ajaxStuff is being invoked immediately. If you use any of the following forms, it should work as expected. (), or (arguments) invokes the function right away:
$(ajaxStuff);
Or
$(document).ready(ajaxStuff);
Or
$(function() {
ajaxStuff('no');
});
Or
$(document).ready(function() {
ajaxStuff('no');
});
JS FIDDLE DEMO
Live demo
HTML
<div id="test">hello</div>
JS
$('document').ready(function(){
alert($('#test').html());
});
You forgot the jQuery ready event:
http://api.jquery.com/ready/
Your code might work with:
$( document ).ready(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
Or
$(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
in the JavaScript part.
Demo
UPDATE:
As this is not working, you should try to analyze the DOM that is generated:
$(function() {
// Handler for .ready() called.
console.log($("body").html());
});
Maybe there IDs are changed? Or something like that? You tell us :D
I have a problem where my javascript is not working in a separate file, but it is working inline.
This is the working code with my javascript in line. This is in asp.net 4.0.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="FrontEnd.master.cs" Inherits="pigninja.FrontEnd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
function ShowItem(itemID) {
document.getElementById(itemID).style.visiblity = "visible";
}
function HideItem(itemID) {
document.getElementById(itemID).style.visiblity = "hidden";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Pigninja Paradox</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header">
</div>
<div id="navigation">
<div id="menu">
<ul>
<li>Home</li>
<li>About Me
<div id="submenu">
<ul>
<li onmouseout="HideItem('submenu');" onmouseover="ShowItem('submenu');"><a href="1983.aspx">
1983</a></li>
<li>1988</li>
<li>1990's</li>
<li>2000</li>
<li>Present</li>
</ul>
</div>
</li>
<li>Programming</li>
<li>Rants</li>
</ul>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<p>
I'd rather be an outlaw then to fall to Babylon law</p>
</div>
</div>
</form>
</body>
</html>
The problem is as soon as I change this to
<script language="javascript" type="text/javascript" src="../scripts/navBarScript.js"> </script>
My code no longer works and I can't for the life of me figure out why.
Make absolutely sure that the src path your of your script is correct, you could always set it as such
src="/scripts/navBarScript.js"
Starting with a / to reference from the base, There is no reason for it to not work
Also, put the external script tag inside the head or just before the closing body tag
I'm not sure why this fixed it, but I ended up changing my script to
function ShowItem(itemID){
document.getElementById(itemID).style.display = "block";
}
function HideItem(itemID){
document.getElementById(itemID).style.display = "none";
}
After these changes my code performed as expected. I do not know how or why. But this resolved my issue.
I have the following script in my homepage
$(function () { // same as $(document).ready(function () { })
// assuming we have the open class set on the H2 when the HTML is delivered
$('li.drawer h2:not(.open)').next().hide();
$('h2.drawer-handle').click(function () {
// find the open drawer, remove the class, move to the UL following it and hide it
$('h2.open').removeClass('open').next().hide();
// add the open class to this H2, move to the next element (the UL) and show it
$(this).addClass('open').next().show();
});
});
It works in Safari, but not in Firefox 3.08/3.1 beta3.
How can you get the above jQuery script work in Firefox?
[edit]
First lines of my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<link href="template.css" type="text/css" rel="stylesheet"/>
<title>Abc</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
! - - - - Above Code is at Here - - - - -
</script>
</head>
The body of index.html
<body>
<div class="mainbody">
<h1 class="myheader">Test</h1>
<p>Test</p>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Contact info</h2>
<ul>
<li>name
</li>
<li>
<div class="">aaa
</div>
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Unpublished</h2>
<ul>
<li class="italic">
<i>A</i> (2009).
</li>
<li class="italic">
<i>aaa</i> (2008).
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Recent projects</h2>
<ul>
<li class="italic">
Websites
</li>
<li class="italic">
Search
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="8834479:1qd7hky6khe" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
It works for me in Firefox 3.0.9
What exactly is not working?
My guess is that you have invalid HTML which causes some wrong DOM structure in Firefox. But it is hard to tell without looking at your code.
Why are your tags in your jquery selectors in uppercase? By your doctype, you're using XHTML, and all tags must be lowercase. Not sure if that'll make a difference, but you should change H2 => h2, etc.
I got the code to work in Firefox by replacing the following
<script type="text/javascript" src="jquery.js" />
to
<script type="text/javascript" src="jquery.js"></script>