GoogleWebサイトOptimizerで追跡しようとしているajaxフォームがあります。フォームはメールを送信します。
<%= 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との競合であると想定しており、onclickイベントではなく、jsファイル内から関数を呼び出すことができると思いますが、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 -->
ボタンIDで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>