javascript - Pass id to php using JQuery -
the general problem:
want pass id of div element php using ajax function jquery. whole code in 1 file ajax function should pass id same file.
what did:
1. took id of clicked element (#iamaid) , saved it
2. tried send php code in same file using ajax function jquery
3. tried echo post method.
what happend:
developer console gave me output , said data has been sent php said hasn't been sent , said undefined index.
i used 2 different ajax functions jquery pass code both didn't seem work.
here full code (it's in 1 file):
<html> <head> <title>check post/get-method same file</title> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> </head> <body> <h1>page check post/get-method 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 post function $("#iamaid").on("click", function() { var the_id = $(this).attr("id"); $.post("", {id:the_id}) }); // try 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 more information needed feel free comment give informations need me.
i looked hours in internet couldn't find solution.
please me.
edit
got myself answer. general misunderstanding of how php works. passing id ajax same file results in same output because file gets called again.
solution simple:
put output code or php code in file pass id ajax call file , echo wanted html code , paste container
here example of mean:
html code script
<html> <head> <title>check post/get-method same file</title> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> </head> <body> <h1>page check post/get-method same file</h1> <div id="iamaid">click me</div> <h1>the output</h1> <p id="output"></p> </body> <script type="text/javascript"> /* id gets posted php file php file echos 1 line , echo output gets pasted #output container works when echo html code need 1 main container paste 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"]; ?>
can see moving php code file makes more simple , don't need load whole page again because output container object gets new content.
i hope helped people got stuck ajax , problem use same page , not changing it.
this fix issue $.post("", {"id":"the_id"})
Comments
Post a Comment