This very simple AJAX-Call does not work on my localhost. I do have a Windows 10 Machine with XAMPP running. I tracked the packages, and the AJAX-Reqauest is not even sent to handle.php. What am i doing wrong here?
ajaxTest.php
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
$(document).ready(function()
{
$.ajax(
{
type: 'post',
url: 'inc/handle.php',
success: function(data)
{
alert("Done!");
}
});
});
</script>
</head>
</html>
handle.php
<?php
echo "Test!";
?>
The problem is: include jquery on script tag and your code into another script tag
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function()
{
$.ajax(
{
type: 'post',
url: 'inc/handle.php',
success: function(data)
{
alert("Done!");
}
});
});
</script>
</head>
</html>
Related
It is showing undefined function in PHP page.And i made every possible way it is not working for me.Please guys help me with this.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">Welcome to stackoverflow</div>
</body>
<script>
$(document).ready(function(){
var mb = $('#myDiv').text();
$.ajax({
action : "six-cuf.php",
type: 'POST',
data: { 'mb': mb},
success:function(data)
{
alert(mb);
}
});
});
</script>
</html>
PHP CODE
<?php
$fname = $_POST['mb'];
?>
Hello
$(document).ready(function(){
var mb = $('#myDiv').text();
$.ajax({
action : "six-cuf.php",
type: 'POST',
data: { mb: mb},
success:function(data)
{
alert(mb);
}
});
});
You can also try this JQuery Post Method
Javascript Code
$.post("six-cuf.php", {'mb': mb}, function (data) {
console.log(data);
});
PHP code
<?php
$fname = $_POST['mb'];
echo $fname;
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<span id="response">
</span>
<script>
$(document).ready(function () {
$("#open-comm").click(function () {
$.ajax({
url: "http://en.wikilistia.com/fetch_comments.php",
type: "POST",
SUCCESS: function (responsedata) {
$("#response").html(responsedata);
alert("sucess");
}
});
});
});
</script>
</body>
</html>
Not Receiving responsedata from php page. In the browser php file showing data but through ajax not showing anything.
What's the problem with PHP or Jquery code. I am trying first time this.
Here you go with a solution
$(document).ready(function () {
$("#open-comm").click(function () {
$.ajax({
url: "http://en.wikilistia.com/fetch_comments.php",
type: "POST",
success: function (responsedata) {
$("#response").html(responsedata);
alert("sucess");
},
error: function(error) {
console.log(error);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<head>
<title>Page Title</title>
</head>
<body>
<span id="response"></span>
</body>
It's a typo SUCCESS should be success
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
To make this understandable I made an sample code because my actual code is much bigger.
Basically what I want to accomplish is to run my PHP script that edits an XML file using ajax. This is because I need to do this inside a javascript in my real project.
This is what I have so far:
the .php file containing the ajax function:
<!DOCTYPE html>
<html>
<head>
<script>
function editXMLDoc()
{
$.ajax({
url: "sensors.php",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
}
</script>
</head>
<body>
<button type="button" onclick="editXMLDoc()">Endre XML</button>
</body>
</html>
And here is the php script writing to xml:
<?php
include 'sensor.php';
$b=new sensor();
$arr=$b->load('sensor.xml');
for($i=0,$ms=count($arr);$i<$ms;$i++)
{
if($arr[$i]['fields']['status']=='1')
{
$arr[$i]['fields']['status']='0';
}else{
$arr[$i]['fields']['status']='1';
}
}
echo "Completed<br/>";
//3. save array to xml
$b->save('sensor.xml',$arr);
?>
I know the script is working so I am pretty sure the prob is the connection between the ajax function and the php script.
Can anyone help me out?
Try this code... actually you did not attached jQuery library.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
var resp = $("#response");
$.ajax({
type: "POST", // Method type GET/POST
url: "sensors.php", //Ajax Action url
data: {},
// Before call ajax you can do activity like please wait message
beforeSend: function(xhr){
resp.html("Please wait...");
},
//Will call if method not exists or any error inside php file
error: function(qXHR, textStatus, errorThrow){
resp.html("There are an error");
},
success: function(data, textStatus, jqXHR){
resp.html(data);
}
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
Use AJAX like this:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.rt11').click(function(){
$.ajax({
type: "POST", // Method type GET/POST
url: "sensors.php", //Ajax Action url
data: {yourKey: "yourValue", yourKey1: "another value"},
// Before call ajax you can do activity like please wait message
beforeSend: function(xhr){
console.log("Please wait...");
},
//Will call if method not exists or any error inside php file
error: function(qXHR, textStatus, errorThrow){
console.log("There are an error");
},
success: function(data, textStatus, jqXHR){
console.log(data);
}
});
});
});
</script>
I think there is no problem in code but sometime in large code the min.js file did not include properly. please try the below code. there is no need to change sensors.php file.
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$('.rt11').click(function(){
$.ajax({
url: "sensors.php",
context: document.body
}).done(function(html) {
$( this ).addClass( "done" );
});
});
});
</script>
</head>
<body>
<button type="button" class="rt11">Endre XML</button>
</body>
</html>
HTML:
<button type="button" id="idButton">Endre XML</button>
JS:
$("#idButton").click(function(){
$.ajax({
url: 'sensors.php',
dataType: "xml", //if it returns a xml file
success: function (data) {
// everything is ok
alert(data)
},
error: function (xhr, status, error) {
// Something went wrong
if (xhr.status > 0) alert('Error: ' + status);
}
});
})
Try this i think you missed to include the jQuery library file.Get post data to your php file after ajax call.
<!DOCTYPE html>
<html>
<head>
//include the jQuery library file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function editXMLDoc()
{
var myvalue='123';
$.ajax({
url: "sensors.php",
context: document.body,
data: {myvalue:myvalue},
}).done(function() {
$( this ).addClass( "done" );
});
}
</script>
</head>
<body>
<button type="button" onclick="editXMLDoc()">Endre XML</button>
</body>
</html>
I'm not able to get typeahead to work on my website, here what I have tried.
My html and code
<html>
<head>
<title>typeahead</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
</head>
<body>
<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">
<script type="text/javascript">
$(document).ready(function() {
$('#typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'data.php',
type: 'get',
dataType: 'JSON',
async: true,
data: 'query=' + query,
success: function(data) {
console.log(data);
process(data);
}
});
}
});
});
</script>
</body>
</html>
when I query data.php in my browser, I get the following
http://localhost/data.php?query=a
output
["admin","admin2"]
Yet, I'm not sure why its not working, backend works, I have checked my code many times, I wonder what I'm missing.
Your help is highly appreciated.
$.ajax({
url: 'data.php', // Just try url:'data.php?query=a'
type: 'get',
dataType: 'JSON',
async: true,
data: {'query' : query}, // changed
success: function(data) {
console.log(data);
process(data);
}
});
Typically typeahead uses handlebar.js as well so I included that here. I updated your code to match the remote example here (though I didn't actually test the code). Hopefully that will get you pointed in the right direction.
<html>
<head>
<title>typeahead</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
</head>
<body>
<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">
<script type="text/javascript">
$(document).ready(function() {
var mySearch = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'data.php',
remote: 'data.php?query=' + query
});
mySearch.initialize();
$('#typeahead').typeahead(null, {
name: 'best-pictures',
displayKey: 'value',
source: mySearch.ttAdapter()
});
});
</script>
</body>
</html>
You can write you ajax call like this with Bootstrap 2.1.0 up to 2.3.2:
$(document).ready(function(){
$('#typeahead').typeahead({
source: function (typeahead, query) {
return $.get('data.php', { 'query': a }, function (data) {
return typeahead.process(data);
});
}
});
});
with Bootstrap 3.0 type is no longer bundled with it, So you can use Ajax Type-ahead
its very easy to use:
$("#ajax-typeahead").typeahead({
ajax: "/path/to/source"
});
I am having a problem is retrieving data sent to a php file through .ajax() via jquery
Following is my html:
<!-- Jquery tute no 94 onwards -->
<html lang="en">
<head>
<meta charse="utf-8">
<title> jquery4 </title>
<link rel="stylesheet" type="text/css" href="jquery4.css"/>
</head>
<body>
<input id="lo" type="text"> </input>
<input id="ton" type="button" value="Load"> </input>
<div id="content"> </div>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="jquery4.js"> </script>
</body>
</html>
My jquery4.js is:
$(document).ready(function()
{
$('#ton').click(function()
{
var nm= $('#lo').val();
$.ajax({url: 'page.php', data1: 'name='+nm, success: function(data2)
{
$('#content').html(data2);
}
});
});
});
My page.php is:
<?php
if(isset($_GET['data1']))
{
echo $namer= $_GET['data1'];
}
?>
All the above files are in the same folder, and I have xampp installed.
I guess the error is somewhere in the jquery file where I call the
ajax() function
jQuery ajax doesn't take a data1 parameter. It takes a data parameter, which should be an object of name-value pairs.
$.ajax({
url: 'page.php',
data: {
data1: 'name=' + nm,
},
success: function(data2) {
$('#content').html(data2);
}
});
$.ajax({
type: "GET",
url: "page.php",
data: {
data1: 'name=' + nm,
}
,
success: function(data2) {
$('#content').html(data2);
}
});
Try this:
$(document).ready(function() {
$('#ton').click(function() {
var nm= $('#lo').val();
$.ajax({
url: 'page.php?name=' +nm,
success: function(data2) {
$('#content').html(data2);
}
});
});
});
You don't have to tell jQuery to use GET, as it defaults to that, if nothing else is specified.
So the ajax function does not take an argument called data1, but 'data', this is mostly used for other methods as POST, PUT and DELETE.
I prefer also sending GET requests with a normal query string, like the above example.
You can then check for get GET parameter with PHP, using $_GET['name']