I am developing a web app using asp.net mvc 3. I have a main layout page which contains jquery ui tabs.
I am using knockout.js binding tool. My issue is from my tabs how can I go the relevant controller to return the view. Example is I click on tasks project so in the container for the view it should show the tasks page as rendered by the tasks controller
Any help would be good
Thanks
The simplest solution is to us RenderPartial. Then you can either bind each tab via knockout, or bind the whole lot of them.
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("TabOne", Model);%>
</div>
<div id="tabs-2">
<% Html.RenderPartial("TabTwo", Model);%>
</div>
<div id="tabs-3">
<% Html.RenderPartial("TabThree", Model);%>
</div>
This assumes that the html content doesn't vary based off of the data, or at least not so much that knockout can't take care of it. If your html varies a lot you can use a routing system like Crossroads.js (http://millermedeiros.github.com/crossroads.js/) and fetch the data for the div using ajax.
Related
I'm confused. I've thought it's possible to pass SpringBoot/Thymeleaf objects from the html page to the Modal form. I've come across many examples using ajax to pull data from the REST endpoint instead.
Is using ajax to pull in objects into Modals, the only method?
Thymeleaf is a server side templating language... the concept of a modal form usually means showing/hiding a window opens and closes on the client side (meaning JavaScript that runs when a user clicks a link or a button ). If you don't want to use an API to pull that data (which I think makes the most sense), then you have to create a hidden modal for every row on your page. For example:
<div th:each="item, i: ${items}">
<a href="#"
onClick="openModal(this.getAttribute('data-modal'))"
th:data-modal="|#modal${i.index}|">
Edit modal #<span th:text="${i.index}" />
</a>
<div th:id="|modal${i.index}|" style="display: none;">
<p>I am a modal form for element <span th:text="${i.index}" />!</p>
<input type="text" th:value="${item.value}" />
</div>
</div>
You can see how this works... creating a hidden div/modal form for every row (so you don't have to call an API to get the form values), but it comes with a lot of extra HTML.
I'm doing a browser check and trying to display a warning message if the person is using a browser that is not compatible(IE 8 and less), believe me, there are people using it where i work
The problem i'm having is i cannot seem to hide the #Render of the page
My if statements are all kicking in fine, and i have wrapped the #Render with a div and i'm trying to hide it based on the conditions i get, like so
else {
$("#yourMessage").show();
$("#content").hide();
}
HTML
<div id="content">
#RenderBody()
</div>
<div id="yourMessage" hidden="hidden">Some Message</div>
Is there something built in to MVC to stop me from being able to do this?
I have to create multi page angular framework using ng boilerplate. We have modular component based approach and single component can be created multiple times on same page. For example I can have 2 instance of carousel component on home page and there configuration and slides parameter for image path etc are coming from ajax. Now challenge is that this ajax url is dynamic and there is no fixed pattern so I cant hard code in my js. is there any way I can pass this dynamic url from template to my $http request?
Something like this in
<div ng-controller="CarouselCtrl" carouselUrl="<dynamic url>">
<div class="container slider">
<ul>
<li ng-repeat="slide in slides">//..</li>
</ul>
</div>
</div>
You can pass attributes to controllers only in directives. Moreover, you might rethink having your CarouselCtrl logic in separate directive, as this is clearly the case where this should be done.
I am attempting to rewrite a multi-page website into a SPA using jQuery UI Tabs. In the shell page, one tab references an id within the page, while the rest of the tabs load other pages via AJAX. It looks something like this:
<div id="tabs">
<ul id="nav">
<li>HOME</li>
<li>LEARN</li>
<li>LISTEN</li>
<li>SUPPORT</li>
<!--etc.-->
</ul>
<div id="home">
<!--blah blah blah-->
</div>
</div>
Within learn.html, I have another set of UI tabs that are set up the same way:
<div id="tabs2">
<ul id="nav2">
<li>About Us</li>
<li>Sponsors & Donors</li>
<li>Staff & Board</li>
<!--etc.-->
</ul>
<div id="about">
<!--blah blah blah-->
</div>
</div>
The problem arises in clicking a tab within learn.html: the event of clicking one of the AJAX tabs within this AJAX tab bubbles up to the window, and sponsors.html or whatever loads in place of the shell page.
I have tried event.stopPropagation() but it did not work; using event.preventDefault on the tabs prevented the tab functionality in the first place. What else is there to do?
You could try adding the result of the ajax call to a specific div. In the success function of the ajax call.
Are you calling preventDefault on the click of the tab, or the anchor? You might need to setup a separate handler for the anchor click.
$("ul#nav2 li a").click(function(e) {
e.preventDefault();
});
My problem is gone now...
The page I had loading via AJAX had its own doctype and head tag and the whole shebang. After I removed that, I no longer had any problems.
I'm using the Jquery UI tabs functionality to load content via ajax. I'd like to load a particular div in the ajax call, not the entire page. Is this possible without using jQuery's load()?
As you can see from the code, it's a stock standard basic jQuery tabs implementation, but I want a particular div rather than the full page.
Here's my html:
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Ajax tab</li>
</ul>
<div id="tab-1>Tab one content</div>
<div id="tab-2>Tab two content</div>
</div>
And the inline script:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Anyone know if this is possible?
Nathan.
Yes, it is possible. Use jQuery ajax "load" function. Example:
$('#result').load('ajax/test.html #container');
For your 3rd tab you should manually load content via ajax call, also you can define selector which exactly part of loaded page you need. So, create 3rd tab as via general way, load page content for 3rd tab and create tabs. Or you can dynamically load 3rd tab's content when the user clicks on tab.
More information here: http://api.jquery.com/load/, please see paragraph "Loading Page Fragments".