[JS] variabelen doorgeven (template)

[klaaz]

De search werkt helaas nog niet, en de topics van de laatste dertig dagen doorbladeren heeft ook niks op geleverd. Vandaar dat ik er een Topic van maak:

Situatie
Ik gebruik FastTemplates om mijn site op te zetten. Bevalt me goed. Voor diegene die het niet weten: Met templates is het mogelijk alle PHP code te scheiden van HTML code. Concreet wordt in een .PHP bestand alle bewerkingen uitgevoerd en resultaten verzameld in variabelen ( $tpl->assign('veldtypes', $veldtype) ). Deze variabelen komen in de templates (HTML bestanden met de extensie .TPL) terug door ze daar tussen accolades te plaatsen ( {veldtypes} )

Probleem:
Ik probeer in mijn TPL bestand een geldige variabele te verwerken in een Javascript op deze zelfde template.

code:

var $textarea = {veldnaam};
function storeCaret () {
       if (formname.textarea.createTextRange) 
         formname.textarea.caretPos = document.selection.createRange().duplicate();
      } 

function addSmiley (smileycode) {
       if (formname.textarea.createTextRange && formname.textarea.caretPos) {
         var caretPos = formname.textarea.caretPos;
         caretPos.text =
           caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
             smileycode + ' ' : smileycode;
        document.formname.textarea.focus();
       }
       else
        formname.textarea.value  = smileycode;
        storeCaret();
        document.formname.textarea.focus();
     }

uitleg
Het gaat om de variabele 'textarea' in de Java script code. Door deze als eerste te declareren werkt het niet. Als ik 'textarea' in het script overal vervang door {veldnaam}, werkt het ook niet. In de source van de uitgespuwde HTML pagina is de variabele gewoon leeg.

Dezelfde template variabele gebruikt in de rest van de pagina werkt wel (in HTML gedeelte).

vraag
Kan ik dit oplossen?

[Jelmer]

javascript!=java.... dus eigenlijk had je dit in W&G moeten zetten (zie QuickStart)

TextArea, is dat niet toevallig een reserved word?

[klaaz]

Twijfelgevalletje denk ik (PHP of JAVA)

Nee een losstaand test htmelletje met dezelfde vars werkt keurig.

[Jelmer]

En als je die HTML output nou eens vergelijkt met je test htmelletje? ($textarea, misschien dat dat $ door php geparsed wordt? enne is dat wel nodig een $ voor een var in js?)

[Verwijderd]

code:

var $textarea = {veldnaam};

Wat doe je hier nou? PHP en Javascript door elkaar ofzo? Het ontbreekt een beetje aan uitleg.

[!] $varname bestaat niet in Javascript!

[klaaz]

Heb geen Java ervaring. Wel programmeerervaring. Denk wel te snappen wat er staat. Die $ was inderdaad een beginnersfoutje...

Ik ben er ondertussen wel achter dat wat ik wil, (FastTemplate variabele gebruiken in Javascript) niet werkt.

Vandaar dat ik de code:

code:

<script language="JavaScript">
function storeCaret () { 
    if (formname.tekst.createTextRange) 
    formname.tekst.caretPos = 
    document.selection.createRange().duplicate(); 
    } 
    
function insertthis(thecode) { 
    if (navigator.userAgent.indexOf("Opera") == -1) 
        { 
        if (formname.tekst.createTextRange 
            && formname.tekst.caretPos) { 
            var caretPos = formname.tekst.caretPos; 
            caretPos.text = 
            caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? 
            thecode + ' ' : thecode; 
            document.formname.tekst.focus(); 
        } 
    else 
    formname.tekst.value = thecode; 
    storeCaret(); 
    document.formname.tekst.focus(); 
    
    } 
}

In mijn basis index.tpl (=html file) heb gezet, tussen <script> en </script> natuurlijk. 'formname' en 'tekst' kloppen, dit zijn de namen van mijn form tag en textarea. Het was de bedoeling de inhoud van 'tekst' te laten afhangen van de veldnaam in de Mysql tabel, maar die is altijd hetzelfde in het geval van textareas.

Mijn textarea en tekst link worden zo weergegeven in de bron van de output in IE:

code:

<a href=JavaScript:addSmiley('test')>test</a>
<textarea cols='84' rows='10' name=tekst ONSELECT='storeCaret();' ONCLICK='storeCaret();' ONKEYUP='storeCaret();'></textarea>

