[html/js/jquery] Problemen omtrent google-zoekmachine's

[F.West98]

Hallo,

Ik heb een boel problemen omtrent google aangepast zoeken, ze hebben allemaal met elkaar te maken.

1. Ik wil de resultaten van de google-zoekmachine in een jquery-ui-dialog laten openen. Dit zou moeten lukken met:

JavaScript:

$('.gsc-search-box').submit(function() {
 $('#dialog').dialog("open");
});
$('#dialog').dialog({
 autoOpen: false;
 width: 500;
 height: 300;
 modal: true;
 buttons: {
  "Nieuwe zoekactie": function() {
   $('#zoekbalk').toggle();
  },
  "Stop zoeken": function() {
    $(this).dialog("close");
  }
 }
});

(hier zit ook al iets in voor het volgende probleem)
Echter, dat lukt niet. Hij detecteerd niet dat je het form submit. Ook werkt het niet als je zegt:

JavaScript:

$('.google-submit').click....

Dus heb ik de volgende oplossing bedacht:

HTML:

<div class="google-zoeken">
 ... (google-troep via google-js gecreëerd)
</div>
<div class="submit" style="position: absolute; overflow: visible; z-index: 99; background-color: transparent;"></div>
<div id="dialog">
... (google-code again)
</div>

Dus een div die gepositioneerd is over de andere submit-button heen. Dat werkt eindelijk wel. (met jquery $(item).click) Maar nu wordt het form niet ge-submit, ik krijg geen zoekresultaten. Dus ik denk: ik submit die, zodat de js zo wordt:

JavaScript:

$('#submit').click(function() {
 document.forms[0].submit();
 $('#dialog').dialog("open");
});

Maar dan herlaadt de pagina, waardoor hij de invoer kwijt is en je dus nooit resultaten krijgt. Hoe krijg je het dan nu voorelkaar om dit te laten werken? (dus bij submit de zoekresultaten in een jqueryui-dialog)
Ik denk dat de jquery eerder wordt geladen dan de google-zoekbalk, die wordt via js opgevraagd. Je ziet tijdens laden ook even op zoekveld-plaats staan: 'Loading...'. Hoe verder?


2. Nu wil ik als de dialog dan eindelijk is geopend twee knoppen: (die ik ook heb)
* Nieuwe zoekactie
* Stop met zoeken
De tweede werkt, de dialog sluit. De eerste zou een zoekbalk tevoorschijn moeten toveren (die staat al in de div id=dialog, maar is verborgen) Echter komt daar alleen maar te staan: Loading..., met exact dezelfde code als de eerste zoekbalk buiten de dialog. Hoe krijg ik die nu aan het werk?


3. Hoe laat je het laden van de google-zoekmachine apart gaan, nu stopt het het hele laden van de pagina, waarna hij verder gaat (als hij de zoekmachine eenmaal heeft).


Veel vragen, ik hoop op antwoord
(en ik kwam er zelf niet meer uit...)

[tonyisgaaf]

Als je een breakpoint zet op regel 2 van je eerste JS en deze wordt niet bereikt bij het submitten van het formulier, dan denk ik dat je selector op regel 1 geen formulier teruggeeft (het formulier heeft een class "google-form"?). Oftewel: debuggen!

Voer je de initialisatie wel uit ná "domready"?

[F.West98]

tonyisgaaf schreef op maandag 09 mei 2011 @ 21:15:
Als je een breakpoint zet op regel 2 van je eerste JS en deze wordt niet bereikt bij het submitten van het formulier, dan denk ik dat je selector op regel 1 geen formulier teruggeeft (het formulier heeft een class "google-form"?). Oftewel: debuggen!

ik wist de echte class niet zo snel, daarom dat als vervanger, zal het aanpassen

Voer je de initialisatie wel uit ná "domready"?

hmmmm...
als ik er een

JavaScript:

$('.gsc-search-box').submit(function() {
 alert('submitted!');
});

in zet, krijg ik geen alert...

[Voor 12% gewijzigd door F.West98 op 09-05-2011 21:31]

