Open new Tab or Window with POST [PHP] - javascript

This is the situation: I have 2 files, reportCaller.php and report.php. From the reportCaller.php, the user is going to press a button with the method "onclick", this will call the function that is going to do the ajax/post stuff (this is with what im having problems), report.php is going to catch some parameters by POST and has to be opened on a new Tab or Window, this is going to display a report. (Note: May be not important, but im using HTML2PDF).
reportCaller (HTML):
<input type="button" onclick="generateReport()">
reportCaller (JS):
function generateReport(){
var id = '¡I must reach the report FILE!';
//I tried a couple stuff, but didnt work, this is one:
$.ajax({
type: "POST",
url: "report.php",
data: {id:id},
cache: false,
success: function (html) {
myWindow = window.open(encodeURIComponent(true),
"_blank");
myWindow.focus();
});
}
report:
$id = $_POST['id'];
//This file (report.php) must catch $_POST, will not help if i only open the file in a new Tab/Window
Thanks for reading.

This is more of a comment than an answer, but I haven't got the reputation ;-)
take a look at
Javascript Post on Form Submit open a new window
the trick is to put your button in a
<form target="_blank">
Element and then send that form..
You could do your processing of data in the onsubmit Handler

Related

JQuery .on("click") event not triggering

I am currently working on a "split-screen" web application. It uses selenium to retrieve the html of a webpage then sends and displays it in iframes using srcdoc. I want, when someone presses a link in the first screen, for the second screen to display a simple "Loading" while an ajax request is sent to the backend to retrieve the html of the url (as it might take a couple of seconds to load) then display the retrieved html in the second screen.
To do so, I "inject" a JQuery event code into the src code of the first screen in the backend (shown below) right before the end body tag (as the retrieved source is a string, that is easy to do). The second screen has id="oframe".
For some reason, the JQuery event wont trigger. Any ideas why?
<script>
$("a").on("click",function(e){
e.preventDefault();
if(e.target.href){
let link = e.target.href;
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
}});
</script>
Note that the event works if I only have
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
or
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
inside the if statement.Together they stop the event, I know that because preventDefault() is not working (link opens in a new tab).
Example <a> tag:
<a class="gdpr-modal-link" target="_blank" ref="http://www.politifact.com/privacy/">cookies</a>
You cannot have a line break in the middle of JavaScript string.
So, put this:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
all on one line:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>p>Loading</p></body></html>";

Post data to another php page using ajax

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.
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>
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
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.

Send AJAX request to url: button.click()?

I'm writing a little bot for a page and I need to click on a button. But that button would link me to another page so that I'd had to reenter my script to the browser's console. That's why I want to send an ajax request and set $("body") to its result.
The problem is, I don't know where the button links to and it's not as simple as $("#btn").prop("href"). It's a <button> tag. Of course I tried to find out what happens when the button is clicked so I can do the same, but it turned out that this is very difficult.
Can I do something like $.ajax({ url: $("#btn").click() }) ?
Or do you know a way to simply debug what exactly gets triggered when clicking on that button?
<div id="checkoutNextbottom" class="checkoutNext">
<button name="buttonNext" id="nextbottom" class="linkAsButton processButtonNext">Weiter</button>
<!---->
</div>
try like this ...
$(document).ready(function(){
$("#nextbottom").click(function(e){
e.preventDefault();
$.ajax({type: "method type",
url: "url",
data: data,
success:function(result){
}
});
});
});

POST Form to new Tab. Output is PDF

I'm writing a website that generates some PDF documents for users. I need to do two things.
1) When the user clicks submit, the generated PDF, which is returned in the POST response, should be opened in a new tab.
2) For some requests, the original page needs to be refreshed to show that this PDF is in the user's library.
I've come up with this JS. It does submit the form properly, puts the output in a new tab, and reloads the page.
$.ajax({
type: 'POST',
url: '/share/pdf/',
data: $('#pdf_share_form').serialize(),
async: false,
success: function (d) {
var w = window.open();
w.document.write(d);
location.replace('/pdf/');
}
});
The problem is that document.write() is expecting HTML, so a PDF shows up as a jumble of binary characters.
I feel like I need to indicate that the data should be downloaded when writing it, but I'm not sure how to go about that. Note that some generated files are ephemeral and immediately deleted after being returned from the form POST, so I can't do any sort of window.open(url).
Thanks to #Remy I thought a little more about what I needed to do. Before I wrote this question, I actually had a standard jQuery submit() call with the form set as target="_blank". That worked fine, but I was having problems with reloading the page after the submit. That led me to $.ajax(), which was the wrong solution.
The solution was quite simple:
$.when($('#pdf_share_form').submit()).then(function() {
location.replace('/pdf/');
});
<form id="pdf_share_form" action="/share/pdf/" target="_blank" method="post">
<input id="pdf_index" name="pdf_index">
<input id="pdf_name" name="pdf_name">
</form>

deleting an account using multiple ajax requests

The user, upon clicking a button(delete) is given the option to delete his account-he must enter his password also to do that.
So I am describing above the 1st ajax request which is made.WHat is returned from the server is a response if there are still bookings(it is a booking web app) made from the user and if he should reconsider-a message appears.
If he insists deleting his account then he must click the delete button again.
The problem(if you have not noticed) is that by clicking again the delete button the above procedure is repeated while the aim now-after the warning message appears-is that the click of the delete button means "yes, despite the bookings I want to delete my account".
So, this delete button must have dual role, one before the warning appear and one after the warning.
What can I do in a situation like this?I was thinking implementing a confirm box but the above are all taking place in a modal box.So a confirm box over a modal I do not think is the correct solution.
Here is the ajax request that is sent when the user first clicks the delete button:
$('.deactivate').click(function(){
event.preventDefault();
var trimmeddelpass=$.trim($('input#del_password').val());
if(trimmeddelpass!=="")
{ $.ajax({
type: "POST",
url: "delaccountajax.php",
data: {"delpass":trimmeddelpass},
success:function(data){
if(data==2)
{$('#warning').html('You have still bookings pending');
$('#warning').show();
}
else if(data==3)
{ window.location.href = "../Frontend/login.php";//proceed deleting the account
}
error:function(jxhr){
alert(jxhr.responseText);}
});
}
Here is the server code:
$output=delete_account($conn,$delpass,$sessionml);
if($output=='2')
{$success='2';}
elseif($output=='3')
{logout();
$success='3';}
echo $success;
Both of the codes above are simplified versions involved since some other stuff were in them too,-they are not needed though for the issue we are dealing.
I have problem implementing the code you propose...it is the right solution of course but...look what is going on,here is the code:
$('.deactivate').click(function(){
event.preventDefault();
deletestate=0;
if(deletestate==0)
{ $.ajax({
type: "POST",
url: "delaccountajax.php",
data: {"delpass":trimmeddelpass},
success:function(data){
if(data==2)
{$('#warning').html('You have booking pending');
$('#warning').show();
deletestate=1
}....
if(deletestate==1){....}
The code above always set the global deletestate to 0,setting it to 1 later has no effect whatsoever...how can i do this?

Categories