Post data to another php page using ajax

Question

I use the Fullcalendar (javascript). When you click on the event it opens a form with its content.

eventClick: function(calEvent, jsEvent, view) {   

content.val(calEvent.content); //content of event
$('#event').show(); 
formOpen('edit');

},

I want to do that when you click on the event its opens another php page and displayed its data in it. For now i am trying to just send "hello" string to PAGE2.

eventClick: function(calEvent, jsEvent, view) {             

var content = "hello";

$.ajax({

    type:'POST',
    cache: false,
    dataType: "text",
    url: "page2.php?id=<?php echo $_SESSION['id']?>",
    data: { content: content },

    success: function(data){
       location.href = 'page2.php?id=<?php echo $_SESSION['id']?>';
    },  
});
},

PAGE2

$content = $_POST['content']; 
echo $content;

In browser, i see that when you click on an event it performed POST request on PAGE2 with FORM DATA: content:hello. Then there is a transition to PAGE2 and some GET requests without data. And on the PAGE2 i see the error: Undefined index: content.

I spent so many days trying to solve this problem, but have not found a solution. Please, help me to understand where the error is.

Answer 1

seems like you could create a <form method='post' action='page2.php?id=....' with a hidden input named content, then call the forms submit function in your onClick after it has filled in the hidden inputs value to the content you need

a bit like

<form id ="theForm" action="page2.php?id=<?php echo $_SESSION['id']?>" method="POST">
    <input type="hidden" name="content" id="content"/>
</form>
<script>
    eventClick: function (calEvent, jsEvent, view) {
        var content = document.getElementById('content');
        var form = document.getElementById('theForm');
        content.value = 'hello'; // based on your example, obviously you need a value based on the click
        form.submit();
    },
</script>

Answer 2

Because when you send the ajax request you will send through the content.

But when that is successful, you relocate to PAGE2 using location.href which creates a different http request than the previous ajax call.

I would achieve your goal by either passing your content value through GET rather than POST.

Another method that would work for POST requests is by having a hidden form on your html page, that you set an input with name 'content' to be your content. Then call the submit function for that form.

For an example of this method go to this Stack Overflow question and answer: https://stackoverflow.com/a/26697375/7058912

Answer 3

From what i understood. You want to open another page when someone clicks the calender events.

What you need is to inside eventClick

/*GENERATE YOUR URL HERE. EVENT object PASSED TO THE EVENT CLICK FUNCTION ALREADY CONTAINS ALL EVENT DATA LIKE ID ...*/
var url = 'page2.php?id='+calEvent.id
var win = window.open(url, '_blank');
win.focus();

Hope this helps.