HTML button not calling function - javascript

this is my 1st javascript attempt and I'm getting the following in the chrome console:
"Uncaught ReferenceError: test1 is not defined."
I'm trying to send an Ajax request via onclick button event and display the data in the document. However, due to the error, I've scoped back to hello-world just for a debug attempt. Pardon this kind of question as I know its very elementary.
Any help is appreciated. Thanks for your time!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
function test1(){
alert("Hello, World");
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
}
</script>
</body>
</html>

You used only one script tag for loading jquery and for your method - that will not work... "If a script element has a src attribute specified, it should not have a script embedded inside its tags." here a working solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
}
</script>
</body>
</html>

You can't place your javascript code in same <script> tag where you linked an external file (it shouldn't be included in <script src="..."> function </script>). Your test1 function should be separated from scr javascript tag. Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">/<script>
<script> your javascript function should be here </script>
Hope this will solve your problem.

Put the JavaScript in the head of your document, and separate out the script for including jquery and your actual code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function test1(){
alert("Hello, World");
}
</script>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>

You haven't placed your javascript method in proper javascript tag, separately place javascript method and javascript src, please check below for more clarification:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
function test1() {
alert("Hello, World");
}
/* $.ajax({
url: Target_URL,
headers: {
'Accept':'application/json',
'authorization', 'Bearer ' + vToken
},
method: 'GET'
// dataType: 'json',
// data: YourData,
success: ajaxCall = data
}); */
</script>
</head>
<body>
<button onclick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>

First off, you need to declare your JavaScript function before you call it.
Change to this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" />
<script>
function test1(){
alert("Hello, World");
}
</script>
<button onClick="test1()">Click Here</button>
<p id="Data"></p>
</body>
</html>

Related

How do I show the response of my Open Weather Map API query in my webpage?

I want to display weather conditions of the city Morgins in a html page. How do I show the response of my query? I am testing from my own laptop in de Google Chrome Browser. This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
</head>
<body>
<script>
function getWeather() {
var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&mode=xml&units=metric&cnt=10';
loadJSON(url, gotData);
}
</script>
</body>
</html>
Now it's a blank page but I want to display some weather elements of this 10 day forecast eventually...
Your data should be returned in the form of JSON not xml. remove the mode as xml
also i made few modifications as below to show data in div.
DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Setup</title>
</head>
<body>
<div id="app"></div>
<div id="parsed_json_api">
</div>
<script src="index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- https://home.openweathermap.org/api_keys -->
<script>
jQuery(document).ready(function($) {
var parsedData = $('#parsed_json_api');
$.ajax({
url: "https://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&units=metric&cnt=10",
dataType: 'json',
success: function (data) {
data = JSON.stringify(data);
parsedData.append('<div>'+data+'</div>');
}
});
});
</script>
</body>
</html>

python script not running using AJAX call

I am calling a python script using AJAX call as follows,the issue am running into is the python script doesn't seem to be running,can anyone provide pointers on how to debug this?what am I doing wrong?
Javascript:-
$.ajax({
type: "POST",
url: "image.py", //Running this generates line_graph.png
//data: { param: text}
}).done(function( o ) {
document.getElementById("myImg").src="line_graph.png";
});
HTML:-
<html>
<head>
<title>Image</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<img id="myImg" src="sample.png" alt="Line graph" width="600" height="600">
<script src="image.js"></script>
</body>
</html>

jQuery .ajax error handling

I'm trying to use jQuery.ajax() to retrieve an html code snippet from table_snippet.html and then replace the element in my html code. My error handler in jQuery.ajax() is being executed instead of the desired success handler.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table</title>
<link href="address-data-file.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="ajax_goodness.js" type="text/javascript"></script>
</head>
<body onload="func()">
<div id="div_id">
<p>Use AJAX to retrieve the file table-snippet.html and then replace the div with the contents of that file.</p>
</div>
</body>
</html>
function func(){
jQuery.ajax({
type: "GET",
url: "table_snippet.html",
dataType: "html",
success: function(data){
$("#div_id").html(data);
},
error: function(){
alert("fail");
}
});
}
$(function () {
$.ajax({url:"table_snippet.html",success:function(result){
$("#div_id").html(result);
}});
});

Passing form variable to php using JSON

I am using the following code and I need to access the input value of the form textbox from php. The form is not submitted to server directly through the form tag. The button is calling a JS function. I need to access the input textbox called stName from the php code. How can I pass this info to php and access it from there? Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.4.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script charset="utf-8" type="text/javascript">
function connect()
{
$.ajax({
url:'hostname/reply.php',
headers:{"Content-Type": "application/json"},
type:'POST',
data:$(this),
dataType:'JSON',
error:function(jqXHR,text_status,strError){
alert(strError);},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
</script>
</head>
<body>
<center><b>My Students</b></center>
<center>
<form method="POST">
<input type="text" value="John" name ="stName" />
<input onclick="connect()" type="button" value="showStudents" />
</form>
</center>
<center><b>Results</b></center>
<ul data-role="listview" id="result"></ul>
</body>
</html>
serialize the form data ..
change your connect function to this
function connect()
{
$.ajax({
url:'hostname/reply.php',
headers:{"Content-Type": "application/json"},
type:'POST',
data:$('form').serializeArray(),
dataType:'JSON',
error:function(jqXHR,text_status,strError){
alert(strError);},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
or simply you can compress your code like this ..
function connect()
{
$.post('hostname/reply.php', $('form').serialize(), function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
You need to use the Sterilize Function. data:$( "form" ).serialize()
For Reverence to the function: http://api.jquery.com/serialize/
I also just found this StackOverflow that talks about how to structure the ajax request if you are having problems. Submit form using AJAX and jQuery

Jquery code to get data from http

I would like to know what can I do to show a list into a html page using jquery.html and $getJson,
I have a server.js running on http:localhost:8080/list and I want to show the list between html tags
the html code
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$.get( "http://localhost:8080/clubs", myCallBack );
</script>
</body>
</html>
The myCallBack is where you define a function which can take the data as a parameter.
$.get("http://localhost:8080/clubs", function (data) {
$("#myDiv").html(data);
});
HTML
<div id="myDiv"></div>
The jQuery Documentation for jQuery.get() includes the following example:
$.get("ajax/test.html", function(data) {
$(".result").html(data);
alert("Load was performed.");
});

Categories