2016-08-13 55 views
1

我試圖在twig中嵌入自定義mailchimp表單,這樣當用戶單擊submit按鈕時,來自mailchimp的響應將替換div中的內容。用json對象的內容替換提交塊的內容

我使用的是Gantry5,我已經成功實現了這個表單,當用戶點擊提交按鈕時,我從mailchimp服務器得到響應。

我遇到的問題是,不是替換塊中的內容,而是刷新頁面,然後以原始格式顯示json對象。

twig低於:

{% extends '@nucleus/partials/particle.html.twig' %} 

{% block particle %} 

    {% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %} 

    {% if particle.headtext %}<div class="g-newsletter-headtext">{{ particle.headtext|raw }}</div>{% endif %} 

    <div id="mc_embed_signup" class="g-newsletter {{ particle.class|e }}"> 

     <form class="g-newsletter-form validate" id="mailchimp-subscribe" action="//{{ particle.baseurl|e }}" method="POST"> 

     <input type="hidden" name="u" value="{{ particle.uuid|e }}"> 
     <input type="hidden" name="id" value="{{ particle.lid|e }}"> 

     <div id="mergeTable" class="mergeTable"> 
      <label for="MERGE0">Email Address <span class="req asterisk">*</span></label> 
      <input class="g-newsletter-inputbox required email" type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" placeholder="{{ particle.inputboxtext|raw }}"> 
      <input type="submit" value="{{ particle.buttontext|raw }}" name="submit" id="mc-embedded-subscribe" class="g-newsletter-button button {{ particle.buttonclass|e }}"> 
     </div> 

     <input type="hidden" name="ht" value="{{ particle.htvalue|raw }}"> 
     <input type="hidden" name="mc_signupsource" value="hosted"> 

     </form> 
    </div> 

<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer> 
    $('#mailchimp-subscribe').submit(function(e) { 
    var $this = $(this); 
    $.ajax({ 
     type: "GET", // GET & url for json slightly different 
     url: "//{{ particle.baseurl|e }}-json?c=?", 
     data: $this.serialize(), 
     dataType: 'json', 
     contentType: "application/json; charset=utf-8", 
     error: function(err) { alert("Could not connect to the registration server."); }, 
     success: function(data) { 
      if (data.result != "success") { 
       // Something went wrong, parse data.msg string and display message 
      } else { 
       // It worked, so hide form and display thank-you message. 
      } 
     } 
    }); 
    return false; 
    }); 
</script> 
{% endblock %} 

我從服務器獲取的響應是如下所示:

{"result":"success","msg":"Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you."} 

我想要做的是要麼格式化的響應替換塊內容或以模式打開格式化的響應。

我嘗試添加data-uk-lightbox data-lightbox-type="iframe"button(我用的UIKit」,並且模式打開了,但我只得到一個loading指標,從來沒有刷新,甚至未格式化的JSON響應。

請指教。

回答

-1

您是否試過這款?

e.preventDefault()