I would like to show a customized 'upgrade your browser' modal dialog to users if they visit any page on my website from an old browser.
I know how to detect the browser but - I cannot figure out where to put the code to show the modal and how to do it. Can ApplicationController before_filter render a js that calls .modal('show')? Any other way? Pure js?
This would be most appropriately solved using Javascript.
Detect the browser feature you need using Modernizr
If the Modernizr test fails, display a popover of some kind
Add modernizr.js to your project and insert this javascript into your application.js:
Modernizr.load([
{
test: Modernizr.cssgradients,
nope: function () { alert('Sorry, your browser does not support a required feature of this site. Please upgrade or use another browser.'); }
}
]);
Change "Modernizr.cssgradients" to whatever feature you need.
If you don't want to have this as a bare "alert", you could use something like noty.js, replacing the alert method above with:
noty({text: 'Sorry, your browser does not support a required feature of this site. Please upgrade or use another browser.'});
Place the div/modal in your layout file (app/views/layouts/application.html.erb, most likely), and wrap it in a rails conditional based on your needs, like so:
<body>
....
<% if (old_browsers.include?(current_browser) %>
<div class="old-browser-modal">
....
</div>
<% end %>
</body>
Related
I have a rails site running done using the bootstrap. There's a mobile and tablet site for the same. Mobile and tablet site have completely same feature apart from having a slightly different index page.
I have used this railscast to load the app on the mobile device.
Is it possible to have another url like used in the article for tablets.
For eg for mobile, localhost:3000/pages/home?mobile=0
This is what can be used. Can we use something like this for tablets?
Like we write media queries for CSS, Is it possible that I write different HTML in mobile.html file and load that chunk of code for tabs, As I need a small change to the index page only.
Please suggest.
It has to be rails centric
You'll want to use request.user_agent:
if request.user_agent =~ /android|blackberry|iphone|ipad|ipod|iemobile|mobile|webos/i
## mobile
else
## not mobile
end
So you could do something like this:
#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
def mobile?
request.user_agent =~ /android|blackberry|iphone|ipad|ipod|iemobile|mobile|webos/i
end
helper_method :mobile?
end
#app/views/pages/home.html.erb
<%= render "small_change" if mobile? %>
--
Some refs:
Rails 3 detect request coming from mobile clients
Rails way to detect mobile device?
Update
The above allows you to call the mobile? method in any view you need.
Because it's in the application controller, it has access to the request object (otherwise you'd have to pass it to the action each time).
So when you asked:
So where should I put that code in mobile's index.html. As I don't want to add other files
... there is no "mobile" index.html.erb. You can call the mobile? method in any view you need:
#app/views/pages/home.html.erb
<% if mobile? %>
.... do something here.
<% end %>
Less is more. Keep it simple. I propose a simple jquery/html/css solution. Have one and only one file. Modify the different areas of the html file via unique class names. In this case I have desktop coding or mobile coding. In your case you can split it up as you see fit, obviously by modifying the if statement shown below.
In html:
<main id="top_main" class="website_desktop">desktop content goes here.</main>
or
<main id="top_mobile" class="website_mobile">mobile content goes here.</main>
In script:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// display stuff for mobile
jQuery("#top_main").css("display", "none");
jQuery("#top_mobile").css("display", "block");
}else {
// hide all stuff for mobile, display desktop
jQuery("#top_mobile").css("display", "none");
jQuery("#top_main").css("display", "block");
}
ID's are used for script, classes are used for different CSS controls (in my example, mobile vs desktop)
In Visual Studio, I've created a default MVC app with login.
I would now like to change the login so that instead of going to a page, it appears as a popup.
The reason for this is that the user will be part way through the checkout steps, and I don't want to lose the position or state.
Is there an example of how to do this?
Here is a video tutorial I found: http://www.youtube.com/watch?v=RokXgBFSvp8
And a non video version illustrating similar thing: http://www.codeproject.com/Articles/315535/How-to-render-MVC-View-on-a-Modal-Popup-Window
You can use jQuery load function...
Here is the modal body
<div class="modal-body">
<div id="login-div"></div>
</div>
here is the jQuery which has the login form id "#loginFor"
$(document).ready(function () {
$('#login-div').load('/Account/Login?ReturnUrl=WhereYouWanttoGo #loginForm');
});
I have a Rails app that uses javascript (Backbone) to show user specific data on each users profile page /views/users/show.html.erb. I do this by passing <%= #user.id %> as a data parameter to Backbone's fetch function, however, the only way I know how to get the <%= #user.id %> into Backbone's fetch function is by embedding the javascript in each views/users/show.html.erb page, which therefore allows Backbone to load different user specific info for each views/users/show.html.erb page. Although this works, it seems like the wrong way to do it, as I have read that I should not embed javascript like this. Furthermore, I am going to have to do it a lot, because I wish to display a lot of different kinds of data, more than you see below. So the show.html.erb page will be filled with javascript to make the app work the way I wish.
Question: how might I get #user.id into Backbone's fetch function for each user's show page without embedding javascript in the way that I've done. In the comments, someone suggest I use app/assets/javascripts/user.js, but I don't know how to get <%= #user.id %> into that file. #user.id is readily available in show.html.erb
<script type='text/javascript'>
$(document).ready(function() {
app.collections.awardCollection.fetch({ data: $.param({ user_id: <%= #user.id %> }) }).complete(function(){
app.views.awardCollection = new app.Views.awardCollection({ collection : app.collections.awardCollection});
app.views.awardCollection.render()
});
});
</script>
In order to understand how the views works, is that you can add as many extensions to a view as you want, and they will be parsed by the right library.
If you create a view like
my_view.haml.erb
It will be first parsed with ruby (erb), and then with haml, and will end in a html page.
You can create many views for js, usually you want to archive that when you do ajax, so you can end having a js view like:
my_view.js.erb
First ruby will be parsed (all the <% %> tags), that will end as plain text, and then the server will serve the .js file. But that's usually a common task for ajax.
If you have to render a html page where you want to put some js and you need some ruby code on it, what I usually do is to put the data in the html content with a hidden div.
You can put in any view (even on your layout if you want it to be globally available), something like:
<div id="user_id" style="display: none;"><%= #user.id %></div>
And then on a js (or coffeescript or whatever) you can just check the content of that div:
<script type="text/javascript">
var user_id = $("#user_id").html();
</div>
that's really useful when you want to debug or create tests for your js files, since its plain js and won't throw syntax errors.
I see the comment of Luís Ramalho and Gon is a good option, but I recommend use the following approaches:
If the from the variable is not going to change, print it with <%= %> under .js.erb files located in app/assets/javascripts (note that it will be cached until you restart your app)
If you need server variables the best way is to use Ajax
You can define functions on .js files on app/assets/javascripts and call those functions from the views
If you really don't want any Javascript code in the view, you can create the functions on a .js on app/assets/javascripts (corresponding to the view, for order), and use events and/or store the variables in hidden fields (or even use the data attribute from HTML5)
I am learning Ruby on Rails, and I am very confused on how the controller-model-view relationship works for my application.
What I have now is a table full of comments (posts) users have made. What I want to do is let users click on a comment to see more information in a separate panel (ie, other database fields that weren't initially shown, for example the user_id of the person who posted the comment).
In my _post.html.erb, I have something like:
<div class="post" id="<%= post.post_id %>" onclick = ?? >
<p>post.text</p></div>
What should go in onclick? I need a way for the onclick to call a helper/controller method which can load more information, and then put that in another div on a page (I've tried variations of using the controller and helper to call javascript which inserts html into the site, but that seems messier than it should be). From what I understand, I should create some kind of partial _postdetails.html.erb file that handles the actual displaying of the html, but I have no idea how to specific where that partial would go in the page.
Any help would be appreciated, thanks!
You can achieve what you want either by using Rails helpers or by writing the AJAX calls yourself.
Personally I manually write all my AJAX calls using jQuery.
You can also use Prototype which ships with Rails.
That being said you can do.
In your JS file :
$("div.some-class").click(function()
{
$.ajax(
{
url:"url/to/controller/action",
type:<GET>/<POST>,
data://If you wish to sent any payload
});
});
In your controller :
def some_action
#some computation
render :update do |page|
page["id_of_div_to_be_refreshed"].replace_html :partial => "some_partial"
end
end
I'm wondering if this is a good idea or not, either way I'd like you guys opinion on how to best achieve this sort of messaging popup system I have in my app.
Under some occasions I want to popup a lightbox for users when certain actions are triggered. I already have the lightbox working and opening when when my controller returns JS for a request.
Here is the senario, I want to check if a user has new messages when a new request is made, and if they do I want to show the messages in my lightbox when the new page is loaded.
Should I just put some JS at the bottom of my <body> and render it if the user has messages? Or should I use like flash[:notice] and have it render as JS or something... I'm a bit stuck you see.
Don't use flash notices, this is not what they are for at all. I would have something in the layout like this:
<% if (messages = current_user.new_messages).size > 0 %>
<%= javascript_tag "display_messages(#{messages.collect(&:message_text).inspect})" %>
<% end %>
obviously here i'm guessing at your messages' methods but you get the idea. .inspect will give it an array of strings, you could give it the message data as a json object or whatever.