I am using a razor template so I can reduce the amount of clutter in my mvc views when working on code. I have created "section" which will render as the seperate pages required for my mobile pages as follows:
<div data-role="page" id="page2">
<div data-role="header">
#if (IsSectionDefined("Header2"))
{
#RenderSection("Header2")
}
else
{
}
</div>
<div data-role="content">
#if (IsSectionDefined("Content2"))
{
#RenderSection("Content2")
}
else
{
}
</div>
<div data-role="footer">
#if (IsSectionDefined("Footer2"))
{
#RenderSection("Footer2")
}
else
{
}
</div>
I use the same template as above for up to 3 pages.
My issue at the moment is I have assigned some code to my page 2 using:
#section Content2{
<div id="machinesearch" class="ui-content">
<ul id="machinelist" data-autodividers="true" data-theme="d" data-divider-theme="a"
data-filter="true" data-role="listview">
#foreach (var item in Model.Plants)
{
<li>#item.Asset_Descriptor<input id="Sap_ID" type="hidden" value="#item.Asset_SAP_ID"/></li>
}
</ul>
</div>
}
And my link to show this page is:
$("#testbutton").click(function(){
$('#page2').trigger('pagecreate');
$("#machinelist").listview('refresh');
alert("test");
});
But this does not seem to make any difference.
Any ideas?
I can see the data is all loaded in correctly when I view the html source of my first page which also contains the html for the second page. It seems to be because razor is injecting the data in to page 2 after the page 1 is loaded.
You aren't actually showing the page.....
$.mobile.changePage("#page2");
will show the page.
Related
I am creating a Tizen Web App for wearable device and i want to route to a certain point on a separate page but anchor tags don't seem to be working. They route me to the page, but just to the top of the page.
I've tried these 3 options, the first one routes me to the top of the page no matter how far down the tag is and the other two don't work at all.
I've also tried doing it with the second page in a seperate HTML using href="flags.html#A" and this also routed to the top of the page.
I also tried using 'name' instead of 'id' and a 'div' tag in place of an 'a' tag with the same results.
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<ul class="ui-listview">
<li><a href="#flags">A
<i>Alfa</i></a></li>
<li><a href="#flags#B">B
<i>Bravo</i></a></li>
<li><a href="#flagsC">C
<i>Charlie</i></a></li>
</ul>
</div>
</div>
<div class="ui-page" id="flags">
<header class="ui-header">
<h2 class="ui-title">Select Flag</h2>
</header>
<div class="ui-content">
<a id="A">A-Alfa</a><br>
<a><b>International Call Signals</b><br>I have a diver down; keep well clear at slow speed</a><br>
<a id="B">B-Bravo</a><br>
<a><b>International Call Signals</b><br></a><br>
<a id="flagsC">C-Charlie</a><br>
<a><b>International Call Signals</b><br>Affirmative</a><br>
</div>
</div>
Any help would be hugely appreciated
Not the cleanest solution but i ended up using a javascript function to achieve my goal.
function loadPage2(flagSelection) {
window.localStorage.setItem("flagSelected", flagSelection);
location.href="flagsPage.html";
}
triggered by;
<li><a onclick=loadPage2("#A");>A
<i>Alfa</i></a></li>
<li><a onclick=loadPage2("#B");>B
<i>Bravo</i></a></li>
<li><a onclick=loadPage2("#C");>C
<i>Charlie</i></a></li>
and on the second page;
var flagSelection = window.localStorage.getItem("flagSelected");
function jumpToFlag() {
location.href="#";
location.href=flagSelection;
}
const load = () => {
console.log("load event detected!");
}
window.onload = jumpToFlag();
Working on a site that has a structure of a main navigation that is defined in my shared "_Layout.cshtml" page and links on the main nav that will take you to different pages that have a separate navigation bar that is unique to that page.
(something like this^).
Currently I just have my second nav and main content all on the same page and have a ton of different tabs with Html.Actions rendered and they are toggled by clicking a link on the second navigation and changing the tab. This works but it makes my initial page load extremely slow since I believe they are all being loaded at once.
Html for tabs:
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1" role="tabpanel">
<div class="container-fluid">
#Html.Action("tab1", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2 } })
</div>
</div>
<div class="tab-pane fade in" id="tab2" role="tabpanel">
<div class="container-fluid">
#Html.Action("tab2", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2 } })
</div>
</div>
<div class="tab-pane fade" id="tab3" role="tabpanel">
<div class="container-fluid">
#Html.Action("tab3", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2 } })
</div>
</div>
<div class="tab-pane fade" id="tab4" role="tabpanel">
<div class="container-fluid">
#Html.Action("tab4", new ViewDataDictionary { { "item", m.item }, { "item2", m.item2
} })
</div>
</div>
Is there any alternative that would be better for a layout that has multiple secondary navigation bars that change depending on the link clicked on the "_Layout.cshtml" page?
Thanks for any help or ideas.
If you have complex pages that are getting loaded all in advance, and this is slow...alternatives would be:
Make the tabs just links to other pages that use the same tabs on them but aren't actually loaded. This will look the same, but--naturally--navigating from one tab to the next will be slower since everything isn't pre-loaded.
Use javascript to dynamically load the content when the user clicks on the tab. E.g. using jQuery.load(). This has more complexity but fits better with your current setup.
I have some trouble. I am using this plugin "angular-masonry" (it's on Github) to dynamically build the grid on the page. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc
Here is my code:
<div class="container" style="width:80%">
<h1 style="text-align: center; margin-bottom: 40px">
Category: {{category.text}}
</h1>
<div>(masonry='' load-images="false")
<div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
<div>
<h3>(style='margin-left:30px')
Portal: {{portal.text}}
</h3>
<div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
<div class="claim_sections">
<claimforlist claim="claim"></claimforlist>
</div>
</div>
</div>
</div>
</div>
</div>
But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ
I think that view loads earlier than JSON data arrives.
Can anyone help and tell me how can I load view after the data has arrived? Or if you know another reason of such an issue, please reply.
Thanks in advance.
You can add a scope boolean variable with value set to false, and change the value to true on your http promise success.
Code sample:
function myController($scope, YourDataServer) {
$scope.dataLoadedSuccessfully = false;
yourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>
<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
<!-- data goes here -->
</div>
My ASP.NET MVC application includes a Razor view with 3 tabs with a bunch of fields.
tab 1-2 has a bunch of fields
tab 3 should have a file upload section which should be rendered from a partial view.
Here is the structure:
<body>
<div class="container well" >
#using (Html.BeginForm(new { Action = "action X",id="publishingForm" })) {
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<div class="form-horizontal">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><span><strong>Step 1:</strong></span> Enter required fields</li>
<li><strong>Step 2:</strong> Enter optional fields</li>
<li><strong>Step 3:</strong> Upload your video</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="requiredtab">
</div>
<div class="tab-pane" id="optionaltab">
</div>
<div class="tab-pane" id="uplaodtab">
partial view here
</div>
</div>
</div>
</div>
}
</div>
</body>
</html>
As you can see the tab Divs are wrapped in a form (post to Controller X).
The problem is the partial view for the file upload also includes a form which should post to a handler. But when I initiate a file upload in Tab 3 it is attempting to post to Controller X of the original form.
How can I structure my view to have the fields included in the form on tabs 1 & 2 post to Controller X and the Form in Tab 3 post to its correct handler?
The bottom line is I am trying to post separately to 2 different forms included in different tab panels
i suggest that you wrap your two forms with Ajax Forms, and you can submit them both asynchronously
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "updateDiv" }))
{
<input type="submit" id="submitForm1" value="OK" />
}
<div id="updateDiv"></div>
#using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "updateDiv2" }))
{
<input type="submit" id="submitForm2" value="OK" />
}
<div id="updateDiv2"></div>
and call the .click() for each submit button whenever your code needs to.
Anyone can please tell me what im doing wrong here:
i just update the library, and seems that the code broke for some reason it's not doing anything.
angular library
html5 code
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<header id="header">
<h1 id="logo"></h1>
<div id="menu">
<a ng-click="setRoute('home')" class="btn">Home</a>
<a ng-click="setRoute('about')" class="btn">about</a>
<a ng-click="setRoute('experiments')" class="btn">Experiments</a>
</div>
<div class="color"></div>
<div class="clear"></div>
</header>
<!-- //top -->
<div class="shadow"></div>
<div id="container">
<div ng-view></div>
</div>
angular.js
angular.module('WebSite', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {templateUrl:'folder/test.html', controller:AboutCtrl}).
when('/experiments', {templateUrl:'folder/test.html', controller:ExperimentsCtrl }).
when('/home', {templateUrl:'folder/test.html', controller:HomeCtrl }).
otherwise({redirectTo:'/home'});
});
function AboutCtrl($scope) {
$scope.title = 'About Page';
$scope.body = 'This is the about page body';
}
function ExperimentsCtrl($scope) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';
}
function HomeCtrl($scope) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';
}
First you need to use ng-app to setup the angular application with your module. Maybe you already did, but it is not part of the snippet you posted:
<html ng-app="WebSite">
Also, about the setRoute(), I don't know where you copy that from, but you don't need it. Just use the href with the hash, for example:
about
You need to check out the source from github at https://github.com/simpulton/angular-website-routes
There is no changeRoute method. After some dialog, I realized it was best to handle the anchors tags as naturally as possible.
Your menu element should look like this
<div id="menu">
Home
About
Experiments
</div>
Hope this helps!