INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

why is my callback executing immediately?

why is my callback executing immediately?

(OP)
Trying to resolve the issues with my previous post, I thought I would introduce a callback... ( I know it doesn't fix the problem but it might be an acceptable compromise)

So I have an object for holding file selected info

CODE

var fileObj = {
    maxSize:1,
    fileType:'img',
    fileInvalid:'Only image files (GIF / PNG / JPG) allowed.',
    imgWidth:200,
    imgHeight:584,
    callback:displayBanner
}; // file object settings 

this is the displayBanner callback...

CODE

// display selected banner for upload
function displayBanner()
{
   console.log(fileObj.file.src);
    if(fileObj.file.src)
    {
        $('#right').html('<img src="', fileObj.file.src,'" title="',$('#tooltip').val(),'" />"');         
    }    

} 

So when the file is selected I have the onload event run for the image and then fire my callback...

CODE

// set up a fileReader object and image object
            var reader = new FileReader();
            fObj.file = new Image();
            
            // load event to capture the file information.
            reader.onload = (function(file) {
                fObj.file.src = file.target.result;
                // load event to check image dimensions                
                fObj.file.onload = function(){                   
                    if(this.width != fObj.imgWidth || this.height != fObj.imgHeight)
                    {
                        showDialog({content:'Image dimensions invalid. Must be (Width: ' + fObj.imgWidth + 'px, Height:' + fObj.imgHeight + 'px)'});
                        clearFile(ele);
                        fObj.file = undefined;                        
                    } 
                    else
                    {
                        try{fObj.callback}
                        catch(e){}
                    }                    
                };
            });
            
            // read selected file
            reader.readAsDataURL(myFile); 

But the callback is running the millisecond a file is selected, which means it isn't firing from within the onload event of the image, but is firing when the function is being assigned to the onload event.

Why? How do you write code to execute a callback function from within a holding variable without the function firing just by mentioning the variable?

I thought this was to do with using parentheses, but there aren't any involved so it can't be?

Thanks,
1DMF





"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: why is my callback executing immediately?

(OP)
Well I thought I would do away with the callback and implement an event instead, what I have found is this code is firing twice in some weird kind of recursion, why?

CODE

var reader = new FileReader();
            fObj.file = new Image();
            
            // load event to capture the file information.
            reader.onload = (function(aFile) {
                
                // load event to check image dimensions                
                fObj.file.onload = function(){                   
                    if(this.width != fObj.imgWidth || this.height != fObj.imgHeight)
                    {
                        showDialog({content:'Image dimensions invalid. Must be (Width: ' + fObj.imgWidth + 'px, Height:' + fObj.imgHeight + 'px)'});
                        clearFile(ele);
                        fObj.file = undefined;                        
                    } 
                    else
                    {
                        ele.trigger('imageLoaded',fObj);
                    }                    
                };
                
                fObj.file.src = aFile.target.result;
                                
            });
            
            // read selected file
            reader.readAsDataURL(myFile); 

this is ran twice

CODE

ele.trigger('imageLoaded',fObj); 

because in the listener event...

CODE

$('body').on('imageLoaded','#file',function(e,fObj){
             showFileDetails(fObj);
             displayBanner(fObj);
        }); 

is causing displayBanner to run twice...

as I have

CODE

// display selected banner for upload
function displayBanner(fObj)
{
    huh++;
    alert('huh = ' + huh);
    console.log(fObj);
    if(fObj.file.src)
    {
        $('#right').html('<img src="', fObj.file.src,'" title="',$('#tooltip').val(),'" />"');         
    }    

} 

when I select a file, the alert goes..

Quote:

1st alert : huh = 2
2nd alert : huh = 1

How is that possible?


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: why is my callback executing immediately?

(OP)
ok...step away from the computer... pc hammer banghead cannon bomb

I was right, it was not possible for it to be triggered twice in some kind of recursion... I had removed, but forgot to save the script with the original JQuery change event handler

CODE

// upload file selected 
$('body').on('change','#file',function() {
    // validate selected file
    if(fileSelected( $(this), fileObj ))
    {
        // show selected file.
        $(this).removeClass('invalid').addClass('valid');
        displayBanner();
    }
    else
    {
        $(this).removeClass('valid').addClass('invalid');
    }
    
}); 

So of course the displayBanner was firing twice from the old call above and the new event based method

CODE

$('body').on('imageLoaded','#file',function(e,fObj){
             showFileDetails(fObj);
             displayBanner(fObj);
        }); 

... perhaps I should start wearing my glasses again lol

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close