Søg
Avatar billede naquer Nybegynder
19. juni 2011 - 14:10 Der er 14 kommentarer og
1 løsning

Opdater div ved action

Hej,

Jeg har nedenstående kode til at "replace" indholdet af en <DIV> når der trykkes på et element. Mit problem er at koden udelukkende replacer tekst indholdet og således ikke HTML koder inden for DIV elementet.

Jeg har en formodning om at jeg skal ændre innerHTML til noget andet end responseText, men er ikke helt sikker

Er der nogle af Jer kloge hoveder der kan hjælpe?

Kode:


function showUser3(str)
{
if (str=="")
  {
  document.getElementById("txtHint3");
  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("txtHint3").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getbeskrivelse.php?q="+str,true);
xmlhttp.send();
}
Avatar billede olsensweb.dk Ekspert
19. juni 2011 - 14:35 #1
hvis det kun er 1 værdi kunne du skrive direkte i en textbox
erstat denne
document.getElementById("txtHint3").innerHTML=xmlhttp.responseText;


med denne
document.getElementById("min_textbox_id").value = xmlhttp.responseText;
Avatar billede naquer Nybegynder
19. juni 2011 - 14:58 #2
Tak for svaret.

Du får lige en kort uddybende forklaring.
Min oprindelige kode ser således ud:

<div id='txtHint3'>
<td><img src='xx' /></td>
<tr>
<td>Tekst</td>

</div>

Hele dette indhold skal "replaces" når brugeren akiverer ovenstående javascript, med noget php kode, som henter billedet og teksten ud af en database baseret på hvad brugeren har valgt.

Problemet nu, er at det kun er "Tekst" inden for DIV der bliver replacet, ligesom det kun er tekst scriptet læser fra php koden.

Noget bud på hvordan det kan løses ved at redigere i ovenstående script?
Avatar billede tjens Nybegynder
19. juni 2011 - 15:51 #3
Du bliver nødt til at uddybe mere, ved at vise os koden i getbeskrivelse.php
Avatar billede naquer Nybegynder
19. juni 2011 - 15:52 #4
De har du her:


<?php
$q=$_GET["q"];

include("connect.php");
sqlconnect();

$sql="SELECT * FROM Kunder WHERE Navn ='".$q."'";

$result = mysql_query($sql);
$row = mysql_fetch_array($result);

$default_billede = "middlebox1";
$navn = $row['Navn'];
$beskrivelse = $row['Beskrivelse'];
if($navn == "") {
    $billede = strtolower($default_billede);
} else {
    $billede = strtolower($navn);
}
   

echo "<td align='center'><img src='" .$billede. ".jpg' /></td>";
echo "</tr>";
echo "<tr>";

echo "<td id='midtertekst' height='30' bgcolor='white' valign='top'>";


echo $beskrivelse;

   



?>
Avatar billede tjens Nybegynder
19. juni 2011 - 16:16 #5
Din måde at bruge innerHTML på, er ren vold mod DOM-træet efter min mening.

Du skulle nøjes med at udskifte image-src og teksten selv, og undlade at udskifte tr og td.

Drop den div (med mindre den har betydning for udseendet) og sæt id på tekst-td og img:
<td><img id='midterbillede' src='xx' /></td>
<tr>
<td id='midtertekst' >Tekst</td>

Lad getbeskrivelse.php returnere billede og tekst med et skilletegn imellem og intet andet:
echo $billede. ".jpg";
echo "#";
echo $beskrivelse;

Lad onreadystatechange funktionen klippe svaret ved skilletegnet og indsæt de to værdier direkte:

var svar = xmlhttp.responseText.split("#");

document.getElementById("midterbillede").src = svar[0];
document.getElementById("midtertekst").firstChild.value = svar[1];


Skal evt. udvides med check på om svar.length > 1 før man bruger felterne.
Avatar billede olsensweb.dk Ekspert
19. juni 2011 - 16:18 #6
utested men skulle ligne dette

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    function showUser3(str){
        var js_ar = new Array();
        
        if (str=="")  {
            document.getElementById("txtHint3");
            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)    {
                js_ar = JSON.parse(xmlhttp.responseText);                
                document.getElementById("img1").value = js_ar['biled'];
                document.getElementById("tekst1").value = js_ar['beskrivelse'];                
            }
        }
        xmlhttp.open("GET","getbeskrivelse.php?q="+str,true);
        xmlhttp.send();
    } 
    </script>
</head>
<body>
<div id='txtHint3'>
<td><img id="img1" src='xx' /></td>
<tr>
<td>
<span id="tekst1">Tekst</span >
</td>
</div>
</body>
</html>


getbeskrivelse.php
<?php
$q=$_GET["q"];
include("connect.php");
sqlconnect();
$sql="SELECT * FROM Kunder WHERE Navn ='".$q."'";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
$default_billede = "middlebox1";
$navn = $row['Navn'];
$beskrivelse = $row['Beskrivelse'];
if($navn == "") {
    $billede = strtolower($default_billede);
} 
else {
    $billede = strtolower($navn);
}
$ar = array();
$ar['biled'] = $billede;
$ar['beskrivelse'] = $beskrivelse;
echo json_encode($ar);  
?>
Avatar billede olsensweb.dk Ekspert
19. juni 2011 - 16:54 #7
en lille fejl
document.getElementById("img1").value = js_ar['biled'];
skal værer
document.getElementById("img1").scr = js_ar['biled']+".jpg";
Avatar billede naquer Nybegynder
19. juni 2011 - 22:02 #8
Tak for svarene.

