The general problem:
I want to pass an id of a div element to php using the ajax function from jQuery. The whole code is in one file so the ajax function should pass the id to the same file.
What I did:
1. I took the id of the clicked element (#iamaid) and saved it
2. I tried to send it to the php code in the same file using the ajax function from jQuery
3. I tried to echo it with the post method.
What happend:
The developer console gave me an output and said that the data has been sent successfully but php said it hasn't been sent and said it is an undefined index.
I also used two different ajax functions from jQuery to pass the code but both didn't seem to work.
Here is my full code (it's all in one file):
<html>
<head>
<title>Check POST/GET-Method to same file</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>Page to check the POST/GET-Method to same file</h1>
<div id="iamaid">Click me</div>
<h1>The output</h1>
<?php
if (isset($_POST["id"])) {
echo "<p>The id is: " . $_POST["id"] . "</p>";
}
else {
echo "<p>No id found, edit code</p>";
};
?>
</body>
<script type="text/javascript">
// try it with post function
$("#iamaid").on("click", function() {
var the_id = $(this).attr("id");
$.post("", {id:the_id})
});
// try it with ajax function
$("#iamaid").on("click", function() {
var the_ajax = $(this).attr("id");
$.ajax({
url:"",
method: "POST",
data: {id:the_ajax}
});
});
</script>
<style>
body {
font-family:Verdana;
}
#iamaid {
width:100px;
height:50px;
background:black;
color:white;
}
#iamaid:hover {
cursor:pointer;
}
</style>
</html>
If any more information is needed than feel free to comment I will give you all informations you need to help me.
I looked for hours in the internet but I couldn't find any solution.
Please help me.
EDIT
I got myself an answer. It was a general misunderstanding of how php works.
Passing an id with ajax to the same file results in the same output because the file gets called again.
The solution is very simple:
Just put the output code or php code in another file then pass the id with an ajax call to the file and echo the wanted html code back and then paste it to an container
Here an example of what I mean:
HTML CODE WITH SCRIPT
<html>
<head>
<title>Check POST/GET-Method to same file</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>Page to check the POST/GET-Method to same file</h1>
<div id="iamaid">Click me</div>
<h1>The output</h1>
<p id="output"></p>
</body>
<script type="text/javascript">
/* the id gets posted to the php file
the php file echos one line and the
echo output gets pasted into the #output container
this also works when you echo html code you just need
one main container to paste it in
*/
$("#iamaid").on("click", function() {
$.post("output.php", {id:$(this).attr("id")}, function(output) {
$("#output").html(output);
});
});
</script>
<style>
body {
font-family:Verdana;
}
#iamaid {
width:100px;
height:50px;
background:black;
color:white;
}
#iamaid:hover {
cursor:pointer;
}
</style>
</html>
PHP CODE (output.php)
<?php
echo "The id is: " . $_POST["id"];
?>
As you can see moving the php code to another file makes it much more simple and you don't need to load the whole page again because the output container is the only object that gets new content.
I hope it helped some people who got stuck with ajax and the problem to use the same page and not changing it.