Alles staat gezellig, gezamenlijk in de uitgespuugde html pagina. Script netjes tussen de <head> en </head> tags, en de rest in de Body.

ik krijg de volgende foutmelding in IE wanneer ik met de muis IN de textarea klik:

Line: 160
Char: 1
Error: Object wordt verwacht
Code: 0
URL: (laat ik ff weg)

ik krijg de volgende foutmelding in IE wanneer ik OP de testlink klik:

Line: 1
Char: 1
Error: Object wordt verwacht
Code: 0
URL: (laat ik ff weg)

EDITReact veranderd de weergave van de code... bij &lt etc staan gewoon de <> haken die er horen te staan...

[ Voor 0% gewijzigd door klaaz op 02-08-2002 17:26 . Reden: react lijkt het tweede gedeelte van de code te veranderen... ]

[chris]

Wat er dus gebeurt is dat je de code voor < krijgt. dat is <
Ergens wordt die < en " omgezet naar de html-codes daarvoor. Hierdoor krijgt je script al die fouten. En oja, java is totaal anders als javascript. Lees ook de FAQ.

[klaaz]

React veranderd de < in &lt tussen de code tag's...

Zie maar:
<a href=JavaScript:addSmiley('test')>test</a>
<textarea cols='84' rows='10' name=tekst ONSELECT='storeCaret();' ONCLICK='storeCaret();' ONKEYUP='storeCaret();'></textarea>

Deze is gecopy/pasted vanuit het betreffende bericht, echter nu zonder Code tags

En nog es met:

code:

Zie maar:
<a href=JavaScript:addSmiley('test')>test</a>
<textarea cols='84' rows='10' name=tekst ONSELECT='storeCaret();' ONCLICK='storeCaret();' ONKEYUP='storeCaret();'></textarea>

Deze is gecopy/pasted vanuit het betreffende bericht, echter nu zonder Code tags

Hier staat dus exact hetzelfde

ff gezocht in bug forum:
Probleem is bekend:'<' en '>' in [code] block worden < en > (p0m/rml)//

[ Voor 0% gewijzigd door klaaz op 02-08-2002 17:33 . Reden: aanvulling: voorbeeld ]

[klaaz]

Maar nu even terug naar mijn probleem

Wellicht dat ie beter in W&G past inderdaad. Is nu puur Javascript. Toch?

[dusty]

*schopt de topic van P&W naar W&G

[Bosmonster]

Dan verander ik de topictitel ook maar ff.. want met Java heeft het in ieder geval niks te maken

[Bosmonster]

code:

var $textarea = {veldnaam};
function storeCaret () {
       if (formname.textarea.createTextRange) 
         formname.textarea.caretPos = document.selection.createRange().duplicate();
      }

En wat genereert dat ding, want hier valt niet zoveel aan te zien.. Je zegt dat hij niks genereert, dan is het een PHP/Template probleem.

[klaaz]

Gaat nu buiten de template om. Uiteindelijk genereerd index.php met behulp van index.tpl (normale HTML file) de pagina. De JavaScriptgedeeltes worden niet door de template gehaald of voorzien van variabelen daaruit.

Het is keurig overgenomen uit een ander test.html-etje die wel werkt. In de source van de pagina zie ik dat alles ok wordt weergegeven. Toch krijg ik die foutmeldingen in de browser.

RARA hoe kan dat. (uiteindelijke output heeft wel extensie PHP uiteraard)

[Bosmonster]

Klaaz schreef op 03 augustus 2002 @ 03:57:
Gaat nu buiten de template om. Uiteindelijk genereerd index.php met behulp van index.tpl (normale HTML file) de pagina. De JavaScriptgedeeltes worden niet door de template gehaald of voorzien van variabelen daaruit.

Het is keurig overgenomen uit een ander test.html-etje die wel werkt. In de source van de pagina zie ik dat alles ok wordt weergegeven. Toch krijg ik die foutmeldingen in de browser.

RARA hoe kan dat. (uiteindelijke output heeft wel extensie PHP uiteraard)

Maar er staat var $textarea = {veldnaam}

Ik neem aan dat {veldnaam} vervangen wordt met iets? Want Javascript is het niet.

[Annie]

Dat onderstaande niet werkt vind ik eigenlijk wel logisch:

code:

