Question

我想用jquery在div中加载一个聪明的tpl部分，我得到了：

JS：

function load_new_partial() {

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

}

在tpl调用者中：

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

叫做tpl：

{$user_name_smarty}{$account_array}

我点击显示partial.tpl没问题，问题是加载的partial.tpl似乎没有得到我已经分配给smarty的任何变量。

我做错了什么？，如何加载部分内容并使其能够访问已经建立的智能变量？

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

提前致谢。

Answer 1

如果您像这样加载它，则将其作为文本文件加载。您希望它请求一个PHP文件，它使用该TPL作为模板。

通常：

请求PHP
解析TPL（用变量做事）
制作HTML
在浏览器中显示

现在：

请求PHP
解析TPL（如果PHP使用tpl）
制作HTML
在浏览器中显示
浏览器解析JQuery
加载额外的tpl（未解析！）

正如您所看到的，加载额外的tpl

后没有“解析tpl”

您可以使用ajax请求PHP文件，并将该请求的结果添加到div。

Answer 2

检查......可以这样做。

首先在服务器端：

    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";
    }
}

我设置了我的动作处理器以包含我的所有ajax请求处理程序。如果设置了“$ _GET ['kind']，我知道这是一个ajax请求。所以，如果设置了$ kind，设置头配置并告诉smarty强制编译（这是确保返回解析后的html）。

接下来制作你的tpl文件。

<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>

最后，在你的jQuery事件处理程序中进行ajax调用（你想返回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;
                }

感谢IBM！ http://www.ibm.com/developerworks/opensource/library/wa-aj-smarty/index.html?ca=drs-

使用jquery加载smarty tpl

2 个答案: