Jquery overlay vullen met resultaat van MySQL call via AJAX

zaterdag 21 juli 2012 17:35

Acties:

0 Henk 'm!

Topicstarter

Hallo,

Ik ben al een tijdje aan het uitvogelen hoe ik de resulaten van een database query in een overlay kan plaatsen. Het idee is dat ik via PHP een tabel weer geef, met achter elke row een plaatje en als je daarop klikt dan krijg je meerder details te zien van die row (welke veel meer zijn dan je van links naar rechts op een scherm kunt plaatsen)

Om de database te benaderen met PHP en MYSQL is geen probleem. Ook heb ik code gevonden om een mooie overlay (apple style) te genereren via Jquery tools en heb deze naar mijn behoeften verbouwd (zie onderaan).

Alleen wil ik dus in die overlay de resultaten van b.v. get_row_details.php?rowid=x daarin zetten. Die gegevens haal je op met AJAX en daar zijn mooie voorbeelden op w3schools om de resultaten daarvan in en dat lukt me ook om in een normale DIV te plaatsen. Er is ook een mooi voorbeeld om met Ajax de inhoud van een textfile met Jquery in een DIV te plaatsen, alleen de combinatie van deze drie..... wie geeft me een zetje in de goede richting?

HTML:

<html>
<head>
  <title>jQuery test icm MySQL</title>
    <!-- include the Tools -->
  <script src="jquery-latest.js"></script>
  <script src="jquery.tools.min.js"></script>
  <link rel="stylesheet" type="text/css" href="overlay-apple.css"/>

</head>
<body>
<div id="apple">
  <img src="images/click-maar.png" rel="#photo" />
</div>

<div class="apple_overlay" id="photo">
</div>

<!-- make all links with the 'rel' attribute open overlays -->
<script>
  $(function() {
    $("#apple img[rel]").overlay({effect: 'apple'});
    });
</script>
</body>
</html>

zaterdag 21 juli 2012 17:44

Acties:

0 Henk 'm!

_Erikje_

Tweaker in Spanje

Lukt het je om via ajax de data te querien en bijvoorbeeld met console.log weer te geven? Als dat lukt kan je heel gemakkelijk met .html() de div vullen met de data...

zaterdag 21 juli 2012 20:06

Acties:

0 Henk 'm!

gepebril

Topicstarter

@_Erikje_
Aha, een andere inval, wellicht zie ik het te moeilijk.

Ik heb wat lopen pielen en het volgende blijkt te werken en blijkbaar te mogen.

code:

