Have page have list with link to show item.
when I click back to list item from show page, it goes back to list, flashes show page and comes back to list.
<div data-role="content">
<ul data-role="listview" class="nearbyList">
<% #places.each do |place| %>
<li>
<a href="<%= url_for :action => :show, :id => place.object %>">
<%= place.name %><br />
</a>
</li>
<% end %>
</ul>
</div>
then link back on show:
Back
I had the same issue. This was only true on my Android phone. Using Chrome on my PC did not have this glitch.
The only solution I found was to use a pop up transition, or not to use transitions at all.
I'm not sure if I'm answering your question, but I've tried to set
"hashListeningEnabled" to false and the page doesn't flash back.
$(document).bind("mobileinit", function () {
$.extend($.mobile, {
hashListeningEnabled: false
});
});
Related
I am newbie with Rails and trying to make a simply Rails program and meet this problem.
I tried to make 3 buttons named Course, Location and Faction as you can see in this photo. Here is my code
<body>
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Course 1</li>
<li>Location</li>
<li><% link_to "faction", pages_faction_path %>Faction</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Course 1</li>
<li>Location</li>
<li><% link_to "faction", pages_faction_path %>Faction</li>
</ul>
<%= yield %>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, options);
});
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script> </body>
I wrote this code to make the button which named "Course", "Location", and "Faction". And I want when I click to the button "Location" and "Faction", it will link to "location page" and "faction page".
The button Location is ok, but the button Faction does not work. When I click on it, nothing happened. It only show the button.
Could you please give me some ideas to make this button work as well? Thank you very much.
You need an = after the <%. Just to be clear <%= will display something <% just runs some Ruby code.
So just adjust the code to include <%= in place of <% for those links.
<li><%= link_to "faction", pages_faction_path %>Faction</li>
I have a simple two tab layout. First tab shows details whereas the second tab shows a search box and search results. When a user navigates to the page I wish to show the first tab however when a search is performed (from the second tab) I wish the show the page displaying the second tab.
I had tried the code:
<ul class="nav nav-tabs">
<li class="<%= 'active' if !params[:search] %>">
Details
</li>
<li class="<%= 'active' if params[:search] %>">
Search
</li>
</ul>
The code above displays the correct tab however not the corresponding div so if a search is performed the "Search" tab is active however the "Details" div is displayed.
OK, I did not realise I had to set the active class for both the "li" item and the corresponding "div" item. Works now.
https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
<div class="tab-content">
<div class="tab-pane <%= 'active' if !params[:search] %> fade in" id="details">
...
</div>
<div class="tab-pane <%= 'active' if params[:search] %>" id="search">
...
</div>
</div>
I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.
I have a mobile page for my app that uses the jquery mobile "collapsible" data-role to hide Microposts (Hartl's tutorial) until the user clicks them to expand.
I also use a modified paginate to render the paginate links.
https://gist.github.com/jugyo/3135120
<div data-role="collapsible">
<h3>Show Microposts (<%= #user.microposts.count %>)</h3>
<ul data-role="listview">
<%= render #microposts %>
</ul>
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
previous_label: 'Prev',
next_label: 'Next'
%>
</div>
My question is: how do I add an event to the paginate click? I want to have the list collapsed (the default), with data-role="collapsible" when the page is first loaded, but when I click next (or later, prev) I want the collapsible container to add the data-collapsed="false" attribute so that the list is open.
(It doesn't make sense to click next and go to a collapsed list again)
Do I put it in the rb that has the paginate code? If so, how do I refer to the page elements? Or do I put some jquery somewhere...?
Any assistance appreciated.
You can add a class or id to your pagination. I'll add an id :
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
id: 'my_pagination',
previous_label: 'Prev',
next_label: 'Next'
%>
Then give your main div some kind of identifier :
<div data-role="collapsible" id="my_list">
Now you can activate it manually with jQuery :
$("#my_pagination").click(function() {
$("#my_list").data("collapsed", $("#my_list").data('collapsed') == 'false' ? 'true' : 'false')
});
I'm a front-end web developer working on my first serious rails project (v3.2.8). I've successfully installed Foundation version 3.2.0 using the gem.
I am having trouble with the navigation toggle, which appears on smaller screen sizes and is used to expand and collapse the navigation links. When I click on it, it does nothing.
(You can see the documentation for the responsive zurb nav on their website: http://foundation.zurb.com/docs/navigation.php).
The code in question is:
<nav class="top-bar">
<ul>
<li class="toggle-topbar">
</li>
</ul>
<section>
<ul class="right">
<li class="has-dropdown">
<%= link_to "#{#user.email} | #{#user.credits_count}",
dashboard_path, :class => 'first-link' %>
<ul class="dropdown">
<li>
Settings<i class="icon-cog"></i>
</li>
<li>
Downloads<i class="icon-cloud-download"></i>
</li>
<li>
Subscription<i class="icon-calendar"></i>
</li>
<li>
<%= link_to 'Purchase Credits <i class="icon-money"></i>'
.html_safe, credits_path %>
</li>
<%= render "shared/menu_bar" %>
</ul>
</li>
</ul>
</section>
</nav>
The odd part is, when I remove:
<ul>
<li class="toggle-topbar">
</li>
</ul>
... Everything works as it should, but the first link:
<%= link_to "#{#user.email} | #{#user.credits_count}",
dashboard_path, :class => 'first-link' %>
... appears twice - Once where the actual toggle arrow should be and again once you click it to expand the navigation links.
Why would the navigation work properly when the toggle is not in the code and malfunction when it is?
Any help would be greatly appreciated.
I found this answer on another forum.
https://groups.google.com/forum/#!topic/foundation-framework-/-5F_kQWfNQ4
Put the following in the html:
<script src="http://foundation.zurb.com/public/assets/marketing_docs.js"></script>
And at least for me, the dropdown now works...
EDIT: as of Foundation 5 the marketing_docs file is no longer available
I'm currently trying to understand why the toggle isn't working.