PHP doesn't echo posted value from jQuery

Question

Clicking on div #some_id calls details.php but it doesn't succeed in retrieving data from jQuery. details.php is supposed to echo 123 .

My goal is that when I click on div #some_id , details.php shows 123 in the browser.

html:

<div id="some_id">
<a href="details.php"> Details </a>
</div>

jQuery:

function detailsClick(){
    $("#some_id").live('click', function(){
        var data = {'myData': 123};
        $.post('details.php', data);
    });
}

details.php:

<?php
$idNumber =  $_POST["myData"];
echo ($idNumber);
?>

Answer 1

I believe that you are not getting click event here. Change jQuery code as below.

$(function(){
    $("#some_id").on('click', function(){
        var data = {'myData': '123'};
        $.post( "details.php", data)
            .done(function( data ) {
                 alert( "Data Loaded: " + data );
        });
    });
});

Answer 2

1. .live() is deprecated. Use .on() instead.
2. The function detailsClick() is never called. So the onclick listener is NOT registered.

Either do this.

function detailsClick(){
    $("#some_id").live('click', function(){
        var data = {'myData': 123};
        $.post('details.php', data);
    });
}

detailsClick();

OR do this..

$(document).ready(function(){
    $("#some_id").live('click', function(){
        var data = {'myData': 123};
        $.post('details.php', data);
    });
});

ALSO, you need to use AJAX for what you want to do.

Refer AJAX with jQuery()

Answer 3

It doesn't display anything because the link is being followed, with no post data.

<a href="details.php"> Details </a>

Ajax is used to get data without changing pages. It seems as if you want to navigate to the details page.

If you want the page to navigate to details.php , use a normal html form with submit button.

If you want to return data WITHOUT changing pages

Details

$("#some_id").on('click', function(e){
      e.preventDefault().
      var data = {'myData': 123};
      $.post('details.php', data)
          .done(function(response){
              // data is available here
              console.log(response);
          });
 });