[Kiphaas7]

F.West98 schreef op maandag 09 mei 2011 @ 21:25:

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

JavaScript:

 $(document).ready(function() {
   // do stuff when DOM is ready
 });

Alhoewel ik aanneem dat dit toch bekend is...

[F.West98]

Kiphaas7 schreef op maandag 09 mei 2011 @ 23:01:
[...]


http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

JavaScript:

 $(document).ready(function() {
   // do stuff when DOM is ready
 });

Alhoewel ik aanneem dat dit toch bekend is...

ooooooooohhhhhhhhhh
document.ready, ik kende de term domready niet

[tonyisgaaf]

F.West98 schreef op maandag 09 mei 2011 @ 21:25:
[...]
als ik er een

JavaScript:

$('.gsc-search-box').submit(function() {
 alert('submitted!');
});

in zet, krijg ik geen alert...

Dus je selector werkt niet. Het submit event binden werkt alleen op een formulier! Maak de selector eens explicieter: 'form.gsc-search-box'. Komt dat dan ook overeen met je HTML? Een <form> met "gsc-search-box" class?

@Terminal13 hieronder: ah slim! Had er niet eens aan gedacht dat het formulier misschien nog helemaal niet bestaat op DOM ready. Dan is delegate() overigens nog iets efficiënter.

[Voor 19% gewijzigd door tonyisgaaf op 10-05-2011 15:32]

[Anoniem: 96523]

Omdat ik verwacht dat er straks weer een bericht komt die meld dat het niet werkt, hier vast een mogelijke oplossing:

let erop dat de submit actie pas gezet wordt NA het plaatsen van het formulier. Je kunt dit op 2 manier oplossen:
a) maak gebruik van $('selector').live('submit', function() { /* actie */ });
b) zet de actie in de callback van de Google API

Daarnaast vraag ik me af welke code je gebruikt, omdat je oude Google Search API niet meer ondersteund wordt en er tegenwoordig hele simpele snippets zijn die met een paar regels code exact doen wat je wilt.

[F.West98]

tonyisgaaf schreef op dinsdag 10 mei 2011 @ 11:58:
[...]

Dus je selector werkt niet. Het submit event binden werkt alleen op een formulier! Maak de selector eens explicieter: 'form.gsc-search-box'. Komt dat dan ook overeen met je HTML? Een <form> met "gsc-search-box" class?

idd, maar de table erin heet ook zo, misschien raakt hij daardoor in de war....
js code tot nu toe:

JavaScript:

$(document).ready(function() {
$('#dialog').dialog({
 autoOpen: false,
 modal: true,
 buttons: {
  "Nieuwe zoekactie": function() {
   $('#zoekbalk').toggle();
  },
  "Stop zoeken": function() {
    $(this).dialog("close");
  }
 }
});
$('#submit').click(function(){
 document.forms[0].submit();
 $('#dialog').dialog("open");
});
$('.gsc-search-box').submit(function() {
 alert('submitted!');
});
});

Anoniem: 96523 schreef op dinsdag 10 mei 2011 @ 12:35:
Omdat ik verwacht dat er straks weer een bericht komt die meld dat het niet werkt, hier vast een mogelijke oplossing:

let erop dat de submit actie pas gezet wordt NA het plaatsen van het formulier. Je kunt dit op 2 manier oplossen:
a) maak gebruik van $('selector').live('submit', function() { /* actie */ });

goed idee! maar zoals hierboven, de tabel heeft dezelfde class en de form heeft verder geen class/id

b) zet de actie in de callback van de Google API

Daarnaast vraag ik me af welke code je gebruikt, omdat je oude Google Search API niet meer ondersteund wordt en er tegenwoordig hele simpele snippets zijn die met een paar regels code exact doen wat je wilt.

de code die ik gebruik:

HTML:

<div id="zoeken" style="overflow: visible; padding-top: 0px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-top: 62px; margin-left: 776px; float: left; position: absolute; z-index: 98; border: 1px solid grey; border-top: none; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; width: 212px;">
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'nl'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('partner-pub:xxxxxxxxx.xxxxx');
//gefilterd ;)
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> veel style
</div>

