Lightbox Inhalt per Prototype nachladen

  • Problem mit prototype

    hi,

    ich habe gerade deine super anleitung gelesen und versucht es zu integrieren.. jedoch ohne erfolg.. ich benutze http://prototype.conio.net/ (JavaScript Framework), was folgenden Ajax aufruf hat:

    Quellcode

    1. function getHTML(url,param)
    2. {
    3. var url = url;
    4. var pars = param;
    5. var myAjax = new Ajax.Updater({success: 'content'}, url, { method: 'get', parameters: pars, onFailure: reportError });
    6. }


    ich habe vergebens probiert den Listener zu integrieren :(

    Quellcode

    1. link.onclick = function () {myLightbox.start(this); return false;}


    Kannst du mir dabei weiterhelfen?


    edit:

    hi, also ich habs weiterprobiert und folgendes hinbekommen:

    Quellcode

    1. function pollContent(id){
    2. if (document.getElementById&&document.getElementById(id)){
    3. alert(id);
    4. var targetObj = document.getElementById(id);
    5. var anchors = targetObj.getElementsByTagName('a');
    6. for (var i=0; i<anchors.length; i++) {
    7. alert(i);
    8. var anchor = anchors[i];
    9. var relAttribute = String(anchor.getAttribute('rel'));
    10. if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    11. anchor.onclick = function () {myLightbox.start(this); return false;}
    12. }
    13. }
    14. }else{
    15. alert("nochmal");
    16. setTimeout("pollContent('"+id+"')", 1000)
    17. }
    18. }
    Alles anzeigen


    mit folgender URL rufe ich auf:

    Quellcode

    1. <a href=# onclick="getHTML('test.php','class=projekte');pollContent('content');">


    jetzt das problem..

    die funktion greift immer, aber geht immer nur ab dem zweiten besuch des links in den "if" teil rein!

    meine "else abfangtechnik" greift gar nicht :(

    hilfääää :roll:

    soooooooo :) sorry.. ein letztes mal.. jetzt gehts.. zwar komisch aber geht halt
    irgendwie kommt alles bischen verzögert und ich hoffe das ich mit 1500 ms mit im rennen bin (1000ms gehen nicht!).. ich hoffe irgendwann auf eine bessere lösung..

    Quellcode

    1. function pollContent(id){
    2. if (document.getElementById&&document.getElementById(id)){
    3. setTimeout("wait('"+id+"')", 1500);
    4. }else{
    5. setTimeout("pollContent('"+id+"')", 1000)
    6. }
    7. }
    9. function wait(id){
    10. if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(50); };
    11. var targetObj = document.getElementById(id);
    12. var anchors = targetObj.getElementsByTagName('a');
    13. for (var i=0; i<anchors.length; i++) {
    14. var anchor = anchors[i];
    15. var relAttribute = String(anchor.getAttribute('rel'));
    16. if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    17. //alert('ja');
    18. anchor.onclick = function () {myLightbox.start(this); return false;}
    19. }
    20. }
    21. }
    23. /* nur beim ie benötigt */
    24. function pause(numberMillis) {
    25. var now = new Date();
    26. var exitTime = now.getTime() + numberMillis;
    27. while (true) {
    28. now = new Date();
    29. if (now.getTime() > exitTime)
    30. return;
    31. }
    32. }
    Alles anzeigen


    Gruss
    h4bib

  • Prototype ist toll :D
    versuch mal Folgendes

    Quellcode

    1. var ff = function() {
    2. var id = 'xx';
    3. if (document.getElementById&&document.getElementById(id)){
    4. alert(id);
    5. var targetObj = document.getElementById(id);
    6. var anchors = targetObj.getElementsByTagName('a');
    7. for (var i=0; i<anchors.length; i++) {
    8. alert(i);
    9. var anchor = anchors[i];
    10. var relAttribute = String(anchor.getAttribute('rel'));
    11. if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    12. anchor.onclick = function () {myLightbox.start(this); return false;}
    13. }
    14. }
    15. }else{
    16. alert("nochmal");
    17. setTimeout("pollContent('"+id+"')", 1000)
    18. }
    19. }
    21. if(enableCache){
    22. jsCache[url] = dynamicContent_ajaxObjects[ajaxIndex].response;
    23. }
    24. dynamicContent_ajaxObjects[ajaxIndex] = false;
    26. ajax_parseJs(targetObj)
    27. }
    Alles anzeigen


    und ändere dein AJAX Objekt so um

    Quellcode

    1. var myAjax = new Ajax.Updater({onSuccess: ff}, ....


    dadurch müsste protoype sich nun darum kümmern, die Lightbox Parse Funktion sofort aufzurufen, wenn der Inhalt geladen wurde.

  • hmm..

    also leider hat das ganze nicht geklappt.. er läd dir inhalte irgendwie nicht..

    alert(id); in der funktion ff() gibt er noch aus...

    hier nochmal das ganze script:

    </script>

    Quellcode

    1. <script language="JavaScript">
    3. //Effect.Fade('content');
    4. //Effect.Fade('systemWorking');
    5. //Effect.Appear('systemWorking');
    6. //Effect.Appear('content');
    8. var myGlobalHandlers = {
    10. onCreate: function(){
    11. //Effect.Fade('content',{duration: 1});
    12. Element.hide('content');
    13. //alert('show systemworking');
    14. Element.show('systemWorking');
    15. },
    17. onComplete: function() {
    18. if(Ajax.activeRequestCount == 0){
    19. Effect.Fade('systemWorking');
    20. //Element.hide('systemWorking');
    21. //alert('hide systemworking');
    22. //alert('show content');
    23. Effect.Appear('content',{duration: 1});
    24. //Element.show('content');
    25. }
    26. }
    27. };
    29. Ajax.Responders.register(myGlobalHandlers);
    31. function getHTML(url,param)
    32. {
    33. var url = url;
    34. var pars = param;
    35. var myAjax = new Ajax.Updater({success: ff(url)}, url, { method: 'get', parameters: pars, onFailure: reportError });
    36. }
    38. function reportError(request)
    39. {
    40. $('systemWorking').innerHTML = request.responseText;
    41. }
    43. function ff(){
    44. var id = 'content';
    45. var targetObj = document.getElementById(id);
    46. var anchors = targetObj.getElementsByTagName('a');
    47. alert(id);
    48. for (var i=0; i<anchors.length; i++) {
    49. alert(i);
    50. var anchor = anchors[i];
    51. var relAttribute = String(anchor.getAttribute('rel'));
    52. if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    53. alert('ja');
    54. anchor.onclick = function () {myLightbox.start(this); return false;}
    55. }
    56. }
    57. }
    Alles anzeigen


    kurzes update: nur wenn ich den wert 'id' zurückgebe läd er halt inhalte nach.. jedoch greift die for schleife irgendwie nach belieben manchmal zu... :/ also leider hats erst mal nix gebracht.. so schade ey!

    Quellcode

    1. function ff(){
    2. var id = 'content';
    3. var targetObj = document.getElementById(id);
    4. var anchors = targetObj.getElementsByTagName('a');
    5. for (var i=0; i<anchors.length; i++) {
    6. var anchor = anchors[i];
    7. var relAttribute = String(anchor.getAttribute('rel'));
    8. if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    9. alert(anchor);
    10. anchor.onclick = function () {myLightbox.start(this); return false;}
    11. }
    12. }
    13. return id;
    14. }
    Alles anzeigen

  • nutzt du firefox und meldet die Fehlerkonsole irgendwelche Fehler?
    "element not found" oder ähnliches?

    Solltest übrigens drauf achten validen HTML Code zu schreiben:
    <script language="JavaScript"> gibts nicht mehr.
    Heißt

    Quellcode

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


    Parameter musst du alles in Anführungszeichen schreiben:

    Quellcode

    1. <a href="#" onclick="...">...</a>

  • ne..

    die konsole gibt keine fehler aus..

    hier ist der aufruf..

    <a href="#" onclick="getHTML('test.php','class=projekte');">

    also die funktion ff() versucht meiner meinung nach alle "a" tags vor dem laden das contents zu finden und greift deswegen nicht richtig irgendwie.. also es müsste erst nach dem laden des contents, die schleife durchlaufen.. dann müsste es doch gehen?

    ich werd am ende eh mal alles durchchecken bezüglich validem html.. aber mich ärgerts das das ganze nicht läuft... sehr schade :(

    meine version von gestern ging an meinem heimischen rechner zb. nur sporadich, wobei hier auf arbeit alles lief..

    sooooooo kurzes update mal wieder, jetzt gehts, zwar bischen unschön aber läuft:

    Quellcode

    1. <a onmouseover="ff();" rel="lightbox" href="bild.jpg"><img src=bild_klein.jpg></a>


    und hier die passende funktion dann halt:

    Quellcode

    1. function ff(){
    2. var id = 'content';
    3. if (document.getElementById&&document.getElementById(id)){
    4. //alert(id);
    5. var targetObj = document.getElementById(id);
    6. var anchors = targetObj.getElementsByTagName('a');
    7. for (var i=0; i<anchors.length; i++) {
    8. var anchor = anchors[i];
    9. var relAttribute = String(anchor.getAttribute('rel'));
    10. if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    11. //alert(anchor);
    12. anchor.onclick = function () {myLightbox.start(this); return false;}
    13. }
    14. }
    15. }
    16. }
    Alles anzeigen


    also erst wenn man ein mouseover tätigt klappts tatsächlich...