JQuery Ajax Suche im Facebook Style

smilla · 08.03.2011, 21:51

Hi,

ich sitze schon den ganzen Tag daran eine Suche zu bauen, die ähnlich wie bei Facebook läuft.

Quasi, man sucht, er zeigt Datensätze an und ganz unten kann man sich dann weitere Datensätze anzeigen lassen, was per Ajax dann nachgeladen wird.

Ich habe es auch geschafft etwas zu bauen, was jedoch nur teilweise funktioniert, aber nicht so wie es soll. Um das Problem besser zu analysieren haben ich das Beispiel so reduziert, dass es überall ausführbar ist.

Wenn jemand Zeit und Lust hat, kann er sich hier mein Beispiel laden. Es ist so ausführbar, also falls es jemand probieren will:

http://www.file-upload.net/download-.../test.zip.html

Ansonsten gehe ich die wichtigsten Schritte mal hier durch

Also. In meiner Index.php habe ich einen submit Button, der meine Suche simulieren soll. Wenn man diesen klickt, lädt er die Seite neu und zeigt diesen Code an:

PHP-Code:

  <div id="resultlist">Wird geladen</div>

   

<script type="text/javascript">

$(function() {

$("#resultlist").load("result.php");

});

  </script>

Im echten Beispiel würde ich hier als GET Parameter noch die Keywords übergeben, aber in dem Beispiel ist es egal. Wenn ich den Button klicke, zeigt er wie gewünscht das Ergebnis meiner Suche an.

Die Problematik ist in der result.php

PHP-Code:

  <?

// get counter (damit ich weiß z.B. erst 10 Treffer, nächste 10 Treffer, ...)

if (!isset($_GET['counter']))

   $counter = 1;

else

   $counter = $_GET['counter'];

 
// Hier wird berechnet welche Treffer ich anzeigen will

$start = (($counter-1)*10)+1;

$stop = $counter*10;

 
// counter wird erhöhnt, damit wenn ich auf weiter klicke er wieder die nächsten 10 treffer anzeigt

$counter++;

 
// Suchergebnisse anzeigen und einen anker setzen, weil er an der stelle bleiben soll und nicht wieder nach oben scrollen soll

echo '<a name="anker_' . $counter . '"></a>';

for ($i = $start; $i <= $stop; $i++)

{

   echo "Treffer $i<br />";    

}

 
// Hier der Link zum Anzeigen der nächsten Treffer. Darum ist ein div. Wenn man den Link angeklickt hat und er die nächsten Treffer anzeigt, soll dieser bereich verschwinden, weil dann unter den nächsten treffern ganz unten ja wieder die nächsten Treffer angefragt werden können. es soll also immer nur ganz unten unter dem letzten suchergebnis die möglichkeit geben, die nächsten 10 Treffer anzuzeigen

echo '<div id="kick_' . $counter . '"><a id="next_' . $counter . '" href="#" >Nächste 10 anzeigen</a></div>';

?>

<script type="text/javascript">

$(function() {

   $('#next_<? echo $counter; ?>').click(function() {

     $('#kick_"<? echo $counter; ?>').css('display', 'none');                                               

     $("<div>").load("result.php?counter=<? echo $counter; ?>", function() {

        $("#resultlist").append($(this).html());    

        document.location.href="#anker_<? echo $counter; ?>";

     });

   });   

});         

</script>

So. Also laufen tut. Ich drücken den Submit Button und er zeigt mir die 10 Treffer an. Perfekt!

Dann klicke ich nächste 10 Anzeige und er zeigt mit darunter die nächsten 10 Treffer an. Perfekt!

Falsch ist nun, dass er mir jetzt 2x den Link "Nächste 10 Treffer" anzeigt. Nämlich unter den ersten Suchergebnis und unter den zweiten. Das unter den ersten Suchergebnis sollte eigentlich verschwinden (ich setze das div ja display = none), tut es aber nicht. Er soll nur das unterste anzeigen.

Wenn ich nun den untersten Link anklicke und weitere Treffe will passiert nix! Wenn ich nun den Link anklicke der eigentlich weg sein sollte, zeigt er noch mal die gleichen Treffer an.

Ich frage mich also, wieso der Nächste Treffer link nach den anklicken nicht verschwindet und wieso der letzte Link nicht funktioniert.

Vielleicht ist auch etwas anderen am Code sehr mies, da freue ich mich auch auf Feedback.

Habe mit JQuery noch nicht so viel Erfahrung, aber vielleicht kann mir ja jemand helfen.

Smilla

nikosch · 08.03.2011, 22:06

Finde ich nicht so elegant gelöst. Du solltest den jQuery nur einmal einbinden, statt ihn mit jedem Laden zu duplizieren. Und dann könntest Du das „nächste 10“-div einfach mit dem nachgeladenen Inhalt austauschen.

