I have looked at other questions and cannot find the answer to why this isn't working. I am following a tutorial online. Here is my code:
HTML file:
<!DOCTYPE HTML>
<html>
<head>
<title>AJAX Test</title>
</head>
<body>
<h4>Enter an Item</h4>
<input type="text" id="item" /><br />
<input type="button" id="button" value="Submit" /><br />
<div id="content"></div>
<script type="text/javascript" scr="ajax.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
JS file:
$('#button').click(function() {
var item = $('#item').val();
$('#content').text('Loading...');
$.post('ajax.php', { item: item }, function(data) {
$('#content').text(data);
});
});
PHP file:
<?php
include 'db.php';
if (isset($_POST['item'])) {
$item = $_POST['item'];
$sql = mysql_query("INSERT INTO items(item)VALUES('$item')");
if ($sql === true) {
echo "Inserted into database";
} elseif ($sql ==== false) {
echo "Error inserting into database";
}
}
?>
I don't see what I'm doing wrong. The tutorial has the same code. Thanks for your help.
moonwave99 is right (I'm not sure why the downvotes).. and also the scr="ajax" should be src="ajax" in your html and should be put in head or even before. Other reason may be the position of ajax.php to the site, maybe declaring whole URL will help :
$.post('http://wholeurl/ajax.php', {
item: item
}, function(data) {
$('#content').text(data);
});
Hope this helps, if not please specify error.
Well i dont know if i can help you:
You have some mistakes on your code
The elseif condition is not ====(4) just ===(3)
The ajax.js file should be after the jquery library
The src attribute is not scr.
And of course the URL of the jquery library should start with http:// because is an external resource.
The mysql_query() function should have the conection variable, Example:
mysql_query("[query here]", $connect);
Beside any other error you may get, you should import jQuery before your script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ajax.js"></script>
Related
I am new to web development, and have encountered a problem with jquery and php. Having trouble calling a php file with jquery through xampp using a simple GET and POST a http request. Any help would be greatly appreciated. Thank you!
<?php
$name=$_POST['name'];
if($_POST['name']!=""){
echo 'Shalom'.$name;
}else{
echo 'Enter name';
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="name" placeholder="Name"/>
<button id="button">Submit</button>
<div class="response"></div>
<script type="text/javascript">
$('#button').click(function(){
var name=$('#name').val();
$.post('jquery post http request.php',{name:name},function(response,status,xhr){
$('.response').text(response);
});
});
</script>
</body>
</html>
It seems that this question has already been asked many times but none of the solution is working for me. I'm new to AJAX so maybe there are some basics that I've missed? Basically I just want to pass the content of an html paragraph to a PHP script and I don't want to use html form.
I have two files: tes.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
and tes.php
<?php
if (isset($_POST['text'])) {
$content = $_POST['text'];
echo $content;
} else {
echo "no content";
}
?>
After I clicked the Post button, in the PHP file it returns
Notice: Undefined index: text in C:\xampp\htdocs\projects\lab\tes.php on line 3.
Where did it go wrong? Really need your help guys. Thanks!
can you try this
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
success:function(data) {
console.log(data)
}
});
});
});
and in the HTML (as reza suggested)
<button id="post">post 2</button>
then, open the developer console and see if you can see the response from the tes.php
change html
<button id="post2">post 2</button>
to
<button id="post">post 2</button>
You have a click event and that sends an AJAX request so far, so good. You have
target="_blank"
which makes sure the page is opened in another tab/window. As far as I understood, you only want to send the request, so you need to prevent default:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(e){
e.preventDefault();
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent}
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
The new tab/window will give you the error, since an expected parameter is not there, so don't open it.
I'm a newbie to Jquery , my question is simple , I'm trying to pass data using Jquery Post method, I have read a lot , but I can't figure it out:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="TestAd" id="TestAd">
<iframe data-aa='58593' src='https://ad.a-ads.com/58593?size=468x60' scrolling='no' style='width:468px; height:60px; border:0px; padding:0;overflow:hidden' allowtransparency='true' frameborder='0'></iframe>
</div>
<button>Send request</button>
<br>
<?php
if(!empty($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var height = $('.TestAd').height();
$("button").click(function()
{
if (height==0)
{
$.post("", {block:true});
}
}
</script>
</body>
</html>
The script is a simple AdBlocker checker, thanks for your help
<form method="post">
<input type="hidden" value="true" name="block">
<input type="submit" value="Send request">
</form>
<?php
if(isset($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
if you want to redirect it to the same page why dont you use simple form tag to pass the block value.By default it will redirect it on the same page
Change your PHP to this:
<?php
if(isset($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
And Change your jQuery to this:
<script>
var height = $('.TestAd').height();
$("button").click(function () {
if (height == 0) {
$.post("somepage.php",{block: true}, function (data) {
// data is the response
// do something with it here
alert(data);
});
}
}
</script>
Here are the docs for $.post(), essentially, the way you had it, ignores the response. You have to pass the anonymous function (function (data) {}) callback as the 3rd argument to be able to work with the response.
From the docs:
Examples:
Request the test.php page and send some additional data along (while still ignoring the return results).
$.post( "test.php", { name: "John", time: "2pm" } );
I am trying to learn Ajax/JavaScript and I can not seem to get my search to work. It is meant to return partial names but returns nothing at all
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js></script>
<script type="text/javascript">
function getName(value) {
$.post("searchbar.php", {partialName:value},function(data))
$("#results").html(data);
}
</script>
</head>
<body>
<input type="text" onkeyup="getName(this.value)"/>
<br>
<div id="results"></div>
</body>
</html>
php file:
<?php
include "header.php";
$partialName = $_POST['partialName'];
$name = mysql_query("SELECT username FROM grpgusers WHERE username LIKE '%$partialName%'");
while($names = mysql_fetch_array($name)){
echo "<div>".$names['username']."</div>";
}
?>
could some one please help me out on where I am going wrong?
you are missing braces, change to:
function getName(value) {
$.post("searchbar.php", {partialName:value},function(data) {
$("#results").html(data);
});
}
Plus, missing a quote in
jquery.min.js ></script>
^ right there
change that to jquery.min.js"></script>
Missing closing double quote in <script> tag and closing brace for $.post() function :
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function getName(value) {
$.post("searchbar.php", {partialName: value}, function (data) {
$("#results").html(data);
});
}
</script>
</head>
<body>
<input type="text" onkeyup="getName(this.value)"/>
<br>
<div id="results"></div>
</body>
</html>
Turns out I did not double quote the link to the js libary
thanks
I am new in jQuery and need help to figure out why $.get does not reply.
Let me explain what I have: There is a main index.php as follows:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> </head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/reqhan.js"> </script>
<input id="string" type="text" />
<input id="button" type= "button" value="Go" />
<div id="div"></div>
</body>
</html>
the js/reqhan.js contains
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){alert('2');});
$('#div').text(data);
alert('3');
});
});
and reverse.php contains a simple code (I pasted here but does not preview it) that gets the text from reqhan.js file and returns an echo message.
when running the code on Google Chrome, the first alert is shown but not the rest and of course the `$('#div').text(data);' doesn't send back the data to the js file.
Please let me know if further info is required.
many thanks.
You're closing your callback function before you do anything with the data
Try this instead:
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){
alert('2');
$('#div').text(data);
alert('3');
});
});
});
Try to format your code so that each pair of brackets gets its own indentation. It should help catch small things like this.