1
저는 Rails 3.1을 사용하고 Recaptcha를 설정하려고 시도 했으므로 양식에서 '제출'버튼을 클릭해야만 표시됩니다.Jquery가 Recaptcha와 함께 작동하지 않습니다.
제출이 클릭 될 때까지 Recaptcha를 숨기려면 아래의 Jquery 코드를 사용하고 있지만 작동하지 않습니다. 제발 내가 어디에서 실수를하고 있는지 알려주세요.
AMENDED_FORM.HTML.ERB 파일
<%= form_for(@post) do |f| %>
<% if @post.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved: </h2>
<ul>
<% @post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
I am a <%= f.text_field :title %> getting married in <%= f.text_field :job %> in <%= f.text_field :location %>, and looking for a wedding photographer. My budget is <%= f.text_field :salary %>.
</div>
<form>
<div id="first_button">
<button type="button" id="your_button" class="btn span6 large">Submit</button>
</div>
<div id="real_form">
<%= recaptcha_tags %>
<button type='submit'>Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#real_form').hide(); //this will hide the `real_form` div on page load
$('#your_button').click(function() {
$('#real_form').show(); // this will show the `real_form` on clicking of `any_button` button
});
});
</script>
<% end %>
생성 된 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weddoo!</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="70/JjhjToEdAoKm67QZAUTZHj2pA2F/mUKJGRIECfN0=" name="csrf-token" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="images/favicon.ico" rel="shortcut icon">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/posts/new">Weddoo!</a>
<div class="container nav-collapse">
<ul class="nav">
<li><a href="/posts/new">Home</a></li>
<li><a href="/posts">Jobs</a></li>
<li><a href="/pages/about">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="hero-unit">
<h1>Find wedding photographers with ease.</h1>
<br>
<p>Post your needs and sit back and wait to get responses.</p>
<br>
<form accept-charset="UTF-8" action="/posts" class="new_post" id="new_post" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="70/JjhjToEdAoKm67QZAUTZHj2pA2F/mUKJGRIECfN0=" /></div>
<div class="field">
I am a <input id="post_title" name="post[title]" size="30" type="text" /> getting married in <input id="post_job" name="post[job]" size="30" type="text" /> in <input id="post_location" name="post[location]" size="30" type="text" />, and looking for a wedding photographer. My budget is <input id="post_salary" name="post[salary]" size="30" type="text" />.
</div>
<form>
<div id="first_button">
<button type="button" id="your_button" class="btn span6 large">Submit</button>
</div>
<div id="real_form">
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge? k=6LdR788SAAAAAGvr99xGjlbkFVq3-hlCjjlrFX-s&error=expression"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdR788SAAAAAGvr99xGjlbkFVq3-hlCjjlrFX-s" height="300" width="500" style="border:none;"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/></noscript>
<button type='submit'>Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#real_form').hide(); //this will hide the `real_form` div on page load
$('#your_button').click(function() {
$('#real_form').show(); // this will show the `real_form` on clicking of `any_button` button
});
});
</script>
</form>
</div>
</div><!--/row-->
</div><!--/content-->
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"> </script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"> </script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
</body>
</html>
출력 HTML과 관련 JS를 jsfiddle.net에 게시하여 다른 사람들이이 문제를 볼 수 있도록하는 것이 좋습니다. 생성되는 태그는 예상 한 것과 다를 수 있습니다. – Straseus
@Straseus 위의 생성 된 코드를 추가했습니다. 이게 도움이되는지 알려주세요 – hikmatyar
로컬로 실행하고 Web Inspeactor를 보면 다음과 같은 주석이 나타납니다 : Uncaught ReferenceError : $ is not defined; $ (document) .ready (function() – hikmatyar