如何在jquery ajax调用后呈现smarty

Question

I am using openinviter to retrieve contacts from gmail which works great.However, when I use jquery with ajax call to submit a form that retrieves contacts smarty does not render. It seems that smarty only renders a page reload which I don't want to do. So, my question is how can I make smarty render after jquery ajax call?

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>

Answer 1

There is a logical error in your assumption.

Smarty is only used when the page is actually loading (or reloaded), but not when an ajax request with jQuery (or other js frameworks) is answered. Basically the variable $contacts will only get checked when the page loads, but not because of some response events in your javascript code.

One of the main reasons of using ajax-techniques is actually avoid reloading pages.

Two better approaches:

1. Use your javascript to change the content of your html containers. The jquery manual section of .ajaxComplete() has a few examples on how to do it. Just declare some empty div-containers and fill them with your desired data.
2. You can also fetch a whole smarty-template via ajax (fetch()-method) and return it. This way you'll archieve a better separation between program logic and layout.