deze zorgt ervoor dat de resultaten op dezelfde pagina interactief worden weergegeven (geavanceerde opties bij google, (niet adsense, daar staat een link naar geavanceerde zoekopties))
de code die eruit komt:

HTML:

<div id="cse-search-form" style="width: 100%;" dir="ltr">
  <form class="gsc-search-box" accept-charset="utf-8">
   <table class="gsc-search-box" cellSpacing="0" cellPadding="0">
    <tbody>
     <tr>
      <td class="gsc-input">
       <input name="search" title="zoeken" class=" gsc-input" id="qGcrcGcsc11722" style='background-image: url("//www.google.com/cse/intl/nl/images/google_custom_search_watermark.gif"); background-attachment: scroll; background-repeat: no-repeat; background-position-x: left; background-position-y: center; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: rgb(255, 255, 255);' type="text" size="10" autoComplete="off" />
      </td>
      <td class="gsc-search-button">
       <input title="zoeken" class="gsc-search-button" type="submit" value="Zoeken" />
      </td>
      <td class="gsc-clear-button">
       <div title="resultaten wissen" class="gsc-clear-button">
        &nbsp;
       </div>
      </td>
     </tr>
    </tbody>
   </table>
   <table class="gsc-branding" cellSpacing="0" cellPadding="0">
    <tbody>
     <tr>
      <td class="gsc-branding-user-defined"></td>
      <td class="gsc-branding-text">
       <div class="gsc-branding-text">
        mogelijk gemaakt door
       </div>
      </td>
      <td class="gsc-branding-img">
       <div class="gsc-branding-img" style='width: 51px; height: 15px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.google.com/uds/css/small-logo.png");'></div>
      </td>
     </tr>
    </tbody>
   </table>
  </form>
 </div>
 
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
 
 <script type="text/javascript">
  
    google.load('search', '1', {language : 'nl'});
    google.setOnLoadCallback(function() {
      var customSearchControl = new google.search.CustomSearchControl('partner-pub-1620047170790957:7896561797');
      customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
      var options = new google.search.DrawOptions();
      options.setSearchFormRoot('cse-search-form');
      options.setAutoComplete(true);
      customSearchControl.draw('cse', options);
    }, true);
 </script>
 <script src="http://www.google.com/uds/?file=search&v=1&hl=nl" type="text/javascript"></script>
 <link href="http://www.google.com/uds/api/search/1.0/a19382024b10b17b3768f1ddbff9273a/default+nl.css" rel="stylesheet" type="text/css" />
 <script src="http://www.google.com/uds/api/search/1.0/a19382024b10b17b3768f1ddbff9273a/default+nl.I.js" type="text/javascript"></script>

ik merk dat trwijl hij de js doet, dat hij stopt met laden, en daarna pas verder gaat met de rest van de content, de jquery staat pas na deze code...

[tonyisgaaf]

F.West98 schreef op dinsdag 10 mei 2011 @ 15:58:
[...]
idd, maar de table erin heet ook zo, misschien raakt hij daardoor in de war....
[...]

Reden te meer dus om gebruik te maken van de expliciete selector $('form.gsc-search-box') , waarom je dat nou nog steeds niet doet is me een absoluut raadsel. Je geeft zelf nu notabene aan dat deze class niet alleen op formulieren staat...

Leer nou eens debuggen! Stap voor stap naar een oplossing toewerken, niet alles hier neerplempen...
Slinger Firebug in Firefox of de Web Inspector in Safari aan, kijk of er errors op de console voorkomen, zet breakpoints en kijk of variabelen zijn wat je verwacht, etc, etc.

En de Google Web Search API is deprecated sinds 1 November 2010, dus overstappen op de Google Custom Search API!

[F.West98]

tonyisgaaf schreef op dinsdag 10 mei 2011 @ 18:23:
[...]

