<ul> ist nicht gleich <ul>

crunch · 27. Dezember 2010

[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?

crunch · 28. Dezember 2010

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

Quaese · 28. Dezember 2010

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

crunch · 28. Dezember 2010

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!

<ul> ist nicht gleich <ul>

crunch

Mitglied

crunch

Mitglied

Quaese

Moderator

crunch

Mitglied

Neue Beiträge