Søg
Avatar billede heyn Nybegynder
17. december 2011 - 23:38 Der er 10 kommentarer og
1 løsning

Hvordan tilføjer man nye data til en tabel med jquery?

Hej Eksperter

Jeg er helt ny i JQuery.

Jeg har en søgeside, men vil gerne lave en quicksearch hvor man med få søgekriterier hurtigt kan få en række resultater løbende efterhånden som data indføres, uden at siden skal genindlæses.

Gundlæggende skal siden være noget i stil med:

Indfør et søgenavn:<input type="text" id="name"><br>
<table id="result">
  <tr><td>Navn</td><td>email</td></tr>
</table>

Når jeg i søgefeltet indfører bogstavet "c" skal en evnet-handler forespørge mysql-databasen om resultater som så skal indføres i tabellen.
Resultaterne kunne f.eks. være
- Charlotte
- Christian
- Connie
- Charlie

Hvis jeg yderligere indfører et "o" i søgefeltet således at der nu står "co" skal event-handleren igen forespørge og kun Connie bliver tilbage.

Men altså uden at siden nyindlæses hver gang. Kun søgedata hentes. Altså lidt ligesom når jeg indfører bogstaver i søgefeltet i google.dk.

At lave selve søgefunktionen i php er intet problem.

Kan nogle hjælpe mig med det?

MVH Christian
Avatar billede heyn Nybegynder
18. december 2011 - 00:46 #1
Jeg fandt selv svaret med hvordan jeg indsætter/fjerner rækker i tabellen.

// Indsætter en række i tabellen
$('#result').append('<tr class="row"><td>Charlotte Dejlig</td><td>charlotte@dejligs.mail</td></tr>');

// Fjerner alle rækker i tabellen så et nyt sæt kan indsættes.
$('.row').remove();

<table id="result">
  <tr><td>Navn</td><td>Mail</td></tr>
  <tr class="row"><td>Et navn</td><td>et@navns.mail</td></tr>
</table>

Men hvordan forespørger jeg på data, og henter den streng som skal stå i stedet for '<tr class="row"><td>Charlotte Dejlig</td><td>charlotte@dejligs.mail</td></tr>' ?
Avatar billede olsensweb.dk Ekspert
18. december 2011 - 10:38 #2
>uden at siden skal genindlæses
kig på AJAX

>Men hvordan forespørger jeg på data
det du søger er ajax autocomplete/autosuggest

google "php autocomplete" http://www.google.dk/search?q=php+autocomplete
1 link http://fromvega.com/wordpress/2007/05/05/auto-complete-field-with-jquery-json-php/
2 link http://www.nodstrum.com/2007/09/19/autocompleter/ ser rigtig interessant ud

google "php autosuggest from database" http://www.google.dk/search?q=php+autosuggest+from+database
link 4 http://www.javascript-examples.com/autocomplete-demo/

google "php ajax  autocomplete" http://www.google.dk/search?q=php+ajax+autocomplete
google "php ajax autosuggest " http://www.google.dk/search?q=php+ajax+autosuggest
Avatar billede olebole Juniormester
18. december 2011 - 16:57 #3
<ole>

"Men hvordan forespørger jeg på data, og henter den streng som skal stå i stedet for '<tr class="row"><td>Charlotte Dejlig</td><td>charlotte@dejligs.mail</td></tr>' ?" >> Det er præcis det, man ikke gør ved Ajax  =)

En af Ajax's store styrker er, at der ikke hentes HTML formaterede data fra serveren - men udelukkende de rå data. Det er alt for ineffektivt at lade serveren HTML formatere data ... det lader man klienten om.

/mvh
</bole>
Avatar billede heyn Nybegynder
19. december 2011 - 12:33 #4
Som nævnt er jeg virkelig ny med JQuery.