Reden te meer dus om gebruik te maken van de expliciete selector $('form.gsc-search-box') , waarom je dat nou nog steeds niet doet is me een absoluut raadsel. Je geeft zelf nu notabene aan dat deze class niet alleen op formulieren staat...

gebruik ik ook, maar hier nog niet gezet (ook niet werkend)

Leer nou eens debuggen! Stap voor stap naar een oplossing toewerken, niet alles hier neerplempen...
Slinger Firebug in Firefox of de Web Inspector in Safari aan, kijk of er errors op de console voorkomen, zet breakpoints en kijk of variabelen zijn wat je verwacht, etc, etc.

En de Google Web Search API is deprecated sinds 1 November 2010, dus overstappen op de Google Custom Search API!

ik kreeg deze code 2 week geleden via google aangepast zoeken-site (google.nl/cse, dan in configuratiecherm: uiterlijk -> zoekelement)
waar die andere te vinden?

[tonyisgaaf]

Het begint met te dagen wat er gebeurt. De Google Custom Search API vervangt na "DOM Ready" het element "cse" (waarbij dat element in jouw voorbeeld overigens helemaal niet bestaat?) door het zoekformulier.
Je had wat duidelijker kunnen zijn dat de HTML code die je hier neerzette de DOM was ná het laden en niet de "broncode", dat zijn twee totaal verschillende zaken!

Wat jij hierbij vergeet is dat de "submit" van dit formulier al wordt afgevangen door de Google Custom Search API, hoe had je anders gedacht dat de resultaten zichtbaar worden, zonder het formulier te POST-ten naar Google? Dat gebeurt dus al d.m.v. een javascript call naar een Google URL op de achtergrond, waarvan de resultaten worden gerenderd in je DOM.

Dan heb je nu twee opties:

• Adhv. "setSearchCompleteCallback" iets doen met de gerenderde resultaten.
• De snippet die je nu van Google Custom Search hebt geheel negeren en de JSONP interface gebruiken om zelf met behulp van bijvoorbeeld jQuery.ajax() de resultaten op te halen.

[F.West98]

tonyisgaaf schreef op woensdag 11 mei 2011 @ 11:07:
Het begint met te dagen wat er gebeurt. De Google Custom Search API vervangt na "DOM Ready" het element "cse" (waarbij dat element in jouw voorbeeld overigens helemaal niet bestaat?) door het zoekformulier.

dat element uit de jquery bestaat in de bron niet, het verschijnt nadat het is geladen (tweede code)

Je had wat duidelijker kunnen zijn dat de HTML code die je hier neerzette de DOM was ná het laden en niet de "broncode", dat zijn twee totaal verschillende zaken!

(wat eruit komt (domready) lijkt mij duidelijk)

Wat jij hierbij vergeet is dat de "submit" van dit formulier al wordt afgevangen door de Google Custom Search API, hoe had je anders gedacht dat de resultaten zichtbaar worden, zonder het formulier te POST-ten naar Google? Dat gebeurt dus al d.m.v. een javascript call naar een Google URL op de achtergrond, waarvan de resultaten worden gerenderd in je DOM.

kan je het niet dubbel afvangen? want ik wel dan enkel nog een dialog openen at myself

Dan heb je nu twee opties:

• Adhv. "setSearchCompleteCallback" iets doen met de gerenderde resultaten.
• De snippet die je nu van Google Custom Search hebt geheel negeren en de JSONP interface gebruiken om zelf met behulp van bijvoorbeeld jQuery.ajax() de resultaten op te halen.

ik deed het dubbel submitten omdat de event .submit niet werkte...

edit 19:20:
Tweede werkt inmiddels, ik had een id gedupliceerd, waardoor de tweede niet werkte. nu echter dit probleem:
deze regel code bepaald de bron waar hij de invoer moet afvangen, maar dat zijn er twee... hoe doe ik dat?

JavaScript:

    options.setSearchFormRoot('cse-search-form-2','cse-search-form');

werkt niet...

[Voor 9% gewijzigd door F.West98 op 11-05-2011 19:24]