I want to send id to php script.I think my code is ok, but when i click on tag i get this error:
Notice: Undefined index: id in C:\xampp\htdocs\domaci\cao.php on line 4
here is my html + ajax code :
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
and this is cao.php:
<html>
<body>
<?php
$id = $_POST['id'];
echo $id;
?>
</body>
</html>
i really need this to get to work, please help me :)
Your $.post ajax is fine. The issue is when the anchor is clicked, you don't preventDefault or return false, to stop the browser redirecting to cao.php. When it redirects to cao.php, it is a GET request, and so triggers the undefined index notice because there is no post data.
Add return false or preventDefault:
$('a').click(function(e){
e.preventDefault();
$.post($(this).attr('href'), { id : $(this).attr('id') } );
});
Look at your browser's console (F12) on the Network tab, to see the response of the ajax.
Try it now.
$(document).ready(function(){
$('a').click(function(){
$.post($(this).attr('data-url'), { id : $(this).attr('id') } );
});
});
</script>
</head>
<body>
<a href="#" data-url="cao.php" id="Barselona" >Barselona</a>
</br>
<a href="#" data-url="cao.php" id="Beograd" >Beograd</a>
</body>
</html>
Your link redirects you, so simpe do this:
e.preventDefault();
Also its better to have variables (for future), here is EXAMPLE
Try this one will work for you:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('a').click(function(){
$.post('cao.php', { id : $(this).attr('id') },function(data){
alert(data);
});
});
});
</script>
</head>
<body>
<a href="#" id="Barselona" >Barselona</a>
</br>
<a href="#" id="Beograd" >Beograd</a>
</body>
</html>
AT cao.php page
<?php
$id = $_POST['id'];
echo $id;die;
?>
just try print_r($_POST) in cao.php & check the values are posting
$id=$_POST["id"];
Related
i want to send Get when the link clicked to receive the result in php code
and this what happened
this in php file working perfect
<html>
<a class="cc" href="#">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
but when i put GET to the href didn't work just Flashing content
<html>
<a class="cc" href="?id=1">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
In the second case, you really need to stop the <a> from following the link.
$(document).ready(function() {
$(".cc").click(function(e) {
e.preventDefault();
$(".body").load('page.php');
});
});
I have two jquery events on click of button.but i want to perform only one event.So how can i do that.
my code is as follow.
<!DOCTYPE html>
<html>
<head>
<title>Demo #1</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<button id="mybtn">Some Button</button>
</div>
<script>
$("#mybtn").click(function(){
$("#mybtn").fadeOut();
});
</script>
<?php include('demo2.php'); ?>
</body>
</html>
Here is code for demo2.php
<script>
$("#mybtn").click(function(){
alert("i am in included in demo2");
});
</script>
now When i click on button Both Event is performed.so is there any way to perform one event that is store in current page not perform jquery that is included.
Create a variable to connect the selector to the event in page one do this
<script>
var selectFunction1=True;
$("#mybtn").click(function(){
if(selectFunction1===True){
$("#mybtn").fadeOut();
}
else{return false;}
});
</script>
And in demo2.php do this
<script>
var selectFunction2=True;
$("#mybtn").click(function(){
if(selectFunction2===True){
alert("i am in included in demo2");
}
else{return false;}
});
</script>
hello here i have i script but this dont work i caant update chat every second can you help me to update chat every second from database (pleasee no uppate div only text)
index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
read.php
<?php
include("config.php");
$Data = "SELECT * FROM chat ORDER BY Time ASC";
$Result = mysqli_query($Connection, $Data);
while($row = mysqli_fetch_array($Result,MYSQLI_ASSOC))
{
echo '</br>' .$row['name'];
}
mysqli_free_result($Result);
mysqli_close($Connection);
?>
this is my code but my code when insert data in database my code not update data in html
Option 1:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat()
{
$.get("read.php")
.done(function(data)
{
//You can do futher checks here....
$("#Show_Data").html(data);
setTimeout(function() {updateChat();},1000);
})
.fail(function()
{
//error 404 or 500
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
Int the code above, when something wrong with the call it stops and it does not continues the executions.
Option2:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setInterval(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
The code aboce executed every 1000 miliseconds the ajax call regardless if it is sucessfull the call or not
You need to use setInterval instead of setTimeout (it runs only once).
If that doesn't help, please post any PHP/JavaScript errors that you are getting.
To make sure PHP errors are set to display, add error_reporting(E_ALL) to the top of your script.
To see JavaScript errors, open the Developer Tools (F12) in your browser and go to Console.
How can I link HTML href values to AJAX so that I get result on same page but in different conatainer. Below is my my code:
<html>
<head>
<title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#a').click(function() {
e.preventDefault();
$('content').load($(this).attr('href'));
});
});
</script>
</head>
<body>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body</div>
<div id="footer"> </div>
</body>
</html>
Since I am new to AJAX, I am not able to understand how to get information related to clicked value of href in AJAX function so that it will display result in same page but in other division. My filename is, say front_end.php
This is your code, just updated:
<html>
<head> <title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
});
</script>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body
</div> <div id="content"></div>
<div id="footer"> </div>
</body>
</html>
1) A tag is not $("#a") in jquery
2) $('content') is nothing
3) element with id $('#content') or some element with class $('#content')
Tako a look at jsBin example
1: http://jsbin.com/IFaLoJE/1/ or jsfiddle example
Try something like this :
$('a').click(function (e) {
e.preventDefault();
$('#content').load(this.href);
});
i want that when we click on Ajax 1 then content of ajax1 is change but Ajax 2 will remain same and vice verse plz help i want to do that with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$("#pas").html(result);
}});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>
Two elements cannot have the same id. You should change to using classes.
<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>
Once you've done that, you can use this to target the correct item.
$(document).ready(function(){
$(".pas").click(function(){
var $this = $(this); // "this" is the clicked element
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$this.html(result);
}});
});
});
you have to differentiate div's ids: give them two different id (i.e. pas1 and pas2 ) and same class 'pas', then fire actions on div.pas
Don't use duplicated id's, use class instead. Use a refference to the clicked object to update your content. Here is your modified code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
var _this = this;
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$(_this).html(result);
}});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>