I'm a newb working on my first site. I plan on having each page load via ajax in order to have a music player run constant in the background, but I would like back-button functionality so I'm researching how to do that.
Most of the tutorials I'm finding that relate to ajax and pjax are 5-6 years old; I'm just wondering if pjax and the rack-pjax rails gem is still applicable, thanks
You don't need pjax to do this since turbolinks is already capable of this.
Turbolinks allows you to mark certain elements as permanent. Permanent elements persist across page loads, so that any changes you make to those elements do not need to be reapplied after navigation.
<div id="music-player" data-turbolinks-permanent>...</div>
https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads
Update:
The element that you add data-turbolinks-permanent attribute to, must have an unique ID, otherwise it won't work.
Designate permanent elements by giving them an HTML id and annotating them with data-turbolinks-permanent.
<!-- SEQUENCER MODAL BODY -->
<div class="modal-body" id="music_player_modal" data-turbolinks-permanent>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 nav-index" id="sequencerIndex">
<div id="jp_container_1">
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Before each render, Turbolinks matches all permanent elements by id and transfers them from the original page to the new page, preserving their data and event listeners.
Related
I am using Rails with Angularjs . So, i have link called "Notes" and when i click "Note" it takes me to url "http://localhost:3000/#/notes" and renders some templates through angularjs.
When i reload the page , the templates didn't reload and when i click the link "Note" again then only it renders those templates.
So my simple question is On reloading the page , why all the contents that is rendered through angularjs disappears and how to fix this.
Updated
-javascript
-index.html
-routes.js
-view
-course
-index.html
view/course/index.html
<div class="row">
<div ng-include="'index.html'"></div>
</div>
javascript/index.html
<div class="nav-list">
<a ui-sref="notes"> Notes </a>
<a ui-sref="users"> Users </a>
</div>
<div class="main-wrapper">
<ui-view></ui-view>
</div>
javescript/routes.js
....
.state('notes', {
url: '/notes',
templateUrl: 'template/pages/notes/index.html',
controller: 'NotesIndexController'
})
.state('users', {
url: '/users',
templateUrl: 'template/pages/users/index.html'
})
...
I changed the above scenario to this
view/course/index.html
<div class="row">
<div class="nav-list">
<a ui-sref="notes"> Notes </a>
<a ui-sref="users"> Users </a>
</div>
<div class="hero-wrapper">
<div class="hero-content">
<div class="hero"></div>
</div>
</div>
<div class="main-wrapper">
<ui-view></ui-view>
</div>
</div>
This fixed my problem but what is the difference between above two scenarios . Why it is behaving differently . Thanks
You need to troubleshoot each piece of your application separately. You don't have a "Rails and AngularJS" problem; you have either a problem with your Rails API (which is serving up JSON to Angular) or you have a problem with your Angular client (which is receiving proper data from your API but isn't displaying it properly) -- or both.
I'd start at the Rails side; use an API testing tool like Cocoa Rest Client to simulate requests to the Rails API and ensure the response data is in the format you'd expect. Once you've verified that, you've reduced this from a maybe-also-Rails problem to a pure Angular problem, and you can troubleshoot the Angular app in isolation (eg. by feeding it dummy JSON instead of having it talk to the Rails app).
Good luck!
I have been developing with MVC for a few years and this is a nagging issue I have encountered several times. I do not like any of the ways I have handled this in the past so I thought I would ask here.
Let's say I have a series of nested DIVs on my view:
<div id="outer">
<div id="inner1">
<div id="inner2">
</div>
</div>
</div>
At runtime I want to add another element, a DIV or anchor, inside of the outer div but have it contain the inner DIVs.
<div id="outer">
<div id="newone">
<div id="inner1">
<div id="inner2">
</div>
</div>
</div>
</div>
How would you recommend handling this?
I imagine this would have more to do with JavaScript than with the server-side code. And since ASP.NET MVC comes with jQuery, you may as well make use of the wrap() function. Something like this:
$('#inner1').wrap('<div id="newone"></div>');
I'm using bootstrap upgrade service for upgrading from Bootstrap 2.x to 3.x
http://upgrade-bootstrap.bootply.com/
But I have a problem converting the razor syntax. For example I have:
<div class="row-fluid">
<div class="span12 form-actions">
<p>
<a class="btn" href="#Url.Action("ChooseAddItem", "Home")">Action</a>
</p>
</div>
</div>
And service returns:
<div class="row">
<div class="col-md-12 form-actions">
<p>
<a class="btn btn-default" href="#Url.Action("
chooseadditem="ChooseAddItem" home="Home">Action</a>
</p>
</div>
</div>
Look what happens to Url.Action function. This is only small example. I have a lot of files and a lot of code.
Is there any other way of converting razor views to bootstrap 3.x?
I'm the author of http://upgrade-bootstrap.bootply.com/
The problem you're seeing is because the service uses jQuery to manipulate the DOM and structure of your HTML. A headless browser is being used, and this changes the actual HTML content upon conversion.
I've added a new switch ("Modify nav and modal structure") to prevent this from happening, but as a result the structure of any modals and navs will not be converted to Bootstrap 3.
So, if you want to keep the Razor content the same, just uncheck the "Modify nav and modal structure" checkbox before you "Convert to Bootstrap 3" and it should work for you.
I am working on a website, using ASP.NET MVC3 with .aspx pages. The web site supports desktop browsers and mobile phones with the same site. The site has a single master page. I want to avoid redirecting to a mobile site, because that would duplicate a lot of html. I still intend to use the user-agent to determine when a mobile device is hitting the site, but instead of redirecting the browser, I set a flag that I use in the master page to control what HTML is generated.
I have run into trouble determining the best way to get the master page to generate the HTML I want. I have two strategies in mind to solve this problem, but I don’t know if this is the best way.
The first strategy is, to use the mobile flag to add, replace, or remove HTML content that is mobile specific.
Pro: Minimize duplication of HTML
Con: Multiple if statements.
Requires a second mobile specific .css to be downloaded. (Because the html has multiple if statements, we really need 2 css files, one for mobile and one for none mobile. We can't easily use specificity rules to deal with this in one css file).
Here is an excerpt from the master page using this strategy:
<% if (isMobile)
{
Html.RenderPartial("MobileSearchControls");
}
else
{ %>
<div id="viewTabs" class="span3">
...
</div>
<% }
%>
<%--body --%>
<div id="bd" class="row-fluid">
<% if (!isMobile)
{ %>
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<% }
%>
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<% if (!isMobile)
{ %>
<div class="span2" id='right-column'>
</div>
<% }
%>
The second strategy is divide most of the body in master page into two parts, one for mobile, and one for desktop.
Pro: Avoids downloading an additional .css file. (Because the mobile code can be in a div with id of mobile and use specificity rules in the css).
Con: Greater duplication of code.
The tags must have unique ids, even though they are in mutually exclusive code blocks.
css is more complex for mobile page, because all tags are underneath a mobile tag.
A similar excerpt for the master page using this strategy:
<% if (isMobile)
{
%>
<div id="mobile-search-controls">
<asp:ContentPlaceHolder ID="MobileSearchContent" runat="server" />
</div>
<%--body --%>
<div id="bd" class="row-fluid">
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MobileMainContent" runat="server" />
</div>
</div>
</div>
<%--body end--%>
</div>
<%
}
else
{ %>
<div id="bd" class="row-fluid">
<div id="left-column" class="span3">
<div id='controls-and-preferences'>
<asp:ContentPlaceHolder ID="LeftColumnContent" runat="server" />
</div>
</div><!--left-column -->
<div id="main" class="span9">
<div id="search-results">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="span2" id='right-column'>
</div>
</div>
<%--body end--%>
<% }
%>
Which way should I go? Is there a third better way?
You might want to consider using a framework such as Twitter Bootstrap (http://twitter.github.com/bootstrap/).
They have some examples that work well on devices of any resolution:
http://twitter.github.com/bootstrap/examples/fluid.html
you should be using css 3 media queries for things like this.. have a look at this link it has a demo
http://webdesignerwall.com/demo/adaptive-design/final.html
user277498,
I've used the Mobile Ready HTML5 MVC.NET template for vs:
http://visualstudiogallery.msdn.microsoft.com/9df9c61c-4d90-43e5-9aa1-a58786b7a1e4
to great effect. this basically has a viewengine that allows views to be directed twds mobile and/or normal mvc. it's actually quite 'magic' the way it works. give it a try, I've used in 3 projects now with no hiccups.
This is mostly an implementation question for a webapp I'm trying to develop. I'm relatively inexperienced so I want to check if my idea for implementation is decent or if there's a much easier way.
The Problem
I want to create a scrollable sidebar that automatically fills with small containers that hold a user profile photo and their name. The basic idea is that a user is a member of a class and the sidebar should hold all of their classmates. The sidebar should be a fixed size and the user should be able scroll down through their classmates and click on a user if they want visit their page.
My Ideas For Implementing
It seems to me that I will need to use some embedded ruby to direct the filling process. Some psuedocode would be something along the lines of "For every user in this class, create a container with their picture and name". I haven't given a lot of thought as to actually handle this step but I'm mostly concerned with the actual html structure.
My idea is to do something like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!-- for each user in class -->
<div class="container-fluid">
<div class="row-fluid">
<div class="span">
<!-- Load appropriate user data -->
</div> where appropriate...
Is this the "proper" way to go about implenting this? I haven't been able to find much information on the idea and visit an example site's source code isn't all that helpful as the sidebar is already filled...
I would separate your sidebar HTML and logic into a partial, E.g. "app/views/shared/_sidebar.html.erb". From there on, you can accept a collection of data from whatever view you're rendering.
View file
<div class="container-fluid">
<div class="row-fluid">
<%= render "shared/sidebar", collection: #users %>
</div>
</div>
Sidebar partial
<div class="span2">
.....
<% #users.classmates.each do |e| %>
<%= e.name %>
<% end %>
.....
</div>