I don't want to change Common Menu Page and want to refresh contact page.
If click to menu link, Menu page don't want to change, only change contact page.
Looks like you want only part of the page to update when moving through routes (urls). Make sure you're using
<%= yield %>
somewhere in your application layout file and that controller templates (app/views/...) don't include the menu themselves.
Example:
<html>
<body>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
<div id="container">
<%= yield %>
</div>
</body>
</html>
Related
I have a mobile page for my app that uses the jquery mobile "collapsible" data-role to hide Microposts (Hartl's tutorial) until the user clicks them to expand.
I also use a modified paginate to render the paginate links.
https://gist.github.com/jugyo/3135120
<div data-role="collapsible">
<h3>Show Microposts (<%= #user.microposts.count %>)</h3>
<ul data-role="listview">
<%= render #microposts %>
</ul>
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
previous_label: 'Prev',
next_label: 'Next'
%>
</div>
My question is: how do I add an event to the paginate click? I want to have the list collapsed (the default), with data-role="collapsible" when the page is first loaded, but when I click next (or later, prev) I want the collapsible container to add the data-collapsed="false" attribute so that the list is open.
(It doesn't make sense to click next and go to a collapsed list again)
Do I put it in the rb that has the paginate code? If so, how do I refer to the page elements? Or do I put some jquery somewhere...?
Any assistance appreciated.
You can add a class or id to your pagination. I'll add an id :
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
id: 'my_pagination',
previous_label: 'Prev',
next_label: 'Next'
%>
Then give your main div some kind of identifier :
<div data-role="collapsible" id="my_list">
Now you can activate it manually with jQuery :
$("#my_pagination").click(function() {
$("#my_list").data("collapsed", $("#my_list").data('collapsed') == 'false' ? 'true' : 'false')
});
I have a first page called index.html, where i have two links "red fruits" and "yellow fruits".
Then i have "fruits.html" which has two jquery pages with id "redFruits", "yellowFruits".
When somebody clicks "yellow fruits" link on the index.html i need to show the second "page" of the fruits.html. By default, jquery mobile shows the first page of the "fruits.html".
Any idea of how to link to random page of the ajax fetched document.
"index.html"
<div data-role="content">
List of red fruits
List of yellow fruits
</div>
fruits.html
....
<div data-role="page" id="redFruits">
....
<p data-role="content">
<ul>
<li>apple 1</li>
<li>apple 2</li>
<li>apple 3</li>
</ul>
</p>
.....
</div>
<div data-role="page" id="yellowFruits">
.....
<p data-role="content">
<ul>
<li>lemon</li>
<li>papaya</li>
<li>yellow fig</li>
</ul>
</p>
.....
</div>
You can reference the sub pages within a multiple pages document via hash tags:
List of red fruits
List of yellow fruits
You can use the pageparams plugin to send data to the second page - in this case an #id of the page to be displayed.
In the pagebeforeshow of page2 you can check for the param passed and changePage() accordingly.
I am using jQuery Mobile with MVC. I don’t know how to create a link to Index page of a car controller with pageid.
I have two pages defined in _Layout.cshtml:
First page:
<div data-role="page" id="CarID">
<div data-role="header">
<ul>
<li>1. Page Car</li>
<li>2. Page Maint</li>
</ul>
</div>
<div data-role="content">
#RenderSection("PageCar")
Second page:
<div data-role="page" id="MaintID">
<div data-role="header">
<ul>
<li><a href="#Url.Content("~/Car/Index/#CarID")" >1. Page Car</a></li>
<li>2. Page Maint</li>
</ul>
</div>
<div data-role="content">
#RenderSection("PageMaint")
The problem is that these links render section in Index page in home controller NOT the index page in car controller. Links without page id work so href="#Url.Content("~/Car/Index") works but, obviously since no page id I don’t know how to get to a particular page ID. I tried all kind of links, none will not quite work or will take me to home controller Index view:
<li>2 Page Maint</li>
<li>2 Page Maint</li>
<li>#Html.ActionLink("2 Page Maint", "Index", "Car", new { id = "Maint" }) </li>
Can somebody help to create a link to Index page of car controller with pageid? Any help would be greatly appreciated. Thanks
In my application i have tab at the top of the page which should each render a new page.
The tabs are defined in the Layouts file as this will be part of the standard view.
Now i have created different views for each of the options e.g. project is one of the tabs.
So when i click the tab option how will it render the body based on the tab i have selected?
I have used the Foundation layout tabs but will need jquery hooking into it to launch an event.
Any examples or replies would be great
Try jQuery UI Tabs
Edit 1:
<div id="tabs">
<ul>
<li>Projects</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="projects">
<% Html.RenderAction("Projects", "Home"); %>
</div>
<div id="tab-2">
<% Html.RenderAction("TabTwo", "Home"); %>
</div>
<div id="tab-3">
<% Html.RenderAction("TabThree", "Home"); %>
</div>
</div>
Decorate your tabs action method with [ChildActionOnly] if you want methods to work using child view only.
I'm trying to use the tabs purely as a navigational menu, loading my pages in the tabs, but being able to bookmark said tabs, and have the address bar correspond with the action I'm executing.
So here is my simple nav partial:
<div id='tabs'>
<ul>
<li id='home'>Home</li>
<li id='test'>Test</li>
</ul>
</div>
And the simple tabs intializer:
$(document).ready(function() {
$('#tabs').tabs({spinner: ''
});
});
My layout just displays $sf_content. I want to display the content for the action I'm executing (currently home or test) in the tab, via ajax, and have the tab be bookmarkable.
I've googled this like 4000 times and I can't find an example of what I'm trying to do. If anyone has a resource they know of, I can look it up, or if you can help, I would greatly appreciate it.
Thank you in advance.
This will make your tabs load using ajax
<div id='tabs'>
<ul>
<li title='home'>Home</li>
<li title='test'>Test</li>
</ul>
<div id="home">home content here</div>
<div id="test">test content here</div>
</div>