var $textarea = {veldnaam};
function storeCaret () {
       if (formname.textarea.createTextRange) 
         formname.textarea.caretPos = document.selection.createRange().duplicate();
      }

Zomaar een naampje of string in je object verwijzing gooien klopt natuurlijk niet. Je zal dan of moeten eval()-en of iets als document.forms['formname'].elements[textarea] moeten gebruiken.

Maar als ik het goed begrijp gebruik je dit niet meer en het je nu de naam van je textarea hard-coded in je JS staan, dus dat doet er niet meer toe. De foutmelding die je krijgt betekend meestal dat je een functie wil aanroepen die niet bestaat. Een typefoutje? Of een gewijzigde functienaam? Of wordt de js door een andere fout al helemaal niet goed geparsed? Zaken die je alvast zou kunnen bekijken.

Maar zoals Bosmonster al aangeeft zeggen de template stukjes ons niet al te veel als we niet weten welke waarden de PHP/template vars hebben. M.a.w. geef eens wat relevante source-code vanuit de browser.

[Bosmonster]

Overigens zit er een verschil in variabele namen.

$textarea != textarea

Dat loopt dus sowieso fout ongeacht de inhoud die gegenereerd wordt ({veldnaam})

[klaaz]

Code uit browser:

code:

<head>
<script language="JavaScript">
<!--
function storeCaret () { 
    if (formname.tekst.createTextRange) 
    formname.tekst.caretPos = 
    document.selection.createRange().duplicate(); 
    } 

function insertthis(thecode) { 
    if (navigator.userAgent.indexOf("Opera") == -1) 
        { 
        if (formname.tekst.createTextRange 
            && formname.tekst.caretPos) { 
            var caretPos = formname.tekst.caretPos; 
            caretPos.text = 
            caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? 
            thecode + ' ' : thecode; 
            document.formname.tekst.focus(); 
        } 
    else 
    formname.tekst.value = thecode; 
    storeCaret(); 
    document.formname.tekst.focus(); 
    
    } 
} 
//-->
</script>
</head>

Code in Body

code:

<a href=JavaScript:addSmiley('test')>test</a><br>
<textarea cols='84' rows='10' name='tekst' ONSELECT='storeCaret();' ONCLICK='storeCaret();' ONKEYUP='storeCaret();'></textarea>

Ik heb er al een paar uur naar gekeken en van alles geprobeerd. 'f ormname' = de naam van mijn gebruikte form. Form werkt verder na behoren, variabelen worden na submitten keurig opgesloagen in de MySql database. De naam 'tekst' is ook de naam van de textarea (hardcoded).

Bedankt voor jullie reacties tot dusver.

[Annie]

Het lijkt toch fout te gaan bij de object verwijzingen (formname.tekst). Ik ben even zo vrij geweest om je code aan te passen en deze lijkt het te doen.

js

PHP:

<script type="text/javascript">
function storeCaret(oElement)
{ 
    if (oElement.createTextRange)
    {
        oElement.caretPos = document.selection.createRange().duplicate();
    }
} 

function insertthis(thecode, oElement)
{
    if (navigator.userAgent.indexOf("Opera") == -1)
    {
        if (oElement.createTextRange
            && oElement.caretPos)
        {
            var caretPos = oElement.caretPos;
            if (caretPos.text.charAt(caretPos.text.length - 1) == ' ')
            {
                caretPos.text = thecode + ' ';
            }
            else
            {
                caretPos.text = thecode;
            }
            oElement.focus();
        }
        else
        {
            oElement.value = thecode;
        }
        storeCaret(oElement);
        oElement.focus();
    } 
} 
</script>

form

PHP:

<a href="javascript:insertthis('test', document.forms[0].tekst)">test</a><br />
<textarea cols='84' rows='10' name='tekst'
    onselect='storeCaret(this);'
    onclick='storeCaret(this);'
    onkeyup='storeCaret(this);'></textarea>

^{heb 't maar effe tussen [php] tags gezet, omdat de [code] niet zo geweldig werkt}

[klaaz]

O Annie.... ! Thanks! Ik dacht dat dit topicje al dood was... Ben blij dat je me er nog even mee hebt geholpen. Kan het helaas niet direct proberen, mijn PC is m'n eerste DVD aan het decoden. Vandaar dat ik nu even op mijn laptop werk.

[klaaz]

Ok, eindelijk kunnen testen. WERKT!

Nogmaals bedankt!