smilla · 09.03.2011, 08:38

Moin,

du meinst quasi dass ich die "Nächste Treffer" einfach in einen div unter meinen resultlist div anzeige und dies bei Bedarf anzeige/ausblende?

So würde ich von dort einfach nur den Inhalt der result.php nachladen.

Habe ich dich so korrekt verstanden?

Ich werde das mal versuchen

Klingt auf jeden Fall auch sinnvoll!

smilla · 09.03.2011, 12:13

So, ich bin dann nun etwas fleißig gewesen, bis auf eine Sache läuft es perfekt. Die result.php ist nun slim geworden, da gibt es nichts weiter zu bemängeln

PHP-Code:

  <?

// get counter

$counter = $_GET['counter'];

 
// show 10 entries

$start = (($counter-1)*10)+1;

$stop = $counter*10;

 
$counter++;

 
// Show next seach results

for ($i = $start; $i <= $stop; $i++)

{

   echo "Treffer $i<br />";    

}

?>

In der Index.php ist jetzt nur noch ein Javascript Block drinnen

PHP-Code:

  <?

if (isset($_POST['action']) && $_POST['action'] == 'search')

{

   ?>   

   <div id="resultlist">Wird geladen</div>

   <div id="resultexpand" style="display:none;text-decoration:underline; cursor:pointer;">Nächste 10 Treffer anzeigen</div>

   

   <script type="text/javascript">

   var counter = 1; // Fange mit Seite 1 an

   var limit = 5; // Es gibt max 5 Seiten, die Anzahl der Ergebnisse ist an dieser Stelle bereits bekannt

   

   $(function() {

   $("#resultlist").load("result.php?counter=" + counter++);

   $("#resultexpand").css({ "display": "block" });

   });

   

   $(function() {

   $('#resultexpand').click(function() {

     $("<div>").load("result.php?counter=" + counter++, function() {

        $("#resultlist").append($(this).html());        

        });

      });  

      

      if (counter > limit) {

         // show next treffer

         $("#resultexpand").css({ "display": "none" });

      } 

                  

   });        

   </script>

<?

}

?>

Ich habe das Beispiel so erweitert, dass man nur X mal weitere Daten abfrage kann. Der Wert X ist mir bekannt. Das ganze funktioniert nun einwandfrei, aber meine letzte if Anweisung, die das display auf none setzt wird nicht ausgeführt. Auch wenn ich da testweise ein Alert rein mache, wird dies nicht ausgeführt.

Daher nun meine zwei Fragen:

1. Was muss ich ändern, damit das div nach den Durchläufen ausgeblendet wird.

2. Ist sonst noch etwas schlecht realisiert, was ich ändern sollte?

smilla · 09.03.2011, 21:47

Nach dem ich den If Code weiter oben habe, haut es hin. Frage mich jetzt nur ob es so elegant gelöst ist oder nicht.

nikosch · 09.03.2011, 21:51

Zitat:

du meinst quasi dass ich die "Nächste Treffer" einfach in einen div unter meinen resultlist div anzeige und dies bei Bedarf anzeige/ausblende?

Nein, das meine ich nicht. Bitte noch einmal genau lesen.

halskrause · 16.03.2011, 06:47

Ich würde statt"$("#resultlist").load" "$.ajax" dafür nehmen.
ANmerkungen
- Keine direkte Ausgabe des PHP scripts
- .load läuft mit $_GET Methode (Sprich: unsicherer)
- Bei $.ajax kannst du extra events auslösen, wenn dein PHP Script nur z.B 3 Ergebnisse liefert.

rudygotya · 17.03.2011, 10:14

Zitat:

Ich würde statt"$("#resultlist").load" "$.ajax" dafür nehmen.

Macht nur "Sinn" mit einem anderen Datentyp als "html". Dann aber gleich mit jQuery templates.

Zitat:

load läuft mit $_GET Methode (Sprich: unsicherer)

Sorry, aber das ist Quatsch.

Zitat:

Bei $.ajax kannst du extra events auslösen, wenn dein PHP Script nur z.B 3 Ergebnisse liefert.

$.load(url, function () { $('#switch').trigger('reload');}) => geht da genauso. Ist natürlich nicht besonders hübsch, aber load verwendet man im Regelfall auch nur bei solch einfachen Sachen.

