XF 1.5 Javascript in templates.

[son et lumiere]

I'm having a bit of a problem. I can't get any javascript to run in a template.

For example:

<div id="jsDataDump"

    LegacyRep = "{$visitor.customFields.LegacyRep.no}"
    DisplayRep = "{$user.customFields.RepDisplay.no}"
    UserID = "{$user.user_id}"
    Username = "{$user.username}"
    TotalRep = "{$user.xf_bdreputation_given}"
   
    ><xen:comment>This div is converting xenforo variables into javascript variables</xen:comment>
</div>

<p id="DataSpew">test</p>

<script>

var LegacyRep = $(#jsDataDump).attr('LegacyRep');
var DisplayRep = $(#jsDataDump).attr('DisplayRep');
var UserID = $(#jsDataDump).attr('UserID');
var Username = $(#jsDataDump).attr('Username');
var TotalRep = $(#jsDataDump).attr('TotalRep');

document.getElementById("DataSpew").innerHTML = TotalRep;

</script>

At first I tried this, just to see what it would spit out, but it didn't work.

So then I tried to simplify it:

<p id="test"></p>

<script>
document.getElementById("test").innerHTML = "Anything?";
</script>

...and it still didn't work!

This is on a custom template which I'm calling inside message_user_info. I even tried placing the js in page_container's head and body but nothing works. I tried wrapping it in a function, no change.

What am I doing wrong?

 

[Arty]

You are running that script immediately, while page is being loaded. That means document hasn't finished parsing yet and #test is most likely not available yet.

Also in first block you are using jQuery when its not available. jQuery is loaded in footer, your code is placed in middle of page. Then you forgot quotes for strings such as $('#jsDataDump')

Move your script into xen:container:

<xen:container var="$myCustomCode">
<script>
var TotalRep = $('#jsDataDump').attr('TotalRep');
document.getElementById("DataSpew").innerHTML = TotalRep;
</script>
</xen:container>

then add it before </body> in page_container: {xen:raw $myCustomCode}
Also its not a good idea to pollute global space with your variables. Wrap your code in function:

<xen:container var="$myCustomCode">
<script>
$(document).ready(function() {
    var TotalRep = $('#jsDataDump').attr('TotalRep');
    document.getElementById("DataSpew").innerHTML = TotalRep;
});
</script>
</xen:container>