<script type="text/javascript">
<!--
function showUser(str)
{ var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  
  xmlhttp.onreadystatechange=function()
  { if (xmlhttp.readyState==4 && xmlhttp.status==200)
    { document.getElementById("details").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","get_troep.php?q="+str,true);
  xmlhttp.send();
}
</script>
<head>

<title>jQuery Tools standalone demo</title>

<!-- include the Tools -->
<script src="js/jquery-latest.js"></script>
<script src="js/jquery.tools.min.js"></script>

<link rel="stylesheet" type="text/css" href="standalone.css"/>
<link rel="stylesheet" type="text/css" href="overlay-apple.css"/>

</head>

<body><!-- trigger elements -->
<div id="apple">
  <img src="images/clickme.png" onclick="showUser('1')" rel="#overlay" />
</div>

<div class="apple_overlay" id="overlay">
  <div class="details" id="details">
  </div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
  $(function() {
  $("#apple img[rel]").overlay({effect: 'apple'});
  });
</script>
</body>
</html>

Je mag dus naast die #rel verwijzing ook een onclick event starten dat wat AJAX en Javascript code uitvoert. Erg relaxt. Moest wel div=details toevoegen anders werd de close button overschreven.

[ Voor 76% gewijzigd door gepebril op 21-07-2012 22:08 ]

zondag 22 juli 2012 00:25

Acties:

0 Henk 'm!

C0rnelis

gepebril schreef op zaterdag 21 juli 2012 @ 20:06:
[...]

Je mag dus naast die #rel verwijzing ook een onclick event starten dat wat AJAX en Javascript code uitvoert. Erg relaxt. Moest wel div=details toevoegen anders werd de close button overschreven.

Waarom gebruik je trouwens niet gewoon http://api.jquery.com/jQuery.ajax/ en http://api.jquery.com/click/ ? Met gebruik van deze is het ook enorm simpel om fouten af te handelen.

Het is trouwens ook aan te raden om script-tags het type-attribuut te geven:

HTML:

1	<script type="text/javascript"></script>

Daarnaast lijkt je logica niet te kloppen: je geeft rel=#overlay om vervolgens hardcoded de via-ajax-opgehaalde html in een element #details te stoppen..

. De waarde van rel wordt juist gebruikt om aan te geven welk element de bron is voor de overlay. Anders kun je net zo goed gebruik maken van classes.

Ook staat je javascript verkeerd!! Het staat zelfs vóór je head-tag

en je hebt het begin van een html-comment op regel 2 omdat .. ?

zondag 22 juli 2012 00:48

Acties:

0 Henk 'm!

8088

NaN

C0rnelis schreef op zondag 22 juli 2012 @ 00:25:
Het is trouwens ook aan te raden om script-tags het type-attribuut te geven:
HTML:
1
<script type="text/javascript"></script>

Waarom? In HTML5 wordt text/javascript aangenomen tenzij anders aangegeven.

Do you seek to engage in or have you ever engaged in terrorist activities, espionage, sabotage, or genocide?

zondag 22 juli 2012 13:25

Acties:

0 Henk 'm!

gepebril

Topicstarter

C0rnelis schreef op zondag 22 juli 2012 @ 00:25:
[...]
Waarom gebruik je trouwens niet gewoon http://api.jquery.com/jQuery.ajax/ en http://api.jquery.com/click/ ? Met gebruik van deze is het ook enorm simpel om fouten af te handelen.

Bedankt voor de tip, zal hier eens naar kijken. Gebruik eigenlijk nauwelijks Ajax op deze interne CMS site, en de tijdsdruk is groot om eens goed een tijdje in Ajax te duiken, helaas

[/quote]

Het is trouwens ook aan te raden om script-tags het type-attribuut te geven:
HTML:
1
<script type="text/javascript"></script>

Haal de voorbeeld tags meestal van w3schools, maar soms glipt er wel eens iets anders tussendoor, vooral als ik even iets test. Maar je hebt gelijk overal goed en netjes doen.

Daarnaast lijkt je logica niet te kloppen: je geeft rel=#overlay om vervolgens hardcoded de via-Ajax-opgehaalde html in een element #details te stoppen.. . De waarde van rel wordt juist gebruikt om aan te geven welk element de bron is voor de overlay. Anders kun je net zo goed gebruik maken van classes.

Dat klopt, had het zo eerst gedaan, alleen indien ik dat zo doe valt een gedeelte van de HTML code weg die vermoedelijk uit CSS gegenereerd wordt en voor de close button zorgt. Ken deze constructie niet, en kan het ook niet 100% verklaren. De html code is:

code:

1	<a class="close"></a>

ontdekte ik via firebug. Denk dat hij hier uit komt: css file: overlay-apple.css

code:

/* default close button positioned on upper right corner */
.apple_overlay .close {
    background-image:url(../overlay/close.png);
    position:absolute; right:5px; top:5px;
    cursor:pointer;
    height:35px;
    width:35px;
}

want er staat nergens in de gebruikte code

code:

<a></a>

code:

1	Ook staat je javascript verkeerd!! Het staat zelfs vóór je head-tag :D

bleek een tweede start header tag in de code te staan, was al door mij ontdekt.

en je hebt het begin van een html-comment op regel 2 omdat .. ?

->http://www.w3schools.com/js/js_howto.asp
Some Browsers do Not Support JavaScript

Browsers that do not support JavaScript, will display JavaScript as page content.

To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript.

Just add an HTML comment tag  (end of comment) after the last JavaScript statement, like this:
En ik zie nu dat ik de closing vergeten ben......

zondag 22 juli 2012 14:26

Acties:

0 Henk 'm!

Barryvdh

Als je toch jQuery gebruikt, zou ik gewoon alles met jQuery doen, en gewoon een tutorial op jquery.com volgen, dit lijkt me allemaal wat onhandig. (Als je even snel wat via ajax wil inladen)

zondag 22 juli 2012 14:34

Acties:

0 Henk 'm!

Struikrover

Een kleine opzet voor je om heel makkelijk een ajax call te maken:

JavaScript:

$.post(
    url, 
    {
        POST  : doe,
        je    : hier 
    },
    function(data)
    {
        console.log('success: ' + data)
    }
).error(
    function(XmlHttpRequest, statusText, errorThrown)
    {
        console.log('error :( :' + XmlHttpRequest, statusText, errorThrown)
    }
);

Nodeloos om te zeggen denk ik, maar voor de zekerheid:
Argument 1 is de URL die je wilt laden, argument 2 de POST variabelen die je wilt meesturen op 'key:value' manier, het derde argument is de succesfunctie. Ik heb de error afhandeling er los achter gezet omdat het bij mij anders niet zo gauw werkte, maar die handelt dus een error af (HTTP status alles behalve 200 'OK').

[ Voor 0% gewijzigd door Struikrover op 22-07-2012 14:35 . Reden: typo ]

zondag 22 juli 2012 16:16

Acties:

0 Henk 'm!

gepebril

Topicstarter

Barryvdh schreef op zondag 22 juli 2012 @ 14:26:
Als je toch jQuery gebruikt, zou ik gewoon alles met jQuery doen, en gewoon een tutorial op jquery.com volgen, dit lijkt me allemaal wat onhandig. (Als je even snel wat via ajax wil inladen)

Heb alleen maar voor Jquery hier gekozen daar bij alle overlay voorbeelden in Javascript op het Net de mensen klaagde dat het in veel type browser het niet werkte. Daar Jquery tools ingebouwde support voor alle moderne browsers gaf dacht ik hé, goed bezig, dan gaan we die gebruiken. Het idee van Jquery is heel mooi, alleen is me na 3x het lezen van de tutorial de schrijfwijze nog totale abracadabra. Ze hebben bewust afgeweken van talen a la php, perl, c, javascript. Waar functie calls er heel anders uitzien, meer:

code:

functie_naam(arg1, arg1)
{ doe wat zaken
  return
}
$result = functie_naam($var1, $var2);

Toch iets helderder oogt dan het hieronder staande

code:

$(document).ready(function(){
  $("input").keyup(function(){
    txt=$("input").val();
    $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
      $("span").html(result);
    });
  });
});

