2016-08-13 135 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()