I have a navigation cshtml view and a index view. The nav view is on the left hand side, and when I click an item on that view I want to display a partial view inside a div in the Index view.
Here is what I am trying when a user selects a item in the Nav View
$.get('Home/ItemResult/', { id: item.value}, function (data) {
$('#partialPlaceHolder').html(data);
});
}
In my index I have this (I commented out the Html.Action (I was using that, but need to pass a parameter from the nav view))
<table class="tg">
<tr>
<th class="tg-031e">
<div id="partialPlaceHolder" style="display:none;">
</div>
#*#Html.Action("ItemResult", "Home")*#
</th>
</tr>
</table>
my layout refernces the nav view.
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
#Html.Partial("_Navigation")
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Top Navbar -->
#Html.Partial("_TopNavbar")
<!-- Main view -->
#RenderBody()
<!-- Footer -->
#Html.Partial("_Footer")
</div>
<!-- End page wrapper-->
</div>
It is hitting the controller action, but the view is not showing in the placeholder div. Is this possible? If so, What am i doing wrong?
The style of the partialPlaceHolder contains display:none; which means you won't see the result.
Remove the offending code.
Related
I am trying to create a membership directory. I have the directory filled out and ready to go. I am using the main.gsp layout and have created the templates for it.
The side navigation bar needs to be populated by the committees and boards that the members belong too. I have created that through a separate domain and controller. The view that it creates makes links that pass search parameters by the committee.id to the member page to sort the list of members.
I am trying to populate that side navigation bar with the committee control throughout the layout of the site but when I got to test out the site that template section does not populate. It just populates when the committee controller page is selected that I created to test my output. I believe that I am missing a call to the controller or some reference that makes this view active throughout the site and not just on the controller page.
I am using Grails v. 2.3.3
Here is the code for the side navigation bar in main.gsp.
<div id="leftNav" >
<g:render template="/common/left_nav" model="[hospital:Hospital]" />
</div>
Here is where the navigation template is called in "_left_nav.gsp".
<div>
<g:render template="/hospital/committee" model="[hospital:Hospital]" />
</div>
Here is where the navigation template is called again in "_committee.gsp".
<%# page import="trustees.Hospital" %>
<div id="hospcomm" class="content scaffold-list" role="navigation">
<table>
<g:each in="${hospitalInstanceList}" status="i" var="hospitalInstance">
<tr>
<td>
<g:link controller="hospital" action="show" id="${hospitalInstance.id}">${fieldValue(bean: hospitalInstance, field: "hospitalName")}</g:link>
<%-- <g:link action="show" id="${hospitalInstance.id}">--%>
<%-- <a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">--%>
<%-- <img src="/Trustees/static/images/img/navigate.msh_board.gif" border="0">--%>
<%-- </a>--%>
<%-- </g:link> --%>
</td>
</tr>
<tr>
<td>
<ul>
<g:each in="${hospitalInstance.committees}">
<li>
<g:link controller="hospital" action="show" id="${it.id}"> ${it.committeeName} </g:link>
</li>
</g:each>
</ul>
</td>
</tr>
</g:each>
</table>
</div>
The controller for this view is being called dynamically.
Yes. The side navigation bar would only be populated when you access that particular controller's action. You have 2 options, compute this value in every controller's action that would use a view with the side navigation bar or use a filter
If you want this info on every page, I would recommend you trying to make this accessible by using a Filter. You can retrieve hospital everytime a page is loaded.
If you are using a Security plugin, such as Shiro or SpringSecurity as part of your app, you could place this bit there.
I am new to Grails and I am trying to get a template navigation bar to be populated dynamically through a controller. I am really close to solving this but seem to have run into a wall lately.
I currently am getting the navigation to populate only when I click on the link for that controller. Every where else the navigation just populates the bullet points for the links. I am probably not referencing the controller correctly in my template but have not found any good examples yet.
using Grails 2.3.3
the controllers are dynamic.
Here is the code for my navigation template
<body>
<!-- Links to the committees go here -->
<div class="leftMenu">
<!-- template of hospitals and there committees goes here -->
<div>
<g:render template="/hospital/committeeTemp" />
</div>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.events.gif" border="0">
</a>
</td>
</tr>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.news.gif" border="0">
</a>
</td>
</tr>
<tr valign="top">
<td>
<a href="index.jsp?nav=main&hosp=<%=hospGiven %>" target="_top">
<img src="/Trustees/static/images/img/navigate.help.gif" border="0">
</a>
</td>
</tr>
<%-- </table>--%>
</div>
</body>
I am using a nested loop to populate the navigation bar. That code can be found here Grails navigation links nested loop
With a little more knowledge under my belt. I found out that it was only populating on that one page because that is where it was accessing that particular controller's action. So I ended up putting that mapping into ever action in my controller.
I'm having an issue with the Bootstrap 3 table-responsive on iOS 7 (iPad4 on safari).
When I load the webpage with the table it can only show 70% of the table and the rest is hidden to the right:
But the issue is when i scroll to the right the background color of the table is lost and the background of the body is shown:
I've simplified the table as much as possible to weed out anything silly i missed with no luck. Here is how the body is defined (i removed the table info because it's being created by some ng-repeats and aren't helpful):
<body style="background-color: #3E3E40;">
<div class="container">
<div class="table-responsive">
<table class="table" style="background-color: #E0E0E3;">
....
</table>
</div>
</div> <!-- /container -->
</body>
Any information or suggestions on how to fix this issue will be greatly appreciated!!!
How does this work for you? http://jsfiddle.net/panchroma/qYY2y/
HTML is unchanged, I'm applying the table background color to table-responsive div that wraps your table
.table-responsive{
background-color:#fff;
}
Hope this helps!
EDIT
A variation for #rapcal with a drop shadow on the responsive table
http://jsfiddle.net/panchroma/16yt4vnq/
Applying a drop shadow to the table directly won't work because of how the native bootstrap stying handles overflows on the table-responsive div. But if you wrap everything in another div you have more freedom
HTML
<div class="wrapper"> <!-- apply drop shadow to this div -->
<div class="table-responsive">
<table class="table"> ... </table>
</div>
</div>
Can I embed one page (data-role="page") in another page like:
<div data-role="page"> <!-- outer page -->
<div data-role="header"></div>
<div data-role="content">
<div data-role="page"> <!-- inner page -->
<div data-role="header"></div>
<div data-role="content">
inner page content goes here....
</div>
<div data-role="footer"></div>
</div> <!-- inner page -->
<div data-role="footer"></div>
</div> <!-- outer page -->
When I tried like this, i didn't see my content but outer header, footers displaying for
me.
Thanks,
nehatha.
No, you cannot. Pages are not meant to be embedding each other. May be you can probably write what are you trying to achieve by this?
You have two options.
Write your own transition logic, which will not be very difficult, you can say $('#content').html(new html); on every button click and keep only one page.
use data-position="fixed" for header and footer in jQuery mobile and use normal page, this way your header and footer will not move on scrolling, paginating.
Multi-page template structure: http://demos.jquerymobile.com/1.4.2/transitions/pages/
I'm using jqueryUI for tabs on a page. I initialize it like below:
$("#tabs").tabs();
<div id="tabs">
<ul>
<li>Part A</li>
<li>Part B</li>
<li>Part C</li>
</ul>
<div id="tabs-4">
.....
</div>
<div id="tabs-2">
....
</div>
<div id="tabs-5">
....
</div>
</div>
I have 2 questions.
How do I set the tab to be custom. say I want second tab to be shown first. $('#tabs').tabs(2) does not work. i got that from this link
Let say I click on a button inside tab1. Clicking on the button takes control back to an action and then control comes back to this page. When the control comes back...then is it possible to set a custom tab?. For example. in tab 1 I click something...go back to the action...and then I want to come back to tab 2.
1.
Is there an error when you call $('#tabs').tabs(2)?
2.
You can set a variable in your controller that tells the view which tab to be active.
#controller
... do some stuff
#current_tab = 2
#view
$('#tabs').tabs(<%= #current_tab %>)