Jeg lavede en testside med følgende kode:
<script type="text/javascript">
  $(document).ready(function() {
      $('.searchcriteria').keypress(function() {
        $('.row').remove();
        searchdata = $("#kriteriumform").serialize();
        $.post("inc/php/quicksearch_result.php", searchdata, function(data) {
            alert("Data Loaded: " + data);
        });
      });
  });
</script>
...
...
<form id="kriteriumform">
<table padding: 0px; border: 0px;">
  <tr><td>Navn</td><td><input class="searchcriteria" type="text" class="long" name="cri_navn" id="cri_navn" /></td></tr>
  <tr><td>Adresse</td><td><input class="searchcriteria" type="text" name="cri_adresse" id="cri_adresse" class="long" /></td></tr>
</table>
</form>

og php-scriptet er:
$navn = $_POST['cri_navn'];
echo $navn;

Når jeg skriver 'c' i feltet navn kommer der en alert med 'Data Loaded: '.
Når jeg yderligere tilføjer et h således at der i input-feltet cri_navn står 'ch' så får jeg en alert med 'Data Loaded: c'.
Sletter jeg at atter 'h' får jeg en alert med 'Data Loaded: ch'.

Det lader til at
searchdata = $("#kriteriumform").serialize();
ikke medtager de nyest indførte data.

Hvad kan det skyldes?
Avatar billede heyn Nybegynder
21. december 2011 - 03:38 #5
Nå - Fandt atter selv løsningen - Event-handleren keypress() skulle skiftes ud med keyup().

ronols og olebole smider i ikke et svar.

Olebole:
Det lyder spændende at kunne formatere tabellinien på browseren og kun udnytte et array af data fra serveren. Kunne du give tiny eksempel på hvordan det gøres?

MVH Christian
Avatar billede olsensweb.dk Ekspert
25. december 2011 - 14:27 #6
du kan da godt få et svar

Olebole:
Det lyder spændende at kunne formatere tabellinien på browseren og kun udnytte et array af data fra serveren.
nu hedder jeg godt nok ikke olebole, men du kan da godt får et forslag, som jeg lavede ifm. http://www.eksperten.dk/spm/951295

index1.php
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">    
    function GetAjaxData(Val){
        var url = "request.php";        
        var params = "id=" + Val+"&rand="+Math.random();
        var http = new XMLHttpRequest();
        http.open("GET", url+"?"+params, true);  
        http.send(null);
        http.onreadystatechange = function () {
            if(http.readyState == 4 && http.status == 200 ){ 
                var aTmp = JSON.parse(http.responseText);
                var lng = aTmp.length;                    
                if(lng>0){                    
                    var elmZipList = document.getElementById("autoCompleteList");                    
                    EmptyElm(elmZipList);
                    for (var i=0,j=lng; i<j; i++) {
                        var newelm=document.createElement("a");                        
                        var newbr=document.createElement("br");                        
                        var txt = aTmp[i]['Postnr'] +" "+aTmp[i]['Bynavn'];                        
                        var newtext=document.createTextNode(txt);                        
                        newelm.setAttribute("href", aTmp[i]['Postnr']+".html");                        
                        newelm.appendChild(newtext) //append text to new element                        
                        newelm.appendChild(newbr) //append text to new element                        
                        elmZipList.appendChild(newelm); //append new element to another span                        
                    }                        
                }
            }
        }            
    }    
    function EmptyElm(elm) {
        while (elm.firstChild) elm.removeChild(elm.firstChild);
    }    
</script>
<form name="form1" action="#">
    <input onkeyup="GetAjaxData(this.value)" type="text">
    <br>
    <span id="autoCompleteList">        
    </span>
</form>
</body>
</html>


