All, I'm trying to use the Bootstrap Navbar user choice to control the filtering of posts shown to the user.
The model includes an 'expired' field which is a date-time type.
Three choices are: All (no filtering), Open (show only open issues) and Closed (show closed).
Is there a way to do this without defining three different index.html.erb variants (DRY problem). The filter should show only closed issues if #post.expired < Time.now .. etc.
Stated alternately - can controller 'know' what the user chose, although Navbar, as i am using it, is simply a fancy navigation toolbar?
Thanks for any advice.
Typically this is done by including a parameter in the request, and looking for that parameter in the controller. The bootstrap navbar uses regular anchor links so you should be able to add parameters easily to them (modified example from the doc):
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="/some_url">List</a>
<ul class="nav">
<li>All</li>
<li>Open</li>
<li>Closed</li>
</ul>
</div>
</div>
You can read the filter parameter in the controller by accessing the value of params[:filter].
Related
I have a simple pagination that looks like
<ul class="pagination justify-content-end" th:field="*{page}">
<li class="page-item page-item disabled">
<a class="page-link" href="action">1</a>
</li>
</ul>
I would get the following behaviour with Thymeleaf. Clicking on the page and before submitting the action, the value of the th:field associated with the pagination should be changed by setting it to the th:value of the selected page. In other words, clicking on the page number should change the value of "*{page}" and then call the method. Is there any way to do that, for example, combining th:onclick with th:action?
Thymeleaf is a rendering engine, as such it can do nothing once the page is served to the end user. At best u can fill variables into javascript when rendering to achieve the desired result.
As for your described functionality the given code is far to limited or faulty to give a suggestion for a javascript solution, for one th:field on a non-input element doesn't do much. Also the shown href is just a simple href that doesnt interact in any way with the encapsulating th:field.
I'm currently trying to make a website in ASP.NET Core MVC. In my layout page, I'm making a navigation bar to access all of the actions that can be reached through my controllers. I am however unable to create useful links.
<ul>
<li>Home</li>
<li>Index</li>
</ul>
My problem with this is that I still need the controller before the links and if I put the controller in front of the action like this
<ul>
<li>Home</li>
<li>What We've Done</li>
</ul>
When I click on one link and then the other, the link will end up being "myurl/home/home/page".
How can I create the link to only link to the exact page I want to?
You should use the anchor tag helper to build the markup for the link
<a asp-action="index" asp-controller="home">Home</a>
This will generate the correct relative path to the index action as the href property value of the anchor tag.
I have created a HTML layout below with jQuery UI tabs
All the tab information are related to Employee
HTML Code:
<div id="tabs">
<ul>
<li>Details</li>
<li>Deparment</li>
<li>Salary Info</li>
</ul>
<div id="tabs-1">
<p>Some fiels here</p>
</div>
<div id="tabs-2">
<p>Some fiels here</p>
</div>
<div id="tabs-3">
<p>Some fiels here</p>
</div>
</div>
All i need is i want to keep this in MVC page.
Can i have all tabs in one View or i can use #Html.Partial? or PartialViewResult? for each tab.
Some time the user may update only Department information. Here i should save only that tab information.
I want all these tabs loaded at first time and not in on demand using ajax.
Can anyone suggest how can i organize my need in MVC?
Note: Also another thing is i want to use the same for Add and Edit employee. In case of Add Employee i should able to view only Basic Detail as enabled and other tabs in disabled mode. Once the user save basic detail other tab should get enabled.
View fragmentation:
You can do either single view, or split it on multiple partials. It doesn't really matter till they render necessary html.
To save information from each tab separately, wrap each tab content in <form />, so you'll have multiple forms instead of one.
To show next tab on submit, solution will depend on submit process. If you have synchronous Post(Get) then you'll have to pass pass tab parameter with Response and depend on response open next tab on DOM ready (use jQuery for that). Otherwise, if you submit tabs with ajax, you may switch tab in your handler.
I'm very new to Rails (and web) programming, so I'm not even sure what technology I should be looking for for this.
I've downloaded and run through the first five chapters of the Rails tutorial, but now have a very simple request.
On the left hand side of a web page, I will have a table. If the user clicks on an element in that table, I want to have the right hand side of the page show something new.
I already have a page to display the table, viz:
<div class="center hero-unit">
<div class="container">
<h2>2012 Yearly Report</h2>
<div class="row-fluid">
<div class="span12">
<div class="span4">
<table border="1">
</table>
</div>
<div class="span6">
<!-- load stuff here based on what someone clicks on in the table -->
</div>
</div>
</div>
</div>
</div>
And I'm using bootstrap layouts to display everything. I just don't understand how to change the contents of the 'span6' div based on user behavior in 'span4'.
This is a difficult question to answer. It really depends on what kind of data you're trying to display and what sort of interactivity you're looking for.
You don't really provide much information about what you're trying to accomplish, but if I had to guess, you're trying to load data from your database and insert it into an element without leaving the current page. This is what AJAX is for (your tutorial goes into it a bit in chapter 11) and involves a good deal of javascript, which is generally beyond the scope of a server side language like Ruby. Luckily, rails includes helpers for making it easy to include AJAX features into your web application without having to write a lot of javascript (although you'll have to write some).
As an example, suppose your table has a list of articles, and you want to display the contents of an article in a div when its link is clicked on.
First the link:
<%= link_to article.name, article_url(article), :remote => true %>
The remote option tells Rails that it's an AJAX link.
Next, you need to render a javascript template for your article's show action. You'll name it show.js.erb.
Supposing the div you want the data to be loaded into looks like this,
<div id='article-content'></div>
you'll want your show.js.erb to contain the following:
$('#article-content').html("<%=javascript_escape #article.content %>");
This javascript (with embedded ruby) code will be evaluated when one of your remote links is clicked and will replace the content of your div with the article's content.
There is plenty of resources online to give you more information. It looks like railscasts just released an episode on this topic just a week ago. It requires a subscription to view, but is well worth it (especially if you're just starting out).
I use the jQuery-ui tabs widget as a navigation. Contents of all tabs are load via ajax. Seems that there is interference between tabs. I mean, for example, if in page1 in tab1, there is an element whose ID is foo, and in page2 in tab2, there is an element with the same ID. And in both page, there is javascript code to manipulate the element with ID foo, then weird things will happen.
How to deal with this situation?
You deal with it by having unique IDs - that is, after all the point of IDs. :) As far as jQuery selectors are concerned, yes, you can clarify which of the elements you mean as Bayard Randel explains, but it's a dangerous practice in general. I've found from personal experience that it comes back to bite you in the end - somewhere, somehow, you'll forget that you've got duplicate IDs. Just avoid them.
Seeing as you are using jquery, you can target the correct element by using selectors based on your tab name.
e.g. if you markup looks like this:
<div id="tabs">
<div id="tabs-1">
blah
</div>
<div id="tabs-2">
blah
</div>
</div>
you can specifically select the second link with this selector, despite the id duplication:
$("#tabs-2 #linkId").whatever();