I am using jQuery autocomplete plugin to get values from database using this plugin. As per demo I made my code like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" href="styles.css">
<script>
jQuery(document).ready(function() {
jQuery('#autocomplete').autocomplete({
serviceUrl: 'ajax.php',
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete">
</body>
</html>
Now when I am doing any search. Then in console tab I can see the ajax request like this
XHR finished loading: GET "http://localhost/ajax.php?query=united
additionally it is showing one error in console tab like
Uncaught SyntaxError: Unexpected token < in jquery-2.1.0-min.js:4
Now to get the value of query string in ajax.php I did like this
$value = $_POST['query];
echo $value;
But it is not showing any value. So can someone tell me how to get the input entered values in the ajax.php file? Any help and suggestions will be really appreciable. Thanks
You are using Google Chrome, aren't you?
It would be helpful to see what data is actually transfered...
Try to hit F12, open the "Network" tab, click on the item that shows up when the AJAX request is made, and check the output in the "Response" sub tab.
My assumption: You're facing some syntax error in your PHP file that outputs HTML tags as part of an error message.
BTW: Your PHP code contains a syntax error, the ' after index "query" on line 1 is missing...
Related
I am trying to make a very simple thing work:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="text/js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
With js/test.js being found by the browser and containing:
function test() {
alert("test");
}
When opening the page and clicking the button, nothing happens and I can see in the console:
Uncaught ReferenceError: test is not defined
at HTMLButtonElement.onclick (test:7)
I have tried to move the script import above or under the button, or in the header.
I have tried to use "window.setlocale = function" in my js file.
I have tried to put nothing in the test method.
I checked for errors with JSLint (there is no error).
When I check the source, I can see the js file and the browser opens it when I click on it.
The only way I can get the Javascript to work is to write it inline...
Maybe the issue is with my environment?
In order to run this, I use an Apache server, and it is configured to serve this on localhost:8077. I works fine so far.
I use Laravel 7.10, PHP 7.4... working fine. To run this I created a simple route, that shows the view (a simple index.blade.php) with the HTML content copy/pasted above. It displays fine on "http://localhost:8077/test", no problem.
I also tried to use the laravel notation
<script src="{{ asset('js/test.js') }}" type="text/js"></script>
but it gives the same result.
I also have the PHP debugbar (a Laravel plugin) active, and it does not show any error. The view is properly loaded and displayed.
Also, I use PHPStorm, and it does not detect any issue.
It's been 2 days and I cannot makes this seemingly extremely basic thing to work, please help me m(_ _)m
Your script type is wrong. Use application/javascript in your script element to make your javascript work - or better yet, remove the type attribute and let browsers auto-detect the type:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js" type="application/javascript"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
Without type attribute:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="js/test.js"></script>
<button onclick="test()" type="submit">Test</button>
</body>
</html>
you can try to add script tag to header tag. like this
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
Try removing the function name in js/test.js
function() {
alert("test");
}
Please add the js file as a reference in the header section of your core file. External referencing.
I'm trying to achieve the following:
A simple Java Spring application, after receiving a GET request, sends me an HTML page with a form. When the button is pressed in this form, there is a POST request with an XML content sent back to the Spring app, which, in turn, responds with an HTML page. I would like to be able to display this response as a proper page in a browser, including all the scripts being downloaded and fully functional.
The form HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="UTF-8" />
<title>Request Report Form</title>
</head>
<body>
<form method="post" action="">
<script>
function sendXml()
{
event.preventDefault();
const request = '<?xml version="1.0" encoding="UTF-8"?>\n' +
<!-- skip -->
$.ajax({
type: 'POST',
url: url,
dataType: 'html',
data: request,
contentType: 'application/xml;'
}).done(function (data) {
$("html").html(data);
}).fail(function (data) {
$("html").html(data.responseText);
});
}
</script>
</form>
</body>
</html>
The $("html").html(data); part above is supposed to replace the current page's content with the content received from the server, as far as I understand. But the page is not being displayed. There is an error message in the browser's console: "TypeError: n.head is null", it seems to have to do with JQuery, see the image link.
My questions are, why does JQuery kicks in and what is it trying to do? And how do I fix this error?
I don't know much about frontend side of development, so please go easy on me ;-)
Edit
Just realised that my first question is moot, I am trying to display the response page using JQuery, so obviously, it kicks in at that point. But the call fails for some reason.
The content of the response from the server that I'd like to see rendered by the browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Report</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body data-user="eyJjaGFydCI6eyJyZW5kZXJUbyI6IlByb2dyZXNzIiwidHlwZSI6ImNvbHVtbiJ9LCJzZXJpZXMiOlt7Im5hbWUiOiJQcm9ncmVzcyIsImRhdGEiOlsxLDEsMCwwLDAsMCwwLDAsMCwwXX1dLCJ0aXRsZSI6eyJ0ZXh0IjoiUHJvZ3Jlc3MifSwieEF4aXMiOlt7InR5cGUiOiJsaW5lYXIiLCJjYXRlZ29yaWVzIjpbIlJlZ2lzdGVyZWQ8YnI+KDQuNi4xMykiLCJTZXNzaW9uIDE8YnI+KDEyLjcuMTUpIiwiU2Vzc2lvbiAyIiwiU2Vzc2lvbiAzIiwiU2Vzc2lvbiA0IiwiU2Vzc2lvbiA1IiwiU2Vzc2lvbiA2IiwiU2Vzc2lvbiA3IiwiU2Vzc2lvbiA4IiwiRmluaXNoZWQiXX1dLCJ5QXhpcyI6W3sidGl0bGUiOnsidGV4dCI6IlNlc3Npb24gU3RhcnRlZCJ9LCJtaW4iOjB9XX0=">
<div id="wrap">
<div class="container">
<div class="report"></div>
</div>
</div>
<script>
window.onload = function (event) {
event.preventDefault();
$(".report").append("<div class='chart'><div id='Progress'><img src='staticMedia/img/loader.gif' /></div></div>");
userData = $("body").data("user"); // get user report data
var chart = new Highcharts.Chart(JSON.parse(atob(userData)));
// destroys legend if only 1 series
if (chart.series.length < 2) {
chart.legend.destroy();
}
}
</script>
</body>
</html>
Found an answer here: stackoverflow.com/a/11984907/3182810. Replacing
$("html").html(data);
in the form with
document.open();
document.write(data);
document.close();
does the trick.
This question already has answers here:
ReferenceError: $ is not defined
(7 answers)
Closed 3 years ago.
This question is pretty much what I am trying to do, but I cannot understand how to use it in my context.
I have tried the marked answer and the answer submitted by xdazz. Both of these answers seem to send the variables from the client-side to the php script through POST. When I attempt this, it simply does not hit my alerts, which leads me to believe that the php script receiving the POST variables is never being executed.
Here is the function which runs when I click a button on my js canvas
function updateLeaderboard()
{
alert("before");
$.post("process.php", { postantNum: antNum, postantRate: antRate },
function(data)
{
alert(data);
} );
alert("after");
}
Here is the process.php file
<?php
$antNum = $_POST['antNum'];
$antRate = $_POST['antRate'];
echo $antNum;
echo $antRate;
$con=mysqli_connect("localhost","root","pass","login");
mysqli_query($con,"UPDATE userdata SET `words`='$antNum' WHERE `player`='$antRate'");
?>
HTML running the javascript:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="antclicker.js"></script>
</head>
<body>
</body>
</html>
I wish to be able to send in antNum and antRate from the client-side js game I have created to the database for storage.
There are no error messages, I just know it never gets to the echos in the process.php and never hits the after alert, only the before alert is triggered.
EDIT:
Now since I have dipped my feet into chromes tools, I have discovered that on the line $.post("process.php", { postantNum: antNum, postantRate: antRate },
(yes I have changed the code a little bit) I get the error : ReferenceError: $ is not defined, how can it be singling out the "$". I'm guessing this probably means that there are some syntax errors nearby.
First off in the HTML I did not know I needed to include
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
as I did not know I was using ajax, this is why the $ was undefined.
the updateLeaderboard function should look like this.
function updateLeaderboard()
{
alert("before");
$.post("process.php", { antNum, antRate },
function(data)
{
alert(data);
} );
alert("after");
}
antNum and antRate are just vars which are previously defined.
and the process.php should look like
<?php
$antNum = $_POST['antNum'];
$antRate = $_POST['antRate'];
$con=mysqli_connect("localhost","root","pass","login");
mysqli_query($con,"UPDATE userdata SET `antNum`='$antNum' , `antRate`='$antRate' WHERE `player`='bob'");
?>
just swap bob out for the user in question.
PS. This was also a factor in helping me find the answer, by first allowing me to notice the $ was undefined.
I am trying to make a website which when a certain button is pressed, a python script will run, which will turn on GPIO pins on my raspberry pi.
However my code doesn't seem to work. Please could someone tell me what is wrong with my code:
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#clickON').click(function(){
var a = new XMLHttpRequest():
a.open("GET","output.py")
a.onreadystatechange=function(){
if(a.readySate==4){
if(a.status == 200){
}
else alert("HTTP ERROR!!")
}PHP
}
a.send
});
});
</script>
</head>
<body>
<button type="button" id="clickON">ON</button><br>
</body>
</html>
Debugging Javascript can be done through your browser's developer tools. In Chrome for OSX, I access them by right clicking on any page element and clicking 'Inspect'.
I saved your code, opened the file and in the 'Console' tab I see:
Uncaught SyntaxError: Unexpected token :
This error is on line 8:
var a = new XMLHttpRequest():
Either remove this colon, or replace it with a semicolon, and you may be one step closer to fixing your problem.
CodeIgniter 3.0
Form uses button as the submit event:
<button type="button" name="submit">SEARCH</button>
Here is the very simple javascript I have so far, and I don't see why it should be outputting the form page in an alert box:
$( document ).ready(function() {
$("button[name='submit']").click(function(){
//
});
});
Produces an alert box with readystate, statustext, and responsetext:
200 , OK, <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
(...and the entire html output of the form page goes here...)
</body>
</html>
I don't understand why my js should output anything if I haven't told it to.
As it turns out, I was calling another javascript in my head, which had an identical $(document).ready(function script section. Even the <button name='submit'] was the same, so my javascript much have got confused and just threw up the status codes and responsetext.