<ul> ist nicht gleich <ul>

crunch

Mitglied
[gelöst] <ul> ist nicht gleich <ul> [Danke Quaese!]

[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:
	<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/ajax-mysql-database.php)

Code:
//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:
<?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:
(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:
	<form action="#">
	<fieldset>
		<input type="text" name="search" value="" id="id_search_list" />
	</fieldset>
	</form>

Code:
	<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:
		<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?
 
Zuletzt bearbeitet:
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
 
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
 
Quaese****** Großartig. Natürlich.. oh man, hätte ich auch drauf kommen können:

Code:
	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!
 
Zurück