I'm new to frontend development, and I'm facing a problem that I cannot resolve.
What I am trying to do is open a new popup HTML page with parameters (which I can pass as an array) by calling axios.post
method from my vue.js file.
I googled possible solutions, but still could not find the source of the problem. Observing Chrome console, I suspect that axios.post
works fine since it says:
data: "Array( [index_id] => 1 [log_id] => 63)…ow.print(); // });", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
However, in the popup window, I cannot access the variables, or they are null
.
The following code is a function in my vue.js:
printTransaction: function(index){
// I have tried this but could not figure out
// var formData = new FormData();
// formData.append('index_id', index);
//
// axios.post('/popup/popup_output_print.php', {
// index_id: index,
// })
// .then(function(response){
// console.info(response);
// })
// .catch(function(error) {
// console.error(error);
// })
// and this too :(
const params = {
index_id: index,
log_id: logId,
};
axios.post('/popup/popup_output_print.php', params, {
headers: {
'content-type': 'application/json',
},
})
.then(function(response) {
console.info(response);
})
.catch(function(error) {
console.error(error);
})
let newWin = window.open('/popup/popup_output_print.php');
setTimeout(function() {
newWin.print();
//newWin.close();
}, 2000);
}
And this is the very first part of popup_output_print.php
<?php require("../_/inc/init.php");
$data = json_decode(file_get_contents("php://input"), TRUE);
$index_id = $data['index_id'];
$log_id = $data['log_id'];
print_r($data);
?>
...
//Trying to print the value
<?php
if($index_id == null) {
echo "index_id is null";
}
else {
echo $index_id;
}
?>
Then the popup window prints index_id is null
What am I doing wrong?
UPDATE: following the comment, I just tried var_dump
, and the variables are all null
. :(
What is going on is that axios.post
have totally no effect to window.open:
let newWin = window.open('/popup/popup_output_print.php');
this makes a GET request with no params.
From my view, the better approach is to use something like Vue modal, i.e.:
axios(...).then( response => openVueModal(response.data))
If you prefer window.open
option, you can pass variables as a GET params:
let newWin = window.open(`/popup/popup_output_print.php?index_id=${index}&log_id=${logId}`);
You'll need to change backend then, to read vars from $_GET
.
Other solution might be to, put axios.post
into window open template, so it request needed variables after opening.