Just nu i M3-nätverket
Gå till innehåll

frågor om ajax


jan-erik

Rekommendera Poster

jag försöker skapa en rutin där man via ett formulär anger ett värde (xvis ett artikelnr) och får ut en motsv artikltext som hämtas från mysql.

Jag vill att det ska ske utan omladdning av sidan, och vad jag föstår är det då Ajax blir aktuellt.

Jag har följande.

AJAX:

<script  type="text/javascript" language="Javascript">
window.onload = initAll;
var xhr = false;
function initAll() {
document.getElementById("makeTextRequest").onclick = getNewFile;
document.getElementById("makeXMLRequest").onclick = getNewFile;
}
function getNewFile() {
makeRequest(this.href);
return false;
}
function makeRequest(url) {
if (window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
}
else {
	if (window.ActiveXObject) {
		try {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e) { }
	}
}

if (xhr) {
	xhr.onreadystatechange = showContents;
	xhr.open("GET", url, true);
	xhr.send(null);
}
else {
	document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
}
}

function showContents() {
if (xhr.readyState == 4) {
	if (xhr.status == 200) {
		var outMsg = (xhr.responseXML && xhr.responseXML.contentType=="text/xml") ? xhr.responseXML.getElementsByTagName("choices")[0].textContent : xhr.responseText;
	}
	else {
		var outMsg = "There was a problem with the request " + xhr.status;
	}
	document.getElementById("updateArea").innerHTML = outMsg;
}
}

</script>
<script type="text/javascript" language="JavaScript">

 

DIVVÄLJARE:

var selDiv;
function ShowContent(id) {
var id;
 if (selDiv) selDiv.style.display='none';
  selDiv=document.getElementById(id);
 selDiv.style.display='block';
}

 

FORMULÄR:

<form action="" method="post">
    <input 
type="button" 
name="artval"  
value="<? echo $art;?>" 
onclick="ShowContent('artdiv'); return true;"
  href="javascript:ShowContent('artdiv')">
</form>

 

EXEKVERING:

<div id="artdiv" class="showmeny" >
<a id="makeTextRequest" href="<? include "artlist.php";?> "></a>
</div>

 

Om jag kan få in "art" i "artlist" så funkar det perfekt!

Men om inte om fanns...

 

 

Länk till kommentar
Dela på andra webbplatser

Tack Micke, det funkar perfekt.

Jag har byggt om lite till en generell rutin genom att jag skickar med namnet på mottagande script som en parameter i stället för att lägga den fast i js. Så, på ett par timmar har jag fått 12 script som så att säga raka vägen genom väldgt enkla ombyggnader.

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane
ett par timmar har jag fått 12 script
Då får man väl säga Grattis ;)

Kul att du löste det själv i slutändan :thumbsup:

 

Länk till kommentar
Dela på andra webbplatser

Här kommer ett litet problem:

jag försöker använda min nya fina ajax-rutin för att skicka en textarea vidare.

 

<form name="nyinl">

<textarea  class="inptxt" name="nytext" cols="40" rows="4" wrap="virtual" style="overflow: hidden;"></textarea>

<input name="nyinl" type="button"  value="ny text"  
onclick="alert (document.getElementById(nytext));"/>
</form>

 

koden i onclick syftar bara till att kolla om jag får tag i "nytext", men det får jag inte. Den svarar "null".

???????

 

 

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Du ska ha med ' ' runt id:et annars tar den det som att nytext är en variabel.

document.getElementById('nytext')

 

Länk till kommentar
Dela på andra webbplatser

jag ändrade enligt kod nedan, men svaret på alerten blir

[object]

 

<form action="" method="post" name="nyinl">
<textarea  class="inptxt" name="nytextnm" id="nytextid" cols="40" rows="4" wrap="virtual" style="overflow: hidden;"></textarea><br>
<input name="nyinl" type="button"  value="nytt inlägg"  
onclick="var tx=document.getElementById('nytextid');alert(tx);"/>
</form>

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Ja, det var jag som var morgontrött och inbte såg riktigt.

Nu refererar du bara till själva objektet(textarean).

Lägg till .value så får du fram värdet på objektet.

 

Alltså:

alert(document.getElementById('nytext').value)

 

Länk till kommentar
Dela på andra webbplatser

Lade till .value, men det jag får ut är en tom alertruta som det står 'ok' i, med en gul varningsstriangel.

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Innerhåller textarean något värde innan du klickar på knappen?

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Detta fungerar fint hos mig:

<form action="" method="post" name="nyinl">
<textarea  class="inptxt" name="nytextnm" id="nytextid" cols="40" rows="4" wrap="virtual" style="overflow: hidden;"></textarea><br>
<input name="nyinl" type="button"  value="nytt inlägg" onclick="alert(document.getElementById('nytextid').value);"/>
</form>

 

Länk till kommentar
Dela på andra webbplatser

Nä, det vill sig inte.

Jag lägger ut hela scriptet, kan du kola om det funkar hos dej? Jag har lagt en alert i funktionen.

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script  type="text/javascript" language="Javascript">
var xmlHttp

function showCustomer(str,pgm)
{ 
xmlHttp=GetXmlHttpObject();
alert (str+pgm);
if (xmlHttp==null)
 {
 alert ("Your browser does not support AJAX!");
 return;
 } 
var url=pgm;

url=url+"?q="+str;

url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
   {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
 catch (e)
   {
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 }
return xmlHttp;
}
</script>
</head>

<body>
<form action="" method="post" name="nyinl">
<textarea  class="inptxt" name="nytextnm" id="nytextid" cols="40" rows="4" wrap="virtual" style="overflow: hidden;"></textarea><br>
<input name="nyinl" type="button"  value="nytt inlägg" onclick="var txt=document.getElementById('nytextid').value); var pgm='bokning.php'; showCustomer(txt,pgm)"/>
</form>
</body>
</html>

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Du har en ) för mycket, finns precis efter .value i onclick-händelsen.

Den är väl kvar sen testet med alert.

 

Länk till kommentar
Dela på andra webbplatser

 

JS

<script  type="text/javascript" language="Javascript">
var xmlHttp

function showCustomer(str,pgm)
{ 
xmlHttp=GetXmlHttpObject();
alert (str+pgm);
if (xmlHttp==null)
 {
 alert ("Your browser does not support AJAX!");
 return;
 } 
var url=pgm;

url=url+"?q="+str;

url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
   {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
 catch (e)
   {
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 }
return xmlHttp;
}
</script>

 

VÄLJARE

  <input 
name="clist " 
type="button" 
value="lista"
onclick="ShowContent('clista'); return true;"
  href="javascript:ShowContent('clista')">

 

DIV

<div id="clista" style="display:none;" ><? echo date('His'); include "showlist.php";?>
</div>

 

Så här ser det i princip ut nu, och det funkar väldigt bra vad gällar navigering etc, jag har massor av funktioner och laddar bara om sidan ett fåtal gånger.

Men, en fråga.

Om jag väljer knappen ovan, så presenteras snyggt o prydligt output från showlist.php.

Men om jag klickar en gång till så uppdateras inte skärmen, vilket jag kollat genom att lägga ut klocktid 'His'.

 

Stämmer mina iakttagelser?

 

 

Länk till kommentar
Dela på andra webbplatser

Micke_skane

Som hastigast, dåligt med tid till forumet idag, så ser jag att du lagt in href i knappen. Det ska inte vara där.

 

Mer rätt är:

<input name="clist" type="button" value="lista" onclick="ShowContent('clista');" />

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...