Load smarty tpl with jquery

i would like to load a smarty tpl partial insid开发者_如何转开发e a div with jquery, i got:

js:

function load_new_partial() {

jQuery("#ajax_zone").fadeIn('slow').load('/views/partials/partil.tpl');

}

inside tpl caller:

<a href="#" onclick="load_new_partial();">{$language_array.lang_new_campaign}</a>
<div id="ajax_zone">initial div yadadada</div>

called tpl:

{$user_name_smarty}{$account_array}

I have no problem displaying partial.tpl on clicked, problem is that loaded partial.tpl doesn't seem to get any of the variables i had already assigned to smarty.

What am i doing wrong?, how do i load a partial and make it have access to the already established smarty variables?

$smarty->assign('user_name_smarty', $user_name_smarty);

Thanks in advance.

If you load it like this, you are loading it as a text-file. What you want it to request a PHP file, that uses that TPL as a template.

Normally:

• Request PHP
• parse TPL (do stuff with variables)
• make html
• Show in browser

Now:

• Request PHP
• parse TPL (if the PHP uses a tpl)
• make html
• show in browser
• browser parses JQuery
• load extra tpl (doesn't get parsed!)

As you can see, there is no "parse tpl" stap after you load the extra tpl

You could request a PHP file with ajax, and add the result of that request to your div.

Check it... it IS possible to do this.

First on the server side:

    if ($_GET['action'] == "educational_resources"){

    if(isset($_GET['kind'])){
        header("Content-Type: text/xml");
        header("Cache-Control: no-cache");
        header("Pragma: no-cache");
        $smarty->compile_check = true;
        $smarty->force_compile = 1;
        $kind = $_GET['kind'];
        $reply = true;
        if($kind == "get_classroom_resources"){
            $class_id = $_SESSION['user']['class_id'];
            $classData = $curriculum->get_class_data($class_id);
            $units = $curriculum->get_units();
            $chapters = $curriculum->get_modules();
            $smarty->assignGlobal('classData', $classData);
            $smarty->assignGlobal('units', $units);
            $smarty->assignGlobal('chapters', $chapters);
            $smarty->display('classroom.tpl');
        }
    }

    if(!isset($reply)){
        $file[1] = "educational_resources.tpl";
        $file[2] = "footer.tpl";
    }
}

I setup my action processor to contain all of my ajax request handlers too. If "$_GET['kind'] is set I know this is an ajax request. So, if $kind is set, set header configuration and tell smarty to force compile (this is what ensures parsed html is returned).

Next make your tpl file.

<h1>Period: {$classData.period} - {$classData.description}</h1>
<h4>{$classData.name} - {$classData.city}, {$classData.state}</h4>
<p>The content area below shall povide a convienient way to browse all the curriculum, and provide a detailed view that summarizes the student's performance
as he/she progresses through each chapter.</p>
<ul>
    {foreach from=$units name=units key=k item=i}
        <li>
            Unit {$smarty.foreach.units.iteration} - {$i.title}
            <ul>
                {foreach from=$chapters name=chapters key=c item=v}
                    {if $i.id == $v.unit_id}
                        <li>Chapter {$smarty.foreach.chapters.iteration} - {$v.descriptor}</li>
                    {/if}
                {/foreach}
            </ul>
        </li>
    {/foreach}
</ul>

Finally, in your jQuery event handler make the ajax call (you want to return html):

$('#classroom').css({'background-image': 'url("./images/classroom.png")', 'margin': '0 .5em 0 0'})
                .live('click', function(event){
                    //window.location="?action=classroom";
                    $('#stupid_wrapper').css({'width': '106px', 'overflow': 'auto', 'float': 'left', 'margin': '0'});
                    $('#stupid_table').css({'padding': '1em', 'width': '80px'});
                    $('#classroom').css({'margin': '0 0 .5em 0', 'width': '80px', 'height': '54px', 'background-image': 'url("./images/classroom_icon.png")'});
                    $('#project').css({'margin': '0 0 .5em 0', 'width': '80px', 'height': '54px', 'background-image': 'url("./images/project_icon.png")'});
                    $('#reportcard').css({'width': '80px', 'height': '54px', 'background-image': 'url("./images/reportcard_icon.png")'});
                    $('.cell').css({'float': 'none'});

                    var classroomHTML = '<div id="icon_panel"></div>';
                    $(classroomHTML).appendTo('#content');
                    $('#icon_panel').css({'float': 'left', 'width': '75%', 'margin': '0 0 0 1em', 'background-color': '#f6f6f6', 'border': '1px solid #cdcdcd', 'padding': '2em', 'border-radius': '1em', '-moz-border-radius': '1em'})
                    getClassroomResources();
                });

function getClassroomResources(){
                    $.ajax({
                        type: 'GET',
                        url: '?action=educational_resources&kind=get_classroom_resources',
                        dataType: 'html',
                        beforeSend: function(xhr){
                            xhr.setRequestHeader("Ajax-Request", "true");
                        },
                        success: function(reply){
                            $('#icon_panel').html(reply);
                        }
                    });
                    return false;
                }

Thank IBM for this! http://www.ibm.com/developerworks/opensource/library/wa-aj-smarty/index.html?ca=drs-