I am trying to find an AJAX File uploader to use, I think i may go with this on below:
http://valums.com/ajax-upload/
The issue i am having is that i cannot figure out how to make a jQuery AJAX call when the uploader has finished uploading the file. Is this possible? I don't have to necessarily use this specific uploader.
This ajax uploader has an onComplete event callback, so you'll just have to pass your jQuery ajax call to it. Something like this:
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '/server/upload',
onComplete: function(id, fileName, responseJSON) {
// Here comes your jQuery ajax call
$.ajax({
url: 'ajax/post_process.php',
success: function(data) {
// ...
}
});
}
});
Hello try my beta ajax mutiple upload jquery based, simple efficient download it at: http://www.albanx.com/ . no flash, with progress, work over https, support main browsers..
you can use success function for calling the final function
Related
I am using blueimp in my website. blueimp is included at the end of my page(index.php) like:
<?php include "index.html"; ?>
In my php page I am also using a jquery adapter which sends some variables from the same page and two variables from blueimp uploader via:
function save()
{
var variable1= document.getElementById('field1').value;
var variable2= CKEDITOR.instances.field2.getData();
variable2=encodeURIComponent(variable2);
var variable3= document.getElementById('field3').value;
var variables="variable1="+variable1+ "&variable2="+variable2+
"&variable3="+variable3;
jQuery('#mydiv').showLoading();
$.ajax({
type: "POST",
url: "some.php",
data: variables,
error: function(){
alert('Error while loading!');
},
success: function(data){
jQuery('#mydiv').hideLoading();
$('#mydiv').html(data);
}
});
}
Whenever I call this function the variables are not sent to some.php . However if I remove
<?php include "index.html"; ?>
from index.php page, the function save starts to work. I guess something from included blueimp page ,which is index.html, prevents the jquery adapter to function properly.
Is there any clue on this issue?
Thanks in advance.
It sounds like you are having some conflicts between the two libraries. jQuery has this option called noConflict() to allow you to sort of 'pause' jQuery for a bit and allow other libraries to work and then 'resume' normal jQuery functions.
I'm using Javascript and I need to call a PHP file to execute some stuff, but I'd like not to use window.open("filename.php"); because it usually opens a new tab or new window.
Sometime a PHP file need a few seconds to finish its job and I don't like to see an open tab or open window while it's working.
Thanks
AJAX is the solution, and with jQuery it's so simple.
Just add this line on your head section (to include jquery):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "yourPage.php"
}).done(function( data) {
alert( "Request is done" );
});
</script>
You can use ajax or dynamically create iframe.
If you use extjs library - here is example ajax request
Use Ajax! Here's a solution using JavaScript's jQuery library:
$.post('your_file.php', {parameter : some_value}, function(response){
// now you can use `response` came from your_file.php after execution
});
$.post(), $.get() are shorthand methods for $.ajax() of jQuery.
or simply use .load(),
('#test_div').load('your_file.php'); //load data from server into `#test_div`
will do job, if you want to just execute something on server-side.
I desire to upload files asynchronous when the user select a file in a input file, with $.ajax. But the php that recive the call return index undefined.
The jquery code is the next:
$("#urlimatge").change(function(){
var filename = $("#urlimatge").val();
$.ajax({
type: "POST",
url: "utils/uploadtempimg.php",
enctype: 'multipart/form-data',
data: {'urlimatge' : filename },
success: function(response){
alert(response);
}
});
});
and the php that recibe the call:
$image = new gestorimatges();
$target_path = $image->uploadTemp($_FILES['urlimatge']['name'],$_FILES['urlimatge']['tmp_name']);
Thanks
you cannot pass the $_FILE from AJAX to PHP.
I would suggest use a plugin
It will make your life easier :) Here is a video tutorial to help too
You might wanna use tools like uploadify for that.
You can't upload files with AJAX, but you can use an iframe so you don't have to refresh the current page.
Many people go strait to plugins but you can do this yourself pretty easily, and with all the functionality of an AJAX request.
Instead of using an AJAX function, have a form submit to a hidden iframe that has a load event handler attached to it so when the form is submitted, you have a callback function that actually includes the server response (the HTML of the iframe after it loads).
Example:
HTML --
<form action="..." method="post" encrypt="application/x-www-form-urlencoded" target="workFrame" >
<input type="file" name="file" />
<input type="submit" />
</form>
<iframe id="workFrame" src="about:blank" style="display:none;"></iframe>
JS --
$(function () {
$('form').on('submit', function () {
//check if the form submission is valid, if so just let it submit
//otherwise you could call `return false;` to stop the submission
});
$('#workFrame').on('load', function () {
//get the response from the server
var response = $(this).contents().find('body').html();
//you can now access the server response in the `response` variable
//this is the same as the success callback for a jQuery AJAX request
});
});
I am making a page that when you click on a "story" it loads the text and the media for that story, I have a seperate PHP script for the story text and the media (video or image) loading. both scripts work and actually it all works.
My problem is that when you click the story it is supposed to load the text, and then slide the media down when it's loaded However, it slides down even when the text is still loading.
newspaper.nmyster.co.uk/ is the site in question. click on the vimeo story on the left and see what I mean.
The code for the AJAX that loads the story and media is:
$.ajax({
url: './scripts/storyLoader.php?storyid='+storyId,
success: function(result){
$('#storycontainer').hide();
$('#loading').remove();
$('#storycontainer').hide(0).html(result).fadeIn(1000);
}
});
$.ajax({
url: './scripts/mediaLoader.php?storyid='+storyId,
success: function(result){
$('.martefact').hide();
$('#loading').remove();
$('.martefact').html(result).slideDown(1000);
}
});
Basically, I only want the media div to slide down once the video or image has finished loading.
Thanks
I would use something like this:
var requestHandle;
function loadPage(url, vars) {
//cancel pending
if (requestHandle!=null)
requestHandle.abort();
//load page..
requestHandle = $.get(url, vars, function(data) {
$('#storycontainer').hide();
$('#loading').remove();
$('#storycontainer').hide(0).html(data).fadeIn(1000);
});
}
Your request is asynchronous. It means that the script won't wait for data to load before executing the aesthetics bit.
You need to add async: false to your $.ajax call (look up other options over at jQuery documentation). That way, browser will wait for data to arrive first before executing the rest of JS.
What does your mediaLoader.php script do? Does it just check the database whether there are any media entries for the given story and if so format them properly and output them? Because currently I don't think you can slide down after the video is completely loaded, since you are embedding a vimeo video container, which handles the loading of the video itself and you have no access to it...
You need to use an 'on complete' callback function on the first animation.
Have a look jQuery api documentation for .fadeIn()
It should look something like:
$('#book').fadeIn('slow', function() {
// Code to run after animation completed...
});
I'm using Shadowbox a jquery overlay and I wanted to count how many people are actually using the overlay. Thus, I would need a function that would write a counter to a file or sending a query through a php api...
has to be a a php url api because I cant use php on the server where the overlay is.
So I need help with executing a javascript function on the overlay click, tips on how to make a counter query through GET method.
Thanks
<script type="text/javascript">
Shadowbox.init({
handleOversize: "resize",
overlayOpacity: 0.9
});
When you bind your click handler to open the shadownbox, add a binding for an ajax call, such as this:
$.ajax({
type: "GET",
url: "stats.js",
data: "name=urlOrNameOfItem"
});
Replace urlOrNameOfItem with something meaningful so you can track what has been clicked. I assume you know in php how to handle a query string.
See JQuery docs: http://api.jquery.com/jQuery.ajax/
Before you display your Shadowbox throw an Ajax query to a php script which would save the current request in a db (including $_SERVER info for better analysis).
This PHP script can fetch the current count of views for that image from the Db and update it accordingly.
I'm guessing the shadowbox function is called as a onclick event on your image so just add the Ajax call something like this:
$.ajax({
url: 'path-to-counter-script.php?i='+image-identifier,
success: function() {
//display shadowbox
}
});