I'd like to have a link under simple_captcha image. Click to link should reload simple_captcha image. I can't find in gem any information about it. How can I update it? Thanks for advance.
I have also faced the same issue then after i find the solutionas mentioned below .
As i have used jquery to refresh the captcha div this is the javascript code i have used to refresh the captcha .
$(document).ready(function() {
$(".refresh_image").click(function() {
$('#captcha').load("/users/dashboard/refresh_captcha_div");
});
});
After this put the view page codes for captcha in a partial file and render the partial everytime when the refresh div (any link or button) is clicked by the above codes pasted . It will call a action there you need to render the partial only . (here refresh_captcha_div in users/dashboard controller). below are the view files codes of mine for reference .
<div id ="captcha">
<%= render "simple_captcha_institute"%>
</div>
<%=link_to (image_tag "/assets/refresh_image.png"),"#", :class => "refresh_image"%>
This is the view page codes where i am rendering the partial and then the codes in the partial are
<div id="refresh_captcha">
<%= show_simple_captcha(:object=>"institute", :label => "Type The Above Characters..") %>
</div>
Related
I have a one page design and so I want my Nav-bar items to link to the relevant sections of the page. If I type the links that output to the browser manually they work fine, but when clicking on the links they generate an empty page (except for a javascript script that is in the footer.
Tried using different rails helpers and also tried using plain old HTML. Same problem happens when I click the links
This is the link in: /layouts/_navbar.html.erb
<li class="nav-item"><%= link_to "Menus", root_path(anchor: "menus"), class: 'nav-link' %></li>
This is the target in /pages/home.html.erb
<section class="site-section" id="menus">
Expected result is for address to show : 'localhost:3000/#menus'
and for the page to move to menus section
Actual result is the same address but the page is blank apart from text : '2019' (generated from a javscript in the footer)
If I manually type 'localhost:3000/#menus' it works fine!
Turbolinks was causing the issue, which I obviously need to read up on.
Updated my link_to's like so:
<%= link_to "Eat", root_path(anchor: "menus"), data: { turbolinks: false }, class: 'nav-link' %>
I was tearing my hair out with this problem too; any page I navigated to using Turbolinks just rendered "2020" (i.e. the current year) in plan text with nothing else on the page.
It turns out that the bootstrap template I'd used in my project included this in the footer HTML:
<footer>
...
Copyright ©<script>document.write(new Date().getFullYear());</script>
...
</footer>
... of course the issue was:
document.write(new Date().getFullYear());
... so I just changed it to:
<footer>
...
Copyright ©<%= Date.current.year %>
...
</footer>
Hi In my rails application on one page I have links which links to another page which will call some APIs, so that page loads slowly. I need some indication till the page renders, how to accomplish this? I have searched most of them says solution for AJAX request but here its not a ajax request.....
Add in your application.js
$(document).ajaxStart(function(){
showloader()
});
$(document).ajaxStop(function(){
hideloader()
});
function showloader(){
$(".main-loader").show()
}
function hideloader(){
$(".main-loader").hide()
}
Add in your application.html.erb
<div class="main-loader" style="display: none;">
<div class="loader-div"> <%= image_tag "loader.gif" %> </div>
</div>
And Also Add loader image in your assets images folder
I have a problematic to render my views in my rails app.
I try to create a home page who load each tools of my app (5 - 6 different) but I want to allow users to call them one by one and without reloading the page (like some saas apps).
I tried with a welcome/index.html.erb page that render each views with ajax:
<button class="button1"></button>
<button class="button2"></button>
<button class="button3"></button>
<%= render "tools1/index %>
<%= render "tools2/index %>
<%= render "tools3/index %>
...
How could I do to show only tools 1 if the user click on button1, and then hide tools1 and show tools2 when the user click on button2, etc. ?
Another question, is it an efficient way to do that ?
Edit:
My fault, it wasn't clear. The point is that I don't want to render each page at the beginning, the perfect stuff will be to load (not just show) them page by page, just when the user call them
Thanks
A quick AJAX loader example
Add some links/buttons to your HTML:
<a class="ajax-load" href="/url1">Page 1</a>
<a class="ajax-load" href="/url2">Page 2</a>
<a class="ajax-load" href="/url3">Page 3</a>
<div class="ajax-content"></div>
Add this jQuery code:
$(document).ready(function(){
$('.ajax-load').on('click', function(e){
e.preventDefault();
$('.ajax-content').load($(this).attr('href'));
});
});
Now, when users click on any link, the content will be AJAX loaded.
Previous answer
Since you are rendering your pages in your view, you don't need to ajax load them again. I would suggest using some jQuery plugins to do this for you.
For example: tabs or accordion.
I am attempting to place the sign in, sign up and edit forms (from devise) into Bootstrap modals using partials. I have successfully done this by creating partials for the forms (wrapped in the modal code) and rendering them in application.html.erb as follows:
<%= render 'articles/sign_up_modal' %>
<%= render 'articles/sign_in_modal' %>
<%= render 'articles/edit_profile_modal' %>
At the top of application.html.erb I have:
<script type="text/javascript"> $(function () { $("#sign_up").modal({show:false });</script>
<script type="text/javascript"> $(function () { $("#sign_in").modal({show:false });</script>
<script type="text/javascript"> $(function () { $("#edit_profile").modal({show:false });</script>
Where "sign_up", "sign_in" and "edit_profile" represent the id's of the modals from the partials. The modal is then displayed by clicking a button in the _header.html.erb partial:
<%= link_to '<button type="button" class="btn btn-primary">Edit Profile</button>'.html_safe, "#edit_profile", "data-toggle" => "modal" %>
Everything works great except the Edit Profile modal form does not prefill the form with the appropriate values unless I am also on the edit page when I click the button to display the modal. How can I get the Edit Profile modal form to prefill the users data no matter which page they are on in the background?
Does this make sense? Please tell me how I might clarify my question. Thanks!
The answer was provided to me by u/alec5216 on reddit.
He said:
Take a look at the devise source.
https://github.com/plataformatec/devise/blob/master/app/views/devise/registrations/edit.html.erb
You'll see the form is bound to the "resource" variable which is going to be an instance of a user model. I bet if you use current_user in the partial instead of resource you'll have the desired effect.
This worked. See HERE for the full conversation.
In this case you will probably have to make an AJAX call to fetch the required data.
The data itself can either be JSON (for client-side rendering) or the complete html form rendered with the layout: false option. I usually go for the former because it is faster and easier to implement, unless your project is a single-page js application.
You can find more information on bootstrap ajax modals here on StackOverflow.
I am trying to use Simplemodal as a pop up box on an index page and put a form to add a new user inside it. It's not working, says there is an undefined method. How do I make this work? Does it have to do with :remote?
EDIT - Here's some code to hopefully explain a little better - from index.html.erb
<div id='basic-modal'>
<input type='button' name='basic' value='Demo' class='basic'/>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<%= render 'form' %>
</div>
My form is the standard scaffold form, my Client model has a place to add some basic information about a client. My controller is the standard controller that is generated with scaffold, and my application.html.erb adds the required .js files. When I take the
<%= render 'form' %>
out and put in just plain text, it works just fine. Does that help?
Although I haven't found the answer to using simplemodal for a modal box, I found this tutorial at Nettus which uses modalbox and facebox:
http://net.tutsplus.com/tutorials/ruby/how-to-build-an-unobtrusive-login-system-in-rails/
With a few changes for rails 3, this helped me put a form inside a modal box with no problems.