Advanced Search

Results 1 to 2 of 2

Thread: Reloading/refreshing a div on click with jquery

  1. #1
    Join Date
    Oct 2012
    Posts
    133
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default Reloading/refreshing a div on click with jquery

    Hi. I am working on an image uploader and was wondering if you can help me.

    Please, go to this page: http://qwikad.com/test.php?view=post...hortcutregion=

    and select an image with any Choose File selector. You should see a thumbnail preview. Now click on the x to remove the image and clear the input file.

    Now, if you're going to select an image with that input file again the thumbnail preview will not load up (because the old thumb is still there closed).

    Is there a way to reload this particular div to clear it from the old thumb and get the function ready again?

    The thumb previews are uploaded with this:

    Code:
    (function( $ ){
      var settings = {
      		'scale': 'contain', // cover
      		'prefix': 'prev_',
    		'types': ['image/gif', 'image/png', 'image/jpeg'],
    		'mime': {'jpe': 'image/jpeg', 'jpeg': 'image/jpeg', 'jpg': 'image/jpeg', 'gif': 'image/gif', 'png': 'image/png', 'x-png': 'image/png', 'tif': 'image/tiff', 'tiff': 'image/tiff'}
    	};
    
      var methods = {
         init : function( options ) {
    		settings = $.extend(settings, options);
    		
    		return this.each(function(){
    			$(this).bind('change', methods.change);
    			$('#'+settings['prefix']+this.id).html('').addClass(settings['prefix']+'container');
    		});
         },
         destroy : function( ) {
    		return this.each(function(){
    			$(this).unbind('change');
    		})
         },
         change : function(event) { 
         	var id = this.id
         	
         	$('#'+settings['prefix']+id).html('');
         	
         	if(window.FileReader){
         		for(i=0; i<this.files.length; i++){
    		 		if(!$.inArray(this.files[i].type, settings['types']) == -1){
    		 			window.alert("File of not allowed type");	
    		 			return false
    		 		}
    		 	}
         	
         	    for(i=0; i<this.files.length; i++){
         	    	var reader = new FileReader();
    	    		reader.onload = function (e) {
    	    			$('<div />').css({'background-image': ('url('+e.target.result+')'), 'background-repeat': 'no-repeat', 'background-size': settings['scale'] }).addClass(settings['prefix']+'thumb').appendTo($('#'+settings['prefix']+id));
    	    		};
    	    		reader.readAsDataURL(this.files[i]);
         	    }
    
         	}
         }
      };
    
      $.fn.preimage = function( method ) {
        if ( methods[method] ) {
    		return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
    		return methods.init.apply( this, arguments );
        } else {
    		$.error( 'Method ' +  method + ' does not exist on jQuery.preimage' );
        }    
      
      };
    
    })( jQuery );

    and this:


    Code:
    $(document).ready(function()
    {
    	$('.file').preimage();
    });

    Here's what I use to close a thumbnail preview:

    Code:
    $(function() {
        $('a.close').click(function() {
            $($(this).attr('href')).slideUp();
            return false;
        });
    });
    The html part:

    Code:
    <div id="prev_file1"></div>
    <a href="#prev_file1" class="close" >x</a>

    Thank you.
    Last edited by qwikad.com; 01-12-2014 at 09:30 PM. Reason: My grammar is HORRIBLE!! LOL.

  2. #2
    Join Date
    Oct 2012
    Posts
    133
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    I tried to reload the entire div with this:


    Code:
    <script>
    $(document).ready(function()
    {
    
    $('#changePanel').click(function() {
        var data = '<input class="file" id="file1" name="pic[]" type="file"><div id="prev_file1"></div>' ;
        $('#panel').hide().html(data).fadeIn('fast');
    });
    });
    </script>
    
    
    <div id="panel">
    
    <input class="file" id="file1" name="pic[]" type="file"><div id="prev_file1"></div>
    
    </div>
    
    <input id="changePanel" value="x" type="button" >
    It reloads it, but the preview option quits working after that. You'd think it shouldn't.

Similar Threads

  1. Resolved .click() function without jquery :D
    By keyboard in forum JavaScript
    Replies: 3
    Last Post: 09-06-2012, 03:51 AM
  2. Resolved jQuery Image Magnify v1.11 (click anywhere to close)
    By brianh in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-10-2011, 04:19 PM
  3. Stopping jQuery Scroll to Top on click?
    By Simon Lloyd in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-16-2009, 04:56 PM
  4. click, edit and save text script without refreshing page?
    By acctman in forum Looking for such a script or service
    Replies: 7
    Last Post: 07-22-2009, 09:26 AM
  5. jquery execute $.post on second click in IE
    By genia in forum JavaScript
    Replies: 0
    Last Post: 10-21-2008, 01:52 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •