Avatar billede webbe Nybegynder
06. oktober 2010 - 08:41 Der er 8 kommentarer og
1 løsning

Hjælp til AJAX script

Hej eksperter

Jeg har tidligere fået hjælp til et AJAX script som jeg nu gerne vil have udvidet.

Det jeg har nu består i, at når man har valgt en hovedkategori i en dropdown, hentes de tilhørende underkategorier ud i en anden dropdown, og det fungerer fint.

Det er knyttet til et bibliotekssystem hvor hver bog får et bognummer med følgende struktur:

Ex: 2-3036

2-tallet kommer fra valg af hovedkategorien.
Bindestregen indsættes som fast del.
3-tallet efter bindestregen kommer fra valg af underkategorien.

De sidste 3 cifre er fortløbende, men skal pt. indtastes manuelt og det er her jeg gerne vil have, at scriptet automatisk finder det sidst oprettede tal og ligger én til og printer det i mit input felt.

Jeg har pt. følgende kode:

AJAX-scriptet
<script type="text/javascript">
    function GetXmlHttpObject()    {
        if (window.XMLHttpRequest)  {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          return new XMLHttpRequest();
          }
        if (window.ActiveXObject)  {
        // code for IE6, IE5
              return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }

    function GetAjaxData(Outputdiv){
        var url = "include/request.php";
        var Val = document.create.parent.options[document.create.parent.selectedIndex].value;
        var params = "pid=" + Val;
        http = GetXmlHttpObject();
        http.open("GET", url+"?"+params, true); 
        http.onreadystatechange = function () {
            if(http.readyState == 4 && http.status == 200 ){            
                document.getElementById(Outputdiv).innerHTML = http.responseText;    
            }
        }
        http.send(null);               
    }       
</script>

med tilhørende form-felter:


Hovedkategori
<div id="box1">
                    <?php
                      echo '<select size="1" id="parent" name="parent" onchange ="GetAjaxData(\'box2\')">
                              <option selected="selected" value="">Vælg her</option>';
                      $sql = "SELECT * FROM parents order by pid asc";
                      $query = mysqli_query($db,$sql) or die (mysqli_error($db));
                      while ($res = mysqli_fetch_array($query)){     
                        $tmp = $res['pname'];     
                        $id = $res['pid'];   
                        echo "<option value = \"$id\">$tmp</option>";
                      }
                      echo "</select>";
                    ?>
                </div>


Underkategori
<div id="box2">
                    <select>
                        <option> </option>
                    </select>
                </div>


3 sidste tal
<div id="box3"><input type="text" name="endnum" class="" /></div>


Derudover er der følgende kode der henter underkategorierne når hovedkategorien er valgt:
<?php
    require_once("config.php");
    $pid = $_GET['pid'];   
    print "<select size='1' id='kategori' name='kategori' >
            <option selected='selected' value=''>Vælg her</option>";
    $sql = "SELECT * FROM bogkategorier where kparent=$pid";
    $query = mysqli_query($db,$sql) or die (mysqli_error($db));
    while ($res = mysqli_fetch_array($query)){
        if(strlen($res['ktitel']) > 50){     
            $tmp = substr($res['ktitel'],0,50)."...";
        }else{
            $tmp = $res['ktitel'];
        };
        $id = substr($res['knum'],0,1);   
        print "<option value = \"$id\">$tmp</option>";
    }
    print "</select>";
   
?>

Ovenstående script ønskes udvidet, så feltet til de sidste 3 tal bliver udregnet og printet autonatisk.

Håber der er nogen der kan hjælpe.
Avatar billede olsensweb.dk Ekspert
06. oktober 2010 - 21:13 #1
mit umildbare bud vil værer at sætte en onchange event på selectboxen i div2, og lade denne lave ennu et ajax kald,
da næste bognummer er afh af det valgte i div1 og div2, og nummer er fortløbende inde for hver gruppe.

jeg vil også ændre

echo '<select size="1" id="parent" name="parent" onchange ="GetAjaxData(\'box2\')">

til

echo '<select size="1" id="parent" name="parent" onchange ="GetAjaxData(this.value, \'box2\')">,

da jeg syntes det er pænere,
samt ændre i din GetAjaxData(), så den tager en parameter merer med over til request.php,
der fortæller request filen om det er en hoved gruppe / undergruppe der kalder den, alternativt er selvføgeligt at lave en request fil merer, indvidre tilføjes et kald til GetAjaxData1, da indholdet i box3 skal påvirkes af ændringer i box1


<script type="text/javascript">
//<![CDATA[

    function GetXmlHttpObject()    {
        if (window.XMLHttpRequest)  {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          return new XMLHttpRequest();
          }
        if (window.ActiveXObject)  {
        // code for IE6, IE5
              return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }

    function GetAjaxData(Val, OutputId){
        var url = "request.php";       
        var params = "id=" + Val+"&type=hoved";

        http = GetXmlHttpObject();
        http.open("GET", url+"?"+params, true); 
        http.onreadystatechange = function () {
            if(http.readyState == 4 && http.status == 200 ){            
                document.getElementById(OutputId).innerHTML = http.responseText;    
                GetAjaxData1(0, 'box3');
            }
        }
        http.send(null);       
    }       

    function GetAjaxData1(Val, OutputId){
        var url = "request.php";       
        var hovedid = document.create.parent.options[document.create.parent.selectedIndex].value;
        var params = "id=" + Val+"&hovedid=" + hovedid + "&type=under";

        http = GetXmlHttpObject();
        http.open("GET", url+"?"+params, true); 
        http.onreadystatechange = function () {
            if(http.readyState == 4 && http.status == 200 ){            
                document.getElementById(OutputId).innerHTML = http.responseText;    
            }
        }
        http.send(null);       
    }           
//]]>
</script>
<form name="create" action="#">
<span id="box1">
<?php
  print '<select size="1" id="parent" name="parent" onchange ="GetAjaxData(this.value, \'box2\')">';
  print utf8_encode('<option selected="selected" value="">Vælg her</option>');
  $sql = "SELECT * FROM tbl_hovedemne";
  $rs = mysql_query($sql, $conn);
  while ($row = mysql_fetch_assoc($rs)){     
      $tmp = $row['hovedemne'];     
    $id = $row['ID'];   
      print "<option value = \"$id\">$tmp</option>";
  }
  print "</select>";
?>
</span>
<span id="box2">
<!-- place holder ajax data kommer her -->
<select>
<option>&nbsp;</option>
</select>
</span>

<p>&nbsp;</p>
næste ledige bognummer i gruppen
<div id="box3">
<input type="text" name="endnum" class="" />
</div>
</form>


og request filen ser sådan ud


    require_once("db_conn.php");
    $id = $_GET['id'];   
    $type = $_GET['type'];

    if($type == "hoved"){
        print '<select size="1" id="emne" name="emne" onchange ="GetAjaxData1(this.value, \'box3\')">';
        print utf8_encode('<option selected="selected" value="">Vælg her</option>');
        $sql = "SELECT * FROM tbl_emne where hovedemneid=$id";
        $rs = mysql_query($sql, $conn);
        while ($row = mysql_fetch_assoc($rs)){     
            $tmp = $row['emne'];     
            $id = $row['ID'];   
            print "<option value = \"$id\">$tmp</option>";
        }
        print "</select>";   
    }
    else{ // $type == "under"
        $hovedid = $_GET['hovedid'];   
        $starttxt = $hovedid."-".$id;
        $sql = "select MAX(bognummer) as sidste_bog_i_grp from tbl_bog where bognummer LIKE '".$starttxt."%'";
        $rs = mysql_query($sql, $conn);
        if($rs) {
            $row = mysql_fetch_assoc($rs);           
            // sidste_bog_i_grp retunerer 1-2001, og de 3 sidste karakterer udtrækkes med substr(str, -3)
            $last = substr($row['sidste_bog_i_grp'],-3);               
            $next= sprintf("%s%03d", $starttxt, $last+1);             
            echo '<input type="text" readonly="readonly" id="endnum" name="endnum" class="" value ="'.$next.'" />';
        }
    }


demo http://olsensweb.dk/test/experten/spm/920563
source code http://olsensweb.dk/test/experten/spm/920563/920563.zip

jeg sidder lige og skrive på denne guide, til eget brug
basen er lavet til http://olsensweb.dk/guides/ajax/eks2/
Avatar billede webbe Nybegynder
07. oktober 2010 - 08:08 #2
Tak for din kommentar - men jeg kan simpelthen ikke få det til at fungere med din løsning.

Jeg kan stadig godt trækker hovedemnerne ud, men når jeg så har valgt et hovedemne, så trækker den ikke underemnerne ud, selv om jeg har rettet til i de select statements der er...
Avatar billede webbe Nybegynder
07. oktober 2010 - 08:35 #3
Ups - my bad....havde lige glemt at rette en sti.

Nu vælger den godt nok de tilhørende undekategorier, men den regner ikke det sidste nummer rigtigt ud...

Når jeg vælger hovedkategorien så printer den eksempelvis 1-0001 i feltet til de sidste 3 tal, og dette bliver stående selv om jeg vælger underkategorien også.

Jeg har nu følgende i min request.php

require_once("config.php");
    $id = $_GET['id']; 
    $type = $_GET['type'];

    if($type == "hoved"){
        print "<select size='1' id='emne' name='emne' onChange='GetAjaxData1(this.value, \'box3\')' >
            <option selected='selected' value=''>V&aelig;lg her</option>";
        $sql = "SELECT * FROM bogkategorier where kparent=$id";
        $query = mysqli_query($db,$sql) or die (mysqli_error($db));
        while ($res = mysqli_fetch_array($query)){
            if(strlen($res['ktitel']) > 50){     
                $tmp = substr($res['ktitel'],0,50)."...";
            }else{
                $tmp = $res['ktitel'];
            };
            $id = substr($res['knum'],0,1);   
            print "<option value = \"$id\">$tmp</option>";
        }
        print "</select>"; 
    }else{ // $type == "under"
        $hovedid = $_GET['hovedid']; 
        $starttxt = $hovedid."-".$id;
        $sql = "select MAX(bnummer) as sidste_bog_i_grp from books where bnummer LIKE '".$starttxt."%'";
        $rs = mysqli_query($db,$sql);
        if($rs) {
            $row = mysqli_fetch_array($rs);         
            // sidste_bog_i_grp retunerer 1-2001, og de 3 sidste karakterer udtrækkes med substr(str, -3)
            $last = substr($row['sidste_bog_i_grp'],-3);             
            $next= sprintf("%s%03d", $starttxt, $last+1);           
            echo '<input type="text" readonly="readonly" id="endnum" name="endnum" class="" value ="'.$next.'" />';
      }
    }
Avatar billede webbe Nybegynder
07. oktober 2010 - 08:41 #4
jeg kan se at problemet består i at variablen $id ikke får en værdi, så variablen $starttxt kun får en værdi fra variablen $hovedid mens variablen $id kun returnerer tallet 0.
Avatar billede olsensweb.dk Ekspert
07. oktober 2010 - 12:46 #5
kan du ikke lave et sql dump af følgende tabeller
* parents
* bogkategorier
* books
bare 3-4 poster i hver tabel, så det kan afprøves, og vi arbejder på sammen base.

nb: jeg har ikke anvendt mysqli før, så det er også en god anledning til at prøve det

# 4
>jeg kan se at problemet består i at variablen $id ikke får en værdi,
>så variablen $starttxt kun får en værdi fra variablen $hovedid mens
>variablen $id kun returnerer tallet 0.

har du lavet ændringer i GetAjaxData1(Val, OutputId){, det er jo den det skulle overføre værdien,
gad vide om der bliver sat den rigtige værdi i request under 'if($type == "hoved")'
    $id = substr($res['knum'],0,1); 
    print "<option value = \"$id\">$tmp</option>";
Avatar billede webbe Nybegynder
07. oktober 2010 - 12:57 #6
Jeg har ikke lavet ændringer i AJAX-scriptet.

Du kan hente sql-dumpet her: http://bibliotek.medieskolerne.dk/biblio.zip
Avatar billede olsensweb.dk Ekspert
07. oktober 2010 - 14:37 #7
i request.php  if($type == "hoved"){
       
print "<select size='1' id='emne' name='emne' onChange='GetAjaxData1(this.value, \'box3\')' >

bliver fortolket som dette    
<select )="" box3\="" onchange="GetAjaxData1(this.value, \" name="emne" id="emne" size="1">


rettet til dete       
print '<select size="1" id="emne" name="emne" onchange="GetAjaxData1(this.value, \'box3\')" >';


}else{
$tmp = $res['ktitel'];
}  // ; fjernet


source http://olsensweb.dk/test/experten/spm/920563/ver2/ver2.zip
Avatar billede webbe Nybegynder
07. oktober 2010 - 14:52 #8
Du er en knag - nu virker det fuldstændigt efter hensigten.

Opret et svar og du får pointene med det samme.
Avatar billede olsensweb.dk Ekspert
07. oktober 2010 - 15:15 #9
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester