Оптимизатор веб-сайта Google с рельсами и формой jquery/ajax (отслеживание события)

У меня есть форма Ajax, которую я пытаюсь отследить с помощью Оптимизатора веб-сайта Google. Форма отправляет электронное письмо.

<%= f.email_field :email, :placeholder => "Enter your email address", :size => 40 %>
  <%= f.submit '', :class => 'subscriberSubmit', :id => 'subscriber_submit', :onclick => "doGoal(this);return false;" %>
<p>

<input id="subscriber_email" name="subscriber[email]" placeholder="Enter your email address" size="40" type="email">

Мой файл js.erb:

$('.loadingImage').fadeOut();
$("#subscriber_submit").removeClass("subscriberSubmitInactive").addClass("subscriberSubmit");
$('#email_form').before("<div id=\"email_sign_up_failure\"><p>Uhm, something's wrong. Mind trying again?</p></div>");

Форма работает нормально, пока я не добавлю вызов onclick для установки маяка GWO, он отправляет меня по неопределенному маршруту. Я предполагаю, что конфликт связан с jQuery, и я полагаю, что, возможно, я могу вызвать функцию из моего js-файла, а не в событии onclick, но javascript очень нов для меня, и я не уверен, как вызвать функцию из внутри jQuery, который сам по себе находится в другом фрагменте javascript:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['gwo._setAccount', 'UA-1195012']);
  function doGoal(that) { 
    try {
  _gaq.push(['gwo._trackPageview', '/136300081/goal']);
  setTimeout('document.location = "' + that.href + '"', 100) 
    } 
    catch(err){} 
   }
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- End of Google Website Optimizer Tracking Script -->

Я попробовал событие нажатия jQuery на идентификатор кнопки, но это не сработало.

РЕДАКТИРОВАТЬ

<form accept-charset="UTF-8" action="/subscribers" class="new_subscriber" data-remote="true" id="new_subscriber" method="post">
<script> 
 $(function() {
    $( "#subscriber_submit" ).click(function () {
        $(this).removeClass("subscriberSubmit").addClass("subscriberSubmitInactive");
        $('.loadingImage').fadeIn();
    });
});
</script> 

<p id="email_form"> 

<label for="subscriber_email">Email</label><br /> 
<input id="subscriber_email" name="subscriber[email]" placeholder="Enter your email address" size="40" type="email" /> 
  <input class="subscriberSubmit" id="subscriber_submit" name="commit" type="submit" value="" /> 
<p> 

</form> 
</div>
Источник

2 ответа

Решение

Я просто положил _gaq.push(['gwo._trackPageview', '/136300081/goal']); в моем вызове jQuery после click слушатель событий.

Источник

Вы можете не использовать кнопку отправки, но использовать обычную кнопку. Может случиться, что форма будет отправлена ​​до того, как ваш JS завершит выполнение. Что вы можете сделать, это отправить форму в коде в конце вашего события JS click.

Источник
Другие вопросы по тегам