How to get php ID on third page?

Question

edit

Trying to explain it again since my previous explanation was left unclear.

What I am trying to do is simple in theory, but I cannot make it work. I have six pages:

1. searchnanny.js
2. superhoidja.js
3. nannyInfo.php
4. searchNanny.php
5. superhoidja.php
6. search.php

The flow should be like this is like this:

1. I query user information from database on searchNanny.php
2. on searchNanny.js I use $.getJSON("PHP/scripts/searchNanny.php", function (data) {}); to append the list of all users to a div on page search.php
3. User clicks on the generated href="superhoidja.php?superhoidja_id='+data.user_id+'" on page search.php which takes them to a page called superhoidja.php as well should send the data-id to a page called superhoidja.js on redirect (don't know if this is possible)
4. On the page superhoidja.php I include the js file superhoidja.js which includes the following $.getJSON("PHP/scripts/nannyInfo.php", function (data) { console.log(data);});

Now the problem is that I never get the data-id on nannyInfo.php because of the redirect I guess. If I don't redirect, I get all the information.

I tried to use $_GET on superhoidja.php file and it worked fine. Then pass the ID to the nannyInfo.php, but that still does not work- cannot get the ID (see example below).

I would like to pass the data-id to the nannyInfo.php on searchNanny.js because then I don't have any JS on the superhoidja.php file where comes my question: How can I pass the data-id from searchNanny.js to nannyInfo.php and get all the data on superhoidja.php via superhoidja.js?

I hope this explanation is clearer and makes sense. If somebody knows a easier work flow then please tell me. Thanks in advance.

List point 2 example is here:

    var profileCard = 
        '                   <div class="col-md-3">'+
        '                        <div class="card hovercard">'+
        '                            <div class="cardheader">'+
        '                            </div>'+
        '                            <div class="avatar">'+
        '                                '+profilePictureString+''+
        '                            </div>'+
        '                            <div class="info">'+
        '                                <div class="title">'+
        '                                    <p>'+data.userFirstName+'  '+userLastNameLetter+'.</p>'+
        '                                </div>'+
        '                                <div class="desc">'+data.description+'</div>'+
        '                            </div>'+
        '                            <div class="bottom">'+
        '                                <a class="btn btn-primary userProfile" href="superhoidja.php?superhoidja_id='+data.user_id+'"  data-id="'+data.user_id+'">'+
        '                                    <i class="fa fa-search" aria-hidden="true"></i> Vaata'+
        '                                </a>'+
        '                            </div>'+
        '                        </div>'+
        '                    </div>';
    $("#nannySearchListing").append(profileCard);

List point 3 example

Tried to send the ID like this:

$(document).on("click", ".userProfile", function (e) {
        var superhoidja_id= $(this).data('id');
        console.log(superhoidja_id);

        $.ajax({
            type: "POST",
            url: 'PHP/scripts/nannyInfo.php',
            data: "superhoidja_id=" + superhoidja_id,
            success: function (data) {
                console.log(data);
            },
            error: function (jqXHR, textStatus, errorThrown, data) {
                console.log(jqXHR, textStatus, errorThrown, data);
            }
        });
    });

Superhoidja.php page example what I tried

//get the id from the page
$superhoidja_id = $_GET['superhoidja_id'];

 $(document).ready(function(){
        var superhoidja_id = <?php echo $superhoidja_id ?>;
        console.log(superhoidja_id);

        $.ajax({
            url: "PHP/scripts/nannyInfo.php",
            type: "POST",
            data: superhoidja_id
        });
    });

nannyInfo.php

<?php
header('Content-type: application/json;charset=utf-8');

require_once '../class.user.php';
$user_home = new USER();

if (empty($_SESSION['userSession'])){
    die();
}else{

    if(isset($_POST['superhoidja_id'])){
        $superhoidja_id = $_POST['superhoidja_id'];
    }else{
        die();
    }
}
?>

Answer 1

You are not sending param in second request. That what it should look like:

$.ajax({
   url: 'PHP/scripts/nannyInfo.php',
   data: {supernanny_id: 'put_desired_id_here'},
   type: 'POST',
   dataType: 'json',
   success: function(json){

      //do your stuff here
   }
})

EDIT: Since you have your id as param in the url, you can take it from there:

lets say, you have userProfile page with such url:

now you just get your supernanny_id from there

var params = location.search; //you get everything after ?
var supernanny_id = (params.length) ? params.split('?supernanny_id=')[1] : '-' //123454

Answer 2

You need to set the variable in your data differently if you are using POST method.

data: {
  supernanny_id: supernanny_id
}

Because your page is then redirecting (not sure why) - you need to change $_POST to $_GET / $_REQUEST as the redirect passes the info as name value key pairs in the URL.

Answer 3

How about implementing the "onclick" event on the hypertext?

something like:

<a href="/path/to/page.html" onclick="ajaxfunction(par1,par2,...)"> click here </a>

Answer 4

So how I did it in the end and I hope this will help somebody as well.

I used localStorage for this, as this seemed the most reasonable thing to use atm.

On the page searchNanny.js I included this on the click:

$(document).on("click", ".userProfile", function (e) {
    var user_id= $(this).data('id');
    var superhoidja_id =  parseInt(user_id);
    // Put the object into storage
    localStorage.setItem('superhoidja_id', superhoidja_id);

});

Which will write the id to localStorage.

// Retrieve the object from storage
var superhoidja_id = localStorage.getItem('superhoidja_id');

var superhoidja_id_calendar = { superhoidja_id : superhoidja_id }

And I can use it everywhere I want. Maybe it is not the best solution, but it works for now. Cheers