I am trying to implement a very simple angular route. One page only to begin with, will build on once working.
Basically, if I directly display the data in the index.html page, it produces the desired result (count of triples) like so:
Your data looks like this ...
Count of data "records" or "triples": 4585
so I know my queries, factories etc. in themselves are OK.
If I then attempt to implement via a view and route, no data is displayed. Here is my code.
index.html like so:
<!DOCTYPE html>
<head>
<title>Summarisation Min.</title>
<link href="css/main.css" rel="stylesheet"/>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"> </script>
</head>
<html>
<h1>Your data looks like this ...</h1>
<body>
<div ng-app="summaryApp">
<div ng-controller="topSummaryCtrl">
<div ng-view></div>
</div> <!-- end topSummaryCtrl controller -->
</div> <!-- end summarryApp module -->
<script src="js/app.js"></script>
<script src="js/controllers/TopSummaryController.js"></script>
</body>
</html>
controller js like so:
app.controller('topSummaryCtrl', function($scope, itemSummary){
itemSummary.success(function(response) {
$scope.itemSummaryResults = response.results.bindings;
});
});
app.factory('itemSummary', function($http){
/* 1 count of data triples */
var query = encodeURIComponent('SELECT (COUNT(*) AS ?no) { ?s ?p ?o }');
var endpoint = "http://localhost:3030/dataset/query";
return $http.get("http://localhost:3030/dataset/query? query="+query+"&output=json&stylesheet=")
});
app js like so:
var app = angular.module('summaryApp',['ngRoute']);
app.config(function($routeProvider){
//set up routes
$routeProvider
.when('/', {
templateUrl: 'partials/count.html',
controller: 'topSummaryCtrl'
})
});
/partials/count.html like so:
<table>
<tr ng-repeat="x in itemSummaryResults">
<td>Count of data "records" or "triples": {{ x.no.value }}</td>
</tr>
</table>
This returns no data. Once I move it out to a separate file to attempt implementation using routes, I can't get the data to display.
I am using Fuseki server on localhost3030 as the SPARQL endpoint and running index.html just by double-clicking on it. I don't know if this might be an issue but have seen conflicting advice online so posting here.
Have spent a couple of days working on this at this stage and still new to Angular so entirely possible it's a dumb error but what? All help gratefully received.
Thanks for reading Hilary.
OK. I have a workaround but to be honest it defeats the purpose of using AngularJS in the first place so I would still like alternative suggestions.
The workaround is to define all JS in a single included JS file or within tags in the HTML and use to implement routing of sorts. The code looks like this (if all in HTML file).
<html>
<head>
<title>HHLDSummaryApp </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script>
var summaryApp = angular.module("summaryApp", ['ngRoute']);
summaryApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/viewCounts', {
templateUrl: 'count.htm',
controller: 'topSummaryCtrl'
}).
otherwise({
redirectTo: '/viewCounts'
});
}]);
/* inject $scope object and data retrieval factories */
summaryApp.controller('topSummaryCtrl', function($scope, itemSummary){
itemSummary.success(function(response) {
$scope.itemSummaryResults = response.results.bindings;
});
});
summaryApp.factory('itemSummary', function($http){
/* 1 count of data triples */
var query = encodeURIComponent('SELECT (COUNT(*) AS ?no) { ?s ?p ?o }');
var endpoint = "http://localhost:3030/dataset/query";
return $http.get("http://localhost:3030/dataset/query?query="+query+"&output=json&stylesheet=")
});
</script>
</head>
<body>
<h2>Your Data Looks Like This ... </h2>
<div ng-app="summaryApp">
<div ng-view></div>
<script type="text/ng-template" id="count.htm">
<table>
<tr ng-repeat="x in itemSummaryResults">
<td>Count of data "records" or "triples": {{ x.no.value }} </a></td>
</tr>
</table>
</script> <!-- end viewCounts -->
</div>
</body>
</html>
As I said, this workaround essentially defeats the purpose of using angular as we only use it for the ng-repeat functionality so please suggest alternative solution if you can. Thanks.
Related
I'm trying to use Blazor and DataTables.net component to add sorting functions to a table. Only the following syntax has allowed me to use Javascript Interop in Blazor:
datatable.js
window.methods = {
startDataTable: function () {
$(document).ready(function () {
$('#table').DataTable();
});
},
showAlert: function () {
alert("waht up");
}
}
The showAlert function is executed when I call it from Blazor component. But if I use the startDataTable function, nothing happens. Is it something missing?
List.razor
#if (!#ToggleList)
{
<table id="table" data-toggle="table" class="table table-responsive" data-sortable="true">
<thead>
<tr>
<th>Key</th>
<th>State</th>
<th data-sortable="true">Graduates</th>
<th data-sortable="true">Exams</th>
<th data-sortable="true">Exams finished</th>
<th data-sortable="true">Percentage</th>
</tr>
</thead>
<tbody>
#foreach (var item in States)
{
<tr>
<td>#item.Icveie</td>
<td #onclick="() => showCz(item.Icveie)">#item.Cdesie</td>
<td>#item.Ucn</td>
<td>#item.Exa_pre</td>
<td>#item.Exa_acre</td>
<td>#item.Porc_acre</td>
</tr>
}
</tbody>
</table>
}
protected override async Task OnInitializedAsync()
{
await JSRuntime.InvokeVoidAsync("methods.showAlert");
}
Index.cshtml
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script src="../js/datatable.js"></script>
I'm using Blazor with ASP.NET Core 3.1. My intention is to use DataTables.net component to add extra functions to a table. Any suggestions?
In theory, I think it would be worth to take a look at OnAfterRenderAsync(bool firstrender)
From what I have read, JS is rendered last and therefore cannot be used in OnInitializedAsync.
MS Docs describe this here:
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-3.1#after-component-render
From the documentation, Use this stage to perform additional initialization steps using the rendered content, such as activating third-party JavaScript libraries that operate on the rendered DOM elements.
***Disclaimer, I couldn't get this to work for my application. I could only get JS to work within a post-render action like a button-click. But this seems like where MS wants us to go to get JS running at page-load. So I only hope this points you in the right direction.
Note: Also, try to get off of JS where you can. Blazor should have the tools to do what JS is doing.
in a loop, each item is an object. I have to use its value as another object's key.
for vue.js
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
<p>{{ jss }}</p>
<table>
<tr v-for="man in lst">
<th>{{ man.name }}</th>
<td>{{jss.man.name}}]</td> <!-- not corrrect -->
<td>{{jss[man.name]}}]</td> <!-- not corrrect too-->
</tr>
</table>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task',
jss: {"n1": 999},
lst: [
{"name": "n1"},
{"name": "n2"}
]
}
});
</script>
</body>
</html>
above cannot work. it plains 'jss.man.name' or 'jss[man.name]' is not a good expression. what I want is 999
You need to understand fundamentally what your code is doing.
When you have an expression of the form first.second, you're roughly requesting that your code retrieve the value named second from the object named first. Note that jss.man.name would then mean "retrieve the value called man from the object jss, and then retrieve the value called name from man". Your object called jss does not contain anything called man, however, so this will return undefined, and undefined definitely does not contain a value named name. In fact, when you try to retrieve the value of a property from undefined, you'll get an error, and when you get an error Vue will make it look like nothing is working at all.
What you're really trying to do is find the value named name in the object named man, and then use this name to retrieve a value from jss. This looks like jss[man.name], which is one of the solutions you have in place. Simply omit the jss.man.name and your code should work:
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
<p>{{ jss }}</p>
<table>
<tr v-for="man in lst">
<th>{{ man.name }}</th>
<!--<td>{{jss.man.name}}]</td> commenting this out should fix it! -->
<td>{{jss[man.name]}}</td> <!-- this should be correct-->
</tr>
</table>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task',
jss: {"n1": 999},
lst: [
{"name": "n1"},
{"name": "n2"}
]
}
});
</script>
</body>
</html>
As noted elsewhere, you also had an extra ] being rendered as well. I've removed that in the code snippet above.
You did an extra ] in the end of one way data binding code. You can update the code like
<td>{{jss.man[name]}}</td>
or you can use,
<td>{{jss.man["name"]}}</td>
or,
<td>{{jss.man.name}}</td>
I've seen this problem severall times and tried everything suggest - never the less my div is not replaced - instead all page is "replaced"
I'm using MVC5 .
For project reasons i can't post here the code - but this new project pretty much sums my issue.
public ActionResult TestPartial()
{
return PartialView("_pView");
}
View:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftMvcAjax.js" type="text/javascript"> </script>
<div col-md-12">
#using (Ajax.BeginForm("TestPartial", "Home", new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "reportView",
InsertionMode = InsertionMode.Replace
}, null, new { id = "form" }))
{
<input type="submit" value="submit" />
}
'm using the latest jquery version 2.1.4
Any thoughts on why this is not adding my partial view to the div?
The partial view is just span text for this example.
Suppose the following html code is present in web page
<td id="tdwords" colspan="2" class="inputWrap">
<label for="words">Search term</label><input type="text" name="words" value="" id="words" title="Search Crystallography Journals Online" />
</td>
How do I replace
id="tdwords"
with
id="tdset"
when a webpage is opened in my visual basic web browser?
You could use javascript I believe.
Example:
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
change_id();
});
function change_id() {
var ids = document.getElementsByClassName('inputwrap'),
i = ids.length;
while(i--) {
ids[i].setAttribute("id", "tdset") ;
}
}
<script>"
Just put this in the Head content and it should happen.
I am trying to use knockout js in my project so I tried the simple Hello World example but i couldnt get it to work. I created a new MVC4 project and just copy do a simple binding below is my code
<script src="~/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
// Here's my data model
var viewModel = function (first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
//this.fullName = ko.computed(function () {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
//return this.firstName() + " " + this.lastName();
//}, this);
};
$(document).ready(function() {
ko.applyBindings(new viewModel("Planet", "Earth")); // This makes Knockout get to work
});
</script>
<div class="liveExample">
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
#*<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>*#
</div>
Basically it will just display the value of the model on a textbox.
I already referenced the knockout.js in my project but it does not work
I also added the knockout js in my BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/knockout").Include("~/Scripts/knockout-2.1.0.js"));
I didnt work
If you are using MVC, use the scripts section to declare your JS. This will move the declarations to the bottom of the HTML page, letting the HTML render first. Here's my version of your code that worked first time out of the box:
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="liveExample">
<p>First name:
<input data-bind="value: firstName" /></p>
<p>Last name:
<input data-bind="value: lastName" /></p>
#*<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>*#
</div>
#section scripts {
<script src="~/Scripts/knockout-2.2.1.js"></script>
<script type="text/javascript">
var viewModel = function (firstName, lastName) {
this.firstName = ko.observable(firstName);
this.lastName = ko.observable(lastName);
};
$(function () {
ko.applyBindings(new viewModel("Planet", "Earth"));
});
</script>
}
try putting knockout in the of your document. Without any error messages the only thing I can say is I ran into a similar problem and that was the fix for me.
My example was driving me crazy because it worked in fiddle but not in MVC, I mentioned it to a designer friend of mine and he said it made since to him, basically that knockout needed to be fully downloaded before the page began to render.
Hope this helps