I have built a new portal on Rails which can be accessed as say: https://xyz.com
The problem with this is:
1.) It has 2 tabs – “ShipmentInfo” , “Aging Shipments Dashboard” both implemented using
<li> tags and YUI library’s tabview.
<ul class="yui-nav">
<li id="tab1" class="selected">Shipment Info</li>
<li id="tab2">Aging Shipments Dashboard</li>
</ul>
2.) When I click on “Aging Shipments Dashboard” tab – url should be – https://xyz.com/#tab2 but you get to see only https://xyz.com . I presume it because of client side implementation of Tabs.
3.) After I click on “Current Summary” button in that tab, I get the corresponding results but instead of showing me the active Tab set to “Aging Shipments Dashboard” it is always set to “ShipmentInfo” tab.
How can I set the activeTab on getting the results to corresponding Tab from which request has been placed ? All form requests use GET method.
Or is there a way wherein I can explicitly mention in routes.rb, basing on the params that the activeTab should be set to “Aging Shipments Dashboard”?
Thanks,
Raja.
As far as I can tell, whatever the YUI does to transform that ul into a set of tab probably has nothing to do with the hrefs inside the li. I think you should verify the usage syntax for producing your tabs.
Moving on, the href links only point to anchors within the current page. Which means the client (browser) doesn't have to send an HTTP request to re-get the current page. I don't think that modern browsers ever do. I doubt they send the anchor part of the URL (the part after the #) since the HTTP server doesn't care about that information.
What this amounts to, is that your rails application is never notified about when the user clicks on a tab, and never gets the part of the URL after #. So you can't put any rules about it in the routing table.
EDIT: I forgot to tell you what really should happen.
The YUI (or some other javascript code) should attach to the onClick of the li, which looks like a tab, from your description.
When the user clicks on a tab, it reads the URL, and in some way divines what content-tag to display as the tab's content. For example, this could be a div that contains the 2nd tabs content, and it could have an id of tab2 or something.
It then makes the current tab's content invisible. Usually the is done using the CSS display property, setting it to display: none.
Finally, the content for the tab that was clicked on is made visible. Which would be done using display: block or something simliar.
Yes. You probably already have these lines at the end of your routes.rb file:
map.connect ':controller/:action/:id'
map.connect ':controller/:action/:id.:format'
Change them to:
map.connect '#:controller'
map.connect ':controller/:action/:id'
map.connect ':controller/:action/:id.:format'
This way you can define the two variables as different controllers within the rails app. You could probably do the same thing as two actions too, but that's your call.
Related
I have made an app with jQuery mobile and laravel.
On the first page "mobilepage1" if have a form with a next button.
Also some of the form elements are dropdown menu's. The dropdown select options I get from a table in the database.
In the form on mobilepage1 I have a dropdown list with all department names:
I get this list from my controller like so:
$departmentlist = Company::find($usercompanyid)->departments;
This is how I display the list in the mobilepage1 form:
{{ Form::label('department', 'Department:')}}
<?php
foreach($afdelingslijst as $item) {
$afdelingsarray[$item->afdelingen] = $item->afdelingen;
}
?>
{{Form::select('size',$afdelingsarray)}}
On the second page I want to make a back button.
I tried the jQuery mobile way with a link with: data-rel="back"
But this does not work. I get a page error, it's missing the departmentlist used in mobilepage1. I can make a link to a route to mobilepage1, but I think all the information the user entered in mobilepage1 would be gone.
I see this url in the address bar when I am on mobilepage2 (this is after I filled in the form on mobilepage1 and clicked next).
/public/mobilepage2?size=Personeelszaken&size=32&directechef=Tineke&size=1&size=1&size=1&date-2=&size=1&time=&omschrijving=
Is there a way I can link to the the mobilepage1 route and still keep the information the user entered?
It looks like it would work just by hitting the back button if you passed in the department list with a view composer rather than through a route. Remove it from your route and place this in a file that's being autoloaded...
View::composer('mobilepage2', function($view)
{
$departmentlist = Company::find($usercompanyid)->departments()->lists('afdelingen','afdelingen');
$view->with('departmentlist', $departmentlist);
});
I'm not sure how you are finding $usercompanyid but you should be able to find it within the closure or pass it in by adding use ($usercompanyid) right after the function($view) part.
Also using the lists() function like that will build your array for you so you don't need to worry about the foreach loop in your view.
Since the values are getting passed back and forth as get variables, I think if you use Form::model() instead of Form::open(), it should place all those values back into the input fields for you.
I'm using angularjs on a rather large flat documentation page. The page has some navigation thats designed to use traditional url hash links. The urls look like so:
/documentation/flat#26166276-basic-events
These urls get rewritten once the navigation occurs and i've hit the next page. angular initializes to something like:
/documentation/flat#/26166276-basic-events
This breaks the navigation. It seems to work if I am already on the /documentation/flat path and hit one of the hash urls. It gets rewritten but the browser still focus's on the correct section of the page.
However if the the hash url is triggered from a different path the browser will not focus on the correct DOM element as the angularjs rewrite happens.
Edit: this is what the markup for a link looks like
Basic Events
<h1 class="chap-header" id="26166276-basic-events">2.1.0 Basic Events</h1>
This topic was further discussed here:
How to handle anchor hash linking in AngularJS
I used a variation from that thread
if $location.$$url[0]== '#'
$location.hash($location.$$url.replace('#', ''))
$anchorScroll()
that basically lets me prefix any anchor links with an additional # and angularjs treats them as traditional anchor
There is a very silly solution: put a / at the start of the anchor id!
<a id='/my-id' />
I'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.
I have several static files(pages), which are basically copies of my website pages source code, with the content changed.
These files support my website, (keeping the same format) in various ways.
For example the menu part is:-
<body>
<div id="menu">
<ul class="level1" id="root">
etc
etc. until
</ul>
</div>
Unfortunately every month or so my menu bar changes and I have to update each static file manually.
As each of my static files have the same menu.
Is it possible to have one menu file which can be updated and have the static files load them automatically.
I plan to have several more static files. So this would be a great help if someone can suggest how to accomplish this.
Oh yes. Use some javascript magic to load the menu bar upon page load and keep it in menu.html.
One solution may be to use a spider (wget --recursive) to download generated pages directly from your application. One command, and you have the full copy of your site. (just add some useful options, like --convert-links, for example).
The other option may be to write an after_filter in your controller, and write the generated content to a file (not always, but for example when you add a parameter ?refresh_copy=1). Maybe just turning on page caching would be suitable? But the problem will be that you will not be able to trigger the controller action so easily.
If you don't want the whole site copied, just add some specific routes or controllers (/mirrorable/...) and run the spider on them, or just access them manually (to trigger saving the content in the files).
I ended up creating one controller without a model.
rails g controller staticpages
I then created a layout file which imported the individual changes to the layout, via a "yield" tied to a "content_for" in the view files(static files(pages) in the "view of staticpages" (for example abbreviations, aboutthissite etc etc).
The rest of the static file loaded with the usual "yield" in the layout. Works a treat. No more updating the menu bar all done automatically.
To get to the correct static file I created a route using:-
match 'static/:static_page_name'=> 'staticpages#show' (or in rails 2.x:-
map.connect 'static/:static_page_name', :controller=> "staticpages", :action=> "show"
"static_page_name" variable accepted anything after "/static/" in the url and passed it to the controller "staticpages" in which I set up a show action containing:-
def show
#static_page_name = params[:static_page_name]
allowed_pages = %w(abbreviations aboutthissite etc, etc,)
if allowed_pages.include?(#static_page_name)
render #static_page_name
else
redirect_to '/' #redirects to homepage if link does not exists
end
end
I then only had to change the links in the website. (e.g.<%= link_to " About This Site ", '/static/aboutthissite' %>)
and viola! its all working.
I have uploaded the nerddinner sample to "www.example.com/test/nerd". When a mouse is on menu tab such as "Find a host" then the link is shown at the bottom of Internet explorer as "www.example.com/test/nerd/Dinner" with the contoller name "Dinner". When the mouse is on the main logo which is on top and left, the link shown as "www.example.com". So it direct me to "www.example.com" instead of "www.example.com/test/nerd"
Where can I change it? I have tried to change the "start url" from the application property, but it did not work.
The NerdDinner application links to the / path when you click on the logo. This points you to the domain root: example.com.
If you want the link to point to your home page instead, there are two ways of doing that:
Have the link point to ~ instead - that's the application root. If you configure the directory you installed NerdDinner in as an IIS application, the controller action with the "" route will handle the request.
Change the <a href="/" to point to your controller action by name: <a href="<%= Url.Action("Index","Home") %>"
Both ways work, but I recommend using the first one, because it will point to whatever action is routed to ""; in other words, if you change the name of your home page action, for example, the link will still work.
This application assumes that is installed in the root of the domain, and therefore just contains the path "/". You'll need to edit NerdDinner/Views/Shared/Site.Master. The line you need to touch is
<h1></h1>
Try changing this to
<h1></h1>
I don't have ASP.NET set up anywhere I can try this, so it probably won't work as is. Hopefully that will at least get you started if it doesn't work perfectly.