I changed my applications so a different page would load when ran but now I receive the error
Unable to get property 'getContext' of undefined or null reference
It's not causing any problems yet but I'm hoping to fix it before it does.
Looking online this usually happens when a <canvas> tag comes before a <script> tag but I cannot find where this is occurring.
#using Application.Models;
#using Newtonsoft.Json;
#{
User user = ViewBag.User;
}
#if (ViewBag.Loader)
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>#ViewBag.Title - Application Title</title>
<script id="userData" class="userData" type="application/json" data-accurate-up-to="#user.AccurateUpTo">
#Html.Raw(JsonConvert.SerializeObject(user, Newtonsoft.Json.Formatting.None, new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore }))
</script>
#Styles.Render("~/Styles/lib")
#Styles.Render("~/Styles/css")
#Scripts.Render("~/Scripts/lib")
</head>
<body>
<!-- Navbar -->
<div id="nav">
<div id="smallLogoHolder">
<img id="smallLogo" src="~/Images/sidewaysLogo.png" />
</div>
<div id="navContents">
<div id="logoHolder">
<img id="logo" src="~/Images/logo.png">
<div id="slogan">Application Name<div id="dayOTheYear"></div></div>
<script>
setInterval(function () {
$("#dayOTheYear").text("(Day: " + moment().dayOfYear() + ")");
}, 1000 * 10);
$("#dayOTheYear").text("(Day: " + moment().dayOfYear() + ")");
</script>
</div>
<ul id="menu">
<li class="navItem #if (ViewBag.Title == "Page 1") { #("activeNavItem"); }">Page 1</li>
<li class="navItem #if (ViewBag.Title == "Page 2") { #("activeNavItem"); }">Page 2</li>
<li class="navItem #if (ViewBag.Title == "Page 3") { #("activeNavItem") ; }">Page 3</li>
<li class="navItem #if (ViewBag.Title == "Page 4") { #("activeNavItem") ; }">Page 4</li>
</ul>
<div id="userSection">
<div id="loginSection">
<div id="loginSectionPic" style="background-image: url(#("path" + User.Identity.Name.Replace("DOMAIN","").Replace("/","").Replace("\\","")))"></div>
<div id="loginSectionContent">
<span id="user">#User.Identity.Name.Replace(#"DOMAIN\", "")</span>
<span id="userType">
#if (user.SecurityGroup.Name != "N/A")
{
#("(" + user.SecurityGroup.Name + ")")
}
else
{
#("(No Role)")
}
</span>
<div><span id="switchUserButton">Switch User</span> | <span id="logoutButton">Logout</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="dialog notificationDialog">
<h2 class="dialogHeader">My Title</h2>
<div class="notificationMeta">Sent by <span class="notificationSubmittedBy"></span><br /><span class="notificationSubmittedTime"></span></div>
<div class="notificationText">
</div>
<input type="button" class="markRead" value="Mark As Read" />
<input type="button" class="closeNotification" value="Close" />
</div>
#RenderBody()
<div id="content">
<span id="loadingMessage">Loading...</span> <img id="dataLoadingGif" src="~/Images/loader.gif" />
<script>
$(window).load(function () {
$.get("#Request.Url.ToString()?loader=0", function (markup) {
$("#loadingMessage").text("Rendering...");
setTimeout(function () {
$("#content").html(markup);
}, 200);
}).fail(function (response) {
console.log(response);
$("#loadingMessage").html("<span style='color:red'>Failed</span><br/><br/>");
$("#dataLoadingGif").remove();
$("#content").append('<iframe id="yellowScreenOfDeathHolder" style="display:block; width:100%; height: 1000px;"></iframe>');
$("#yellowScreenOfDeathHolder").contents().find("html").html(response.responseText);
})
});
</script>
</div>
</body>
</html>
}
else
{
<div id="title">
#ViewBag.Title
#if (ViewBag.Title == "Page 2" || ViewBag.Title == "Page 3")
{
<span class="areaTitle"> - All Areas</span>
}
else if(ViewBag.Title == "Page 1" || ViewBag.Title == "Page 4")
{
if (((User)ViewBag.User).Area != null)
{
<span class="areaTitle"> - #(((User)ViewBag.User).Area.Name)</span>
}
else
{
<span class="areaTitle"> - All Areas</span>
}
}
</div>
#RenderBody()
#Scripts.Render("~/Scripts/app")
}
This is my Layout.cshtml and nothing was changed here, all I did was change some information in my RouteConfig.cs to go to a different page. The reason I linked Layout.cshtml is because when the program is ran it gets through loading Layout.cshtml and then tells me .getContext is null within the jquery
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{action}/{id}",
defaults: new { controller = "Home", action = "Page 2", id = UrlParameter.Optional }
All that changed here was Page 2 used to be Page 1, could the <canvas> elements on Page 1 be causing the problems?
Update:
After further investigation it returns the error on the #Scripts.Render("~/Scripts/app") line so I'm wondering if this script should be called elsewhere. Where would be a better place to call it?
I think I found the solution to my problem. Since page 1 requires the #Scripts.Render("~/Scripts/app") line I moved it from the bottom of Layout.cshtml to Page 1.cshtml since Page 1.cshtml isn't the first to load anymore.
I'm currently checking to make sure this doesn't cause errors anywhere else, once I've done that I'll mark this as the answer.
Related
I am trying to reload the jsTree using ajax load method calling the Action-controller method to load partial view. Initially on page-load the jstree renders fine but after ajax call to update makes it plain ul li items.
I am using HTML data source (UL LI items).
Index.cshtml:
#model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
#{
ViewBag.Title = "About Page";
}
<link href="~/Content/jsTree/docs.css" rel="stylesheet" />
<link href="~/Content/jsTree/themes/default/style.css" rel="stylesheet" />
<div class="row">
<div class="col-md-8">
<button id="refreshTree" class="btn btn-sm">Reload</button><br /><br />
<div id="dv-tree-wrapper">
#{ Html.RenderPartial("_TreePartial", Model); }
</div>
</div>
<div class="col-md-4" id="dv-node-details">
#{ Html.RenderPartial("_NodeDetailPartial", model: TempData["FirstNode"]); }
</div>
</div>
#section Scripts
{
<script src="~/Scripts/jsTree3/jstree.js"></script>
<script type="text/javascript">
$(function () {
LoadTargetTree();
/*********** refresh tree *********** */
$('#refreshTree').on('click', function (event) {
//$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")');
$('#divtree').jstree('destroy').empty();
$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")');
LoadTargetTree();
$('#divtree').jstree('refresh');
});
});
function LoadTargetTree() {
$('#divtree')
.jstree({
core: { check_callback: true }
});
}
</script>
}
_TreePartial.cshtml:
#model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
<div id="divtree">
#foreach (var item in Model)
{
<ul id="tree-#item.Id">
<li id="node-#item.Id">
#item.Name
#Html.Partial("_ChildrensPartialNoRoot", item.EmployeeList)
</li>
</ul>
}
</div>
As per Stephen feedback, changed code to call the LoadTargetTree() in the success callback to resolve this issue.
Code Changed:
$('#dv-tree-wrapper').load('#Url.Action("RefreshTree", "Home")', function () { LoadTargetTree();});
I have a sidebar item which contains a list of comments. I want this item to show only if there are any available comment in the beginning and in order for my template to work I have to put a different style to the first comment than the rest. All the comments are being passed on my Model.
Here is my approach:
#if(Model.Comments?.Count > 0) {
<div class="sidebar_item">
<div class="item_inner slider">
<h4>See what students say:</h4>
<div id="single_banner">
<ul class="slides">
#for (int i = 0; i < Model.Comments.Count; i++)
{
if (i > 0){
<li style="display:none;">
}
#if( i == 0)
{
<li>
}
#Model.Comments[i].Comment
<div class="carousal_bottom">
<div class="thumb">
<img src="img/courses/testi_thumb.png" draggable="false" alt="" />
</div>
<div class="thumb_title">
<span class="author_name">#Model.Comments[i].Student</span>
</div>
</div>
</li>
}
</ul>
</div><!--end banner-->
</div><!--slider-->
</div><!--end sidebar item-->
}
The problem is that this doesn't work and I get errors that some curly brackets are missing or that some elements haven't closed properly. Any help appreciated.
I get errors that [...] some elements haven't closed properly.
The following code isn't recommended because the engine isn't smart enough to determine start/ends for html elements in c# code:
if (i > 0){
<li style="display:none;">
}
#if( i == 0)
{
<li>
}
So I generally put the logic directly in the tag:
<li style="#(i > 0 ? "display:none;" : string.Empty)">
However I'm not really a fan of logic in my view. Additionally to make things easier IMHO, I would have a comment display template. And I personally think there is no good reason to not use classes. Eventually my code would look like:
controller:
foreach(var comment in Model.Comments)
{
comment.IsVisible = comment == Model.Comments.First();
}
view:
// Update Model with Property
// bool HasComments { get { return Comments.Any(); } }
// Then the code actually reads/documents itself
#if(Model.HasComments) {
<div class="sidebar_item">
<div class="item_inner slider">
<h4>See what students say:</h4>
<div id="single_banner">
<ul class="slides">
#Html.DisplayFor(m => m.Comments);
</ul>
</div><!--end banner-->
</div><!--slider-->
</div><!--end sidebar item-->
}
displaytemplates/comments.cshtml
#{
// View logic, it only deals with html/css/javascript
var liClass = model.IsVisible ? string.Empty : "is-not-visible";
}
<li class="#liClass">
#Model.Comments[i].Comment
<div class="carousal_bottom">
<div class="thumb">
<img src="img/courses/testi_thumb.png" draggable="false" alt="" />
</div>
<div class="thumb_title">
<span class="author_name">#Model.Student</span>
</div>
</div>
</li>
Less code and more encapsulated.
I'd also recommend reading Philip Walton - Decoupling Your HTML, CSS, and JavaScript
App doesn't cover all display on mobile - there is a slim black bar on the bottom.
<body>
<div data-role="page" id="main" data-theme="b" data-fullscreen="true">
<div data-role="header" data-fullscreen="true">
<h1>Scheduler</h1>
Dodaj
</div>
<div data-role="main" class="ui-content" id="list">
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>Settings</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!--Adding goals-->
<div data-role="page" id="adding">
<div data-role="header">
<h1>Adding new goal</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<form onsubmit="return false;">
<label>
NEW GOAL:<input type="text" id="goal" />
</label>
<input type="button" value="ADD" id="addBtn"/>
</form>
</form>
</div>
</div>
<!--Settings-->
<div data-role="page" id="settings">
<div data-role="header">
<h1>Settings</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<input type="button" value="Clear all elements" id="delBtn"/>
</form>
</div>
</div>
<!-- Info -->
<div data-role="page" id="info">
<div data-role="header">
<h1>Info</h1>
</div>
<div data-role="main" class="ui-content">
Here help will be. ~~Yoda
</div>
</div>
CSS code is like this:
#main{height:100% !important;}
html,body{
margin:0;
padding:0;
border:none;
}
javascript code:
var db = new PouchDB('goals');
var remoteCouch = 'goals_remote';
db.changes({
since: 'now',
live: true
}).on('change', createList);
createList();
//creating goals
document.getElementById('addBtn').addEventListener('click', function(){
var txt = document.getElementById('goal').value;
var goal = {
_id: new Date().toISOString(),
text: txt,
completed: false
}
db.put(goal, function callback(err, result){
if(!err){
console.log('success');
refresh();
}
});
}, false);
//deleting elements
document.getElementById('delBtn').addEventListener('click', function(){
db.destroy().then(function() {
refresh();
});
}, false);
function refresh(){
location.reload(true);
}
//pressing goal
function pressGoal(goal){
if(goal.completed){
goal.completed = false;
} else {
goal.completed = true;
}
db.put(goal);
createList();
}
function createList() {
var completedTasks = [];
var notCompletedTasks = [];
db.allDocs({
include_docs: true,
descending: true
}).then(function(result) {
for(var k = 0; k < result.rows.length; k++){
if(result.rows[k].doc.completed){
completedTasks.splice(completedTasks.length, 0, result.rows[k].doc);
} else {
notCompletedTasks.splice(notCompletedTasks.length, 0, result.rows[k].doc);
}
renderList(completedTasks, notCompletedTasks);
}
}).catch(function(err) {
console.log(err);
});
}
function renderList(completedTasks, notCompletedTasks){
var code = '';
var notCode = '';
var elementsArr = [];
//creating lists
for(var i = 0; i < notCompletedTasks.length; i++){
code += '<div class="ui-checkbox" id="'+notCompletedTasks[i]._id+'"><label class="ui- checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-b" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="b" data-mini="false"> <span class="ui-btn-inner"><span class="ui-btn-text">'+notCompletedTasks[i].text+'</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span></span></label><input type="checkbox"></div>';
}
for(var j = 0; j < completedTasks.length; j++){
notCode += '<div class="checked" id="'+completedTasks[j]._id+'">'+'<div class="ui-icon ui-icon-check">'+'</div>'+'<span class="field">'+completedTasks[j].text+'</span>'+'</div>';
}
//build
document.getElementById('list').innerHTML = code + notCode;
for(var k = 0; k < notCompletedTasks.length; k++){
(function(){
var arg = notCompletedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
for(var k = 0; k < completedTasks.length; k++){
(function(){
var arg = completedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
}
I hope that code will be enough. I don't know why CSS code doesn't work like it should.
Is there any way to do this? I couldn't find answer to this question.
Edit: I added javascript code. Unfortunately I don't know what created that problem so code is kinda huge. Sorry for that.
I used pouchDB for storing users data and compiled with cocoon.io for mobiles.
You may look at this post from Omar: set content height 100% jquery mobile. It is updated with a working solution for the current JQM 1.4.5 version and is also covering the issues related to html{ height: 100%; }.
I'm trying to implement this gallery on a website: http://ashleydw.github.io/lightbox/
There are no instructions so I'm pretty lost, have been trying to get it to work.
I copied what's below more or less from the source code from the link above.
I moved all the files included in the github download to a new folder dist/lightbox (e.g. ekko-lightbox.css, ekko-lightbox.js).
It's not doing anything, when you click on an image, it just opens the image url.
What am I missing? Do I need to link to some other files or what's wrong?
<head>
<!-- leaving out the other stuff here -->
<link href="dist/lightbox/ekko-lightbox.css" rel="stylesheet">
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- this is from the source code, just updated the images -->
<h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
<p>By default, gallery images must be wrapped in a tag (probably <code><div></code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
<p>A custom selector for the parent can be used, see example #11. Note how the final image is not in the gallery intentionally.</p>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive"
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return $(this).ekkoLightbox({
onShown: function() {
lb = this;
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/modal.js"></script>
<script src="dist/lightbox/ekko-lightbox.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
In the end, I got it to work with a different lightbox, http://lokeshdhakar.com/projects/lightbox2/
i'm working on a web mobile site and i'm having some problems that I really don't know how to solve them
I've added a sliding menu (like facebook's menu) but the problem is that my menu is longer than my page and when I scroll down I still get the menu but without the background color already defined
when I test it on a desktop navigator (chrome) it works perfectly but it I resize the window and make it smaller it invokes the same error
excuse me for my bad english & thanks for help ^^
html:
<div data-role="page" id="contactF" class="pages" data-add-back-btn="true" data-iconpos="notext">
<div data-role="panel" id="menu" data-position="left" data-display="push">
<ul id="menuList" data-role="listview" >
<h3>Menu</h3>
<li data-role="list-divider"><h6>réseaux sociaux<h6/></li>
<li>Facebook </li>
<li>Twitter </li>
<li>MySpace </li>
</ul>
</div>
<div data-role="header" id ="HeaderC" data-position="fixed">
<!-- end of header -->
<div data-role="content">
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
</div>
</div>
js:
$( document ).on("swipeleft swiperight", "#menu", function( e ) {
if ($.mobile.activePage.jqmData( "panel" ) !== "open") {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
else if ($.mobile.activePage.jqmData( "panel" ) == "open"){
$( "#left-panel" ).panel( "close" );
$( "#right-panel" ).panel( "close" );
}
});