SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: redraw issues

  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    redraw issues

    Hi all,

    I've tried searching for a way around this but ended up finding an old thread I had posted on the same subject which had no results.

    Basically, it seems that when I run a long process and set to display an elemement before it happens, it doesn't actually display until the long process is finished.

    At the clients request I cannot give any example code or an url to look at it, but I think I can sum it up below:

    Code JavaScript:
    document.getElementById('foo').style.display = 'block';
    // do long ajax request
    doRequest('url', function(res) {
        if(!res.responseXML) {
            alert(res.responseText);
            return;
        }    
     
        // handle response
     
        document.getElementById('foo').style.display = 'none';
    });

    Looking at the above code, if that were to be run, it should show the element foo and then do an ajax request (which would take 5 seconds).

    Once the request is complete and the results are dealt with, it should then hide the element foo.

    What actually happens visually is it handles the data and then quickly shows and then hides the element foo.

    Can anyone work out why? I would of thought that this would show the element first as it was called before hand, yet it seems that the order of events seem to get mixed up?

    Thank you all in advance!


  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    document.getElementById('foo').style.display = 'block';
    setTimeout(callDoRequest, 10);
     
    function callDoRequest() {
        doRequest('url', function(res) {
            if(!res.responseXML) {
                alert(res.responseText);
                return;
            }    
     
            // handle response
     
            document.getElementById('foo').style.display = 'none';
        });
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately that didn't work either

    Thanks!


  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How does the open method call look like? Is the third parameter true or false?

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its true

    Code:
    function createXMLHttpRequest() {
        if (typeof XMLHttpRequest != "undefined") {
            return new XMLHttpRequest();
        } else if (typeof ActiveXObject != "undefined") {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            throw new Error("XMLHttpRequest not supported");
        }
    }
    function doRequest(url, callback, postAttributes) {
        var request = createXMLHttpRequest();
        //url = url + '/'+(Math.random()*1000);
        request.open(((postAttributes) ? 'POST' : 'GET'), url, true);
        if(postAttributes) {
            var postStr = '';
            for(var i in postAttributes) {
                postStr += '&' + i + '=' + postAttributes[i];
            }
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.setRequestHeader("Content-length", postStr.length);
            request.setRequestHeader("Connection", "close");
        }
        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                if(request.status == 200) {
                    if(request.responseXML && request.responseXML.firstChild.tagName == 'sessionExpired') 
                        window.location = 'http://xx.xx.com/signin';
                    else
                        callback(request);
                } else {
                    alert('An error has occurred');
                }
            }
        }
        if(postStr)
            request.send(postStr);
        else
            request.send(null);
    }
    Cheers


  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is element foo invisible when the page loads and then visible via script?

    Does this issue happen in all browsers?

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the element doesn't exist when the page loads. When required it will check to see if the element exists, and if it doesn't then it will create it.

    As for other browsers, its the same in IE, I haven't checked any other.


  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question is if the Ajax request is the issue here. What happens if you comment out the doRequest call and try out the following
    Code:
    var foo = document.getElementById('foo');
    foo.style.display = "block";
    
    window.setTimeout(function() {
    	foo.style.display = "none";
    }, 1000);

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, damn sitepoint not sending me an email to notify me.

    You'll never guess. I thought it was flashing (it certainly looked like it) but looking at the code, it wasn't adding the created element to the dom.

    I corrected the code and now it works

    Thanks guys & gals!



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
  •