|
This is kinda rough. Do you have control over the web endpoint?
The biggest issue that I'm seeing is that you don't really have a plan for how the client and server sides will communicate in a consistent manner. It looks like you're likely building a dynamic page (with ASP.NET, JSP, PHP, whatever) and parsing it into JS objects, then sending those objects back up via AJAX. That's leveraging 2 totally different approaches (HTML Forms vs AJAX) to handle each leg of the model change pipeline.
The lack of a unified pipeline is why the JS is bulky, difficult, and not at all DRY. It will also make further development much more difficult as you try and keep track of how processing is handled for read vs update.
So my initial advice would be to pick a pipeline, and use it consistently. Regardless of which one you pick your code will clean up quickly.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
I am actually building a dynamic page with javascript and parsing to asp.net.
Specifically, I used javascript to give users the ability to use several Add More buttons to add more rows if needed when completing a survey.
This is really unique as my search and research as to whether it has been before and I see no evidence of this being done before.
So, this created a situation where I am using ajax to make calls to several asp.net webmethods and with the webmethods, are able to post data to the database.
It is very convoluted at least from my standpoint.
I have managed to make it a bit more efficient than the code I posted.
It has several phases and I am finding ways to resolve each phase and move on to the next phase.
As a matter of fact, I only have two faces and I will be done.
One, is to add a loading message so user will know something is happening.
The last phase is to reload page after each submit so users won't submit duplicate entries.
So, I am getting there.
|
|
|
|
|
You do not want to keep wiring up the button click event over and over and over. It makes for hard to read code.
Use your own callback function instead of the built-in success one and then you can remove the alert and keep a counter or a set of variables that you can check to see when they are all done and then give one single message.
There are two kinds of people in the world: those who can extrapolate from incomplete data.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
Here's my JS
@section scripts
{
<script type="text/javascript">
$(function () {
console.log("HELLO WORLD");
$.connection.hub.url = 'myip:8094/signalr';
var proxy = $.connection.DashboardHub;
proxy.client.NotifyAllClientsOfChanges = function () {
var searchUrl = "Home/GetData";
$.ajax({
url: searchUrl,
type: "POST",
success: function (data) {
$("#divData").html(data);
}
});
};
$.connection.hub.start({ transport: 'auto', xdomain: true })
.done(function () {
console.log('Connected.');
})
.fail(function (e) {
console.log('Unable to connect:' + e);
});
});
</script>
}
I see the "HELLO WORLD" console log at the top, yet I don't see either of the Console logs for "Connected" or "Unable to connect"
I see an error in the console that says "Cannot read property 'client' of undefined"
I've followed many Google/CP/SO posts on similar topics and tried many things. I'm not entirely sure that I have this coded correctly. This is really getting frustrating now.
Anyone see what's wrong?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Looking at this tutorial[^], it looks like the Javascript hub name is camel-cased.
So if your C# code has a hub called DashboardHub , your Javascript code will refer to it as $.connection.dashboardHub (with a lowercase "d").
If it still doesn't work, try adding a console.dir($.connection); line at the start of your function to see what's defined.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I had changed the case AFTER I posted this. No change.
However, adding "console.dir($.connection);" got me this "function signalR(url, qs, logging)"
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Have you included the script reference for the auto-generated SignalR script?
<script src="~/signalr/hubs"></script>
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Yes, above the script I posted I have
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<script src="/signalr/hubs"></script>
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
What does that script file contain? (You can either load it directly in the browser, or click on the link in the "View Source" tab, or use the browser's dev tools' network tab to view the response.)
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I don't see a file called "signalr/hubs". I assumed it was generated or hidden somehow.
When you say "View Sources", where are you referring to?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
It won't be a file; it's a route, which will be handled by the SignalR middleware to dynamically generate the script for your hubs.
"View source" means right-click on the page and select "View page source".
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hard to paste in here. The formatter doesn't show all of it
Here's the JS stuff
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<script src="/signalr/hubs"></script>
<pre>
<script type="text/javascript">
$(function () {
console.dir($.connection);
console.log("HELLO WORLD");
$.connection.hub.url = 'http://192.168.51.74:8094/signalr';
var proxy = $.connection.dashboardHub;
proxy.client.NotifyAllClientsOfChanges = function () {
var searchUrl = "Home/GetData";
$.ajax({
url: searchUrl,
type: "POST",
success: function (data) {
$("#divData").html(data);
}
});
};
$.connection.hub.start({ transport: 'auto', xdomain: true })
.done(function () {
console.log('Connected.');
})
.fail(function (e) {
console.log('Unable to connect:' + e);
});
});</pre>
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Here's the Hubs JS
(function ($, window, undefined) {
"use strict";
if (typeof ($.signalR) !== "function") {
throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
}
var signalR = $.signalR;
function makeProxyCallback(hub, callback) {
return function () {
callback.apply(hub, $.makeArray(arguments));
};
}
function registerHubProxies(instance, shouldSubscribe) {
var key, hub, memberKey, memberValue, subscriptionMethod;
for (key in instance) {
if (instance.hasOwnProperty(key)) {
hub = instance[key];
if (!(hub.hubName)) {
continue;
}
if (shouldSubscribe) {
subscriptionMethod = hub.on;
} else {
subscriptionMethod = hub.off;
}
for (memberKey in hub.client) {
if (hub.client.hasOwnProperty(memberKey)) {
memberValue = hub.client[memberKey];
if (!$.isFunction(memberValue)) {
continue;
}
subscriptionMethod.call(hub, memberKey, makeProxyCallback(hub, memberValue));
}
}
}
}
}
$.hubConnection.prototype.createHubProxies = function () {
var proxies = {};
this.starting(function () {
registerHubProxies(proxies, true);
this._registerSubscribedHubs();
}).disconnected(function () {
registerHubProxies(proxies, false);
});
return proxies;
};
signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
$.extend(signalR, signalR.hub.createHubProxies());
}(window.jQuery, window));
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Kevin Marois wrote: var proxies = {};
It looks like SignalR hasn't found your hub.
Check your startup code to make sure you haven't told it not to create the proxies:
hubConfiguration.EnableJavaScriptProxies = false;
If you've got a line that looks like that, remove it.
Also, make sure your hub class inherits from Microsoft.AspNet.SignalR.Hub[^], and is not nested inside another class.
If all else fails, it looks like you could create the proxy manually: ASP.NET SignalR Hubs API Guide - JavaScript Client | Microsoft Docs[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: hubConfiguration.EnableJavaScriptProxies = false;
This was there. Not sure what added it. I commented it out.
Richard Deeming wrote: make sure your hub class inherits from Microsoft.AspNet.SignalR.Hub
It does
Still geteting "Cannot read property 'client' of undefined"
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
So now you've commented out the EnableJavaScriptProxies line and re-built your application, what does the "signalr/hubs" route return?
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I get a bunch of JS that appears to be a proxy
I still get the error "Cannot read property 'client' of undefined"
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
That's just a null reference error. The only way to find it is by using some debug tools.
|
|
|
|
|
hy
i got error:
Template parse errors:
Unexpected character "EOF" ("ss.m2app-dark]="isDarkTheme">
<button md-fab><md-icon>check circle</md-icon></button>
</span>
[ERROR ->]"): AppComponent@403:0 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors:
Unexpected character "EOF" ("ss.m2app-dark]="isDarkTheme">
<button md-fab><md-icon>check circle</md-icon></button>
</span>
[ERROR ->]"): AppComponent@403:0
at SyntaxError.ZoneAwareError
part of template which is in problem according error:
<button md-fab><md-icon>check circle</md-icon></button>
modified 8-Mar-17 7:13am.
|
|
|
|
|
You need to setup the icon type (font or svg), assign the appropriate attribute (md-font-icon="something" or md-svg-icon="something") and make sure that the icon-provider is bootstrapped.
There are docs and code samples at: Angular Material > Demos > Icons
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
your link is about angular 1.x
Is md-icon is related to first version too?
It`s strange because I found this example in the section of angular 2.x
|
|
|
|
|
Of course, the NG2 version of Angular Material is in Beta so absolutely shouldn't be used for anything resembling a production website.
To be perfectly honest, after attempting to leverage the Ng1 version of Angular Material on a couple of projects, it has some pretty fundamental flaws as well. Rolling back to bootstrap made me feel dirty, but was necessary.
Which sucks, because I do want to like the Material Design libraries.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
In _Layout.cshtml, in the Body section, I have
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
So far so good.
Then in my view, in the body, I have
<a href="https://www.codeproject.com/Members/using">@using</a></a> (@Html.BeginForm("Index", "Home"))
{
@{
var grid = new WebGrid(Model);
<a href="https://www.codeproject.com/Members/grid">@grid</a>.GetHtml(
mode: WebGridPagerModes.All,
columns:
grid.Columns
(
grid.Column(columnName: "SiteId", header: "Site Id", format: @@item.SiteId),
grid.Column(columnName: "Instrument", header: "Instrument", format: @@item.InstrumentId ),
))
}
}
<a href="https://www.codeproject.com/Members/Section">@section</a></a> scripts{
$(function () {
console.log("HELLO WORLD");
$.connection.hub.url = '<a href="http://192.168.51.74:8094/signalr">http://192.168.51.74:8094/signalr</a>';
var proxy = $.connection.DashboardHub;
proxy.client.NotifyAllClientsOfChanges = function () {
var searchUrl = "Home/GetData";
$.ajax({
url: searchUrl,
type: "POST",
success: function (data) {
$("#divData").html(data);
}
});
};
$.connection.hub.start({ transport: 'auto', xdomain: true })
.done(function () {
console.log('Connected.');
})
.fail(function (e) {
console.log('Unable to connect:' + e);
});
});
}
I'm not sure what's wrong.. In the Console I see my HELLO WORLD, then the very next item is the error
Cannot read property 'client' of undefined
This did not happen until I moved the scripts into @"section scripts". Before that I had other errors happening.
So this script section seems work because the HELLO WORLD is there, but the Client on the Proxy is not.
WTH am I doing wrong now?????????
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
I haven't worked with SignalR JS before, but
$.connection.hub.url = '<a href="http://192.168.51.74:8094/signalr">http://192.168.51.74:8094/signalr </a>';
does not look right. That's an HTML tag, not a URL.
Edit: Weird, it's doubling up the anchor with preformatted text..
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
It was a copy paste issue. It's not really that way
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|