tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
286
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 27.12.10 17:14 #1
    crunch crunch ist offline Mitglied Silber
    Registriert seit
    May 2002
    Ort
    Paderborn (NRW)
    Beiträge
    74
    [GELÖST]

    Hallo Jungs,

    ich bin mit folgendem Problem konfrontiert.

    Ich habe eine Liste <ul></ul>. Dieser Liste kann man "on the fly" Einträge hinzufügen. Dazu benutze ich folgendes Formular:

    HTML-Code:
    	<form name='myForm'>
	<ul>	
		<li>Name: <input type='text' id='name' /></li>
		<li>Url: <input type='text' id='url' /> </li>
		<li>LinkDesc: <input type='text' id='linkdesc' /></li>
		<li>Catchwords: <input type='text' id='cw' /></li>
		<li><input type='button' onclick='ajaxFunction()' value='+' /></li>
	</ul>
	</form>
    Das ganze funktioniert prima mit folgendem Java Script (von tizag.com: http://www.tizag.com/ajaxTutorial/aj...l-database.php)

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

    //Browser Support Code
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Shit! Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var name = document.getElementById('name').value; 
    var url = document.getElementById('url').value;
    var linkdesc = document.getElementById('linkdesc').value;
    var catchwords = document.getElementById('cw').value;
    var userID = 1;
    var queryString = "?name=" + name + "&url=" + url + "&linkdesc=" + linkdesc + "&cw=" + catchwords + "&userID" + userID;
    ajaxRequest.open("GET", "links-ajax-sql.php" + queryString, true);
    ajaxRequest.send(null); 
}

    und diesem PHP-SQL-Code (die Klasse link hab ich mal weggelassen):

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

     
<?php
 
require("prepend.php");
 
$linkname = $_GET['name'];
$linkurl = $_GET['url'];
$linkdesc = $_GET['linkdesc'];
$cw = $_GET['cw'];
$userID = '1';
 
$myNewLink = new link;
$newlinks = $myNewLink->insertLink($linkname, $linkurl, $linkdesc, $cw, $userID);
 
?>
 
<ul id="list_example">
 
<?php 
    $myLinks = new link;
    $myLinkIDs = $myLinks->getLinks($userID);
    for ($i=0; $i<sizeof($myLinkIDs); $i++ ) {
                
                $links = $myLinks->getLinkData($myLinkIDs[$i]);
        
    ?>
 
        <li><ul>
            <li><a href="<?php echo $myLinks->linkurl ?>" class="link"><?php echo $myLinks->linkname ?></a></li>
            <li><?php echo $myLinks->linkdesc ?></li>
            <li><?php echo $myLinks->cw ?></li>
        </ul></li>
    <?php   
    
    }
 
?>
 
