I made header.jsp and footer.jsp to make dynamic pages. In the accumulated code JavaScript is not running.
<html>
<head>
<title>CAN Invoicing</title>
</head>
<body>
<div style="top:10;height:200px;">
<div style="float:left;">
<img src="/images/Amazon-CAN-Logo.png" alt="CAN INVOICING"></img>
</div>
<div style="float:right;top:200px;">
<img src="/images/logo_csmetrics.gif" alt="Powered By CSBI"><img>
</div>
</div>
<div style="top:200px;">
<h1>you are authorized login User ::null</h1>
<script type="text/javascript">
function doTest()
{
alert("hello");
}
</script>
<h2>Session username swasri</h2>
test
uplaod
s3
downloadS3
</div>
<div><p>footer</p></div>
</body>
</html>
The dynamic part starts from <h2> till footer div. I am using tomcat apache server to run above code. All the jsps are kept inside webapp folder.
I am running above code in tomcat apache webserver.
Try calling the doTest() function, right now it isn't being called.
<script type="text/javascript">
function doTest() {
alert("hello");
}
doTest();
</script>
Try calling the doTest() function.
<html>
<title>CAN Invoicing</title>
<head>
<script type="text/javascript">
function doTest()
{
alert("hello");
}
</script>
</head>
<body onload="javascript:doTest();">
<div style="top:10;height:200px;">
<div style="float:left;"><img src="/images/Amazon-CAN-Logo.png" alt="CAN INVOICING"></img></div>
<div style="float:right;top:200px;"><img src="/images/logo_csmetrics.gif" alt="Powered By CSBI"><img></div>
</div>
<div style="top:200px;">
<h1>you are authorized login User ::null</h1>
<h2>Session username swasri</h2>
test
uplaod
s3
downloadS3
</div>
<div><p>footer</p></div>
</body>
</html>
Related
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 );
here is my function which is put into its own file(Javascript/submitDate.js):
document.onload = function(){
function submitDate(){
var time = new Date();
var nowDate =time.toISOString().slice(0,-14);
document.getElementById("dateShow").value=nowDate;
}
submitDate();
}();
This ran fine before I joined the page with my index.(When I put all my javascript and page layout into one file)
Here is the page(projectMain.html) of the code:
<html>
<div id="container">
<header>
<h3>Entries close on the 10th of March</h3>
</header>
<section>
<aside onload="submitDate();">
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
</section>
No errors pop up and it just shows the date layout box as: mm/dd/yyyy
EDIT:
The folder has a capital J.
Edit 2.0:
Link to what is shown. Underneath the "last submitted" is the date function that is not working. : http://prntscr.com/60ie8k
Edit 3.0:
Here is my Index:
<html>
<head>
<title>Sample Template</title>
<link rel="stylesheet" language="text/css" href="CSS/stylesheet.css"/>
<script language="javascript" src="Javascript/AJAX.js"></script>
</head>
<body onload="javascript:changePage('home');">
<h1>Little Big Planet</h1>
<div class="menu">
<a onclick="javascript:changePage('home');">Home</a>
<a onclick="javascript:changePage('powerups');">Power Ups</a>
<a onclick="javascript:changePage('bots');">Sackbots</a>
<a onclick="javascript:changePage('costumes');">Costumes</a>
<a onclick="javascript:changePage('projectMain');">Form</a>
</div>
<br />
<div id="content">
</div>
<script type="text/javascript" src="Javascript/submitDate.js"></script>
</body>
</html>
The aside element doesn't have an onload attribute (or load event). Only elements that load external content (e.g. <img>) and the document itself (where the attribute lives on the <body> element) do.
Use a <script> element instead.
<aside>
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
<script>
submitDate();
</script>
Additionally, you say that the file lives at "javascript/submitDate.js" but you are loading src="Javascript/submitDate.js". The function won't be available to call if you are using a case-sensitive file system (as the URL will 404).
You have a capitol 'j' in JavaScript in your HTML.
<script type="text/javascript" src="Javascript/submitDate.js"></script>
Try loading the js when the document is loaded
JS file:
document.onload = function(){
function submitDate(){
var time = new Date();
var nowDate =time.toISOString().slice(0,-14);
document.getElementById("dateShow").value=nowDate;
}
submitDate();
}();
The aside in your html
<aside>
Last submitted:
</br>
<input type="date" id="dateShow" readonly>
</aside>
Link to js file in the bottom of your body
<script type="text/javascript" src="pathtojsfile"></script>
Here is a working Fiddle
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 am trying to disable a submit button, and have it be enabled when a checkbox is ticked. Simple example works on jsfiddle
http://jsfiddle.net/8YBu5/522/
But not when trying it in my template (with bootstrap etc).
My template has the checkbox
<input type="checkbox" id="checky">terms and conditions
Then the button
<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>
Then the javascript. Does the javascript need to be at the top or something?
<script type="text/javascript">
$('#submit').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#submit').removeAttr('disabled');
}
else {
$('#submit').attr("disabled","disabled");
}
});
</script>
Anyone see where I'm going wrong?
Thanks
UPDATE
Thanks for all the suggestions, I've now tried adding the $(document).ready(function() { to the start of my script and changed .attr to .prop , still not working. Little more info: The button isn't disabled from the start, so maybe I'm not referencing the button properly in the function?
UPDATE2
I've tried adding an alert to see if my javascript is being run, but the alert doesn't show, what could this mean?
<script type="text/javascript">
$(document).ready(function() {
alert("Welcome");
$('submit').prop("disabled", true);
$('checky').click(function(){
if($(this).attr('checked') == true){
$('submit').prop("disabled", false);
}
else {
$('submit').prop("disabled", true);
}
});
});
UPDATE3 The javascript is now running, I've added two alerts, to see what is executing.
//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
alert( "w" );
$('#postme').removeAttr("disabled");
}
else {
alert( "e" );
$('#postme').attr("disabled","disabled");
}
});
});//]]>
When I click the checkbox on or off, I get the e alert, telling me the if statement is always false. Any ideas why?
UPDATE4
The snippet works, just not in my page, alert 2 is always executed, never alert 1
Title
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row padding">
<div class="col-md-12">
<h1></h1>
</div>
</div>
<div class="row padding">
<form id="new_form" action="/page/" method="POST" >
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Creator submission form</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<br>
<input type="checkbox" id="checky1">
<input type="submit" id="postme1" value="submit">
</form>
</div>
<div class="row padding">
<div class="col-md-12">
</div>
</div>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
$('#postme1').removeAttr('disabled');
}
else {
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
<div class="container">
<footer>
<hr>
</footer>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
alert("1");
$('#postme1').removeAttr('disabled');
}
else {
alert("2");
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
Your javascript code should be
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
});//]]>
</script>
</head>
<body>
<input type="checkbox" id="checky">terms and conditions
<input type="submit" id="postme" value="submit">
</body>
</html>
This snippet is working fine for me.
Update
Use this as click event handler of the checkbox
$('#checky').click(function(){
if($(this).prop('checked')){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
JSFiddle is a lovely resource. One of the lovely things it does is provide the wrapper for JQuery for you!
Have a little read of this:
Launching Code on Document Ready
To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:
window.onload = function() {
alert( "welcome" );
}
Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
$( document ).ready(function() {
// Your code here.
});
Make sure your include your <script> after the rest of your html. Or you can wrap it in:
$(document).ready(function() {
// your code here
});
Also you should use .change instead of .click, in case the user uses the keyboard to check the checkbox.
I have this code in jQuery: (the file name is javascript.js ...I was using JavaScript before...)
$(document).ready(function() {
$("#readFile").click(function() {
$.get('test.txt', function(data) {
$("#bottom_pane_options").html(data); // #bottom_pane_options is the div I want the data to go
}, 'text');
});
});
...and this in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Culminating</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./javascript.js"></script>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(50.569283,-84.378433),
zoom:5,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>
<div id="bottom_pane_options">
<button id="readFile">Read File</button>
</div>
</div>
</body>
When I check the console, I get the Uncaught ReferenceError saying that $ is not defined on the first line. I'm assuming that it is referring to the first character on the first line. I got this code from a website and I'm new to jQuery so I'm not sure what is going wrong here.
Any suggestions?
Change the order you're including your scripts (jQuery first):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script
src="http://maps.googleapis.com/maps/api/js?key=YOUR_APIKEY&sensor=false">
</script>
Include the jQuery file first:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false">
</script>
Scripts are loaded in the order you have defined them in the HTML.
Therefore if you first load:
<script type="text/javascript" src="./javascript.js"></script>
without loading jQuery first, then $ is not defined.
You need to first load jQuery so that you can use it.
I would also recommend placing your scripts at the bottom of your HTML for performance reasons.
The MVC 5 stock install puts javascript references in the _Layout.cshtml file that is shared in all pages. So the javascript files were below the main content and document.ready function where all my $'s were.
BOTTOM PART OF _Layout.cshtml:
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I moved them above the
#RenderBody() and all was fine.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>