Location: PHPKode > scripts > Sigma visual ajax UI builder > sigma-visual-ajax-ui-builder/Samples/linb/IO/complicated/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="javascript framework, RIA, SPA, client SOA, linb, jsLinb, RAD, IDE, Web IDE, widgets, javascript OOP, opensource, open-source, Ajax, cross-browser, prototype, web2.0, platform-independent, language-independent" />
    <meta name="description" content="Web application powered by LINB framework" />
    <meta name="copyright" content="hide@address.com" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>jsLinb IO sample -- complicated interaction</title>
</head>
    <body>
        <div id='loading'><img src="../../../../runtime/loading.gif" alt="Loading..." /></div>
        <div style='height:20px;'></div>
        <div id='layout' style="margin:0 auto;width:680px;border:solid 1px;padding:4px;">
            <div>
                <div> <button id='ajax_get'>Click me to trigger the request thread</button></div><br />

                <p style="font-weight:bold">Monitor:</p>
                <div id='monitor' style='border: dashed 1px #ccc;background-color:#FFFF00;height:auto!important;height:50px;min-height:50px;'>
                </div>
                <br /><br />
                <p style="font-weight:bold">Response data:</p>
                <textarea id='response' style='width:100%;height:180px;' readonly=readonly>
                </textarea>
             </div>
        </div>

        <script type="text/javascript" src="../../../../runtime/jsLinb/js/linb-debug.js"></script>
        <script type="text/javascript">
            linb.main(function(){
                linb('loading').remove();

                var trace=function(str,tid){
                    linb('monitor').append(linb.create('<p>'+str+ (tid?' threadid:'+tid:'')+' </p>'));
                };

                //use linb.Ajax get method
                linb('ajax_get').onClick(function(){
                    linb('response').attr('value','');
                    linb('monitor').empty();

                    linb.Thread.observableRun(function(threadid){
                        linb.Ajax({
                            uri:'first.js',
                            threadid:threadid,

                            //get the second service uri from the first request
                            onSuccess: function(obj,type,threadid){
                                trace('the first onSuccess',this.threadid);
                                linb.Dom.byId('response').value +=obj;
                                
                                if(typeof obj=='string')obj=_.unserialize(obj);
                                linb.Ajax({
                                    uri:obj.nexturi,
                                    threadid:threadid,

                                    //get the thrid service uri from the second request
                                    onSuccess:function(obj){
                                        trace('the second onSuccess',this.threadid);
                                        linb.Dom.byId('response').value += obj + '\n';

                                        if(typeof obj=='string')obj=_.unserialize(obj);
                                        
                                        linb.Thread.suspend(threadid);
                                        trace('--thread' + threadid +' is suspended here.');
                                        linb.absIO.groupCall({
                                            'third':linb.Ajax({
                                                uri:obj.nexturi1,
                                                threadid:threadid,
                                                onSuccess:function(obj){
                                                    trace('the third onSuccess',this.threadid);
                                                    linb.Dom.byId('response').value += obj +'\n';
                                                },
                                                onStart:function(){trace('the third onStart',this.threadid)},
                                                onEnd:function(){trace('the third onEnd',this.threadid)}
                                            }),
                                            'fourth':linb.Ajax({
                                                uri:obj.nexturi2,
                                                threadid:threadid,
                                                onSuccess:function(obj){
                                                    trace('the fourth onSuccess',this.threadid);
                                                    linb.Dom.byId('response').value += obj +'\n';
                                                },
                                                onStart:function(){trace('the fourth onStart',this.threadid)},
                                                onEnd:function(){trace('the fourth onEnd',this.threadid)}
                                            })
                                        },null,function(){
                                            trace('the group start',this.threadid);
                                        },function(){
                                            trace('the group end',this.threadid);
                                            linb.Thread.resume(threadid);
                                            trace('--thread' + threadid +' is resumed here');
                                        });
                                    },
                                    onStart:function(){trace('the second onStart',this.threadid)},
                                    onEnd:function(){trace('the second onEnd',this.threadid)}
                                }).start();
                            },
                            onStart:function(){trace('the first onStart',this.threadid)},
                            onEnd:function(){trace('the first onEnd',this.threadid)}
                        }).start();
                    });
                });
            });
        </script>




</body>
</html>
Return current item: Sigma visual ajax UI builder