Voor mij is het een spaghetti van '{' en '(' en heb ik de logica nog niet ontdekt, zeker niet als er meerdere handelingen plaatsvinden. Wellicht is w3schools niet de plek om daarmee verder te komen.
Vandaar dat ik op die éne plek in mijn code op Jquery ben aangewezen.
Dus je hebt gelijk, maar dit is de reden waarom ik dat niet doe. Verder ben ik niet fulltime programmeur en maak zaken zelf als het zo uitkomt.

@Struikrover,
Dank voor het voorbeeld. Alleen zijn JQuery en ik nog geen dikke vriendjes.

[ Voor 12% gewijzigd door gepebril op 22-07-2012 16:23 ]

zondag 22 juli 2012 16:41

Acties:

0 Henk 'm!

YopY

. Ze hebben bewust afgeweken van talen a la php, perl, c, javascript. Waar functie calls er heel anders uitzien, meer:

Sorry hoor, maar jQuery is javascript; het is gewoon een library voor Javascript. $() is gewoon een functie genaamd $, geen magische taalconstructie.

w3schools is zeker niet de juiste plek; ze mogen dan misschien bovenaan in de zoekresultaten verschijnen, maar dat maakt ze nog niet goed. Voor HTML, css en Javascript documentatie kun je beter naar bijvoorbeeld MDN kijken.

Javascript is idd geen PHP; wat je waarschijnlijk vooral verwart is het functionele aspect van de taal (dwz het gebruik van callbacks, geneste functies, etcetera). Het is een relatief eenvoudige taal, echter. Ik zou me, als ik jou was, eens goed inlezen over Javascript als taal; MDN kun je dat o.a. op nalezen. mbt je verwarrende voorbeeld, dat kun je ook refactoren naar iets leesbaarders:

JavaScript:

function onPostComplete(result) {
  $("span").html(result);
}

function onInputKeyup() {
  var txt = $("input").val();
  var params = {
    suggest : txt
  };

  $.post("demo_ajax_gethint.asp", params, onPostComplete);
}

function onDocumentReady() {
  $("input").keyup(onInputKeyup);
}

$(document).ready(onDocumentReady);;

(functienamen zijn arbitrair gekozen; bovenstaande is natuurlijk slechts één manier om dat stukje te refactoren. Meestal wordt het gewoon zoals beschreven gedaan, simpelweg omdat geneste callbacks wel leesbaar zijn als je ze eenmaal doorhebt)

[ Voor 28% gewijzigd door YopY op 22-07-2012 16:45 ]

zondag 22 juli 2012 16:46

Acties:

0 Henk 'm!

R4gnax

Jquery

gepebril schreef op zondag 22 juli 2012 @ 16:16:
Het idee van Jquery is heel mooi, alleen is me na 3x het lezen van de tutorial de schrijfwijze nog totale abracadabra. Ze hebben bewust afgeweken van talen a la php, perl, c, javascript.
[...]
Voor mij is het een spaghetti van '{' en '(' en heb ik de logica nog niet ontdekt, zeker niet als er meerdere handelingen plaatsvinden.

