rosnovski wrote:
hi guys,
I never knew of this place but I am glad I did. My question like the
subject says is about uploading. I was trying to do the jquery ajax
part myself but i had problems with it and so I stumbled on form
plugin from malsup. What i want to know is this, is there anyting
special that I should know cos the explanation is very scanty. How
does the form plugin affect my underlying CI code that works already
in uploading files.
Thanks and God bless
I'll try to help with my own experience. Malsup's jQuery form will
automatically upload files using hidden iframe technique. There are 4
mode of plugins : 'html', 'script', 'json', and 'xml'. I will explain
html and json, because I'm using those mode only.
When you using html mode, nothing need to be changed in your code, php
part and jquery part. When upload complete, your php script should
return html, and jQuery handler will do something to that response data.
The only difference is that when a form contain upload field, then it
submitted using hidden iframe. PHP script cannot detect using:
$_HEADER[''HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'
to check if it submitted with or without ajax plugins. My trick is to
have hidden form field with empty value. Then I set the value when I
initialize jQuery form.
<input type="hidden" name="ajax" id="ajax" value="" />
//Ajax form options
var options = {
dataType: 'html',
target: '#result',
beforeSubmit: function(a,f,o){
$("#ajax").val("ajax");
//display loading animation
},
success: function(r) {
$("#result").html(r);
//do other action
}
}
$("#the_form").ajaxForm(options);
Using this, you can check in PHP script, if the $_POST['ajax'] have
value 'ajax', or not, then return appropriate response, echo , or
redirect, for example.
The second mode, 'json' is the one I'm using often. The trick to detect
the upload is using jquery form or not is same with above. The other
trick is to return json response.
If form have no upload field, then detect it using:
$_HEADER[''HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'
then return normal json using json_encode function.
$output = json_encode($response_data);
When it have upload field, then return the json enclosed by <textarea> tag:
$output = '<textarea>'.json_encode($response_data).'</textarea>';
jQuery form plugins will handle the rest. You can process json response
in the success function handler when initialize ajaxForm.
I hope this will help you understand and use jquery form plugins.
--
Donny Kurnia
http://blog.abifathir.com
http://hantulab.blogspot.com
http://www.plurk.com/user/donnykurnia
