Jquery basic function test call is not working? - javascript

My Jsp is ,
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- <%#include file="include.jsp"%> --%>
<%# taglib prefix="form" uri="../tld/spring-form.tld"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../jquery/jqueryChat.js"></script>
</head>
<body>
<input type="text" id="test" name="test" />
<input type="button" value="Ajax Submit" onclick="madeAjaxCall()">
</body>
</html>
My JqueryChat.js will be .,
function madeAjaxCall(){
alert("Hello 99");
alert($("#test").val());
}
When I click the button I am getting the error as ,
I need to get the value of the text-box in the alert.
Good answers are definitely appreciated.

Hi you need to call jquery object onload before you are using on click event here..As $(document).ready().So only ist

The following code works perfectly for me.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("#button").click(function(){
alert("Hello 99");
alert($("#test").val());
});
});
</script>
</head>
<body>
<input type="text" id="test" name="test" />
<input type="button" id="button" value="Ajax Submit">
</body>
</html>
Check if your jquery.js and jqueryChat.js are downloaded from proper place.
Put your JS code in $(document).ready(function() { .. });
Use $("#button").click(function(){ instead of
onclick="madeAjaxCall()"

Related

HTML does not display as expected

I have 2 files,
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./test/jquery.min.js"></script>
</head>
<body>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<p id="11" ></p>
<script> $( "#11" ).load( "end.html") </script>
</body>
</html>
end.html
info:No
Creation time:2020.05.01-17.03
Change the time: <script>document.write(document.lastModified);</script>
There are two display effects:
Number One and Number Two
Reproducing this effect:
test1
test2
test3
test4
info:No
Creation time:2020.05.01-17.03
Change the time:05/24/2020 09:19:23
Are you sure your JQuery URL is being picked up, maybe add a direct link in header of your test.html
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
Also, don't forget to close your statements off with a semi-colon
<p>test4</p>
<p id="11" ></p> <script>$("#11").load("end.html");</script>
Also, I don't know if that script is running there, maybe do the following at the bottom of your page instead of putting the script tag there. This will execute the line when the HTML Dom is loaded
<script>
$(document).ready(function(){
$('#11').load("end.html");
});
</script>
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./test/jquery.min.js"></script>
</head>
<body>
<p>test1</p>
<p>test2</p>
<p>test3</p>
<p>test4</p>
<script src="end.js"></script>
</body>
</html>
end.js
document.writeln("<p>info:No");
document.writeln("Creation time:2020.05.01-17.03</p>");
document.writeln("Change the time:<script>document.write(document.lastModified);</script>");
ok

JQuery '$' getting "ReferenceError: $ is not defined" when in my .JS file

My code works when I write the JS in HTML like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
$("#submitButton").on("click", function() {
console.log("result!");
});
</script>
</body>
but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign. This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
**<script type="text/javascript" src="addressBook.js"></script>**
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>
and in the addressBook.js file:
$("#submitButton").on("click", function() {
console.log("omg, you clicked me!");
I get the following error logged to the console when i click the button:
$("#submitButton").on("click", function() {
^
ReferenceError: $ is not defined
Any help would be appreciated!
Thanks
Wat selfagency said + put the script tag before the end of the body.
html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
<script type="text/javascript" src="addressBook.js"></script>
</body>
</html>
addressbook.js
$('#submitButton').on('click', function() {
console.log('result!');
});
The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run. Described in more detail here.
I don't think that you need to add the script before the end of the body.
It works after I created addressBook.js and change the jquery
$('#submitButton').on('click', function() {
console.log("omg, you clicked me!");
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="addressBook.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
</body>
</html>
<script>
$("#submitButton").on("click", function() {
console.log("result!");
</script>
That is not proper syntax. It should be:
<script>
$(document).ready(function () {
$("#submitButton").on("click", function() {
console.log("result!");
});
});
</script>

JavaScript function has not been executing as expected in asp.net

I have a basic asp.net web form application harmonized with JavaScript. There is a jQuery calendar and I try to send selected date to server.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="CalendarSample1.aspx.cs" Inherits="CalendarApplication.CalendarSample1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Date: <input type="text" id="datepicker" onclick="datepickerSendData()"/></p>
<br />
<input ID="lblDates" />
<br />
<br />
<asp:Button ID="btnTamam" Text="Tamam" runat="server" OnClick="btnTamam_Click" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function datepickerSendData() {
document.getElementById("lblDates").innerHTML = "YOU CLICKED ME!";
}
</script>
The JavaScript function datepickerSendData has not behave as expected. I expect to change the content of the lblDates however, no change. Could you please point out the problem?
Thanks in advance.
There is no inner html as input is self closing tag.
document.getElementById("lblDates").value = "YOU CLICKED ME!";

Why is JavaScript of the HTML from page2 loaded into page1 not working?

im trying to load html from page2 into page one but its JavaScript won't work, is this same origin policy? if it is how do i bypass this?
Page1:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisandthat').click(function() {
$("#hide").toggle('fast');
$("#cont").load('testpage2.html #res')
$("#unhide").toggle('fast');
console.log ()
});
});
</script>
</head>
<body>
<div id="">
<input id="thisandthat" name="test but" type="button" value="Button" />
<div id="hide" style="background-color:#050; width:100; height:100;">this and other things</div>
</div>
<div id="cont">
</div>
</body>
</html>
Page2
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page 1 test</title>
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thisand').click(function() {
$("#unhide").toggle('fast');
alert ('im in')
});
});
</script>
</head>
<body>
<div id="res">
<input id="thisand" name="test but" type="button" value="Button" />
<div id="unhide" hidden="" style="background-color:#09F; width:100; height:100;">i apppear</div>
</div>
</body>
</html>
as you can see, javascript needed from page2 is present on page1. Please help.
The problem is that you're using the id selector in your $("#cont").load('testpage2.html #res')
jQuery will only load that section of page 2, therefore no Javascript is loaded. If you remove the id selector it will load the whole page including the Javascript.
$("#cont").load('testpage2.html')
Alternatively, you can place your Javascript within the res div, then that should work.
On a side note, you're missing various line ending semi colons in your code, which is not good.

$.tojson not returning form values (but it creates a JSON with form fields )

Not returning form field values
var formJSON = $.toJSON($('#form1'));
JSP is:
<%# 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">
<script type="text/javascript" src="js/ebs.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.json-2.4.min.js" type="text/javascript"></script>
<script src="js/jquery.json-2.4.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" onclick="validateField()" method="post">
Text Field 1 : <input id="txt1" name="txt1" type="text" />
<br />
<input type="submit" value="SUBMIT" />
</form>
</body>
</html>
My JavaScript is:
function validateField() {
alert('fn called');
var formJSON = $.toJSON($('#form1'));
alert('after');
alert('formJSON' + formJSON);
alert("method ends here.");
}
I am getting:
form JSON{"length":1,"0":{"txt1":{},"1":{}},"context":{"location":{}},"selector":"#form1"}
(There is no content for txt1 field even if we type something there.)
$.toJSON() converts an ordinary Javascript object to JSON.
It does not get values of DOM elements or jQUery objects.
You want .serializeArray().

Categories