7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:
    Bijdrager
    Rub3n

    prototyp.js vraag

    Ik ben bezig met een website waar een divje moet uitschuiven.

    Dit is gelukt. En hij moet de tekst ook updaten van die div. Zodra men op “uitschuiven” klikt. Dit lukt ook.

    Maar nu wil ik bijv. HTML gebruiken in die tekst. Dit lukt mij niet.

    Je moet dat op de 1 of andere manier “escapen” denk ik. Maar kan nergens vinden hoe.

    [code:1:bd229f513c] <a href="#" onclick="$(’kollom-2’).morph(’width:588px;background: #FF0000;’);$(’kollom-2’).update(’tester’);">test</a>[/code:1:bd229f513c]

    nu moet dus bij die

    [code:1:bd229f513c]$(’kollom-2’).update(’BLAATTEKST’);[/code:1:bd229f513c]

    Een link bij in. zoals bijv.

    [code:1:bd229f513c]<a href="#" onclick="$(’kollom-2’).morph(’width:191px;background: #FFF;’); return false;">reset</a>[/code:1:bd229f513c]

    Hoe krijg ik die nou achter die “BLAATTEKST” ?

    Bijdrager
    Shiny

    Plaats de link in ‘kolom-2’ alvast, maar verberg die met ‘style=”display:none;”

    Zoiets dus:

    [code:1:7d4324da3d]
    <div id="kolom-2"><div id="kolom-2-inner"></div><a href="#" id="kolom-2-link" onclick="$(’kollom-2’).morph(’width:191px;background: #FFF;’);$(’kolom-2-link’).hide();return false;" style="display:none;">reset</a></div>
    [/code:1:7d4324da3d]

    Je script om kolom 2 te tonen/morphen moet je dan iets aanpassen:

    [code:1:7d4324da3d]
    <a href="#" onclick="$(’kollom-2’).morph(’width:588px;background: #FF0000;’);$(’kollom-2-inner’).update(’tester’);$(’kolom-2-link’).show();return false;">test</a>
    [/code:1:7d4324da3d]

    Zie: http://www.prototypejs.org/api/element/update, als ik het goed begrijp kan je bij update() geen inline-javascript gebruiken (wel javascript in script-blokken).

    En zoals je ziet levert deze manier van werken niet echt nette code op… Succes!

    Bijdrager
    sturb

    Het ziet zowieso mooier uit maar het is vooral overzchtelijker als je javascript niet inline zet (, anders dan de functie aanroep.)

    Bijdrager
    Shiny

    Eens met sturb, en prototype.js leent zich er ook nog eens voor om het zelfs zonder functie-aanroep te doen. Om bijvoorbeeld je link te vervangen die kolom-2 toont/morpht zou je het volgende kunnen doen:

    [code:1:723a57869c]
    // pas uitvoeren als de hele pagina geladen is
    new Event.observe(window,’load’,function(){

    // de listener van de link
    new Event.observe($(’idvanjelink’),’click’,function(){
    $(’kollom-2’).morph(’width:588px;background: #FF0000;’);
    $(’kollom-2-inner’).update(’tester’);
    $(’kolom-2-link’).show();
    });
    });
    [/code:1:723a57869c]

    Bijdrager
    Rub3n

    maar, eigenlijk moet ik gewoon hele HTML vanuit de database kunnen inlezen in dat ding.

    Bijdrager
    Frog

    In jquery en PHP is het zo dat je voor elk aanhalingsteken een backslash ( ) moet zetten. Misschien moet je dat doen?

    Bijdrager
    Shiny

    http://www.prototypejs.org/api/ajax/updater

    Kun je alles doorheen pompen.

7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.