I am making a social website that each user can view his own or other user's profile. I created a user controller to handle the identity and blog, status, profile controller to retrieve information. My question is how can I make the three sub controllers ( blog, status, profile) under the user controller, like a tab view?
If you want to have Tabs in your application you should pick first an ajax framework to create andload content into them:
Assuming you are willing to use jquery:
Tabs supports loading tab content via Ajax in an unobtrusive manner.
The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly:
<div id="example">
<ul>
<li><span>USER</span></li>
<li><span>his blogs</span></li>
<li><span>Whatever</span></li>
</ul>
</div>
For more info: http://jqueryui.com/demos/tabs/#Events
And the tab content will be loaded through those "controllers" which are in fact generating view scripts.
To disable the layout on your views which should be integrated inside the Tabs-panels, if the mode is simple, you can add in ZF1
$this->_helper->layout()->disableLayout();
Related
I'm trying to set/add a class name to a div by targeting its ID but I'm not having much success at the minute.
I basically have my website navigation saved to an external file so all I need to do is make changes to one file to update all pages, but doing this restricts my website users from being able to easily identify which page of the site they are on.
I have a class="current" option that visually tells the user where they are in the menu but I can't for the life of me add the class to the navigation menu. I'm trying to run the code after the nav menu file is loaded in using the following code, where am I going wrong?
<?php include_once ("includes/page_top.php"); ?>
<script type="text/javascript">
document.getElementById('home').className("current");
</script>
className isn't a function.
Instead of this:
document.getElementById('home').className("current");
You want this:
document.getElementById('home').className = "current";
i am creating a single page application using HotTowel SPA, which uses Durandal 2.0
I have two views, named Dashboard and Settings.
When i load the website, the Dashboard view gets loaded. When i click on Settings, the Dashboard view gets deactivated, and when i click on Dashboard, it gets activated again.
I have a method on my Settings View. When this method is called, i want the Dashboard view to be removed from the DOM. so that when I click on Dashboard again, it has to reload the view (just like it does when you reload the webpage), in stead of just activating it.
So is there a way to detach a view manually?
You can cacheViews to false on the composition binding. See about 3/4 down the Using Composition
page.
In the shell.html file (I presume it's the same in HotTowel), there will be a line like:
<div class="container-fluid page-host" data-bind="router: { transition:'entrance', cacheViews:false }"></div>
I'm building an offline tablet/phone app in HTML5 to collect data remotely in the field where there are no cell towers. It uses the offline application cache manifest to save the pages into the browser. I'm attempting to get it to work in Safari and Android.
Currently there are a multiple separate web pages for my site (index.html, load.html and sync.html). I want to be able to load each page in and run different javascript when each page has loaded.
Originally I had a main index page (which acted as the bootstrap for the application) and was using jQuery's .load() function to load the different page files (only snippets of html) into the main display div when a menu button was clicked. This worked pretty well with the iPhone. However when trying it on Android and the site was already cached and the device was in flight mode so it can't connect to the server, the page would fail silently to load in the HTML from the external page for some reason so I'd get a blank screen. I narrowed it down to jQuery's .load() function failing in Android when loading pages from the cache.
So then I tried keeping the individual pages separate and having all the HTML, JavaScript, CSS includes and header code mirrored on each page (not very efficient). So each page could run standalone by itself. This worked ok in Android and iPhone in the web browser when following a simple href link to load the other pages. However when I go into app mode on the iPhone (i.e. you save the webpage to the home screen so it appears as an actual app icon then you run it from there it appears almost fullscreen apart from the status bar) then click on a menu icon to load sync.html for example it opens the page in Safari instead of staying within the fullscreen 'app' mode.
Is there a way to open separate web pages that should be cached within the fullscreen 'app' mode on iPhone? I don't want the other pages loading up Safari as there's less screen size.
The only other method I can think of is having all the html snippets hidden in divs on the main index page, then showing and hiding the divs depending on which menu button is clicked. This may look cleaner and be faster but just wondering if there's a better way to do it?
For now the cleanest solution I could come up with was this:
HTML:
<section id="pageContent">
<div id="homePage" class="hidden">
<?php include_once 'home.html'; ?>
</div>
<div id="loadPage" class="hidden">
<?php include_once 'load.html'; ?>
</div>
<div id="syncPage" class="hidden">
<?php include_once 'sync.html'; ?>
</div>
</section>
CSS:
.hidden {
display: none;
}
This lets you keep your content pages in separate files. And because the html in those files is all included into the index page on page load all the html gets cached as well. Simply a matter of hiding and showing the various pages now.
Then I used some simple jQuery to show and hide each page and set up some simple JavaScript functions to show each individual page. E.g.
function showSyncPage()
{
$('#pageContent').children().hide(); // Hide all the other divs (other pages)
$('#syncPage').show(); // Show the sync page
}
Then also add those function calls into onclick handlers on your buttons/links to open each page. E.g.
<a class="button" onclick="showSyncPage()">Sync</a>
Now you've got a working navigation system that loads all the pages in iPhone/Android and even in iPhone 'app' mode without loading Safari.
I have a multiple tabs and I am calling an ascx file for each tab, I have some control and submit button for each ascx file. Now I when ever I enter the data in first tab and switch to second tab and enter some data and click on submit then the first tab data is also getting empty.
I want to keep the data for the first tab or when I enter data on the firrst tab and click submit then what ever the data is there in other tabs must be there.
Can any one some source how to resolve this problem.
MVC2 has no "viewstate" like web.forms does. That means if it's not on the screen in some way, you must store it in session to persist it. I wouldn't recomend using session as you can tie youreself in knots in some situations, but can be appropriate for some things.
You basically have 2 options left if you don't want to use session:
1 - Show your tabs all on 1 page and then show/hide them using jquery to the client
For example:
Tab 1
Tab 2
Tab 3
<div id="tabcontents1" class="tabcont">
...
</div>
<div id="tabcontents2" class="tabcont">
...
</div>
<div id="tabcontents3" class="tabcont">
...
</div>
Then use JQuery or javascript to hide them on load and show them on click. For example:
$(document).ready(function () {
$(".tabcont").hide();
});
function showTab(tab) {
$(".tabcont").hide();
$("#"+tab).show();
}
OR
2 - Put any data you want to persist in hidden inputs on your form. If you only have a small model, this can be the easiest approach.
NOTE: This rule is a HTML rule, not an MVC rule. Webforms just "fakes" persistance with ViewState and MVC is more honest about how you deal with http.
I'm sure there's a simple answer but I can't think of it.
I'm working with a designer who is using Dreamweaver to produce a series of static HTML pages and style sheets. These pages navigate to each other using standard anchors.
However, on a couple of pages there needs to be a navigation to a page under ASP.NET.MVC 2 (from here I do all the coding stuff to the backend) which has Form input etc.
What is the best way to ...
1: Navigate from a standard HTML page into ASP.NET.MVC 2(Home controller)
And/Or
2: The best way to have ASP.NET.MVC output the static HTML pages. Meaning the ASP.NET.MVC controller reads the static HTML (from a cache) then outputs it to the View
Hope this makes sense, thanks in advance.
Any links will be very much appreciated
If you're going to the root of an MVC-based site, if would just be the URL as the index view of the home controller is usually the default. Something like http://www.website.com. However, if you want a specific controller/view then the the syntax would be http://www.website.com/{controller}/{view}.
HTH