homepage Welcome to WebmasterWorld Guest from 54.225.57.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
ajax - el is undefined
frankstuner




msg:4373704
 5:20 pm on Oct 12, 2011 (gmt 0)

Hey,
I've just started with ajax and apart from very nearly sending me mental i've made some progress.

I'm trying to make an image upload section that shows the uploaded image in a little preview box, and i've got that working by following the tutorial here (with some tweaks): [webdeveloperplus.com ]

I also want some functionality for the user that swaps the upload button with a delete image button once a user has uploaded their image and preview is showing. I've got that happening with some tweaking of the tutorial and some browsing of w3schools ajax tutorials.

So i've ended up using the webdeveloperplus method for the image upload:

/* Profile Image Upload */
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: '<?php bloginfo("url"); ?>/wp-content/themes/recordings/js/ajax-upload/upload-file.php?imagePara=1&uid=1',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
alert('Only JPG, PNG or GIF files are allowed');
return false;
}
status.html('Uploading Your Image...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
var responseArray = response.split(":")
if(responseArray[0]==="success"){
/*this.disable();*/
$('div#upload').replaceWith('<div id="delete" onclick="athleteProfileImageDeleteUpdate()">Delete Profile Image</div>');
$('<li></li>').appendTo('#files').html('<span class="img-wrap float-left"><img src="<?php bloginfo("url"); ?>/wp-content/uploads/profile_images/lge_size/'+responseArray[1]+'" alt="" /></span>').addClass('success');
} else {
alert('An error occurred during the attempt to upload your image.\n\n(Your file size may be excessive - 1MB max)');
}
}
});
});

and the w3schools method for the image deletion:

/* Profile Image Delete */
function athleteProfileImageDeleteUpdate(data_athprofile_image_delete)
{
var athmanagement_url = document.getElementById("delete");
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("athProfileImageDeleteUpdate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","<?php echo get_bloginfo("url"); ?>/wp-content/themes/recordings/js/ajax-upload/upload-file.php?uid=<?php echo $currentuserid; ?>&imagePara=2",true);
xmlhttp.send();
}

I've attempted to weave these two together that they essentially activate one another with their callback results.

This is the html section i'm using when the page is loaded.

<?php if($ath_image1==""){ ?>
<div id="upload">Upload Profile Image</div><span id="status"></span>
<ul id="files" class="profile-image-wrap"></ul>
<?php }else{ ?>
<span id="athProfileImageDeleteUpdate">
<div id="delete" onclick="athleteProfileImageDeleteUpdate(this.value)">Delete Profile Image</div>
<ul id="files" class="profile-image-wrap"><li><span class="img-wrap float-left"><img src="<?php bloginfo("url"); ?>/wp-content/uploads/profile_images/lge_size/<?php echo $ath_image1; ?>" alt="" /></span></li></ul>
</span>
<?php } ?>

This is the delete code i'm working with that fires back the return to the original state:

/* Profile Image Delete */
if($_GET["imagePara"]=="2")
{
$indexDrop = "../../../../uploads/profile_images/index_size/".$imageName;
$lgeDrop = "../../../../uploads/profile_images/lge_size/".$imageName;
$profileDrop = "../../../../uploads/profile_images/profile_size/".$imageName;
unlink($indexDrop);
unlink($lgeDrop);
unlink($profileDrop);
echo '<div id="upload" class="hover">Upload Profile Image</div><span id="status"></span><ul id="files" class="profile-image-wrap"></ul>';
}


I'm assuming this isn't an ideal situation but its the only way i could make any progress.

So at the moment I can get it to add an image and preview fine. without the page being refresh i can click delete and the files and db row are being deleted but the Upload Profile Image button and preview boxes are not returning to their original state, the firebug console is saying
document.getElementById("athProf...te").innerHTML=xmlhttp.responseText;

Also, if i upload the image then refresh the page and then select Delete Profile Image the functionality works, the Upload Profile Image button returns and the image preview box clears, but if i try to upload another image(without refreshing) the Upload Profile Image button doesn't work and the console shows this error:
el is undefined
el.addEventListener(type, fn, false);


If anyone has any hints as to what could be going on here I'd appreciate the help, I feel like i'm so close here and have been scratching my head on this for days.

Sorry for the long winded description i just wanted to be thorough.

Thanks

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved