jquery block UI malfunction on ajax loading event
        Posted  
        
            by Ygam
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Ygam
        
        
        
        Published on 2010-01-27T08:37:48Z
        Indexed on 
            2010/04/14
            15:53 UTC
        
        
        Read the original article
        Hit count: 422
        
problem: trigger errored when block UI is called on this code
(function($){
    function preloader()
    {
        $('a#preloader').click(function(e){
           e.preventDefault();
           var url = base_url + 'runtest/preloader';
           $('div#content').load(url, preloaderCallback);
        });
    }
    function remotePreload()
    {
        $('a#remotepreload').click(function(e){
           e.preventDefault();
           var object = $(this);
           object.data('clicked', 'yes');
           var url = base_url + 'runtest/remote_preloader';
           $('div#content').load(url);
        });
    }
    /*
     * callback functions
     */
    function preloaderCallback()
    {
        $('div.imageholder img').hide();
        $('div.imageholder img').each(function(){
            var img = new Image();
            var sursa = $(this).attr('src');
            var parent = $(this).parent();
            var preloaderSource = '<img src="' + base_url + 'media/images/preloader.gif' + '" alt="loader"/>';
            parent.append(preloaderSource);
            $(img).load(function(){
                parent.append($(this));
                $(this).hide().fadeIn(500);
                $(this).siblings().remove();
            }).attr('src', sursa);
        });
    }
    function blocker()
    {
        $('#content').block();
    }
    function handlePageLoad()
    {
        $('a#remotepreload').ajaxStart(function(e){
            var elem = $(e.target);
            if (elem.data('clicked') == 'yes')
            {
                // error when blocker() function is called here
                alert('Started');
            }
        });
        $('a#remotepreload').ajaxComplete(function(e){
            var elem = $(e.target);
            if (elem.data('clicked') == 'yes')
            {
                elem.removeData('clicked');
                alert('Ended');
            }
        });
    }
    // call onready functions
    $(function(){
        preloader(); remotePreload();handlePageLoad();
    });
})(jQuery);
// here's the error from firefox's debugger uncaught exception: [Exception... "Could not convert JavaScript argument arg 0" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/testsuite/media/js/jquery.min.js :: anonymous :: line 115" data: no]
here's the html markup
<div id="wrap">
            <div id="header">
                <?= $header ?>
            </div>
            <div id="content">
                <?= $content ?>
            </div>
            <div id="sidebar">
                <?= $sidebar ?>
            </div>
            <div id="footer">
                <?= $footer ?>
            </div>
        </div>
EDIT I was using Jquery 1.4.1 when this happened. Switched back to 1.3 and everything went back to normal.
© Stack Overflow or respective owner