Det ser ud til at det er nogenlunde samme fremgangsmåder i anvender i begge jeres svar.
Ronols: Når jeg sætter din kode ind sker der imidlertid ikke noget når jeg aktiverer funktionen. Kan dette skyldes nedenstående kode:?

        if (str=="")  {
            document.getElementById("txtHint3");
            return;

da denne jo ikke validerer begge variable?
Avatar billede naquer Nybegynder
19. juni 2011 - 22:25 #9
Hvis det er til hjælp er det baseret på følgende eksempel:
http://www.w3schools.com/Ajax/ajax_database.asp

Hvor der bare er to elementer der skal ændres ved action frem for et.
Avatar billede olsensweb.dk Ekspert
19. juni 2011 - 23:45 #10
#8
både og, coden tester om der står noget i parameteren, og er den blank retunerer den med det sammen.
men appropos function, i den indtil nu viste code er functionen aldrig kaldt, fra din html fil :(
smid lige dette nederst i din body, som test
<script type="text/javascript">
    showUser3('naquer');
</script>

det skal selvføgelig være en onchange event til et eller andet senere
Avatar billede naquer Nybegynder
20. juni 2011 - 08:49 #11
Tak for svaret.

Nedenstående kode kalder scriptet


<?php
$q=$_GET["q"];

include("connect.php");
sqlconnect();

$sql="SELECT * FROM Linkto WHERE Navn = '".$q."'";

$result = mysql_query($sql);


while($row = mysql_fetch_array($result)) {
        $Tilbud = $row['Tilbud'];
        $Navn = $row['Navn'];
        echo "<a class='rightboks' href='#' onClick=\"showUser3('" .$Navn. "')\">" .$Tilbud. "</a>";
        echo "<br />";
    }


Når jeg trykker på linket sker der imidlertid ikke meget.
Avatar billede olsensweb.dk Ekspert
20. juni 2011 - 10:48 #12
dette virker, efter at have rettet en stavefejl, og lidt andre småting.
viser også 3 måder at skrive output på

getbeskrivelse.php
<?php
$q=$_GET["q"];
include("connect.php");
sqlconnect();
$sql="SELECT * FROM Kunder WHERE Navn ='".$q."'";

$result = mysql_query($sql);
$row = mysql_fetch_array($result);
$default_billede = "middlebox1";
$navn = $row['Navn'];
$beskrivelse = $row['Beskrivelse'];

if($navn == "") {
    $billede = strtolower($default_billede);
} 
else {
    $billede = strtolower($navn);
}
$ar = array();
$ar['navn'] = $navn;
$ar['billed'] = $billede;
$ar['beskrivelse'] = $beskrivelse;
echo json_encode($ar);  
?>


html fil
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    function showUser3(str){
        var js_ar = new Array();
        
        if (str=="")  {
            document.getElementById("txtHint3");
            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)    {
                js_ar = JSON.parse(xmlhttp.responseText);                
                document.getElementById("navn1").value = js_ar['navn'];     
                document.getElementById("img1").src = js_ar['billed']+".gif"; 
                document.getElementById("tekst1").innerHTML = js_ar['beskrivelse'];                
            }
        }
        xmlhttp.open("GET","getbeskrivelse.php?q="+str,true);
        xmlhttp.send();
    } 
    </script>
</head>
<body>
<div id='txtHint3'>
<table>
<tr>
<td><input id="navn1"></td>
</tr>
<tr>
<td><img id="img1" src="xx" alt="" ></td>
</tr>
<tr>
<td> <span id="tekst1">Tekst</span > </td>
</tr>
</table>
</div>
<form>
<select name="users" onchange="showUser3(this.value)">
<option value="">Select a person:</option>
<option value="naquer">naquer</option>
<option value="tjens">tjens</option>
<option value="ronols">ronols</option>
</select>
</form>
</body>
</html>



tag at følge op på dine åbne spørgsmål http://www.eksperten.dk/list/aabnespoergsmaal/naquer du har 34 åbne, det er begrænset hvor meget folk gider hjælpe med så mange åbne spm http://www.eksperten.dk/faq#faq-8-5
Avatar billede naquer Nybegynder
20. juni 2011 - 17:00 #13
Mange tak for hjælpen! Det virker super!

Beklager alle de åbne spørgsmål - jeg giver mig i kast med at rydde op i dem

Endnu engang tak for hjælpen
Avatar billede naquer Nybegynder
02. august 2011 - 18:47 #14
ronols du smider bare et svar :)
Avatar billede olsensweb.dk Ekspert
02. august 2011 - 20:17 #15
svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 52 minutter siden
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:43 AI google.com Af Peter Olsen i Andre onlineløsninger
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
White papers
Flere white papers »