Auf was ich hinaus wollte: Die Fragestellung ist nicht so kompliziert, dass man es sich selbst schwer machen muss. Es ist ja beim initialen Laden der Seite bekannt, wie viele Unterseiten es werden (bis zu 5), von dem her wäre $.load auch meine erste Wahl.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] jquery autocomplete mit ajax	PiXeL1337	JavaScript, Ajax und mehr	4	11.01.2011 12:23
Scriptsuche Suche Community Script, wie facebook etc.	safak_o1	Scriptbörse	2	23.12.2010 18:40
AJAX Suche	pieradnHero	JavaScript, Ajax und mehr	5	17.12.2010 18:06
[Erledigt] Suche versierten Facebook App Programmierer	ePole	Gewerblich	1	15.11.2010 14:16
jQuery (crossdomain) Ajax	halskrause	JavaScript, Ajax und mehr	10	01.09.2010 18:36
[Erledigt] jQuery - Per Ajax geladenes Javascript ausführen?	benAsks	JavaScript, Ajax und mehr	4	16.08.2010 23:39
[Erledigt] Ajax, jQuery - CKEDITOR Fehler bei Instanzierung	jGeee	JavaScript, Ajax und mehr	3	26.03.2010 09:09
Google AJAX Search API: Suche mit Keyword	wolf29	PHP-Fortgeschrittene	1	20.03.2010 10:45
jQuery Ajax und $(this) Problem	halskrause	JavaScript, Ajax und mehr	8	01.03.2010 17:39
Suche jemanden für ein kleines Facebook App	NicoOne	Beitragsarchiv	0	18.09.2009 21:22
jQuery mit AJAX ohne ActiceX im IE?	krush	JavaScript, Ajax und mehr	2	11.08.2009 08:54
Drag & Drop via JQuery & Ajax --> Geht nicht :(	Plague	JavaScript, Ajax und mehr	2	23.10.2008 12:19
Suche mit AJAX	snatch-ic	Datenbanken	4	12.12.2006 09:14

08.03.2011, 21:51
smilla Erfahrener Benutzer Registriert seit: 09.11.2008 Beiträge: 200	JQuery Ajax Suche im Facebook Style Hi, ich sitze schon den ganzen Tag daran eine Suche zu bauen, die ähnlich wie bei Facebook läuft. Quasi, man sucht, er zeigt Datensätze an und ganz unten kann man sich dann weitere Datensätze anzeigen lassen, was per Ajax dann nachgeladen wird. Ich habe es auch geschafft etwas zu bauen, was jedoch nur teilweise funktioniert, aber nicht so wie es soll. Um das Problem besser zu analysieren haben ich das Beispiel so reduziert, dass es überall ausführbar ist. Wenn jemand Zeit und Lust hat, kann er sich hier mein Beispiel laden. Es ist so ausführbar, also falls es jemand probieren will: http://www.file-upload.net/download-.../test.zip.html Ansonsten gehe ich die wichtigsten Schritte mal hier durch Also. In meiner Index.php habe ich einen submit Button, der meine Suche simulieren soll. Wenn man diesen klickt, lädt er die Seite neu und zeigt diesen Code an: PHP-Code: `<div id="resultlist">Wird geladen</div> <script type="text/javascript"> $(function() { $("#resultlist").load("result.php"); }); </script>` Im echten Beispiel würde ich hier als GET Parameter noch die Keywords übergeben, aber in dem Beispiel ist es egal. Wenn ich den Button klicke, zeigt er wie gewünscht das Ergebnis meiner Suche an. Die Problematik ist in der result.php PHP-Code: <? // get counter (damit ich weiß z.B. erst 10 Treffer, nächste 10 Treffer, ...) if (!isset($_GET['counter'])) $counter = 1; else $counter = $_GET['counter']; // Hier wird berechnet welche Treffer ich anzeigen will $start = (($counter-1)10)+1; $stop = $counter10; // counter wird erhöhnt, damit wenn ich auf weiter klicke er wieder die nächsten 10 treffer anzeigt $counter++; // Suchergebnisse anzeigen und einen anker setzen, weil er an der stelle bleiben soll und nicht wieder nach oben scrollen soll echo '<a name="anker_' . $counter . '"></a>'; for ($i = $start; $i <= $stop; $i++) { echo "Treffer $i<br />"; } // Hier der Link zum Anzeigen der nächsten Treffer. Darum ist ein div. Wenn man den Link angeklickt hat und er die nächsten Treffer anzeigt, soll dieser bereich verschwinden, weil dann unter den nächsten treffern ganz unten ja wieder die nächsten Treffer angefragt werden können. es soll also immer nur ganz unten unter dem letzten suchergebnis die möglichkeit geben, die nächsten 10 Treffer anzuzeigen echo '<div id="kick_' . $counter . '"><a id="next_' . $counter . '" href="#" >Nächste 10 anzeigen</a></div>'; ?> <script type="text/javascript"> $(function() { $('#next_<? echo $counter; ?>').click(function() { $('#kick_"<? echo $counter; ?>').css('display', 'none'); $("<div>").load("result.php?counter=<? echo $counter; ?>", function() { $("#resultlist").append($(this).html()); document.location.href="#anker_<? echo $counter; ?>"; }); }); }); </script> So. Also laufen tut. Ich drücken den Submit Button und er zeigt mir die 10 Treffer an. Perfekt! Dann klicke ich nächste 10 Anzeige und er zeigt mit darunter die nächsten 10 Treffer an. Perfekt! Falsch ist nun, dass er mir jetzt 2x den Link "Nächste 10 Treffer" anzeigt. Nämlich unter den ersten Suchergebnis und unter den zweiten. Das unter den ersten Suchergebnis sollte eigentlich verschwinden (ich setze das div ja display = none), tut es aber nicht. Er soll nur das unterste anzeigen. Wenn ich nun den untersten Link anklicke und weitere Treffe will passiert nix! Wenn ich nun den Link anklicke der eigentlich weg sein sollte, zeigt er noch mal die gleichen Treffer an. Ich frage mich also, wieso der Nächste Treffer link nach den anklicken nicht verschwindet und wieso der letzte Link nicht funktioniert. Vielleicht ist auch etwas anderen am Code sehr mies, da freue ich mich auch auf Feedback. Habe mit JQuery noch nicht so viel Erfahrung, aber vielleicht kann mir ja jemand helfen. Smilla


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.03.2011, 22:06
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Finde ich nicht so elegant gelöst. Du solltest den jQuery nur einmal einbinden, statt ihn mit jedem Laden zu duplizieren. Und dann könntest Du das „nächste 10“-div einfach mit dem nachgeladenen Inhalt austauschen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

09.03.2011, 08:38
smilla Erfahrener Benutzer Registriert seit: 09.11.2008 Beiträge: 200	Moin, du meinst quasi dass ich die "Nächste Treffer" einfach in einen div unter meinen resultlist div anzeige und dies bei Bedarf anzeige/ausblende? So würde ich von dort einfach nur den Inhalt der result.php nachladen. Habe ich dich so korrekt verstanden? Ich werde das mal versuchen Klingt auf jeden Fall auch sinnvoll!

09.03.2011, 12:13
smilla Erfahrener Benutzer Registriert seit: 09.11.2008 Beiträge: 200	So, ich bin dann nun etwas fleißig gewesen, bis auf eine Sache läuft es perfekt. Die result.php ist nun slim geworden, da gibt es nichts weiter zu bemängeln PHP-Code: `<? // get counter $counter = $_GET['counter']; // show 10 entries $start = (($counter-1)10)+1; $stop = $counter10; $counter++; // Show next seach results for ($i = $start; $i <= $stop; $i++) { echo "Treffer $i<br />"; } ?>` In der Index.php ist jetzt nur noch ein Javascript Block drinnen PHP-Code: <? if (isset($_POST['action']) && $_POST['action'] == 'search') { ?> <div id="resultlist">Wird geladen</div> <div id="resultexpand" style="display:none;text-decoration:underline; cursor:pointer;">Nächste 10 Treffer anzeigen</div> <script type="text/javascript"> var counter = 1; // Fange mit Seite 1 an var limit = 5; // Es gibt max 5 Seiten, die Anzahl der Ergebnisse ist an dieser Stelle bereits bekannt $(function() { $("#resultlist").load("result.php?counter=" + counter++); $("#resultexpand").css({ "display": "block" }); }); $(function() { $('#resultexpand').click(function() { $("<div>").load("result.php?counter=" + counter++, function() { $("#resultlist").append($(this).html()); }); }); if (counter > limit) { // show next treffer $("#resultexpand").css({ "display": "none" }); } }); </script> <? } ?> Ich habe das Beispiel so erweitert, dass man nur X mal weitere Daten abfrage kann. Der Wert X ist mir bekannt. Das ganze funktioniert nun einwandfrei, aber meine letzte if Anweisung, die das display auf none setzt wird nicht ausgeführt. Auch wenn ich da testweise ein Alert rein mache, wird dies nicht ausgeführt. Daher nun meine zwei Fragen: 1. Was muss ich ändern, damit das div nach den Durchläufen ausgeblendet wird. 2. Ist sonst noch etwas schlecht realisiert, was ich ändern sollte?

09.03.2011, 21:47
smilla Erfahrener Benutzer Registriert seit: 09.11.2008 Beiträge: 200	Nach dem ich den If Code weiter oben habe, haut es hin. Frage mich jetzt nur ob es so elegant gelöst ist oder nicht.

16.03.2011, 06:47
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Ich würde statt"$("#resultlist").load" "$.ajax" dafür nehmen. ANmerkungen - Keine direkte Ausgabe des PHP scripts - .load läuft mit $_GET Methode (Sprich: unsicherer) - Bei $.ajax kannst du extra events auslösen, wenn dein PHP Script nur z.B 3 Ergebnisse liefert.