Results 1 to 2 of 2

Thread: jQuery screen updates work in FF, not in IE, Chrome

  1. #1

    Thread Starter
    Hyperactive Member Krokonoster's Avatar
    Join Date
    Jan 2010
    Location
    Cape Town
    Posts
    448

    jQuery screen updates work in FF, not in IE, Chrome

    Hi,
    I'm not much of a front end developer and made up the following as I went along, but work in FF, and realized in IE and Chrome, the screen just "freeze".
    However in FireFox, for each record that get processed , the progress bar update nicely and each row have a cell which I update with an icon.

    Guess better to just post my code, hoping it make sense?

    Oh, before this I build up a table of all records, give the first one a class name of "recordRow" and data-id of the record's id.
    So the code loop over all records, and call a server side method that process the record and return a empty string (success) or error.
    Note this all work in all browsers...it's just the screen seems to "freeze" (not updating the progress bar or anything)....Fine in Firefox..oh I said that... (late here)

    HTML Code:
    $('#btnImport').on('click', function(event) {
    	
    	event.preventDefault();
    	
    	var total = $('.recordRow').length;
    	var current = 0;	
    	$('#progressBarContainer').show();
    	
    	var url = '/Portal/Admin/MemberImport/ImportRecord';
    	
    	$('.recordRow').each(function() {
    		var id = $(this).data("id");
    		current++;
    		$('#progressBar').width(current / total * 100 + '%');
    		var cell = $(this);
    		var row = cell.closest('tr');
    		cell.html('<i class="icon icon-refresh"></i>');
    		var model = {
    			Id: id
    		};
    		$.ajax({
    			url: url,
    			type: 'GET',
    			data: model,
    			dataType: 'json',
    			async: false
    		}).done(function(data) {
    			if (data == '') {
    				cell.html('<i class="icon icon-ok"></i>');
    				$('#tblRecords tr[data-id="'+id+'"]').addClass('info');
    			} else {
    				cell.html('<a href="#" data-toggle="tooltip" data-placement="right"  class="tip" title="' + data + '"><i class="icon icon-remove"></i></a>');
    				row.addClass('error');
    			}
    			$('.tip').tooltip();
    		});
    	});
    	$('#progressBarContainer').hide();
    	alert("Import Complete. It would be best to delete the batch file now.");
    });
    UPDATE: I just realized if I add a .always to the ajax call and put an alert in there, IE show the alert and update the screen.
    I tried set cache to false, but still no joy.
    Last edited by Krokonoster; May 24th, 2013 at 02:24 AM.


  2. #2
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: jQuery screen updates work in FF, not in IE, Chrome

    Sorry for the late response - did you get this working?

    Are you able to use a debugger in IE or Chrome - you could set breakpoints and see what's going on in further detail

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

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



Click Here to Expand Forum to Full Width