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!
Related
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.
I'm trying to make a simple website following the One Month Rails tutorial online, and since bootstrap is constantly updating I've decided to mess around with it by myself.
I have the following file home.html.erb and tried to apply the jumbotron effect from bootstrap
http://getbootstrap.com/components/#jumbotron
<div class = "jumbotron">
<h1>Welcome to One Month Rails</h1>
<p>
You've found the home page!! <%= link_to "Google", "http://www.google.com"%>
</p>
<p>
<%= link_to "Sign Up Now!", "#" %>
</p>
</div>
The page, however, does not show the jumbotron effect. What am I doing wrong? I know that bootstrap should be working because I've added some styling effects using bootstrap classes like nav and btn
Edit: I've read from a few other questions and apparantly the jumbotron class is bugged with the rails gem. I will try to manually incoporate bootstrap and see how it turns out.
Can you try adding something else to this particular page and style it using bootstrap (like a simple button)? That way you can ensure bootstrap is working on this specific page.
I don't see any problem with the code you pasted.
EDIT:
Try this sample code:
<div class="container">
<div class="jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a>
</p>
</div>
</div>
As Im building sort of a window/tool setup in MVC4 Im wondering is it possible to do like a #Html.Partial("_PartialToolWindow") In a page including all the tools to be loaded.
And then have this _PartialToolWindow load a defalut html template that should surround this code that the _PartialToolWindow contains?
For example...
<div class='boarder'>
<div class='innerBorder'>
--HERE IS THE SPECIFIC CONTENS--
</div>
</div>
This _PartialToolWindow should have loaded this border and innerBorder to surrond its own HTML.
You can use a section in your layout.
_Layout.cshtml
<div class='boarder'>
<div class='innerBorder'>
#RenderSection("PartialToolWindow")
</div>
</div>
Then you will be able to load specific content in your views:
#section PartialToolWindow
{
<span>content</span>
}
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 trying to render the outcome of an action into a modal (twitter bootstrap). Unfortunately I do not get this to work.
Before I was generating a link within an each iterator:
<g:link action="perform" id="${exerciseInstance.id}">
<h2>${fieldValue(bean: exerciseInstance, field: "title")}: (${exerciseInstance.questions.size()} Questions)</h2>
</g:link>
Instead of rendering a complete new site I rather want the quiz to be presented in a modal. Therefore I tried a simple twitter bootstrap modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">${fieldValue(bean: exerciseInstance, field: "title")}</a>
<div id="myModal" class="modal hide fade" style="display: none; ">
<div class="modal-header">
<h3>Test</h3>
</div>
<div class="modal-body">
--> This is where the content should go <--
</div>
<div class="modal-footer">
Close
</div>
</div>
What is the best way to achieve this?
Asking for the "best way" on SO is a dangerous game. There probably isn't a best. Just different approaches. I'll give you one that I use utilizing jQuery's $.load() function.
$("#myModal .modal-body").load(url);
It really is that simple. Obviously, adjust your load() function if you need to pass in parameters, provide a callback function, etc. Your controller's action would just render a template containing the HTML you want in your modal-body. This isn't really even Grails specific. This approach would work with any server side tech.