legede lige lidt med http://www.redips.net/javascript/adding-table-rows-and-columns/
index2.php som tabel
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
    // create DIV element and append to the table cell
    function createCell(cell, text, style) {
        var div = document.createElement('div'); // create DIV element
        var txt = document.createTextNode(text); // create text node
        div.appendChild(txt);                    // append text node to the DIV
        div.setAttribute('class', style);        // set DIV class attribute
        div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
        cell.appendChild(div);                   // append DIV to the table cell
    }
    // delete table rows with index greater then 0
    function deleteRows(my_table) {
        var tbl = document.getElementById(my_table); // table reference
        var lastRow = tbl.rows.length - 1;             // set the last row index
        var i;
        // delete rows with index greater then 0
        for (i = lastRow; i > 0; i--) {
            tbl.deleteRow(i);
        }
    }
    // http://www.eksperten.dk/spm/951295
    function GetAjaxData(Val){
        var url = "request.php";        
        var params = "id=" + Val+"&rand="+Math.random();
        var http = new XMLHttpRequest();
        http.open("GET", url+"?"+params, true);  
        http.send(null);
        http.onreadystatechange = function () {
            if(http.readyState == 4 && http.status == 200 ){ 
                var aTmp = JSON.parse(http.responseText);
                var lng = aTmp.length;                    
                if(lng>0){                    
                    var tbl = document.getElementById('autoCompleteList'); // table reference                    
                    deleteRows('autoCompleteList');
                    for (var k=0,j=lng; k<j; k++) {                        
                        var row = tbl.insertRow(tbl.rows.length);      // append table row    i;
                        // insert table cells to the new row                        
                        createCell(row.insertCell(0), aTmp[k]['Postnr'], 'row');
                        createCell(row.insertCell(1), aTmp[k]['Bynavn'], 'row');                        
                    }                        
                }
            }
        }            
    }        
</script>
<form name="form1" action="#">
    <input onkeyup="GetAjaxData(this.value)" type="text">
    <br>
    <table id="autoCompleteList">
        <tr>
            <td></td>
        </tr>
    </table>
</form>
</body>
</html>


request.php
<?php
    require_once("db_conn.php"); 
    $id = $_GET['id'];    
    $info=array();
    if(strlen($id) > 1){        
        $sql = "select Postnr, Bynavn from tbl_postnummer where Postnr LIKE '".$id."%' and Land = 1";        
        $rs = mysql_query($sql, $conn);
        
        while($obj = mysql_fetch_object($rs)){
            $info[]=$obj;
        }        
    }
    echo json_encode($info);
?>


db_conn.php
<?php
    $conn = mysql_connect ("localhost", "root", "", true);
    if (! $conn )     die( 'Could not connect: ' . mysql_error ());
    mysql_select_db("test") or die('Could not select database ');
    mysql_set_charset('utf8',$conn);
?>


søgning hos post danmark http://www.postdanmark.dk/da/Sider/Search.aspx?k=postnummerfil&s=dk_da
direkte link http://www.postdanmark.dk/da/documents/lister/postnummerfil_excel.xls
skal det bare laves om til en sql fil.

lidt mere info
https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
http://www.mredkj.com/tutorials/tableaddrow.html
http://www.mredkj.com/tutorials/tablebasics1.html
http://www.redips.net/javascript/adding-table-rows-and-columns/

du kan sikkert gøre js delen lidt kortere med jquery, men jeg gider ikke hive 100k + evt 200k ui ned
men du skal kigge på
http://api.jquery.com/category/ajax/
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.parseJSON/[/b]


