I have a successfully working interface that I programmed using PHP GD Library where a user can enter multiple lines of text and when the user clicks "submit" it overlays the text they typed onto a png background.
Is it possible to do the same thing but use AJAX in the process? I'd like to somehow let each input field filled out automatically do an onblur, and trigger an AJAX script. That way they see the data entered into the fields change the image on the fly.
Normally when using AJAX, it sends a success callback to an input field, alert, or sets it into a DIV. Would I place the entire GD Library code into the PHP POST page and process it there, then somehow send the compiled PNG image to the AJAX success callback?
I'm just needing a general idea as to if it's possible, and the basic outline as to how I'd go about solving this. Thank you!
EDIT: Here is the last bit of code used to display the image after the text has been overlayed.
imagepng( $my_img, "./images/$form_token.png");
imagedestroy( $my_img );
Will this code end up on the PHP processing page that AJAX POSTS to? Or do I process the image with the GD Library functions and then somehow pass this image as an img src. Will I save it to my server, then display the img src that was saved as the AJAX success callback? I'm confused because I thought AJAX loaded things instantly without refreshing the page but will that still happen if saving the file to the server, then showing it in an image placeholder?
Yes you can.
You may use jQuery AJAX to do this.
Create a php file to respond to the Ajax data from the web page using jQuery, either by POST or GET method.
Make the php file return a success message on successful processing on data, and you may program something in your JavaScript to display success message.
You can read a tutorial here www.w3schools.com/jquery/jquery_ref_ajax.asp
Hope this helps..
Related
I have a form with 2 file input which the user will select images to upload.
On submit when the images are uploaded, I first resize the image and merge it with another image using gd and this works fine.
What I want to do before the form is submitted, using Ajax on change of the file input, get the image, processes it on the server using gd (but not upload) and show the user the final result in a ui dialog for them to approve or not.
For reasons beyond my control I cannot use html5. I know you can't post files using Ajax and need to use jquery-iframe-transport or jquery-file-upload or some other plug-in like that.
What is recommended and how do I return the final image to display in the dialog, and if the user then click disapprove, how do I clear the file input field?
Thanks
Take a look at this: http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
The above tutorial will show you how to do image upload using JQuery.
You can easily change the php file that handles the upload, show the image to the user, if they clicked disapprove, then simply remove the file from the server and start over.
I am using FPDF to create a pdf document in an iFrame... During the pdf creation the script communicates and gets a lot of data from the server, and then I would like to display a progress bar.. That is why I have put the php generator in an iFrame.. then my plan was that the php script could send the looped data to the parent window..
e.g. every time a loop is made it says $count++;, then I know how many loops it has gone through, and I already know that it is going to limit the rows to the first 200 rows.. Then I would like to display the looped data in the parent widow like so: $count of §goal has been generated successfully!.. At the moment I am using jQuery, where I ask the php to echo some jQuery script every time a loop is made to display the results like so window.parent.count($count, $goal);.. Count in the parent winodw and it actually works well until the PDF has to be shown.. then I get an error message that tells me that the script is unable to display the PDF because the page already has outputted data..
Does anybody know how to make the PHP to send the data to the parent window, so I prevet the using of echo?
Sorry for my bad english.. if wished I can try to upload my script later for you to see...
I do it a bit differently...
I also wrote an application in which the PDF generator needs to fetch a rather large amount of data, so the generation takes a few seconds.
I use jQuery to fetch a php-page in the background. During this download, the screen turns gray and displays a classic "please wait"-circle. The only output that the php-file generates is an "OK" echo, together with a file link, when the generation has been completed. Instead of displaying the file inline, I save the PDF in a folder ($pdf->Output('filename.pdf','S')) and offer it as a download using the provided link and the jQuery-callback.
I hope you understand what I mean. Maybe this thought will help you a bit further.
EDIT: Don't know if this will work, but I just thought of it...
You could save the file and output the filename. Using jQuery, you could then refresh the contents of the iframe to fetch a page in which you display the already saved PDF inline...
I am trying to upload file Jquery with ajax using php. If i passing Jquery data i not able to retrieve the file upload data how can i pass jquery file upload data to ajax. Kindly some on help me how can upload file through jquery ajax with php..
You cannot AJAX upload.
It's basically a fake AJAX to make it look like it is AJAX uploading.
In reality what happens is that the upload form is given a target of a nearby iframe. This makes it look like it is AJAX uploading when in reality it isn't.
The iframe is normally given a JS function within size of it that triggers a function in the parent windows which shows some kind of message say "Thank you for your upload".
Of course this is only really basic functionality and you'll need to Google search for more exampls, fortunately there are tonnes out there.
I want to make a button generator with javascript in my site, something like this http://css-tricks.com/examples/ButtonMaker/ .
But I want to add a save button too, so that the user will be able to save the button image he creates. I want to save the image in my server with PHP if possible.
Does anyone have an idea, of what should I really read or search for?
Thanks in advance
The button in the example generator is rendered by your browser. It is just a button element which is styled. I don't think you can easily save it using php.
What you could do is create a button generator that accepts parameters and then renders the image serverside (using php) and sends it to the browser for displaying. This rendered image can then easily be saved.
The link you've provided just defines the CSS for the element - you just eed to send this back to the server - via a form or ajax.
One approach would be to send the css settings to your server and execute an html renderer which somehow allows you to save a screenshot of the button.
Googling for "html renderer" yields several results, but I can't tell whether any of them offers an API that allows you to easily save images of desired elements.
(Of course, Firefox and Chrome all count as html renderers too).
In the worst scenario, using my approach, you'd have to render the button server side, take an screenshot and use some algorithm to find and cut the button from the screenshot.
I'd say this is a complicated approach overall. I'd go with what Iljaas' says.
I have the following scenario:
user selects an image to upload (simple form with input field where type="file")
File is upload to server (also Db is updated)
all this i already have..
I need to display the uploaded image on the page, upon success , without refresh.
Can this be done without iframes?
I have already done some ajax coding where input is saved to db or is used to return content from db.
The thing here is sending the actual file data from the field. Can I do this using jquery's $.get?
I was thinking that after copying the file and storing relevant data in the db i could return the new location (the path in the server where the file was copied). The jquery code catching this return could use it to set the src atribute of an img tag to the new file' thus displaying it.
Can you please recommend relevant tutorials or demos?
also, any tips would be very appreciated
u need javascript for that. Provide an onClick function with ur input type file element and in that function using javascripts createElement(), setAttribute(), appendChild etc functions to append the new image to the document object.
hope it helps
The best way to do this is to use a javascript-based AJAX upload function, and there are several javascript/jQuery plugins that do this. Check out this tutorial which explains one way of doing this using the ajaxupload.js plugin, for which you can find more documentation here.
I also wrote my own tutorial on this topic, including some PHP code that you need to save the image and other changes that I think are useful for beginners. You can find that here.
You can achieve this using AJAX with PHP and MYSQL. You can upload the image with AJAX and FormData, then validate and save the image in the server and send the URL of the image in a JSON response.
Note that the most important part of this is the validation.
See this beginner's guide to learn more.