As we can see in the views page of documents in Framework7.
Default View URL
If you think that for some reason Framework7 detects wrong default
View URL (which is used for navigation history), or if you want to
have different default View URL, you can specify it using data-url
attribute on View element or using url parameter when you initialze
View:
<div class="view" data-url="index2.html">
If I do as the doc suggests, for example, in the app which accompany the framework7 package, single view app, laying under /dist/index.html, if I do something like:
<div class="view view-main" data-url='about.html'>
But when i open index.html, the main view is not directing to about.html.
Why is this happening?
It does not work like that. I think you want to load the about.html as default in the main view. You can do this something like this:
<html>
<head>
...
</head>
<body>
....
<div class="views">
<div class="view view-main"></div>
</div>
...
<script type="text/javascript" src="js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
...
<script>
mainView.router.loadPage('about.html');
</script>
</body>
</html>
Related
I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of index.html file,
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
The body section I have called my header.html as follows,
<body>
<!-- include Header -->
<div id="header"></div>
<!-- end include header -->
</body>
The header is including fine but after the header included the dropdown lists become unclickable.
When I go to inspect elements there are following errors,
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true delete those tags from your sub pages because your master page should only have one of specific tags
1) Remove the following tags from header.html and footer.html
<html>
<head>
</head>
<body>
</body>
</html>
2) Regarding Slick error please make sure you are not calling the init twice, best way would be
$('.selector').slick();
$(document).ready(function() {
$.get("header.html", function(response){
$('#header').html(response);
});
})
<?php include_once('header.html');?>
<div id="header"></div>
<?php include_once('footer.html');?>
I have tried adding a section script inside a view component's view.
#section scripts {
<script src="~/somepath" asp-append-version="true"></script>
}
I also have the Render Section in the shared layout
#RenderSection("scripts", required: false)
When used in partial views and elsewhere in the project the script loads fine. However when in a View Component the script does not load.
I suppose I could include the script in the section tag of every view that calls the component. I feel this does not fit with the self contained nature of a view component.
Is there another way I can do this?
I also had problems with sections tag in viewcomponents. Turns out, to the best of my knowledge, there is no support for it in viewcomponents. See https://github.com/aspnet/Home/issues/2037
Jake Shakesworth has implemented a tag helper as shown in:
Javascript in a View Component
On the other hand you could just include it in your viewcomponent as an
<script defer src"...">
</script>
My requirement was to show a google map from a viewcomponent. Problem was that the script was getting called before the jquery, jquery.ui stuff.
By using defer you are telling the parser not to execute it until the document had loaded thus avoiding the problem of the having to put it in the layout for proper execution.
Defer is supported by chrome, safari, and ie(10+), ff(3.6+), o(15+)
Hope this helps
This is an example of my code:
#using MobileVet.WebApp.Services;
#inject ISettingsService SettingsService
#{
var Options = SettingsService.Value();
<!--Service Area-->
<div class="container-fluid">
<div class="row p-3">
<!--First column-->
<div class="col-md-3">
<h5 class="title">Site Navigation</h5>
<ul>
<li>Home</li>
<li>Services</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<!--/.First column-->
<hr class="w-100 clearfix d-md-none">
<!--Second column-->
<div class="col-md-9">
<div id="map-canvas" style="min-height: 300px; min-width: 200px;">
</div>
</div>
<!--/.Second column-->
</div>
</div>
<!--Service Area-->
<script src="http://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXX&sensor=false"></script>
<script type="text/javascript" src="~/js/components/servicearea.js" defer ></script>
}
Note that you would probably need to write some logic to prevent the script to be included multiple times if the view component is present more than once on a page, which was not my case
From what I have seen, a "#section Scripts {}" in a ViewComponent is ignored and does not render in the relevant #RenderSection() of the ViewComponents _*layout.cshtml
Why that is I do not know.
#section scripts { } in viewcomponents is ignored and not rendered by Asp.Net rendering engine. So just use at the end of the view component. Also if your jquery scripts are specified at the end in your layout, then jquery will not be available in your viewcomponents. Of course moving the jquery script to the head section in layout will solve the problem but it is recommended to load the js files at the end.
So if you want to keep jquery scripts at the end of layout and still use jquery in viewcomponents, you could use javascript domcontentloaded and any jquery can be written inside domcontentloaded. Not a permanent good approach but works for me.
<script>
document.addEventListener('DOMContentLoaded', function (event) {
console.log($ === jQuery)
});
</script>
Or as mentioned by #Alberto L. Bonfiglio you could also try to move your script to another JS file and defer load it in your viewcomponent:
<script src="viewComponentScript.js" defer></script>
This is how I approached inserting scripts into a view component using Asp.net core 2.0.
First I created a partial view which I placed inside of the view components view folder.
Path: Views/Shared/Components/CalendarWidget/_CalendarScriptsPartial.cshtml
_CalendarScriptsPartial.cshtml
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/moment/moment.js"></script>
<script src="~/lib/fullcalendar/dist/fullcalendar.js"></script>
<script src="~/js/calendarWidget.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/moment/min/moment.min.js"></script>
<script src="~/lib/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="~/js/calendarWidget.js"></script>
</environment>
Then, I brought in the scripts via the Html partial async helper method inside of my view components view.
Path: Views/Shared/Components/CalendarWidget/Default.cshtml
Default.cshtml
<section id="calendar"></section>
#await Html.PartialAsync( "Components/CalendarWidget/_CalendarScriptsPartial" )
And for the sake of completeness here is my view components class.
Path: ViewComponents/CalendarWidgetViewComponent.cs
CalendarWidgetViewComponent.cs
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace LodgersChoice.ViewComponents
{
public class CalendarWidgetViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync( )
{
return View( );
}
}
}
Note: Async isn't currently required in my example but I intend to inject a repository into the ctor of the class which will be using async/await.
Note 2: Once I'm done developing this I plan on bundling and minifying everything down to one script.
I'm registering the ViewComponents scripts in a scoped service, the registered scripts are then rendered after the scripts section in layout.
ViewComponentsService.cs
using System;
using System.Collections.Generic;
namespace YourProject.Services
{
public class ViewComponentsService
{
private readonly List<Func<object>> _scripts = new List<Func<object>>();
public IEnumerable<Func<object>> Scripts {
get {
foreach (var script in _scripts)
{
yield return script;
}
}
}
// A dictionary could be used as type for the _scripts collection.
// Doing so a script Id could be passed to RegisterScript.
// Usefull if only one script per ViewComponent type needs to be rendered.
public void RegisterScript(Func<object> script) {
_scripts.Add(script);
}
}
}
Don't forget to register the service in startup.
services.AddScoped<ViewComponentsService>();
Example ViewComponent
Here we have the ViewComponent and its scripts in the same file!
#model UI.FailUserFeedback
#inject Services.ViewComponentsService _viewComponentsService
#{
var modalId = UI.Utilities.RandomId();
var labelId = UI.Utilities.RandomId();
}
<div class="modal fade" id="#modalId" tabindex="-1" aria-labelledby="#labelId" aria-hidden="true">
#*omitted for brevity*#
</div>
#{
// the script is written here
Func<dynamic, object> RenderScript =
#<script>
(function () {
var modal = new bootstrap.Modal(document.getElementById('#modalId'));
modal.show();
})();
</script>;
// and registered here
_viewComponentsService.RegisterScript(() => RenderScript(this));
}
Layout
#inject Services.ViewComponentsService _viewComponentsService
...
#await RenderSectionAsync("Scripts", required: false)
#foreach(var script in _viewComponentsService.Scripts) {
#script();
}
In case of ViewComponent called by Controller inside a modal or another element being rendered after page is fully loaded, defer won't work either. Instead you must put these scripts in a parent View or in _Layout.
In my case it was an ajax form and
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>
or even#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
would not be loaded and caused problems posting the form correctly.
View component in ASP.NET Core acts like independent view with separated controller, so you can insert bellow tag above of your view component
#{
Layout = null;
}
after that insert bellow tag to use related script,for example:
<environment include="Development">
<script src="~/js/chart.js"></script>
</environment>
<environment exclude="Development">
<script src="~/js/chart.min.js"></script>
</environment>
My current structure has a layout with header, body and footer. Inside the body load a view using ajax to call for a action controller returning a Json and painting a tree view. When user click on the tree view the footer should load the detailed information. But isnt working, my guess is because the scripts section isnt render properly.
Right now the script are in the layout without bundles or anything and work ok on the Main body because I use Jquery and a Tree to load the Json data.
But in the partial View get an error. I could write a #section scripts area and copy all the script from the layout in the Partial View but why should I duplicate the code?
The worst part is only give me problem in the production enviroment ... on my devolpment enviroment works ok.
So the questions:
Why the main view can see the scripts define on the Layout but the Partial View Doesnt?
Why my development enviroment work ok, but productions doesnt?
What should I do to solve this?
EDIT: More testing.
This is a test View, this render in the Body. But I need include script section otherwise the dialog doesnt show, even when layout have the scripts too.
#{
ViewBag.Title = "TreeDetails";
}
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
<h2>TEST PAGE</h2>
<script>
// Your code goes here.
$(document).ready(function () {
console.log("before dialog");
$("#dialog").dialog();
console.log("after dialog");
})
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
#section scripts {
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
}
It seems a run time error due to an unrecognized jquery function.. try to move your link reference to jquery from your view #section area in the layout header..
Im using a responsive menu code which uses document.getElementById to trigger the menu.
It works for pages that are on the same folder as the masterpage. However for pages on a seperate folder, the menu isn't popping up.
Sample of the code:
<body>
<div class="mp-pusher" id="mp-pusher">
<nav id="mp-menu" class="mp-menu">
</nav>
</div>
<a class="codrops-icon codrops-icon-prev" href="#" id="trigger"><span>Menu</span></a>
<script src="/CodeTest/js/classie.js"></script>
<script src="/CodeTest/js/mlpushmenu.js"></script>
<script>
new mlPushMenu(document.getElementById('mp-menu'), document.getElementById('trigger'));
</script>
</body>
The script has to be in the body of the html for some reason as when I moved it up into the it doesn't work.
Try this,
<script type='text/javascript' src='js/classie.js'></script>
<script type='text/javascript' src='js/mlpushmenu.js'></script>
You need to show to the browser where to look for the JS file on the file you want to call the JS file.
If your JS file is in a folder called JS that is inside a folder called CodeTest, and you want to call this file in an html inside a folder called (for example) somethingFolder.. you should go back one level (. .) and then search for CodeTest -> js -> file.js, example:
src="../CodeTest/js/file.js"
Now if you want to call the JS file in a file that is on the same level of CodeTest folder, you must link without the dots (..), example:
src="CodeTest/js/file.js"
I'm trying to use Ember in my grails project. However, I'm having a layout issue. The ember templates are always displaying below the footer. This does not happen with regular html, when I don't use Ember.
Here is my layout
<html>
<head>
<g:layoutHead/>
<r:require module="application"/>
</head>
<body>
<div id="wrap">
<g:layoutBody/>
<div id="push"></div>
</div>
<div id="footer>
</div>
</r:layoutResources/>
</body>
</html>
This is the page where I'm using ember template
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<script type="text/x-handlebars">
<h1>test</h1>
</script>
</body>
</html>
Here is my applicationresources.groovy
modules = {
application {
dependsOn "jquery", "emberjs","emberjsdata"
resource url:'js/application.js'
resource url:'js/App.js'
}
emberjs {
dependsOn 'jquery,handlebars'
resource url: 'js/ember-latest-stable.js'
}
handlebars {
resource url: 'js/handlebars-1.0.0-rc.4.js'
}
emberjsdata{
dependsOn 'emberjs'
resource url: 'js/ember-data-latest.js'
}
}
Problem
For some reason the hello shows up below the footer. Not sure why since it works fine with plain html
By default ember use the body as root element, then the contents of templates will be inserted and replaced in that element. So by default ember is a single page application.
If you need ember just for some piece of html, use by example:
Javacript
YourAppNamespace.rootElement = "#myEmberApp";
Html
<body>
<div id="wrap">
<!-- render normally contents from server -->
<g:layoutBody/>
</div>
<div id="myEmberApp">
<!-- all content here is controlled by ember -->
</div>
<div id="footer>
My company all rights reserved
</div>
</r:layoutResources/>
</body>
Hope it helps