Kjapp og trygg hosting for Wordpress

Ajax - forsinkelse på innhenting av data

V

VetleHaugen

Medlem
Delay eksempel

F.eks sette en delay på dette scriptet:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>
 
adeneo

adeneo

Medlem
Du tenker på å legge inn et halvt sekund eller noe slikt i forsinkelse slik at den ikke jobber så hard når brukeren skriver fort eller ?

Du ville spart deg for fantastisk mye arbeid ved å bruke jQuery, men det vet du vel allerede!
 
adeneo

adeneo

Medlem
Det blir noe sånt uten jQuery :

HTML: 
<!DOCTYPE html>
<head>
<script type="text/javascript">
    var timer, 
        xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
    
    function showHint(str) {
        clearTimeout(timer);
        if (str.length===0) { 
            document.getElementById("txtHint").innerHTML="";
        }else{
        timer = setTimeout(function() {
                    xmlhttp.open("GET","gethint.asp?q="+str,true);
                    xmlhttp.send();
                }, 500);
        }
    }
</script>
</head>
<body>
    <h3>Start typing a name in the input field below:</h3>
    <form action=""> 
        First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
    </form>
    <p>Suggestions: <span id="txtHint"></span></p> 
    
</body>
</html>​

Med jQuery :

HTML: 
<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var timer;
            $("#txt1").on('keyup', function(e) {
                var self=this;
                clearTimeout(timer);
                if (self.value.length===0) {
                    $("txtHint").text('');
                }else{
                    timer = setTimeout(function() {
                        $.ajax({
                            type: "GET",
                            url: "gethint.asp?q="+self.value,
                        }).done(function( hint ) {
                            $("#txtHint").text(hint);
                        });
                    }, 500);
                }
            });
        });
</script>
</head>
<body>
    <h3>Start typing a name in the input field below:</h3>
    <form action=""> 
        First name: <input type="text" id="txt1" />
    </form>
    <p>Suggestions: <span id="txtHint"></span></p> 
    
</body>
</html>​​
 
Sist redigert:
V

VetleHaugen

Medlem
Hei,

Et lite problem: Jeg skriver inn litt tekst, men ombestemmer meg og fjerner alt.
Når teksten er fjernet står dette feltet tomt:

<span id="txtHint">Hei her skal være noe default innhold...</span>

... pga. denne koden: $("txtHint").text('');


Men jeg ønsker at det fortsatt skal stå "Hei her skal være noe default innhold..." selv etter at jeg har fjernet teksten i tekstboksen.

Kan selvsagt gjøres slik, men da blir jo det mye unødvedig koding:
$("txtHint").text('Hei her skal være noe default innhold...');

Kanskje dårlig forklart, men er det noen som likevel kan hjelpe :)

mvh. Vetle
 
adeneo

adeneo

Medlem
Hvis jeg forstår det riktig, så må du legge inn den default teksten slik du beskriver ovenfor.
Dersom #txt1 er tom, vis den beskjeden i #txtHint (ser nå at jeg har glemt tegnet for ID).
 
V

VetleHaugen

Medlem
adeneo skrev:
Hvis jeg forstår det riktig, så må du legge inn den default teksten slik du beskriver ovenfor.
Dersom #txt1 er tom, vis den beskjeden i #txtHint (ser nå at jeg har glemt tegnet for ID).
Klikk for å utvide...

Det stemmer. Den står tom dersom jeg ikke skriver noe inn i
$("txtHint").text('');
 
Du må logge inn eller registrere deg for å svare her.
Topp