Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sycronize ajax with progress info

    I'm tryin to upadte lots of data using ajax and update the info box during the process. but when i start the process the page get stuck so only the final messege apears.

    the code:
    Code:
    function ExecutePage(url)
    {
    	try
    	{
    		// for explorer
    		if(url.indexOf("?") < 0) 	url += "?rnd=" + Math.random();
    		else						url += "&rnd=" + Math.random();
    		
    		var xmlhttp;
    		if (window.XMLHttpRequest)
    		{// code for IE7+, Firefox, Chrome, Opera, Safari
    			xmlhttp=new XMLHttpRequest();
    		}
    		else
    		{// code for IE6, IE5
    			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    		}
    		xmlhttp.open("GET",url,false);
    		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    		xmlhttp.send();
    		if(xmlhttp.status == 404) return "ajax not found file '" + url + "'";
    		else return xmlhttp.responseText;
    	}
    	catch (err) {alert(err.description); return "error";}
    }
    function start_import()
    {
    	var progress_box = document.getElementById("progress_box");
    	
    	var groups = ExecutePage("template/import/get_main_groups.php");
    	progress_box.innerHTML = "ייבוא קטגוריות: ";
    	
    	groups = groups.split("#");
    	for(var i = 0; i < groups.length; i++)
    	{
    		//alert(i);
    		var percent = Math.round(100*i/groups.length);
    		progress_box.innerHTML = "ייבוא קטגוריות: " + percent + "%";
    		
    		//alert(i);
    		var id_name = groups[i].split(",");
    		ExecutePage("template/import/add_group.php?id=" + id_name[0] + "&name=" + id_name[1]);
    	
    	}
    	progress_box.innerHTML = "ייבוא קטגוריות: הושלם";
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Your problem is this:
    Code:
    xmlhttp.open("GET",url,false);
    From W3school:

    Using async=false is not recommended, but for a few small requests this can be ok.

    Remember that the JavaScript will NOT continue to execute, until the server response is ready. If the server is busy or slow, the application will hang or stop.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i need my ajax commands to be excecuted one after another and not simultaneous.
    how can I achive this in Asynchrony mode?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Use one of the return values to trigger the next ajax command or at lest authorize the command to execute. By that I mean add a value to the ajax return.

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    whould you mind provide me an example code for a set of 3 commands?

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Stuff missing from your code so I use mine.
    Three php files with a sleep() to simulate a lot of time consuming work.
    PHP Code:
    <?php
    // file ajax.php
    echo 'I do a lot of work here but made it 1';
    sleep(2);
    ?>
    PHP Code:
    <?php
    // file ajax2.php
    echo 'I do more work here but made it 2';
    sleep(2);
    ?>
    PHP Code:
    <?php
    // file ajax3.php
    echo 'I do my best work here but made it 3';
    sleep(2);
    ?>
    And the HTML file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">
    // Placed in <body> so it exicutes while page loads
    var httpRequest;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType) {
            httpRequest.overrideMimeType('text/xml');
        }
    }
    else if (window.ActiveXObject) { // IE
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {}
        }
    }
    window.jaxobject =	httpRequest; // makes a universal var
    
    function makeRequest(url, divID) {
    	var httpRequest = window.jaxobject;
    	if (!httpRequest) {
    	    alert('Giving up :( Cannot create an XMLHTTP instance');
    	    return false;
    	}
    	httpRequest.onreadystatechange = function() { alertContents(httpRequest, divID); };
    	httpRequest.open('GET', url, true);
    	httpRequest.send('');
    }
    function alertContents(httpRequest, divID) {
        if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {
    			var returnedcode = httpRequest.responseText;
    			var newText = returnedcode.split("but made it");
    			if(newText[1] == 1){
    				document.getElementById(divID).innerHTML = newText[0];
    				control('place2');
    			}
    			if(newText[1] == 2){
    				document.getElementById(divID).innerHTML = newText[0];
    				control('place3');
    			}
    			if(newText[1] == 3){
    				document.getElementById(divID).innerHTML = newText[0];
    				//control('place3');
    			}
            } else {
                alert('There was a problem with the request. '+ httpRequest.status);
            }
        }
    }
    function control(divid){
    	switch(divid)
    	{
    	case 'place':
    	  makeRequest('ajax.php', 'place');
    	  break;
    	case 'place2':
    	  makeRequest('ajax2.php', 'place2');
    	  break;
    	  case 'place3':
    	  makeRequest('ajax3.php', 'place3');
    	  break;
    	}
    }
    </script>
    </head>
    <body>
    <button onclick="control('place');">PUSH</button>
    <div id="place">one</div>
    <div id="place2">two</div>
    <div id="place3">last</div>
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    your solution is extremly complicated and it's only for 3 commands,
    as you can see from my code I'm using a loop of ajax command with diffrent parameter every time, if I'll try your way I will totally get lost and my code will be unreadable.

    can you suggest more simple and alegant way to do it?

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    no i can't. Use my code to get a handle and redo your code. it was for training only not something to cut and paste.


  •  

    Posting Permissions

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