We use wordpress and have our users fill in a form.
When they click on the submit button, the following happens (thanks to a PDF plugin):
The form and the submit button disappear
A green message is shown ("Success...") and a download link to a PDF file appears, that the plugin has generated out of the filled form so the user can download it.
However, the plugin does not place the file on our servers and thanks to the nonce system (it's like a token), the link won't work at a later point in history.
And that's why I want to auto-download the file to the server as well (no matter if the user downloads it too or not).
My plan so far:
Tie a jQuery script to the submit button, that (as soon as the button is clicked) waits for an element (in this case the download link) to appear like so:
$(document).ready(function(){
$(".submit-button").click(function () {
waitForEl(".pdf-link", function() {
console.log(".pdf-link").attr("href");
});
});
});
var waitForEl = function(selector, callback) {
if (jQuery(selector).length) {
callback();
} else {
setTimeout(function() {
waitForEl(selector, callback);
}, 100);
}
};
(Source of the waitForEl function: https://gist.github.com/chrisjhoughton/7890303)
Where you see the console.log, I want some way to automatically download this PDF file to the server of our website instead, next to the JS file where the code from above is in.
Is that even possible? I can use JS and PHP to achieve this somehow, since we're using Wordpress.
Related
I'm using a lightweight image editor jQuery plugin called andyvr/picEdit
https://github.com/andyvr/picEdit
This is just a plugin that turns an input:file element into an HTML canvass, and allows the user to select/edit/crop/manipulate an image file on the client side. The actual uploading and processing is done via the usual FORM UPLOAD and PHP $_FILE processes.
What I wanted to do is grab the "edited" picture data from this plugin and send it via $.post() instead of through the Form submit action.
Do you guys know what element I should select to include in my post variables?
var postvars = {};
postvars.final_image = $("#what_element").val();
$.post("script-name.php", postvars ,function(data){.....
I tried to go through the JS file but I can't seem to figure it out.
PS
I hope I came across clear with this question. I was having a hard time structuring it.
Assuming you are using the same picedit as I used and are still looking for an answer:
The html file input:
<input type='file' name='thefile' id='thebox'>
The jquery to make the file input act like an image edit box:
$(function() {
$('#thebox').picEdit();
});
The post command:
$.post( "handler.php", { story_edited : 1, id : 1 }, function( data ){ document.getElementById( 'photos' ).innerHTML = html = data }, "html" );
Notes:
handler.php = the name of the file that you want to use to process the input!
<div id='photos' name='photos'>
is a standard div tag that I use to update onscreen info in another part of the page! So, document.getElementById( 'photos' ).innerHTML will load handlers.php in to the photos div tag!
Use:
foreach($_FILES as $file)
to process the images as normal file upload from a web page!
I have one other button that pulls it all together. After I finish editing the image, I click on an update button that calls the handler and uploads and saves the file as well as dynamic updating of a photoalbum section elsewhere on the page.
TODO:
If I could find a way to attach a callback function I would not need to use this separate button.
I am using file upload in my current project. When I click browse button, the file will be uploaded automatically and read number of lines and display that details immediately. I finished this task.
But when I will uploaded large size of file it will take some time to upload. So I need to implement file uploading progress bar.
I used the the following example.
http://aryweb.nl/projects/mootools-form-upload/Demos/Upload.html
http://mootools.net/forge/p/form_upload
<script>
window.addEvent('domready', function(){
var upload = new Form.Upload('files', {
onComplete: function(){
alert('Completed uploading the Files');
}
});
if (!upload.isModern()){
// Use something like
}
});
</script>
This script working well.
But when I will click submit button, that time will be displaying progress bar.
I need to change when I will click browse button that time will be display the progress bar. I don't know how to change.
You are using mootools plugin javascript library that allows you to upload files and track the progress. It has little to do with PHP.
Since demo and documentation for it doesn't have progress tracking, if you look closely at https://github.com/arian/mootools-form-upload/blob/master/Source/Form.Upload.js then you'll see that progress doesn't have any callback in it..
onProgress: function(event){
var loaded = event.loaded, total = event.total;
progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%');
},
so you need to either
Use suggested HTML it expects (<div class='progress'></div>), OR
Add your custom behaviour by extending options it includes before that
I'm just curious if things like this is possible >> While still loading a web page, is it possible to return an onbeforeunload like dialog when a user try to navigate to other page or close the browser ?
Well i made this to display a message to be display before someone quits my site, and this gives them the option to stay or leave the page.
I used jquery so you have to add the link to jquery to your site, yo can do this calling a script tag with the src pointing to the next url:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
and after that just add the next code on your webpage
$(document).ready(function()
{
var flag = true;
function Close()
{
if(flag)
{
return "Are you sure you want to leave?";}
}
}
window.onbeforeunload = Close;
});
This will call the Close function at the onbeforeunload event, and will ask if you want to leave or stay
Hope this helps
The thing is I have this set of code that exports a PDF file, I used TCPDF on this one.
$('#export').click(function() {
var conf = confirm("This will generate a PDF file of all the list of products. Continue ?");
if (conf)
{
$('#ajaxloader').css('visibility', 'visible');
var href = "http://"+url+"/export/items.php";
window.open(href, '_self');
}
});
When I click the button, it downloads the pdf file that contains a list of products, but my problem it's taking about more than 30 seconds to render, I already set the time limit so I'll no problem with that, what I want to do is to display a loader while rendering the pdf file, then hide it afterwards.
I have a single php script on my site that facilitates my site's downloads (logs user info, controls user permissions etc). A typical link looks like this on my site:
Download file 12345
In file_download.php I check to make sure the file request is valid, and if so, it does a header force file download
header("Content-type: application/force-download");
which forces the download prompt in the user's browser. The user never leaves the page they click the link on.
What I am wondering is if I am able to toggle a jQuery event from file_download.php onto the parent page? It seems if I do anything on file_download.php other than a 'header force download' the user will leave the page.
Ideally I would like to keep my href links unchanged (for the sake of not editing a million instances site wide) and have file_download.php toggle a lightbox window prompting for user information before the download (if needed of course).
Any help or suggestions would be greatly appreciated, thanks.
You wouldn't need to toggle the event from the PHP page, you could attach the information box to all of your download links, and then use JavaScript to redirect:
var downloadLink;
$(".download-link").click(function(e){
e.preventDefault();
downloadLink= $(this).attr("href");
displayLightbox();
});
$("form").submit(function(e){
e.preventDefault();
//form validation
if(formValidated = true){
window.location = downloadLink;
}
});
I have an example like the above one.
This is your link :
<a id="downloadLinkId" href="file_download.php?file_id=12345">Download file 12345</a>
And this is your javascript:
$("#downloadLinkId").click( function(event) {
event.preventDefault();
launchLightBoxWindow();
});
Rest of the code is on jsfiddle.
I use AJAX POST to send form data to an external script and attempting to hide the form on submit and prompt the user to download the script.
The script itself works well (uses fpdf to output pdf file for download). For some reason, prompting the user to download though never comes through.
My Ajax request is currently:
$.ajax({
url: "file.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
//hide the form
$('#form').fadeOut('slow');
//display results
$('#form_results').fadeIn('slow');
$("#form_results").html(html);
}
});
file.php (on it own) will generate and display a PDF using FPDF. By setting the Output to I, the document is output to a browser, setting to 'D', it would normally force a download if I were simply accessing file.php directly.
any ideas?
Unfortunately you can't force a download directly from an ajax call. Your best bet is to submit the form through ajax and have ajax respond with a url that you can redirect the user to that starts the download. However, just an FYI, using location.href to a page that sends a header to force download in IE will cause the yellow security bar to appear on the top of the page. This happens in IE8, not sure about other versions. FF and Chrome don't have a problem with it.
Edit:
Just wanted to add, when you do redirect someone to a page that forces download, they don't actually leave the page they currently are on. So they won't have to reload an ajax page or anything. The download dialog will just show up. So if you are on index.php and you say location.href='download.php' and download.php forces a download. You just get the download dialog and don't leave index.php.
Edit2:
there are actually quite a few questions about this already.
https://stackoverflow.com/search?q=force+download+over+ajax
The problem is you try to show results but it is in form, which is hidden. Try something like :
//hide the form
$('#form').children().fadeOut('slow');
//display results
$('#form results').fadeIn('slow');
$("#form results").html(html);
This way, every children will be hidden but the parent itself won't.