Willkommen in der Webstatt Zum Webstatt Blog und Stories
web4 am 05.07.07 16:45

hallo zusammen

ich bin immer noch rege rumtüfteln.. js macht eig. noch spass:) viele probleme kann man mit simplen workarounds umgehen.

auf jeden fall habe ich für folgendes Problem, noch kein Workaround gefunden.

function noSearch() {
document.getElementById("starter").innerHTML = '<div class="suchemeldung">Bitte Suchkriterien eingeben...</div>';
// datensätze holen
}


Ich habe eine Suchfunktion. Ich möchte, dass wenn die Suchfunktion (noch) nicht genutzt wurde, alle Datensätze angezeigt werden.
mittels document.getElementById("starter").innerHTML = '<div class="suchemeldung">Bitte Suchkriterien eingeben...</div>'; kann ich einen Satz anzeigen, jedoch möchte ich, neben diesem Satz, auch alle Datensätze anzeigen.

Jetzt die Frage. Wie kann man das tun? kann man mittels innerHTML danach irgendwie dynamischen Inhalt erzeugen?

Bin für jeden Tipp dankbar.
Gruss
web4

netcup.de Warum gibt es hier Werbung?
Kevz am 05.07.07 18:31

Btw., wieso lädst Du nicht die Datensätze sofort beim Aufrufen der SuFu? Sprich, beim Benutzen der SuFu anhand von JavaScript eine Funktion aufrufen und Datensätze ausgeben lassen. (AJAX mäßig natürlich) - Sorry falls ich dich falsch verstanden haben sollte.

web4 am 05.07.07 20:03

hi!
danke für deine antwort!:)

das habe ich versucht. Jedoch schaffe ich es einfach nicht, das JS so zu "konfigurieren" / programmieren, dass es onload schon datensätze lädt.

verstehst du was ich meine? irgendwie finde habe ich mich undeutlich ausgedrückt.

Falls es hilft der JS Code.
function activateSearch() {
if ($('searchform')) {
$('searchform').onsubmit = function() { doSearch();return false; };
anim = new fx.Height('search-results', {duration: 400});
anim.hide();
new Form.Element.Observer('s', 1, doSearch);
new Form.Element.Observer('nummer', 1, doSearch);
new Form.Element.Observer('genre', 1, doSearch);
is_searching = false;
aktiv = "1";
}
}


function doSearch() {
// Se la ricerca è già in corso, non si fa nulla
if (is_searching) return false;
s = $F('s');
nummer = $F('nummer');
genre = $F('genre');
anim.hide();
// Se il campo di ricerca è vuoto..
//if (s == '') return false;
is_searching = true;
Element.show($('wait'));
// Setup the parameters and make the ajax call
pars = Form.serialize('searchform');
var myAjax = new Ajax.Request(
'livesearch.php',
{
method: 'get',
parameters: pars,
onComplete:doSearchResponse
}
);
}

function noSearch() {
document.getElementById("starter").innerHTML = '<div class="suchemeldung">Bitte Suchkriterien eingeben...</div>';
// datensätze holen
}


function doSearchResponse(response) {
$('search-results').innerHTML = response.responseText;
anim.toggle();
Element.hide($('wait'));
is_searching = false;

//starter div verschwinden lassen
document.getElementById("starter").innerHTML = '';
document.getElementById("starter").style.height = "0px";
document.getElementById("starter").style.fontSize = "0px";
}

Event.observe(window, 'load', activateSearch, false);


Also es gibt 2 Lösungsversuche:
- erreichen, dass schon onload datensätze geladen werden
- per inner.HTML datensätze onload einmalig laden

Falls jemand zu den beiden Lösungsvarianten ideen hätte, wäre ich dankbar:)

nuit nuit am 05.07.07 20:18

was für eine lib verwendest du? prototype? oder was ist das?
vielleicht gibsch da nämlich schon ein paar nette funktionen ;)

nur mal so nebenbei

web4 am 05.07.07 20:24

prototype und moo.fx... was gedenkst Du?:)

Kevz am 05.07.07 22:58

Mhh. . . eine fertige OOP Klasse zu nehmen (PHP) wäre glaubig zu aufwendig für das kleine Script. Aber ansonsten eig. Empfehlenswert. . . Aber hast du es mal mit "window.onload = deineFunction( paramFirst, ParamSecond, . . .);" versucht?

web4 am 06.07.07 00:09

von lauter bäumen den wald nicht mehr sehen:)

ich habe jetzt einfach im betreffenden div den php teil includet. Sobald die Suche getätigt wird, lasse ich das div durch:


document.getElementById("starter").innerHTML = '';
document.getElementById("starter").style.height = "0px";
document.getElementById("starter").style.fontSize = "0px";


verschwinden. Diese Lösung hätte ich schon früher sehen müssen... liegt eigentlich auf der hand.

wahrscheinlich geht es auch mit window.onload... könnte ich eig. noch ausprobieren!

danke!
gruss

bastey bastey am 06.07.07 09:08

Kann dem DIV auch eine ID zukommen lassen und so verstecken:
<div id="moep">Text.. Toll wa!</div>

Javascript:
function hide_id (id) {
var theidfield = document.getElementById(id);
theidfield.style.display = 'none';
}

web4 am 06.07.07 12:09

stimmt! das ist die gleiche methode, wie

document.getElementById("starter").innerHTML = '';
document.getElementById("starter").style.height = "0px";
document.getElementById("starter").style.fontSize = "0px";


jedoch viel einfacher / schöner:)

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt