[ask]cara bikin ajax loader

Discussion in 'Desain Web dan Programming' started by denzizzy, 28 Nov 2011.

Thread Status:
Not open for further replies.
  1. denzizzy

    denzizzy New Member

    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    1
    maw tanya Tuan.

    ada yg tw gak caranya bikin ajak loader ??

    saya dah ada tapi gak tw knapa gak bisa

    nih scriptnya Tuan:

    function bikinAjax(){
    if(window.ActiveXObject){
    try{
    return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
    return new ActiveXObject("Msxml2.XMLHTTP");
    }
    }
    else if(window.XMLHttpRequest){
    return new XMLHttpRequest();
    }
    }

    var xmlhttp = bikinAjax();
    function kirimRequest(halaman, parameter, konten, komponen){
    var obj = window.document.getElementById(konten);
    obj.innerHTML = "<table border='0' width='100%' height='100%'><tr><td align='center' valign='middle' height='150'><img src='images/loadings.gif' width='24' height='24' style='border:0px groove #fff;' /></td></tr></table>";
    if(xmlhttp.readyState==4 || xmlhttp.readyState==0){
    xmlhttp.open('POST', halaman, true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
    if(komponen=='div') obj.innerHTML=parseScript(xmlhttp.responseText);
    else obj.value=parseScript(xmlhttp.responseText);
    }
    }
    xmlhttp.send(parameter);
    }
    }

    function parseScript(_source)
    {
    var source = _source;
    var scripts = new Array();

    while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
    var s = source.indexOf("<script");
    var s_e = source.indexOf(">", s);
    var e = source.indexOf("</script", s);
    var e_e = source.indexOf(">", e);

    scripts.push(source.substring(s_e+1, e));
    source = source.substring(0, s) + source.substring(e_e+1);
    }

    for(var i=0; i<scripts.length; i++) {
    try {
    eval(scripts);
    }
    catch(ex) {
    // do what you want here when a script fails
    }
    }
    // Return the cleaned source
    return source;
    }

    trus di divnya

    <a href="#"onClick="javascript: kirimRequest('home.php', '', 'content', 'div');">Home</a>

    thx for reading. .
     
  2. vkios01

    vkios01 Expert 1.0

    Messages:
    749
    Likes Received:
    18
    Trophy Points:
    18
    hai om, itu pakai script JS yang masi murni ya :S diem ahhh kalau pakai script begituan..
    saran saya pakai framework JQuery dengan semboyannya write less do more :)

    ini saya kasi contohnya ya, request ajax

    HTML:
    <input id="nama" type="text"><br />
    <input id="email" type="text"><br />
    <span id="proses">Proses</span>
    <img id="loader" src="/img/loader.gif" style="visibility: hidden;"><br />
    <span id="pesan"></span>
    
    <script>
    $("#proses").live('click', function() {
    	var dataString = "nama="+$("#nama").val()+"&email="+$("#email").val();
    	$.ajax({
    		type: "POST",
    		url: "pungsion/membereg.php",
    		data: dataString,
    		cache: false,
    		beforeSend: function(){
    				$("#loader").show();
    		},
    		success: function(html){
    			if(html=="Pendaftaran Sukses"){
    				$("#pesan").html(html);
    				$("#loader").hide();
    			}
    			else{
    				$("#pesan").css("color","red").html(html);
    			}			
    		}
    	});
    });
    </script>
    
    kalau bingung, silakan ditanyakan om :)
     
    Last edited: 29 Nov 2011
  3. vkios01

    vkios01 Expert 1.0

    Messages:
    749
    Likes Received:
    18
    Trophy Points:
    18
    kayanya ada yg ketinggalan lagi, nanti tdk jalan itu code diatas, kurang
    HTML:
    $(function(){
    
    });
    jadinya
    HTML:
    <input id="nama" type="text"><br />
    <input id="email" type="text"><br />
    <span id="proses">Proses</span>
    <img id="loader" src="/img/loader.gif" style="visibility: hidden;"><br />
    <span id="pesan"></span>
    
    <script>
    $(function(){
    $("#proses").live('click', function() {
    	var dataString = "nama="+$("#nama").val()+"&email="+$("#email").val();
    	$.ajax({
    		type: "POST",
    		url: "pungsion/membereg.php",
    		data: dataString,
    		cache: false,
    		beforeSend: function(){
    				$("#loader").show();
    		},
    		success: function(html){
    			if(html=="Pendaftaran Sukses"){
    				$("#pesan").html(html);
    				$("#loader").hide();
    			}
    			else{
    				$("#pesan").css("color","red").html(html);
    			}			
    		}
    	});
    });
    
    });
    </script>
     
Loading...
Thread Status:
Not open for further replies.

Share This Page

Loading...