</ul>

    So weit so gut. Nun würde ich das ganze gerne mit der quicksearch.js von riklomas verbinden (https://github.com/riklomas/quicksearch)

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

    (function($, window, document, undefined) {
    $.fn.quicksearch = function (target, opt) {
        
        var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend({ 
            delay: 100,
            selector: null,
            stripeRows: null,
            loader: null,
            noResults: '',
            bind: 'keyup',
            onBefore: function () { 
                return;
            },
            onAfter: function () { 
                return;
            },
            show: function () {
                this.style.display = "";
            },
            hide: function () {
                this.style.display = "none";
            },
            prepareQuery: function (val) {
                return val.toLowerCase().split(' ');
            },
            testQuery: function (query, txt, _row) {
                for (var i = 0; i < query.length; i += 1) {
                    if (txt.indexOf(query[i]) === -1) {
                        return false;
                    }
                }
                return true;
            }
        }, opt);
        
        this.go = function () {
            
            var i = 0, 
            noresults = true, 
            query = options.prepareQuery(val),
            val_empty = (val.replace(' ', '').length === 0);
            
            for (var i = 0, len = rowcache.length; i < len; i++) {
                if (val_empty || options.testQuery(query, cache[i], rowcache[i])) {
                    options.show.apply(rowcache[i]);
                    noresults = false;
                } else {
                    options.hide.apply(rowcache[i]);
                }
            }
            
            if (noresults) {
                this.results(false);
            } else {
                this.results(true);
                this.stripe();
            }
            
            this.loader(false);
            options.onAfter();
            
            return this;
        };
        
        this.stripe = function () {
            
            if (typeof options.stripeRows === "object" && options.stripeRows !== null)
            {
                var joined = options.stripeRows.join(' ');
                var stripeRows_length = options.stripeRows.length;
                
                jq_results.not(':hidden').each(function (i) {
                    $(this).removeClass(joined).addClass(options.stripeRows[i % stripeRows_length]);
                });
            }
            
            return this;
        };
        
        this.strip_html = function (input) {
            var output = input.replace(new RegExp('<[^<]+\>', 'g'), "");
            output = $.trim(output.toLowerCase());
            return output;
        };
        
        this.results = function (bool) {
            if (typeof options.noResults === "string" && options.noResults !== "") {
                if (bool) {
                    $(options.noResults).hide();
                } else {
                    $(options.noResults).show();
                }
            }
            return this;
        };
        
        this.loader = function (bool) {
            if (typeof options.loader === "string" && options.loader !== "") {
                 (bool) ? $(options.loader).show() : $(options.loader).hide();
            }
            return this;
        };
        
        this.cache = function () {
            
            jq_results = $(target);
            
            if (typeof options.noResults === "string" && options.noResults !== "") {
                jq_results = jq_results.not(options.noResults);
            }
            
            var t = (typeof options.selector === "string") ? jq_results.find(options.selector) : $(target).not(options.noResults);
            cache = t.map(function () {
                return e.strip_html(this.innerHTML);
            });
            
            rowcache = jq_results.map(function () {
                return this;
            });
            
            return this.go();
        };
        
        this.trigger = function () {
            this.loader(true);
            options.onBefore();
            
            window.clearTimeout(timeout);
            timeout = window.setTimeout(function () {
                e.go();
            }, options.delay);
            
            return this;
        };
        
        this.cache();
        this.results(true);
        this.stripe();
        this.loader(false);
        
        return this.each(function () {
            $(this).bind(options.bind, function () {
                val = $(this).val();
                e.trigger();
            });
        });
        
    };
 
}(jQuery, this, document));

    für sich (sprich: mit der statischen Länderliste (Afghanisten, ...) funktioniert quicksearch.js wunderbar:

    HTML-Code:
    	<form action="#">
	<fieldset>
		<input type="text" name="search" value="" id="id_search_list" />
	</fieldset>
	</form>
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

        <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.quicksearch.js"></script>
            <script type="text/javascript">
            $(function () {
                
                var qs = $('input#id_search_list').quicksearch('ul#list_example li');
                
                $.ajax({
                    'url': 'example.json',
                    'type': 'GET',
                    'dataType': 'json',
                    'success': function (data) {
                        for (i in data['list_items']) {
                            $('ul#list_example').append('<li>' + data['list_items'][i] + '</li>');
                        }
                        qs.cache();
                    }
                });
                
            });
        </script>
 
</head>

    HTML-Code:
    		<ul id='list_example'>
			<li>Afghanistan</li> 
			<li>Albania</li> 
			<li>Algeria</li> 
			<li>American Samoa</li> 
			<li>Andorra</li> 
			<li>Angola</li> 
			<li>Anguilla</li> 
			<li>Antarctica</li> 
			<li>Antigua and Barbuda</li> 
			<li>Argentina</li> 
			<li>Armenia</li> 
			<li>Aruba</li> 
			<li>Australia</li> 
			<li>Austria</li> 
			<li>Azerbaijan</li> 
		</ul>
    Allerdings funktioniert aus irgendeinem Grund quicksearch.js nicht mit der von mir generieten Liste (oben).

    Irgendwelche Ideen?
    Geändert von crunch (28.12.10 um 17:09 Uhr) Grund: gelöst
     
    luv4dagame
    Zitieren Zitieren
  2. 28.12.10 14:59 #2
    crunch crunch ist offline Mitglied Silber
    Registriert seit
    May 2002
    Ort
    Paderborn (NRW)
    Beiträge
    74
    hab ich mich so verwirrend ausgedrückt? Braucht ihr mehr Infos?

    Also: Nochmal in kurz.

    Wieso funktioniert der quicksearch.js nur mit einer statischen Liste und nicht mit der Liste, die ich selber mit einem JavaScript generiere.

    VG,
    Dominik
     
    luv4dagame
    Zitieren Zitieren
  3. 28.12.10 15:12 #3
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    ohne zu testen und einfach ins Blaue hinein:
    Hast du schon versucht, die quicksearch-Funktionalität in der onreadystatechange-Funktion zu initialisieren? Denn erst hier stehen ja die notwendigen Werte/Einträge für die Liste zur Verfügung.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  4. 28.12.10 17:05 #4
    crunch crunch ist offline Mitglied Silber
    Registriert seit
    May 2002
    Ort
    Paderborn (NRW)
    Beiträge
    74
    Quaese****** Großartig. Natürlich.. oh man, hätte ich auch drauf kommen können:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

        ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
 
        // quicksearch
 
        var qs = $('input#id_search_list').quicksearch('ul#list_example li');
                
                $.ajax({
                    'url': 'example.json',
                    'type': 'GET',
                    'dataType': 'json',
                    'success': function (data) {
                        for (i in data['list_items']) {
                            $('ul#list_example').append('<li>' + data['list_items'][i] + '</li>');
                        }
                        qs.cache();
                    }
                });

    so funktioniert es wunderbar!
     
    luv4dagame
    Zitieren Zitieren
« Mehrere DIVs nacheinander ein/ausblenden (fadeIn/fadeOut) | Math.random »

Ähnliche Themen

  1. 1 ist nicht gleich 1?
    Von MClay im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 13.06.07, 17:04
  2. größer gleich oder kleiner gleich
    Von saila im Forum Relationale Datenbanksysteme
    Antworten: 0
    Letzter Beitrag: 10.09.06, 23:35
  3. Gleich und doch nicht gleich
    Von miheberle im Forum PHP
    Antworten: 29
    Letzter Beitrag: 14.07.06, 12:41
  4. MD5-Berechnung ist NICHT gleich?
    Von Scherbe im Forum .NET Archiv
    Antworten: 2
    Letzter Beitrag: 30.08.04, 17:15
  5. wieso nicht gleich Foxserv?
    Von Shiivva im Forum Hosting & Webserver
    Antworten: 14
    Letzter Beitrag: 04.11.01, 15:24