This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is it possible to use Ajax to do file upload?
I'm trying to upload the image using jquery ajax.I used Jquery Load function. I checked from firebug all the input fields are submitted except the image field that is type=file.
CakePhp Code
echo $this->Form->input('Testimonial.photo', array('type'=>'file', 'label'=>'Upload Avator'));
Jquery Function
$('a[rel=save]').live('click',function(clickEvent) {
clickEvent.preventDefault();
var url = $(this).attr('href');
$("#block").load(url, $("#form :input").serializeArray(),function(){
}
);
});
How can i overcome this issue?
input type="file" elements cannot be transferred using regular jQuery Ajax. You should take a look at the new File API in combination with "XMLHttpRequest level 2" that (unfortunately) is not supported by all modern browsers yet.
Workaround: iframe or Flash solutions (search for "uploadify" for example).
You can have a look at jQuery form plugin.
Related
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 3 years ago.
I have simple jQuery code where Im trying to like in PHP echo in jQuery to my website. But when I do it like this:
$( ".doc-list" ).html( "include 'documents.php';" );
My code echo it on site like:
include 'documents.php';
So my problem is when I make code like upwards jQuery echo it like plain text not like PHP and I need to include to my index.php documents.php when AJAX is done.
To load data from server use .load():
$( ".doc-list" ).load( "documents.php" );
Also, learn about client side and server side differences. Javascript (client-side) does not know anything about php code or any other code on your server side. Helpful question is here.
This question already has answers here:
Executing <script> injected by innerHTML after AJAX call
(12 answers)
Closed 9 years ago.
I'm writing an AJAX page with php, which will echo a block of JS code when it finishes.
Although the JS code is embedded into HTML page, it doesn't work. How can I make it work?
Browsers generally don't execute js in ajax sections, for security reasons.
You'll want to provide the final javascript to be executed in a callback to the ajax load functionality instead.
Even better, just include the javascript from the target page in an external initialization function (e.g. function finalizeProfilePage()) in some siteName.js file and then load that upon completion of the ajax load and where-ever else you use that page content.
I'm right now working on something similar.
To execute the code loaded through ajax i just need to call the function like this:
jQuery(function() {
loadScript();
});
(yes i'm using jquery )
This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 8 years ago.
I'm trying to accomplish a JavaScript form that will load the result from a PHP request on an external website, after a text box is filled out.
Right now, I have
<script type="text/javascript"/>
function sendrequest() {
document.location="myphpsite.com/submit.php?tb="+document.getElementById("tb").value;
}
</script>
<form>
<input type="text" id="tb" onChange="sendrequest()" />
</form>
This code is going nowhere, because from my current knowledge, you can only load PHP variables on startup, by using "script src=... ", and by having the php page return some javascript code.
What I'm looking for is a way to request/receive php variables dynamically, something that would work like this:
<script type="text/javascript">
function getdata() {
return document.get("myphpsite.com/submit.php?tb=hi");
}
</script>
In other words, is there a function that dynamically "reads" a website, and returns the raw text?
http://w3schools.com/ajax/default.asp
You should go read this and then read it again, AJAX is what you need.
best example with PHP and AJAX -
http://www.w3schools.com/php/php_ajax_database.asp
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
File Upload via AJAX within JQuery
How to easily upload files without form submission (with jQuery + AJAX)
I know for a fact that we can upload files using forms with enctype="multipart/form-data" but what i'm trying to figure out is upload files using Jquery Ajax..
Any tips?? Thanks in advance.
Try this jQuery plugin http://valums.com/ajax-upload/
Then use this javascript code
var uploader = new qq.FileUploader({
// pass the element
element: $(selector)[0],
// path to server-side upload script
action: '/server/upload'
});
For more info check the documentation
I have used http://blueimp.github.com/jQuery-File-Upload/ in the past and it comes up with great demo(s) and documentation.
Check it out on https://github.com/blueimp/jQuery-File-Upload
depends on your needs.
for single file,http://valums.com/ajax-upload/ is good enought
for multipla files upload + multi file selects you will need other technologies like flash or html5, you can check plupload or Uploadify
plupload supports flash, html5, silvernight html4 upload methods. and also support multi files select (except for html4)
uploadify supports flash and html5 for multi file selects
The mentioned plugins are all useful but if you would like to know the logic behind the process its something like this:
Create a php file that handles uploading files and can return errors (echo).
Create an HTML page with your form and everything
Create a jquery function to :
Avoid the form from being submitted
create an ajax request to your php file you created in the first step
show the result from the php file in a div.
You need to use FormData object, but it will work only in newer browsers.
if (window.FormData) {
$('input[type=file]').change(function() {
var formdata = new FormData();
var file = this.files[0];
formdata.append("files[]", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false
});
});
}
Some more info: https://developer.mozilla.org/en/XMLHttpRequest/FormData
You can also see lib with example HTML and some additional features: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/
For supporting older browsers, you can make iframe, clone file input element to the iframe and submit form there. In this way, page will not refresh and it will be AJAX-like.
This question already has answers here:
Closed 11 years ago.
I have a javascript function I would like to run on a page, that when executed will send a variable to a PHP script but not open the PHP page just stay on the current page.
What I am trying to do is add this function to pages on a website and for it to return information about the page it was run on, such as URL and user IP.
Everything I have tried so far has not done the job, so any info is appreciated.
Many thanks
Thanks Quentin, but I have tried to javascript forms, but they all open the url the form is being posted to. My most recent example:
var form = new Element('form',
{method: 'post', action: 'http://www.site.com/data.php'});
form.insert(new Element('input',
{name: 'u', value: ""+u, type: 'hidden'}));
$(document.body).insert(form);
form.submit();
I also tried:
document.location.href='http://www.site.com/data.php?u='+u;
but again this open the page :S
For those that have suggested AJAX, thank you but it wont work because that needs a script link in the header and I need to be able to plug this into a page without editing the header. I did try to dynamically insert it via the javascript function, it went in OK but none of the AJAX functions would execute.
What you are looking for is called AJAX (Asynchronous Javascript and XML). These type of calls in Javascript are made trivial with things like jQuery.
This is what jQuery's website says about AJAX: The jQuery library has a full suite of AJAX capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.
And an example jQuery POST:
$.post('ajax/test.html', function(data) {
$('.result').html(data);
});
Using jQuery
for simplicity do something like this
$.ajax('foo.php',function(d){ alert(d); });