CODEWITHSUNDEEP
javascriptjquerysmarty
user2274691
user2274691

Reputation: 15

Using Javascript to load .tpl displays it wrong

I am trying to load some code with Javascript on a button click. The problem is that some of the code is just displayed instead of executed.

This is the file reload.tpl I am trying to load:

<div class="online-players">
  {% for player in players_online %}
  <div class="online-player-heads">
    <a href="?page=player&name={{ player.getName }}">
        {{ player.getPlayerHead(64, 'img-polaroid', true)|raw }}
    </a>
  </div>
{% else %}
  <div class='force-center'><em>{{ 'no_players_online'|trans }}</em></div>
{% endfor %}
</div>

I use this to load the code:

<script> 
    $(document).ready(function() {
        $('#button2').click(function() {
            $('.online-players').fadeOut('slow', function() {
                $(this).load('templates/default/views/reload.tpl', function() {
                    $(this).fadeIn("slow");
                });
            });
        });
    });
</script>

Expected:

https://i.sstatic.net/CRMGn.png

What actually is happening:

https://i.sstatic.net/8UvG7.png

Anyone knows why it's doing this? When I am not trying to load through a script it's working just fine. but as soon as I try the .load, it just doesnt display right.. Help? :)

Upvotes: 1

Views: 2765

Answers (2)

uiliands
uiliands

Reputation: 26

In case you did not discover by yourself, this is what you need to do:

Change target page on jquery load to a php file (in order to proper server-side handle):

<script> 
$(document).ready(function() {
    $('#button2').click(function() {
        $('.online-players').fadeOut('slow', function() {
            $(this).load('reload.php', function() {
                $(this).fadeIn("slow");
            });
        });
    });
});
</script>

Inside reload.php file:

require_once("./libs/Smarty.class.php");
$smarty = new Smarty;
$smarty->display("templates/default/views/reload.tpl");

I hope this will help you. Regards,

Upvotes: 1

user2417483
user2417483

Reputation:

smarty is a server-side templating engine for PHP. You can either use AJAX to call the file and let php/smarty handle the conversion to html or make a copy of the file and convert it to javascript so it works withing the browser.

Upvotes: 0

Related Questions