I've put together a PHP script and small form which allows the user to upload image files. As it stands at the moment, this is activated as a Pop Up Window via a 'onclick' event of a button on the parent HTML page.
From research I've done on this site, I know that 'Pop Up Windows' aren't to everyones liking, so I'm really asking for a bit of advice to see whether there is an alternative to the Pop Up Window. I've tried the jQuery modal Dialog, and I've run into all sorts of problems because I have multiple submit buttons, so I'd rather not revsit that if at all possible, although the styling of the modal dialog would be along the right lines.
Personally, I'm a fan of JQuery UI Modal dialog because it's lightweight and I'm already loading UI in my apps.
But there's more going on here....the problem isn't the dialog, it's the fact that you're trying to do a file upload in a dialog. The traditional method of uploading a file is via a $_POST. This works just fine, except that your form needs an action, and that action will by default force a load of the page, even if you have it posting to itself. So in practice, if you do uploads the traditional way, no modal dialog will work.
What you're probably looking for is to do the "Ajax" method of file upload. It's not really ajax.....what you'd be doing is uploading to a "hidden" iFrame in the page that facilitates and upload seemingly without reload. Here's a tutorial...there's a million others out there.
There is also a number of jQuery plugins to make uploads easier....Uploadify is just one of them.
Note that even if you use an "asynchronous" method, you're still under the limitations of HTML. Having an upload button or an <input type="submit"> will submit your form, albeit not correctly, making the form seem like it's just failing uncontrollably. So, to combat this, either setup your upload button as another non-form submit element such as an <a> or just an image with an id that you call onclick via javascript. Or, make it a button and use event.preventDefault() onclick to prevent the default HTML behavior. I generally do the latter with jQuery UI button styling.
Why not try a lightbox ? http://en.wikipedia.org/wiki/Lightbox_(JavaScript)
There are various lightbox clones available which you could use with a iframe with a uploader form. Check out a comparison over here: http://planetozh.com/projects/lightbox-clones/
As for as i know this was the very simple and less javascript popup window. This might help you. less javascript popup box
Related
Ok,this is tricky.
I have a form which ask user to upload a file.
I am not submitting the form on submit button,I am doing it on click of an image enclosed in href="#"
reloading the page is to be avoided.(this is the most challenging part)
I have used prevent default on href click and then sended an ajax call to my php page.This does not work.
If I use a tag..it reloads.
If I dont use it,i cant send my file.
I can only use multipart form data when using form tag.
What do i do??
iframe,upclick.js..but i am totally unaware of these.
Just in case if you want to go through my code(note:not a working model,just wanted to keep the question clean):http://jsfiddle.net/feRx3/
Hope I am clear with my question.
A little embarrassing at 1200 rep,I fumble at form.Any help?IE7 support is must!!!
I have used jQuery form plugin. It uses ajax 2.0 if you are on a modern browser or falls back to an iFrame for old browsers.
You should not reinvent the wheel. There are plenty of libraries that does the job.
Try Plupload : http://www.plupload.com/
i have a simple form and when user enters all the information and hits the submit botton than a panel should open just a width of 200px and height of 100px inside the same window. which should have two fields one is captcha image and a text box and a check botton and if captcha code is right than panel should automatically close and redirect to another page just like facebook .
all the details of the panel is saved on another php file.
Check out recaptcha , read the documentation and understand how it works (takes only minutes)
How you implement that will be up to you eventually, but basically to do it the way you desire, you'll need to have some knowledge of javascript(jQuery or prototype will make the visual effects easier though).
To be more detailed, the captcha would already have been generated on the form, but the parent container should be hidden with a:
$('#captcha-container-id').slideUp();
As soon as the form is filled, you could then do a:
$('#captcha-container-id').slideDown();
The rest is pure PHP
NOTE: The javascript example is in jQuery
Hope this helps!
Use recapcha for getting the captions.
You will need to learn javascript to handle the window opening and closing effects
I hope you can handle the rest.
I've got a simple website using plain HTML/CSS to display and PHP/MySQL for data storage.
Now I'd like to add a toggle button similar to facebooks "like" button.
How can I act on the user pressing the button (add database record for this item, change button text) without leaving the page?
I thought this question would have been asked and diskussied to no end, but all solutions I found require some other frameworks than plain PHP as background.
You'll need to do it with javascript. Read up on "AJAX form posting".
A high level view:
user clicks on button
you capture the click via an onclick handler in javascript, and use it to call a javascript function
said function does a remote url request via XmlHttpRequest to a target page
that target page takes in the parameters passed via POST or GET and performs actions with them (eg add database record), and prints out any response required
the javascript function reads the response and acts accordingly (eg change button text)
and all this happens without refreshing the page.
You can do all this with pure low level javascript code, but plenty of libraries already abstract it while solving various issues with browser compatibilities. I'd suggest the jQuery javascript library. It provides an easy way to do exactly what you require, and good documentation.
So I have my upload script working just fine, but now it's a matter of making it look the way I want for my layout.
<input type="file" name="userfile" id="userfile"/>
This obviously shows a textbox with a Choose File button. What I really need is my own custom button (which will ultimately be an image) that upon successful file select (not upload quite yet) triggers a jQuery event to show a div. I do NOT want the filename textbox to show.
Basic steps outlined below.
User clicks on image button to upload their file
User selects file
jQuery shows a div with more fields
User clicks submit and file is uploaded
File upload elements are notoriously difficult to access for security reasons. I think the best you can do is attach a handler to the change event of the file upload that displays the div if the file field's value is different from null.
A custom button is out of the question. To get that, you would have to resort to a file upload alternative like Flash-based SWFUpload.
There is a solution for this using jQuery here. It enables you to use an image for the upload button, and with a little customization I believe you could get it to do what you're looking for.
The few solutions to this that I've seen actually hide the upload input field and then display their own custom button. As the mouse moves over this custom button they use a script to reposition the input element beneath the cursor. Quite a lot of work.
I have been trying for a while now trying to figure out how to programmatically click a link using PHP and/or javascript. I have it setup so if the user clicks a link it will refresh a table. You don't really need to know why I want to do this b/c then it will go down a whole long road of confusion. Just know that there is a link to be clicked and I really really want to programmatically click that link using PHP and/or javascript.
Is there really no way to do this?
Edit: The code where I need to put the auto-click is in PHP, which would have to create and trigger some javascript or jquery or whatever.
Edit 2: Ok, now that you're all confused ... the real problem is that I have a Drupal form that has a property set to use AJAX when submitting. So the submission is done using the jquery plugin that is a module for Drupal. The AJAX setting is just an attribute setting and I do not have access to the underlying code that goes along with the submission of the form. Which forces me to have to refresh the table after the button is clicked. I really wish I could just attach the refreshing to the button click event for the submit of the form. But since I don't have access to that code I don't believe it's possible.
With Javascript, you can since it runs on the client machine, where the link exists. But the link doesn't even exist when PHP is doing it's magic, so you cannot click it "with" PHP. Keep in mind that PHP runs on the server, but the link exists only on the client.
Click a link with Javascript is rather simple:
// Index Page
document.getElementById("mylink").click();
Make sure all of your values are spelled properly. You can even output this command from PHP:
<?php print "<script type='text/javascript'>
document.getElementById('myLink').click();
</script>"; ?>
</body>
</html>
Note I placed this just before the closing </body> tag to ensure the link is present on the page.
Since it is drupal i assume that the form you're speaking of has an URL and therefore you could inject javascript code with the following module: JS Injector