Het wordt allemaal heel erg netjes in de tutorials op de officiële jQuery site behandeld. Al doorgelezen?

gepebril schreef op zondag 22 juli 2012 @ 16:16:
Wellicht is w3schools niet de plek om daarmee verder te komen.

Het is nooit de plek om ergens mee verder te komen.

YopY schreef op zondag 22 juli 2012 @ 16:41:
(functienamen zijn arbitrair gekozen; bovenstaande is natuurlijk slechts één manier om dat stukje te refactoren. Meestal wordt het gewoon zoals beschreven gedaan, simpelweg omdat geneste callbacks wel leesbaar zijn als je ze eenmaal doorhebt)

Inderdaad. Wat extra witruimte en nieuwe regels benutten helpt ook heel wat voor de leesbaarheid.

JavaScript:

$( document ).ready( function() {

  $( "input" ).on( "keyup", function( event ) {
    
    $
      .ajax({
        url  : "demo_ajax_gethint.asp",
        data : { suggest : $( this ).val() }
      })
      .done( function( result ) {
        $( "span" ).html( result );
      });    

  });

});

[ Voor 31% gewijzigd door R4gnax op 22-07-2012 16:57 ]

zondag 22 juli 2012 17:01

Acties:

0 Henk 'm!

gepebril

Topicstarter

@YopY
Heel helder verhaal, begint nu ineens een stuk helderder te worden.
Zal eens op MDN gaan kijken
@R4gnax ja, had op die site gekeken en http://docs.jquery.com/Tutorials:How_jQuery_Works en halverwege de eerste pagina begonnen ze dus met die geneste callbacks zoals YopY beschreven had en vanaf dat punt werd het allemaal wazig voor mij en haakte ik af. Toch fijn dat er forums zijn als dit waar je met je probleem terecht kunt.

zondag 22 juli 2012 21:41

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

gepebril schreef op zondag 22 juli 2012 @ 13:25:
[...]
Browsers that do not support JavaScript, will display JavaScript as page content.

Staat dat echt nog op w3schools? Dat was 10 jaar geleden misschien zo, toen IE en NS nog op versie 3.0 zaten...

Intentionally left blank

zondag 22 juli 2012 22:00

Acties:

0 Henk 'm!

Caelorum

Sowieso is dat waarschijnlijk iets dat je wel serverside kan afhandelen. Dan kan je de gehele javascript uit de pagina laten ipv. het met een vieze oplossing mee te sturen naar een client die er toch al niets mee kan.

zondag 22 juli 2012 22:08

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Caelorum schreef op zondag 22 juli 2012 @ 22:00:
Sowieso is dat waarschijnlijk iets dat je wel serverside kan afhandelen. Dan kan je de gehele javascript uit de pagina laten ipv. het met een vieze oplossing mee te sturen naar een client die er toch al niets mee kan.

5 jaar geleden was er al geen enkele browser meer met enig marktaandeel waarvoor dat een issue was. Toen was het al een 'urban myth' dat dergelijke escaping nog noodzakelijk was, net als dat het type-attribuut dat nu nog lijkt te zijn

Intentionally left blank

maandag 23 juli 2012 07:34

Acties:

0 Henk 'm!

Struikrover

Tragisch hoe W3Schools afgetakeld is de laatste tijd. Het was altijd mijn goto resource voor HTML. Gebruik het nog wel eens als HTML/CSS reference met dat overzicht op 1 pagina. Maar dit soort onwaarheden doet wel pijn.

maandag 23 juli 2012 07:47

Acties:

0 Henk 'm!

Verwijderd

Struikrover schreef op maandag 23 juli 2012 @ 07:34:
Tragisch hoe W3Schools afgetakeld is de laatste tijd.

De afgelopen 10 jaar...? De kwaliteit is nooit echt hoog geweest.

maandag 23 juli 2012 07:48

Acties:

0 Henk 'm!

Struikrover

Het zal mijn kijk op de wereld geweest zijn

dinsdag 24 juli 2012 11:29

Acties:

0 Henk 'm!

xboxlivejunk

... geweest

Mocht iemand deze posts nog doorlezen met eenzelfde probleem, bijvoorbeeld async database requests, dan is dit nog een mooie link:

http://openenergymonitor.org/emon/node/107

Zo kun je meerdere requests maken zonder de pagina te verversen.

Onderwerpen