如何在jquery ajax调用后呈现smarty

时间:2012-07-15 03:40:27

标签: php jquery ajax smarty

我正在使用openinviter从gmail检索联系人工作得很好。但是,当我使用带有ajax调用的jquery来提交检索联系人的表单时,smarty无法呈现。似乎smarty只渲染了一个我不想做的页面重新加载。所以,我的问题是如何在jquery ajax调用之后进行智能渲染?

jquery ajax call

$(document).ready(function(){
 $('input[name="Submit"]').click(function() { 
 var query = $('#frmContact').serialize();
  $.ajax({type: "POST",url: "google_friends.php",data: query,cache: false,success:function (html) $('#errid').html('<span style="font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#FF0000;">'+html+'</span>').show();}});        
    return false;});});
</script>

    <div>
    <!--- Smarty code that needs to render after jquery ajax call -->
    {if count($contacts) == 0 }
     <span id="errid" >{$msg}</span>
       <p>
     <!-- Form that is used by jquery ajax -->

    <form class="Form StaticForm" id="frmContact" action="" name="frmContact" method="post">
    <input type="hidden" name="provider_box" value="gmail" />
                <ul>
                    <li>
                       <input type="text" name="email_box" value="email" onBlur="if      (this.value=='') this.value='email';" onFocus="if(this.value=='email') this.value='';" />
                    </li>
                    <li>
                       <input type="password" name="password_box" value="password" onBlur="if(this.value=='') this.value='password';" onFocus="if(this.value=='password') this.value='';"  />
                    </li>

                    <li class="noBorderTop"><input class="Button WhiteButton Button18 trueB" type="button" value="Submit" name="Submit" />
                        <label>
                            &nbsp;</label>
                    </li>
                </ul>
                </form>       
    </p>
         <!-- smarty code that needs to render after ajax call -->
         {else}
         <span id="errid" ></span>
          <p>
         <form class="Form StaticForm2" action="" name="invtfrm" method="post">
               <ul>
                    <li style="float:left;margin-left:120px;">                          
                    <input type="checkbox" name="checkall" onClick="return doCheckAll();" style="vertical-align:0" />&nbsp;Select All

                    </li>
                    <li style="float:left;"><div class="box-dividerCenter1 gradient"></div></li>  
             <!-- smarty code that needs to render after ajax call -->   
             {foreach from=$contacts key=fkey item=fval}

                <li style="float:left;margin-left:120px;">                          
                    <input type="checkbox" name="email[]" value="{$fkey}"  style="vertical-align:0"/>&nbsp; 
            <!-- smarty code that needs to render after ajax call -->
                {$fval}&nbsp;&nbsp;&nbsp;&nbsp;{$fkey}

                    </li>   
                       <li style="float:left;"><div class="box-dividerCenter1 gradient"></div></li>     
           {/foreach}
            <li class="noBorderTop"><a class="Button WhiteButton Button18" href="#" id="sbmtbtn" ><strong>Invite</strong><span></span></a></li>
    {/if}
    </ul>
    </form>

1 个答案:

答案 0 :(得分:2)

您的假设存在逻辑错误。

当页面实际加载(或重新加载)时,Smarty仅 ,而当回答jQuery(或其他js框架)的ajax请求时,。基本上变量$contacts只会在页面加载时被检查,但不是,因为你的javascript代码中有一些响应事件。

使用ajax技术的一个主要原因实际上是避免重新加载页面。

两种更好的方法:

  1. 使用您的javascript更改html容器的内容。 jquery manual section of .ajaxComplete()有几个例子 如何做到这一点。只需声明一些空的div容器并填充 他们提供您想要的数据。
  2. 您还可以通过ajax(fetch()-method)获取整个智能模板并将其返回。通过这种方式,您可以在程序逻辑和布局之间实现更好的分离。