Change "X" image on upload of file

[leequalls]

I made a page to see if files are missing or available. I am using fancybox to bring up the form to upload a file. What I want is when the file is uploaded the "X" image on the page to be replaced with a check mark image without reloading the page.

 

Any help would be appreciated.

[Adam]

.. Just change the src? Sorry, you need to post more information than that for us to help. Best bet would be to post the code with a reasonable explanation of what's happening.

[Mahngiel]

(this needs moved to 3rd party scripts)

 

depending on what type of data you are requesting, you'll need to set a function on the javascript.  it's likely already there, you just don't know how to use it. refer to the plugin's docs to figure it out. Here's an example so you can zero in.

 

<?php
$response = array();  // prep data
if( !$upload  )  // file failed to upload
{ 						
$response = array(
	'status' 	=>	0,
	'msg'		=>	'File failed to upload',
)
} else {  // file uploaded just fine
$response = array(
	'status' 	=>	1,
	'msg'		=>	'Avatar has been updated!',
);
}
return json_encode($response);

 

...
dataType: 'json',
success: function (j) { // define the function object
if(j.status == true) {
	$('.response'). html('check');  // define the image response span
	$('.callback').removeClass('fail').addClass('success').html(j.msg);  // set appropriate CSS class and message
}else{
	$('.response').html('X');
	$('.callback').removeClass('success').addClass('fail').html(j.msg);
}
}
....

 

You need to set up your upload script (php) to pass the fail / success information back to the requestor (javascript).  the success function(j) sets the value of $response to j, which you can parse by using the key values, ie j.msg and j.status

[Adam]

There is no board for third party JS.