I've tried to loop out every "category" there is in my database, and put it into the dropdown, but instead it gives me a long code starting of with this:
System.Data.Entity.DynamicProxies
I'm not entirely sure why? And how to fix it. At first i thought it was due to me not having the "categories" in the same model, but as i joined it in the same model, nothing really seemed to change.
So I've tried to search around the internet, but I couldn't seem to find something that resembled the problem that i had.
So I want to know, whats causing it, and what kind of solutions are available in this case scenario?
What i tried to do:
Loop out the categories from the database into the dropdown menu so that all the categories were shown, without typing them in the html _layout file.
Heres my code:
function dropFunction() {
document.getElementById("inDrop").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropCon");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
#model Fisk.Models.ALL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/css/Common.min.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<h2>Fisk.nu</h2>
</div>
<div class="col-lg-4">
<form action="/" method="post">
<input type="text" name="name" value="" class="col-md-8" />
<input type="button" name="name" value="Søg" class="col-md-3" />
</form>
</div>
</div>
<ul id="navMenu">
<li>Forsiden</li>
<li class="dropdown">
<button onclick="dropFunction()" class="dropBtn">Produkter</button>
<ul id="inDrop" class="dropCon">
#foreach (var item in Model.Kategorier)
{
<li class="dropList">#item</li>
}
</ul>
</li>
</ul>
#RenderBody()
<footer>
<p>Fisk.nu, Silovej 2, DK-8000 Århus C, Tlf. +45 87 11 12 13, info#fisk.nu</p>
</footer>
</div>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Content/js/jquery-3.3.1.min.js"></script>
<script src="~/Content/js/Slider.js"></script>
<script src="~/Content/js/Dropdown.js"></script>
</body>
</html>
Heres the Home Controller:
public ActionResult Index()
{
var ViewModel = new Fisk.Models.ALL();
ViewModel.tekstBoks = db.front_TekstBoks.ToList();
ViewModel.Slider = db.front_Slider.ToList();
ViewModel.Kontakt = db.web_Kontakt.FirstOrDefault();
ViewModel.Kategorier = db.site_Kategorier.ToList();
List<front_Slider> sliders = new List<front_Slider>();
List<front_TekstBoks> tekstBoks = new List<front_TekstBoks>();
List<site_Kategorier> kategorier = new List<site_Kategorier>();
return View(ViewModel);
}
You have to access a property of the entity in your collection Kategorier -> Kategori, like #item.Name or something, Otherwise you're just printing the result of ToString()
<ul id="inDrop" class="dropCon">
#foreach (var item in Model.Kategorier)
{
<li class="dropList">#item.Name</li>
}
</ul>
Related
I'm rather new to Javascript, so please excuse simple mistakes if I made any. I need to make a task board page. The user inputs a value (a task and a date) and JS saves it into an object. The object is pushed into an array and saved to Local Storage. After that, it fades in a note (did this with an image and CSS effects) and prints the value on top of it. To accomplish this I tried using a For loop to go through the array when I get it back from local storage, but it only keeps printing the first value the user entered.
This is my code:
var taskArray = [];
var imgs = document.getElementsByTagName("img");
$(document).ready(function hideImages() {
$("img").hide();
})
function saveToLocalStorage() {
//debugger;
var taskName = document.getElementById("task").value;
var taskDate = document.getElementById("date").value;
var task = {
name: taskName,
date: taskDate
}
taskArray.push(task);
var arrayToString = JSON.stringify(taskArray);
localStorage.setItem("user tasks", arrayToString);
var mainDiv = document.getElementById("maindiv");
var arrayFromStorage = localStorage.getItem('user tasks');
arrayFromStorage = JSON.parse(arrayFromStorage);
for (let index = 0; index < arrayFromStorage.length; index++) {
mainDiv.innerHTML += `
<span class="relative">
<img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
<span class="centerOnNote" id="textspan">
Your task = ${arrayFromStorage[x].name}
Complete by = ${arrayFromStorage[x].date}
</span>
`
x++
addText();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title></title>
</head>
<body class="background-image">
<h1 class="pageheader">My Task Board</h1>
<form class="" action="index.html" method="post">
<div class="container">
<div class="row">
<input type="text" class="form-control col-sm centerInput" id="task" placeholder="Enter a Task">
<input type="date" class="form-control col-sm centerInput" id="date" value="">
</div>
<div class="form-group">
<input type="button" class="form-control btn btn-success" id="submit" value="Submit Task" onclick="saveToLocalStorage()">
</div>
<div class="form-group">
<input type="reset" class="form-control btn btn-success " id="reset" value="Reset Form">
</div>
</div>
</form>
<div class="imgContainer" id="maindiv">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<!-- load the script at the end of body tag -->
</body>
</html>
Any help would be greatly appreciated, cheers!
Try putting index instead of x in your loop.
for (let index = 0; index < arrayFromStorage.length; index++) {
mainDiv.innerHTML +=
`
<span class="relative">
<img src="../assets/images/notebg.png" class="fade-in start imgSpacing" alt="">
<span class="centerOnNote" id="textspan">
Your task = ${arrayFromStorage[index].name}
Complete by = ${arrayFromStorage[index].date}
</span>
`
}
I am trying to create a responsive one page web application. On clicking the list of items on the side bar you the markers and on the map should animate and display info window. It seems to be working perfect on normal browser layout but when I toggle display to smaller screens or on a mobile device, The click function does not work. The logic seems to be correct. Please help me understand where I am going wrong and what I should do. Thank you.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/knockout-3.4.0.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-xs-12 col-sm-5 col-md-3">
<h1 class="center" > Chennai City Culture </h1>
<div class="input-group col-xs-12 col-sm-6 col-md-12" >
<input id="text-search" type="text" class="form-control" placeholder="Enter here" data-bind="textInput: query">
</div>
<div class= "list-box" data-bind="foreach: filteredItems">
<hr>
</div>
</div>
<div class="col-xs-16 col-sm-6 col-md-8">
<div id="map">
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBf9eFadPLrD3QIQT7ygrYN8aRO5YuAUyE&callback=initMap" onerror="error()">
</script>
</body>
</html>
JS:
function appViewModel(){
var self = this;
this.query = ko.observable('');
this.locationArray = ko.observableArray([]);
locations.forEach(function(item){
self.locationArray().push(item);
});
self.setLoc = function(clickedLoc) {
var clickedData = clickedLoc.marker;
google.maps.event.trigger(clickedData, 'click');
};
self.filteredItems = ko.computed(function(){
var filter = self.query().toLowerCase();
if(!filter){
for (i = 0; i < locations.length; i++) {
if (locations[i].marker) //checks to see that markers exist
locations[i].marker.setVisible(true);
}
return self.locationArray();
}
return this.locationArray().filter(function (item){
var passedFilter = item.title.toLowerCase().indexOf(filter) > -1;
item.marker.setVisible(passedFilter);
return passedFilter;
});
}, self);
}
ko.applyBindings(new appViewModel());
click events aren't the same as touch events; try including a library like touchpunch that will handle those events for you for mobile devices. I had the same issue with a KO app I was building and that seemed to solve it.
I am new to Angular.js and i did the tutorial Shaping up with angularjs in codeschool.com so please forgive me if the problem i am trying to solve might be too easy to resolve.
So, i am just trying to show a data i get from $http.get() which is JSON object into my document.
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>League of legends</title>
<!-- Load StyleSheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Load Javascript Libraries -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="LeagueOfLegends">
<!-- Navbar menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-controller="searchSummoner as summoner">
<!-- Search Form -->
<div ng-show="summoner.status.showSearch">
<form ng-submit="summoner.search()">
<div class="well">
<div class="form-group">
<label for="summonerName">Summoner Name</label>
<input type="text" class="form-control" placeholder="Enter Summoner Name" id="summonerName" ng-model="summoner.form.name">
</div>
<div class="form-group">
<label ng-repeat="region in summoner.region">
<input type="radio" ng-model="summoner.form.region" ng-value="region">{{region}}
</label>
</div>
<input type="submit" class="btn btn-default" value="Search"></input>
</div>
</form>
</div>
<p ng-show="summoner.status.showResult">Get request from: {{summoner.data.name}}</p>
</div>
</div>
</body>
app.js (module-controller):
var app = angular.module('LeagueOfLegends', []);
app.controller('searchSummoner', ['$http', function($http)
{
var form = {};
this.data = {};
this.form = {};
this.status = {
showSearch: true,
showResult: false
};
this.region = ['br', 'eune', 'euw', 'lan', 'las', 'na', 'oce', 'kr', 'tr'];
this.search = function()
{
form = this.form;
this.form = {};
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
});
// hide form
this.status.showSearch = false;
this.status.showResult = true;
};
}]);
function getApiUrl(form)
{
var apiKey = 'fe9eb24f-5800-4f2a-b570-15328062b341';
return 'https://lan.api.pvp.net/api/lol/' + form.region + '/v1.4/summoner/by-name/' + form.name + '?api_key=fe9eb24f-5800-4f2a-b570-15328062b341'
}
after $http.get was successfully made, i make a log just to check if the data i retrieve is the one i need, but it does not show the object property in html
You're using this in the wrong closure. This is what you should do :
var that = this;//give controller scope access
// get data from the api rest
$http.get(getApiUrl(form)).success(function(data){
that.data = data[form.name];
console.log(that.data);
});
You could also bind your context like this:
$http.get(getApiUrl(form)).success(function(data){
this.data = data[form.name];
console.log(this.data);
}.bind(this));
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
I've got a problem.
I have a JSON comming from backend to my frontend. It looks like:
{
"title": "Interrupted",
"image": "1",
"timestamp": "1403617939848",
"image" : "1",
"categories": ["News","News","Handball","Handball"]
},
My view looks like:
<!doctype html>
<html class="no-js" lang="" ng-app="videoApp">
<head>
<meta charset="utf-8">
<title>Latest videos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="public">
<link rel="stylesheet" href="css/normalize.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/libraries/bootstrap.min.css">
</head>
<body ng-controller="VideoListCtrl">
<header class="col-lg-12 col-md-12 col-sm-12 text-white">
LATEST VIDEOS
<span><select class="favorite-selector">
<option value="{{category}}" ng-repeat="category in categories">{{category}}</option>
</select> <button class="btn-danger">Add to favorite</button></span>
<span class="results"></span>
</header>
<main>
<div class="category-list">
<li>All videos</li>
<li ng-repeat="category in categories"> {{category}}</li>
</div>
<div class="video-container" id="video-container">
<article class='col-lg-3 col-md-4 col-sm-12 col-xs-12 video' dir-paginate="video in videos | itemsPerPage: 12">
<div class='video-image'><img class='img-responsive img' src='img/{{video.image ? video.image : "1" }}.jpeg'>
<img class='player img-responsive' src='img/icon.png' width='75px' height='75px'>
</div>
<p class='video-title'><strong>{{video.title}}</strong></p>
<p class='video-timestamp'>{{video.timestamp}}</p>
<span class='categories'>
<li ng-repeat="categ in video.categories | unique">{{categ}} </li>
</span>
</article>
</div>
<div class="col-lg-offset-2 col-lg-8">
<dir-pagination-controls></dir-pagination-controls>
</div>
</main>
<script src="js/angular/angular.js"></script>
<script src="js/angular/ui-utils.js"></script>
<script src="js/libraries/underscore.js"></script>
<script src="js/controllers/VideoListCtrl.js"></script>
<script src="js/filters/CategoryFilter.js"></script>
<script src="js/filters/ArticleFilter.js"></script>
<script src="js/angular/dirPagination.js"></script>
</body>
</html>
Controller:
var videoApp = angular.module('videoApp', ['videoAppFilters', 'ui.unique', 'angularUtils.directives.dirPagination']);
videoApp.controller('VideoListCtrl', function ($scope, $http, $filter) {
$http.get('http://academy.tutoky.com/api/json.php').success(function (data) {
$scope.videos = data;
$scope.categories = $filter('categoryFilter')(data);
});
$scope.getFilteredResults = function (category, data) {
$scope.videos = $filter('articleFilter')(category, data);
return $scope.videos;
};
});
Article filter:
angular.module('videoAppFilters').filter('articleFilter', function () {
return function (category, data) {
var filteredData = [];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].categories.length; j++) {
if (data[i].categories[j] == category) {
filteredData.push(data[i]);
}
}
}
return filteredData;
};
});
Categories are filtered with unique filter and after loading page everything works. But, I' want to filter articles by category after clicking on category name.
So when i click on Handball for example, it should show me only results that have Handball category.
But, when i click on category name, angular throw exception about duplicates. I don't really understand why its able to handle them with unique on first load but after model changes, it's not.
Any suggestions please?
Ok, I solved this. There were 2 problems, one was that I needed to get rid of duplicates again after rewriting that $scope.videos, because the second time unique filter in categories in did not proceed ( dunno why ).
I did it like this:
$scope.getFilteredResults = function (category, data) {
$scope.videos = $filter('articleFilter')(category, data);
return $scope.videos;
};
and add unique to videos ng-repeat like
<article class='col-lg-3 col-md-4 col-sm-12 col-xs-12 video' dir-paginate="video in videos | unique | itemsPerPage: 12">
Another problem was that I was rewriting $scope.videos so after every filtration there were less and less results, cause it was filtered over and over again. I had to create another variable that was working as source of data but were not rewritten.
So instead of
$scope.videos = data;
I have
$scope.videos = data;
$scope.allData = data;
Also I had to change the onClick action to pass allData instead of videos
<li ng-repeat="category in categories"> {{category}}</li>
In my phonegap application i updated my datas for that i have the following code in that i got the window.location.hash(* indicate error line) value will be empty.
function init() {
$("#homePage").live("pageshow", function() {
getDatas();
});
$("#editPage").live("pageshow", function() {
***var loc = window.location.hash;***
alert("loc" + loc);
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1, loc.length);
var detailId = qs.split("=")[1];
$("#editFormSubmitButton").attr("disabled", "disabled");
dbShell.transaction(function(tx) {
tx.executeSql("select id,name,age,city,occupation from nameDetail where id=?", [detailId], function(tx, results) {
$("#mId").val(results.rows.item(0).id);
$("#mName").val(results.rows.item(0).name);
$("#mAge").val(results.rows.item(0).age);
$("#mCity").val(results.rows.item(0).city);
$("#mOccupation").val(results.rows.item(0).occupation);
$("#editFormSubmitButton").removeAttr("disabled");
});
}, dbErrHandler);
} else {
alert("empty");
$("#editFormSubmitButton").removeAttr("disabled");
}
});
}
function getDatas() {
dbShell.transaction(function(tx) {
tx.executeSql("select id,name,age,city,occupation,date from nameDetail order by date desc", [], renderEntries, dbErrHandler);
}, dbErrHandler);
}
function renderEntries(tx, results) {
if (results.rows.length == 0) {
$("#mainContent").html("<p>Don't have any Details</p>");
} else {
var s = "";
for (var i = 0; i < results.rows.length; i++) {
s += "<li><a href='addEdit.html?id="+results.rows.item(i).id + "'>" +results.rows.item(i).name + "</a></li>";
alert("" + s);
}
//alert(S);
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
Index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Names</title>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="js/index.js"></script>
</head>
<body onload="init();">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Names</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul>
</div>
<div data-role="footer" class="ui-bar">
Add Note
</div>
</div>
</body>
</html>
and addEdit.html:
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Details</h1>
</div>
<div data-role="content">
<form id="addEditForm" method="post">
<input type="hidden" name="mId" id="mId" value="">
<div data-role="fieldcontain">
<label for="mName">Name</label>
<input type="text" name="mName" id="mName"/>
</div>
<div data-role="fieldcontain">
<label for="mAge">Age</label>
<input name="mAge" id="mAge"/>
</div>
<div data-role="fieldcontain">
<label for="mCity">City</label>
<input name="mCity" id="mCity"/>
</div>
<div data-role="fieldcontain">
<label for="mOccupation">Occupation</label>
<input name="mOccupation" id="mOccupation"/>
</div>
<div data-role="fieldcontain">
<input type="submit" id="editFormSubmitButton" value="Save Note">
</div>
</form>
</div>
<div data-role="footer" class="ui-bar">
Return Home
<input type="button" data-role="button" id="sync" name="sync" value="Sync" data-icon="arrow-d"/>
</div>
</div>
how to solve this some body help to solve this...
EDIT :
issue solved using this one.
solution link
I got the solution using following method
var loc = $(location).attr('href');
if (loc.indexOf("?") >= 0) {
var url = loc.substr(loc.indexOf("?") + 1, loc.length);
listId = url.split("=")[1];
it will be helpful for someone like me.
I solved my issue using this link Refer
I'm assuming this javascript works the same way as javascript on a traditional browser here ..
Judging by the comments in the code, it looks like you're expecting the hash to hold the query string, perhaps ?
The hash only holds what's after the hash in a url
eg
www.this.com/apage.html?firstval=value&anothervalue=45#locationinpage
in this url,
window.locationhash will equal "#locationinpage"
but
window.locaton.search will equal "?firstval=value&anothervalue=45"
That is : the query string excluding the part after the hash
perhaps you need window.locaton.search instead, or as well ?