demo http://olsensweb.dk/test/experten/spm/953500/index1.php
demo http://olsensweb.dk/test/experten/spm/953500/index2.php
alle filer http://olsensweb.dk/test/experten/spm/953500/json_autocomplete.zip
Avatar billede olsensweb.dk Ekspert
25. december 2011 - 15:44 #7
[/b]
sådan vil den ca se ud med jquery, fylder ca 1,5 k mindre, men tilgengæld kræver den jquery lib på ca 100k, dårligt bytte :(

 <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// http://stackoverflow.com/questions/723112/jquery-fastest-way-to-remove-all-rows-from-a-very-large-table
// http://stackoverflow.com/questions/171027/add-table-row-in-jquery    
    function GetAjaxData(Val){
        var url = "request.php";        
        var params = "id=" + Val+"&rand="+Math.random();        
        $.ajax({
            type: "GET",            
            url: url,            
            data: params,
            dataType: 'json',
            success: function(msg){                
                var lng = msg.length;                
                if(lng>0){
                    $('#autoCompleteList').empty();    
                    for (var k=0,j=lng; k<j; k++) {                                
                        $('#autoCompleteList').append('<tr><td>'+ msg[k].Postnr +'</td> <td>'+ msg[k].Bynavn +'</td></tr>');                        
                    }                        
                }                
            }
        });                
    }        
</script>
<form name="form1" action="#">
    <input onkeyup="GetAjaxData(this.value)" type="text">
    <br>
    <table id="autoCompleteList">
        <tr>
            <td></td>
        </tr>
    </table>
</form>
</body>
</html>
Avatar billede olebole Juniormester
25. december 2011 - 17:40 #8
Undskyld, jeg ikke reagerede på #5. Jeg påbegyndte et indlæg, men det greb om sig og munder i stedet ud i to-tre guides her mellem Jul og Nytår.

@ronols: Et fint eksempel, men jeg har en enkelt lille anke i forhold til IE, ældre end version 9. Historisk har IE været kendt for en elendig garbage collection, hvilket bl.a. har medført manglende koordination mellem oprydning af Javascript og oprydning af nedlagte DOM/COM objekter.

Dette er dog i udstrakt grad blevet rettet, begyndende med SP3/XP i midten af 2007, som rettede en del af IE6's allerstørste katastrofer. I IE7 og IE8 blev en hel det flere garbage collection fejl rettet, og IE9 fungerer endelig uden de store problemer.

En konstruktion som denne vil i IE6, -7 og -8 resultere i en memory leak:


function fooBar() {
    var http = new XMLHttpRequest();
    http.open(METHOD, URL, ASYNC);
    http.onreadystatechange = function () {
        if(http.readyState == 4 && http.status == 200 ){
            ... ... ...
            doSomething(http.responseText);
            ... ... ...
        }
    }
    http.send();
}


Referencen til variablen/objektet http bliver
'fanget' bag event handlerens closure. Naturligvis bør referencen opløses ved funktionens udløb, men det sker ikke i IE før version 9.

Heldigvis peger keyword'et this på XHR-objektet i handlerfunktionens scope, så løsningen er enkel:


    http.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200 ){
            ... ... ...
            doSomething(this.responseText);
            ... ... ...
        }
    }

Avatar billede olsensweb.dk Ekspert
25. december 2011 - 19:57 #9
.

>men det greb om sig og munder i stedet ud i to-tre guides her mellem Jul og Nytår.
bliver interessant at læse, forhåbentligt er en af disse guide's omkring AJAX, som du selv har skrevet tidligere er det svært at finde en ordentlig guide om emnet, da de fleste retunerer html, og har andre fejl ( måske værst af alle http://www.w3schools.com/ajax/default.asp ).
i så fald kunne man vise hvordan man js mæssigt decoder og anvender request retuneret som "simpel (text)" "komma seperaret (text)", "json (array)", "xml (array)" data.
samt evt særheder i diverse browsere IE7+ (ie get url cash, memory leak), FF..

jeg antager en af de andre guides er forsættelsen ef denne Animation af PNG-24 - Del 1 http://www.eksperten.dk/guide/1414
Avatar billede heyn Nybegynder
25. december 2011 - 21:42 #10
Mange tak begge to for jeres flotte julegaver.

Nu kan jeg jo bare nøjes med at returnere den array jeg hentede fra db. Meget praktisk.

olebole smider du ikke også et svar?

MVH Christian
Avatar billede heyn Nybegynder
12. januar 2012 - 11:22 #11
Nå - Olebole vil øjensynligt ikke have point. Det var ærgerligt.
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 1 03/02/202614:19 03/02/202618:42
Å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
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
28/0311:18 DENVER DVB-tMPEG-4 HD TUNER Af ole falsted i Fjernsyn & projektorer
White papers
Flere white papers »