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>
Related
I'm using Mews/Captcha package with a Laravel 5.5. application.
I'm implementing a contact form where the user fills it out, enters in Captcha data, and submits it. All of that works. If you go to the form, the captcha image appears. If you refresh the page, a new captcha image appears. If you try to submit the form without the captcha or an incorrect captcha, it fails. If you submit with the correct captcha it succeeds.
The issue I am having is with the refresh button in case the user wants to change the image. For the life of me, I can't get it to return the image, even though I've seen numerous examples that claim to work that are using similar code. What happens is that the current captcha image is replaced by blank space.
Here's the code for the button:
<script>
$(document).ready(function(){
$('#reload').on('click', function(){
$.ajax({
type: 'GET',
url: '/reload-captcha',
success: function(data) {
$("#captchadiv").html(data.captcha);
}
});
});
});
</script>
Here's the code further down the page where the captcha image and buttons are:
<tr>
<td><button type="button" class="button reload" id="reload">Refresh</button></td>
<td><div id="captchadiv">{!! captcha_img('flat') !!}</div></td>
</tr>
<tr>
<td><label for="captcha">Captcha</label></td>
<td><input type="text" id="captcha" class="form-control" placeholder="Enter Captcha" name="captcha">
#if ($errors->has('captcha'))
<span class="textRed">
<strong>{{ $errors->first('captcha') }}</strong>
</span>
#endif</td>
</tr>
Here's the code for the response:
public function reloadCaptcha()
{
return response()->json(['captcha'=> captcha_img('flat')]);
}
Now, if I replace captcha_img('flat') with some text and click the button, it behaves as expected and replaces the previous image with the text. Also, if the text supplied is html code that calls a static image from a path in the public directory, it also works.
So either one of two things is going on:
the captcha_img() function is failing during the response step. So nothing returns.
the javascript in the form is failing to extract the image from the returned json object.
I'm guessing the issue is #1. Somehow the controller is unable to call the captcha_img() function while the main php/html can. And I have no idea why that would be.
Note that in my experiments, I put in an alert which showed the data and the status, and the data displayed an "object" and the status was "success".
Update
I gave up. For whatever reason, I just can't get it to work and I can't afford to spend any more time on it right now. I ended up going with making the button reload the entire page rather than try to generate just a new captcha image to insert into the html.
Change return function reload captcha to this:
public function reloadCaptcha()
{
return captcha_img('flat');
}
And then change refresh event script to this:
<script>
$(document).ready(function(){
$('#reload').on('click', function(){
$.ajax({
type: 'GET',
url: '/reload-captcha',
success: function(data) {
$("#captchadiv").html(data);
}
});
});
});
Ajax parsing, wondering if it is possible if i post a form with text and images through an html form. And just getting the response back through Ajax?
Steps
1.) Form is in html and submit button in html
2.) Form submitted to php, and it runs through verifying/Uploading text and images.
3.) Any echos from the php is received through AJAX.
I am not sure if its possible to do so. Thanks for your time.
Javascript
$("button#submitbutton").click(function () {
$.ajax({
url: ("submitlisting.php"),
type: 'GET',
dataType: "text",
success: function (data) {
console.log(data); // e == result from the ajax call.
$("p#result").html(data);
}
});
});
use a hidden iframe as target for the form
<form target="form_result"><!-- input elements --> </form>
<iframe name="form_result" style="display:none;"></iframe>
Then after form is submitted, check the content of the iframe to read the response.
No. Not in the way you're thinking. The server responds to a request and the cycle ends there. If you submit a form, that is one request, and the client cannot listen to arbitrary requests sent by the server. To obtain the functionality that you are thinking of (seeing some sort of progress as the user is uploading a file, for example), you would need to do everything by AJAX.
A simplistic way is to use some sort of AJAX file uploader (blueimp comes to mind: https://github.com/blueimp/jQuery-File-Upload), and then poll the server for progress updates using AJAX.
Basically mysimplewebform.php form submits when the toggle is clicked, as opposed to after the form is loaded, used by user and SUBMITTED via submit button at form. Obviously I need to have form operate functionally; user fills it out, and clicks submit. I simply used AJAX to bring in the form on the template page. Now everytime toggle button is clicked 'Form is submitted with empty values' and then appears in the toggle. Making it pretty useless at this point, I have been struggling with this forever. I think this is a matter of toggling the data: below --
$(document).ready(function() {
$('#toggle3').click(function(){
var tog = $('.toggle');
$.ajax({
type: 'POST',
url: '/mysimplewebform.php',
data: $(this).closest('form').serialize(), // This was a recent suggestion
success: function (fields){
tog.html(fields);
tog.slideToggle(1000);
}
});
});
});
Branched out from: How to send external form POST data through AJAX
Ok, so you want to display an html form when a user clicks a button? In that case you can use the simplified jquery load method:
$('#yourbutton').click(function(){
$('#somediv').load('/mysimplewebform.php');
});
I know this doesnt handle your toggle requirement, but i dont think that is where you are having issues.
Now onto the php. I dont know exactly what should be in mysimplewebform so heres an example
if(isset($_POST['fname'])){
//we have a post request, lets process it
echo 'hello'.$_POST['fname'];
}?>
<form action="absolute/path/to/mysimplewebform.php" method="post" id="mysimplewebform">
<input type="text" name="fname" placeholder="Enter Name">
<input type="submit" value="submit">
</form>
Notice the action is an absolute path to the file, because a relative path will be wrong if the form is loaded into another page via ajax.
Now when this form is submitted, the browser will be redirected to mysimplewebform.php.
I expect you want to stay on the same page, in which case you could submit the form via ajax:
$('#mysimplewebform').submit(function(ev){
ev.preventDefault();//stop normal redirecting submit
$.post( $(this).attr('action'), $(this).serialize(), function(data){
$('#somediv').html(data)
});
This replaces the whole form in the dom with the output, so the hello message would be displayed.
All of the above is an attempt to help you understand where you have been going wrong in your attempts. It is not the best solution to your overall problem - i would separate the html form and processing into seperate files for a start, but it should be familiar to you.
I have a div that contains a student's schedule, and there is a drop-down box for selecting by semester.
Once they select the semester, there is an ajax post, but when it refreshes, it displays the entire website within that div (with the appropriate schedule for that semester).
It looks like an iframe within a webpage, as seen here: http://cl.ly/Dy3b
Here is the ajax post script
<script type="text/javascript">
$(document).ready(function() {
$('#term').change(function() {
var form_data = {
term : $('#term').val(),
ajax : '1'
};
var u = $("#schedulePortletURL").attr("href");
$.ajax({
url: u,
type: 'POST',
data: form_data,
success: function(msg) {
//alert(u);
$('#view-schedule').html(msg);
}
});
return false;
});
});
</script>
If possible, could you give me some suggestions of what to investigate to correct this? Thank you
My guess is that the call to the server is returning a full HTML page, and your code then puts the full HTML page into the view-schedule div.
To resolve this, create a new HTML page that you can call that contains a html fragment - the chunk that you want to live in the view-schedule div. Then change schedulePortletURL to point to the new HTML page.
Alternately, you could get the html back (the msg) and parse it to pull out the data you are interested in, then insert the filtered data into the view-schedule div.
Does the existing website have a API at all that you can call?
Another possibility is that some kind of error checker in your server-side script is mistakenly firing and causing a redirect to some web page. That web page is then retrieved by the AJAX, then displayed in the DIV. I have had this happen before. You should check your server side script.
If you do not have full control over the webpage you are fetching the fetched page should be considered unpure and you should use iframe. Remember that with .html(blob) you will also get javascript code, flash objects etc. which can be used to compromize your users.
If you on the other hand have full control over the fetched webpage (which I assume) you should make a if-statement in your template that checks if the request is ajax-based.:
Pseudo serverside template code:
if not request.is_ajax():
import header.html
import body.html
if not request.is_ajax():
import footer.html
I have a search script written in jQuery. To submit a query a user presses enter and then a URL for the results page is created which is something like #search/QUERY/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be?
My jQuery code is:
$(document).ready(function(){
$("#search").keyup(function(e){
if(e.keyCode==13){
var search=$(this).val();
var query=encodeURIComponent(search);
var yt_url='search.php?q='+query;
window.location.hash='search/'+query+'/';
document.title=$(this).val()+" - My Search Script";
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(response){
$("#result").html(response);
}
});
}
});
});
When a user reloads the javascript, all variables and functions are reinitialized. JavaScript does not pass variables from page to page. You either need a server side solution, or use JavaScript storage. The later may not work in all browsers.
This is because you are loading the search results dynamically with an AJAX call. If the page gets reloaded, that information gets lost.
A possible solution would be to store the search query and/or results in the user session. Then you will be able to automatically add the content on page reloads.