jquery ajax 호출 후 smarty를 렌더링하는 방법

Question

나는 훌륭한 기능을하는 gmail에서 연락처를 검색하기 위해 openinviter를 사용하고 있습니다. 그러나 ajax 호출로 jquery를 사용하면 연락처를 검색하는 양식을 제출할 때 smarty가 렌더링되지 않습니다. 똑똑한 것만으로는 내가하고 싶지 않은 페이지 새로 고침을 렌더링하는 것 같습니다. 그래서, 내 질문에 jquery 아약스 호출 후 어떻게 멋지게 렌더링 할 수 있습니다?

JQuery와 아약스 호출

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

당신의 가정에서 논리적 인 오류가 있습니다. jQuery를 (또는 다른 JS 프레임 워크)와 아약스 요청에 대한 답변이 때

스마티는 에만 페이지가 실제로로드 (또는 리로디드) 때 사용 있지만입니다. 기본적으로 변수 $contacts은 페이지가로드 될 때만 확인되지만, 은 아니요이 아닙니다. 자바 스크립트 코드의 일부 응답 이벤트 때문입니다.

아약스 기술을 사용하는 주요 이유 중 하나는 실제로 페이지를 다시로드하지 않는 것입니다.

두 더 나은 접근 방법 :

1. 당신의 HTML 컨테이너의 내용을 변경하여 자바 스크립트를 사용합니다. jquery manual section of .ajaxComplete()에는 수행 방법에 대한 몇 가지 예가 있습니다 ( ). 빈 div 컨테이너를 선언하고 원하는 데이터로 을 채 웁니다.
2. 아약스 (fetch()-method)를 통해 전체 스마트 템플릿을 가져 와서 구할 수도 있습니다. 이렇게하면 프로그램 논리와 레이아웃을 더 잘 구분할 수 있습니다.