Help with jQuery plugin and appendTo()

Discussion in 'jQuery' started by galaxio, Jan 29, 2012.

0
  1. #1
    Hi, I am developing a jQuery plugin for uploading through an iFrame, which is working fine except when it comes to displaying the success message the message is first displayed once, then twice, then three times for each upload.. but I can't figure out why this is happening (it should just display the success message once for each upload)


    Here is the plugin code (a bit incomplete but working):


    
(function($){
    $.fn.BSUploader = function(userSettings){
        
        var defaultSettings = {
            uploadLocation: 'upload.php'
        }
        
        var settings = $.extend(defaultSettings, userSettings);
        
        return this.each(function(){
            var $this = $(this);
            $('<iframe src="upload.php" name="upload_iframe" class="upload_iframe" />').appendTo('body');
            $this.find('.submit').click(function(){
                $('.upload_field').css({'background-image': 'url(img/loading.gif)', 'background-repeat': 'no-repeat', 'background-position': 'right'});
                $('.upload_iframe').load(function(){
                    $('.upload_field').css({'background-image': 'none'});
                    var obj = $.parseJSON($(this.contentDocument).text());
                    
                    if (obj.error == true)
                    {
                        $('.upload_errors').text('An error occured: '+obj.error_message)
                            .hide()
                            .slideDown();
                    }
                    else
                    {
                        $('.upload_errors').fadeOut();
                        // problem occurs here
                        $('<div class="upload_message" />')
                            .text(obj.success_data.message+' filename: '+obj.success_data.origonal_filename)
                            .hide()
                            .appendTo('.upload_messages')
                            .slideDown();
                    }
                });
            });
        });
    };
})(jQuery);
    Code (markup):

    HTML file:


    <!doctype html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title>iFrame upload test</title>    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    <script src="jQuery.BSUploader.js"></script>    <script type="text/javascript">        $(function() {            $('.BSUpload').BSUploader({                            });        });    </script></head><body><div class="BSUpload">    <div class="upload_messages"></div>    <div class="upload_errors"></div>    <form action="upload.php" method="post" target="upload_iframe" enctype="multipart/form-data">        <input type="file" name="userfile" value="" id="userfile" class="upload_field"  />        <input type="submit" name="upload_submit" value="Submit" class="submit" />    </form></div></body></html>
    HTML:

    JSON returned from upload.php (which is in the iFrame) when image uploaded successfully:


    
{"error":false,"error_message":"","success_data":{"message":"File uploaded successfully","origonal_filename":"egg.jpg","new_filename":"generate_new_file_here.jpg"}}
    Code (markup):

    Thanks for any help or ideas to what might be causing this issue.. :)
     
    galaxio, Jan 29, 2012 IP