login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Autosuggest met loader-gif (Opgelost)

Offline tuxy - 26/12/2010 22:54 (laatste wijziging 26/12/2010 22:55)
Avatar van tuxyNieuw lid Hallo,

Ik heb een site met een autosuggest-functie:
http://www.vazodo.com

Deze functie werkt perfect!

Maar nu had ik graag een load-gifje geplaatst in de input-box, zoals hier:
[url]http://papermashup.com/demos/autosuggest/[/url]

Maar ik slaag er niet in deze functie te activeren/integreren.

Als ik de css-class 'load' (zonder javascript) implementeer in de input-box werkt deze al wel, maar is de bedoeling dat deze enkel actief is wanneer de autosuggest-functie wordt geladen, en onzichtbaar wordt wanneer de functie niet wordt gebruikt.

Ben al enkele dagen aan het googelen, en forums te raadplegen, maar vanaf ik één regel in onderstaande javascript plaats, werkt de autosuggest niet meer :-(

Hier de input-box (html):
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <input class="load" type="text" name="search" accept-charset="UTF8"  id="search_input" autocomplete="off"/>


De css-class:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .load{
  2.  background-image:url(loader.gif);
  3.  background-position:right;
  4.  background-repeat:no-repeat;
  5.  }


en de javascript:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.            var options = {
  3.                script:"config/suggests.php?json=true&limit=6&",
  4.                varname:"input",
  5.                json:true,
  6.                shownoresults:false,
  7.                maxresults:6,
  8.                callback: function (obj) { document.getElementById('testid').value = obj.id; }
  9.            };var as_json = new bsn.AutoSuggest('search_input', options)
  10.       </script>


Heb volgende regel al eens toegevoegd in de javascript:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. $('#search_input').addClass('.load');
  3. ...
  4. </script>


Maar dan werkt de autosuggest-functie niet meer!  

Hopelijk kan iemand me helpen?  

Christophe

4 antwoorden

Gesponsorde links
Offline valles10 - 26/12/2010 23:31
Avatar van valles10 HTML interesse Heel simpel, tijdens het starten van je suggest laat je de loader zijn, en bij de callback maak je hem weer hidden.
Offline tuxy - 26/12/2010 23:40 (laatste wijziging 26/12/2010 23:47)
Avatar van tuxy Nieuw lid Valles10,

Alvast bedankt voor je snelle reactie.

Het is me nu wel al gelukt om deze actief te krijgen in volgende code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. 1.
  2.       <script type="text/javascript">
  3.    2.
  4.       $('#search_input').addClass('.load');
  5.    3.
  6.       ...
  7.    4.
  8.       </script>


Daar ik vergeten was de jquery-module te laden  

Maar deze blijft natuurlijk continu zichtbaar.
Wat jij meld zou ik graag willen bereiken, ik weet wel dat dit 'heel simpel' is, maar hoe dien ik dit te realiseren, want heb zeer weinig ervaring met jquery.

Net eens geprobeerd om de addClass toe te voegen aan de 'suggests.php'-pagina:


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. echo '<script type="text/javascript" src="js/jquery144.js" charset="utf-8"></script>';
  3. echo '<script type="text/javascript">
  4. $("#search_input").addClass("load");
  5. </script>';
  6. ...
  7. ?>


Maar dan werkt de suggest-functie niet meer  
Offline valles10 - 27/12/2010 13:12
Avatar van valles10 HTML interesse Je moet gewoon in de functie die je oproept bij de onchange fso (dus wanneer je de suggester laat zoeken in de db) voor dat ie gaat opzoeken, moet hij de loader tonen, dan zet je de style van display op block.

en dan om, als het klaar is, terug te verbergen zet je in je
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. callback: function (obj) {

een stukje code om die gif weer te verbergen.

Ik wil dat je eerst zelf op zoek gaat naar een manier om dat te verbergen en te tonen (is niet zo moeilijk). Moest je het écht niet vinden (wat me zou verbazen) help ik je graag verder ;)

1. tonen tijdens laden
2. verbergen in de callback function
Offline tuxy - 28/12/2010 00:16 (laatste wijziging 29/12/2010 15:32)
Avatar van tuxy Nieuw lid Ok,

Moest je eens weten hoe lang ik al aan het zoeken ben    

Al gezocht op de site van jquery zelf, en me al suf gegoogled  

Ook al gegevens in de
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. callback: function (obj) { document.getElementById('testid').value = obj.id; }

geplaatst, maar tevergeefs.

Ik vermoed dat het ook maar een kleine aanpassing is.
Intussen ken ik wel al 'addClass()' en 'removeClass()' en ook al op verschillende plaatsen in de javascript geplaatst, maar zoals ik al vermeldde, resultaat=0 !!!

Het enige wat ik tot nog toe bijgeleerd heb is dat het niet
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. addClass(".load")


maar
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. addClass("load")

is.

en als ik de 'addClass' toevoeg in de javascript waar de 'callback' staat
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.       $('#search_input').addClass('load');
  3.       ...
  4. </script>


dan is de loader-gif al actief voordat er iets wordt getypt in de input-box, dus vanaf de pagina wordt geladen, maar dat is natuurlijk niet de bedoeling.

Nieuwe poging:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. if($('#search_input').length > 0) {
  3. $('#search_input').addClass('load');}
  4. 	var options = {
  5. 		script:"config/suggests.php?json=true&limit=6&",
  6. 		varname:"input",
  7. 		json:true,
  8. 		shownoresults:false,
  9. 		maxresults:6,
  10. 		callback: function (obj) { document.getElementById('testid',$('#search_input').removeClass('load')).value = obj.id;}
  11. 	};
  12. 	var as_json = new bsn.AutoSuggest('search_input', options);
  13. </script>


Eerst wordt gecontroleerd of er iets in de input-box staat. Indien ja, moet deze normaal de suggest.php laden en de 'class' aktief maken tijdens het zoeken/laden vd suggest-box; in de 'callback' wordt deze 'class' verwijderd.

De laatste functie om deze te verwijderen werkt min of meer. Ttz wanneer je een suggestie aanklikt, wordt de loader-gif toch al verwijderd.

Intussen een naar neveneffect ontdekt, wanneer er niets wordt aangeklikt in de suggest-box, wordt de loader-gif niet verwijderd  

Zou het niet eenvoudiger zijn om de loader-gif 2 seconden te activeren wanneer er een karakter wordt toegevoegd/verwijdert?

NB: Dit probleem werd opgelost in een ander topic: http://www.sitemasters.be/forum/3/38725
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.215s