I'm using Visual Studio 2015 to develop an asp.net webform. I'm new to SignalR and I'm trying to get the demo piece to work in an existing site. When I create an html page it works fine:
<!DOCTYPE html>
<html>
<head>
<title>SignalR Simple Chat</title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.10.2.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.ChatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName
+ '</strong>: ' + encodedMsg + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
</body>
</html>
However, when I use the same code, in the same project, but using a WebForm it gives me an error message: 0x800a138f - JavaScript runtime error: Unable to get property 'ChatHub' of undefined or null reference. I've been blowing an entire day on trying to get SignalR going and I'm at a loss.
Here's the code that blows up:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPages/Site.Master" CodeBehind="WebForm2.aspx.vb" Inherits="RealtimeReportsWF.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.10.2.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.ChatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName
+ '</strong>: ' + encodedMsg + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
</asp:Content>
I slept on it and had to remember the golden rule of frameworks like SignalR... it's just java. I then realized I didn't include the ../ in the path. Makes sense since on the HTML version it was contained in the path. So modifying the code to include this solved the problem:
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<!--Reference the SignalR library. -->
<script src="../Scripts/jquery.signalR-2.2.1.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="../signalr/hubs"></script>
Related
I want to make an client Windows Application using java script by make my Windows Application as webBrowser1 (same idea of PhoneGap). I write html page that contains SignalR javascript code with necessary src.
This is the code in Windows Application:
webBrowser1.Url = new Uri(#"D:\Signal.html");
This is the src in Signal.html:
<script src="json2.js"></script>
<script src="jquery-1.6.4.js"></script>
<script src="jquery.signalR-2.2.0.js"></script>
<script src="http://localhost:5539/signalr/hubs" type="text/javascript"></script>
Unfortunately it doesn't work!! What is the wrong??
The hole Code of SignalR.html is here
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>SignalR Simple Chat</title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" placeholder="Message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<div style="background-color:GrayText; height:30%; text-align:center; ">
<h1>Groups</h1>
<input type="text" id="name" placeholder="User Name" />
<input type="text" id="groupName" placeholder="Group Name"/>
<input type="button" id="broadcast" value="Broadcast" />
<input type="button" id="join" value="Join" />
<input type="button" id="leave" value="Leave" />
<input type="button" id="refresh" value="Leave" />
</div>
<script src="json2.js"></script>
<script src="jquery-1.6.4.js"></script>
<script src="jquery.signalR-2.2.0.js"></script>
<script src="http://localhost:5539/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//Set the hubs URL for the connection
$.connection.hub.url = "http://localhost:5539/signalr";
// Declare a proxy to reference the hub.
var chat = $.connection.chatingHub;
var counterh = $.connection.ConnectionCounter;
//counterh.client.NumberOfConnter = function (count) { $("div").append(count); }
chat.client.displayText = function (name, message) {
$('#messages').append('<li>' + name + ' said: ' + message + '</li>');
};
chat.client.le = function (id) { alert(id); }
chat.client.alertJoin = function (namePersonJoined) { $('#messages').append('<li>' + namePersonJoined + " Join to the Group" + '</li>').css("background-color", "white"); }
chat.client.alertLeave = function (namePersonLeaved) { $('#messages').append('<li>' + namePersonLeaved + " Leave from the Group" + '</li>'); }
// Create a function that the hub can call to broadcast messages.
chat.client.addMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName
+ '</strong>: ' + encodedMsg + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
$("#broadcast").click(function () {
chat.server.broadcastMessage({
Name: $('#name').val(),
Message: $('#message').val(), Group: $('#groupName').val()
});
});
$("#join").click(function () {
chat.server.join($('#groupName').val(), $('#name').val());
});
$("#leave").click(function () {
chat.server.leave($('#groupName').val(), $('#name').val());
});
$("#refresh").click(function () {
chat.server.nowID();
});
});
});
</script>
</body>
</html>
I think it's a CORS problem.
Your signalR client is in D:\SignalR.html
Your signalR server is in http://localhost:5539/signalr/hubs
meaning that it is a Cross Origin signalR calls. You need to enable CORS in order to let it works.
I've just started out using backbone. I want to apply a view to a button, but when I open my file in the browser there is nothing there.
Why isn't the button being rendered?
HTML:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
</body>
</html>
View:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $(".cta-ajax"),
template: _.template($("#button-test").html()),
initialize: function(){
console.log("Started!");
},
render: function() {
this.$el.html(this.template());
console.log("rendered");
return this;
}
});
var TView = new ButtonView();
});
You have two issues with your code. Here is a working jsfiddle: http://jsfiddle.net/cj4zkyow/1/
Issue 1:
Aside from implementing the initialize function, you also need to call render within initialize. Otherwise you have to call render manually.
Issue 2:
Second issue is that you set the el attribute of your view to .cta-ajax, but the element does not exist. It is part of your template. The el attribute is the element that your view gets appended to. So you need to use something that exists in the DOM.
HTML:
// Need a element to append view to.
<div id="test"></div>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
Javascript:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// If you specify, el, it should be an element in the DOM, not in your template.
el: $("#test"),
template: _.template($("#button-test").html()),
initialize: function(){
// Need to call render in initialize function to render view.
this.render();
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var TView = new ButtonView();
});
I currently use button and trying to launch a new window passing parameter from mypage to the new page like this
<input type="button" name="launchpg" id="launchpg" value="LaunchPage" onclick="launch_page('<%=list_process_url%>',this.form.myform.options[this.form.myform.options.selectedIndex].value);"/>
Javascript is as below:
<script type="text/javascript">
//call servlet
function launch_new_window(list_process_url,smart_id)
{
popupWindow = window.open(list_process_url+"&id="+id,'List Process Page',
'scrollbars = yes');
}
I am trying to replace button with href link as in..
document.location='main.jsp?PAGE=myPage.jsp&id='+this.form.myform.options[this.form.myfom.options.selectedIndex].value;
I would like to use the same javascript for launching a new window passing the parameter to the script function.
The code however doesn't seem to work as it says Form is not valid for href.
Add this to wherever you want to launch a new page from:
window.location.href = "pageName.html";
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="main">
<script>
$(function () {
<!--Some Logic-->
<!--window.location.href = "NewWindowName.html";-->
}
$("#btnSave").click(function () {
openNewWindow();
});
function openNewWindow()
{
window.location.href = "NewWindowName.html";
}
});
</script>
<article>
<button id="btnSave">Save Data</button>
</article>
</div>
</body>
I found a solution to my question:
Open New Window
I have a simple form in meteor which would help configure the execution of my custom application.
This form receives two arguments, Username and Password.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Execute my custom app</title>
</head>
<body>
{{> configDetails}}
</body>
<template name="configDetails">
<div class="container">
<form class="form-signin" role="form" id="form-signin" >
<div class="row">
<div class="span3 offset"><input type="textBox" class="input-block-level" placeholder="User Name" ></div>
<div class="span3 offset1"><input type="textBox" class="input-block-level" placeholder="Password" ></div>
</div>
<input class="btn btn-lg btn-primary" type="submit" style="display: block; width: 100%;" id="submit"/>
</form>
</div>
</template>
Now I want these values to be received on the server side so that I can run my external app using child_process and pass these values as arguments to the external app. How can I receive these value in the meteor server section:
if (Meteor.isServer) {
//I intend to use child_process to run my external application here
}
If the values cannot directly be received in the server section, how can I receive them in client section and pass them onto server. I am having difficulties receiving them in client section as well:
if (Meteor.isClient) {
Template.configDetails.events({
'click input': function () {
console.log( 'Submitting form!' );
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
Template.configDetails.events({
'submit form': function( event ){
console.log( 'Submitting form!' );
event.preventDefault();
event.stopPropagation();
return false;
}
});
None of the above functions execute the console.log method. Any ideas what I am doing wrong. Let me know if you need further info.
In my projets I'm using smth like this:
Template.configDetails.events({
"click #submit": function(e, t) {
e.preventDefault();
Meteor.call('someMethod', attributes, function(error, id) {
if (error) {
return console.log("Error..........");
} else {
//Do smth
}
});
});
}
});
I've got a page using a Microsoft Reporting ReportViewer. The report appears to be working but the page is giving me two javascript errors, both of them "'Sys' is undefined".
Examining the html output, I can see that this page is not loading the ScriptResource.axd file. Here is the generated output from the <form runat="server">:
Normal pages:
<script src="/ScriptResource.axd?d=A7zLSiYT-QHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_BLW1XY7gevJ3qbD0cmlGqFb4n7TXEUowGbFVlAH6qW01&t=ffffffff81a772fc" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=A7zLSiYTQHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_pP3jafRTfoGWk6oNhALZysXq7AipBxlz6Hg1wbpmi5swSCq2gf8Ifthok9c1Qyjf0&t=ffffffff81a772fc" type="text/javascript"></script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWBwLqzd6VBwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGClZTK/SWwK6x3zLDgngtDRWbwIkm" />
</div>
And here the page with a reportviewer control:
<script src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=9.0.30729.1&Name=Microsoft.Reporting.WebForms.Scripts.ReportViewer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function RVClientImageToggle(shouldEnable, image1Id, image2Id)
{
var enableHover = document.getElementById(image1Id);
var disableHover = document.getElementById(image2Id);
if (enableHover == null || disableHover == null)
return;
if (shouldEnable)
{
enableHover.style.display = "";
disableHover.style.display = "none";
}
else
{
disableHover.style.display = "";
enableHover.style.display = "none";
}
}//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWGQLrm7KJCwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGCgL4rMvOCQL4rK/NCQKp9KnKBgKp9I3JBgKQitCjCALzoZ6fCQLzoYKeCQLC2pe+DgLC2vu8DgKsmc6MBgLYo/6MDgKsz4boDQLCqZGDBgL97pJQAv3u/vQHAv3u6pkPAv3u1r4GAv3ugpYJAOTw7r3aR/RClkJpkBgvgn/NGjI=" />
</div>
There you can see -- no references to the axd files
The <ScriptManager> tag produces this in either case:
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl00$smManager', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
And that's where the javascript error comes in -- referencing the Sys object
So what is it that triggers the different output from <form runat="server">?
I still have no answer, but did find a workaround on the internet here: http://forums.asp.net/p/1318006/2617880.aspx#2617880
If I jam the report viewer into a user control, and then just have the user control on the page, the form tag will render correctly.
Note, I am using master pages as well so maybe that had something to do with this. The form tag is in the master page, then I have a content page with a user control in the content section, and then the ReportViewer in the user control. That works.
What didn't work was a master page with a form tag (runat=server), and a content page with a ReportViewer in the content section. That's the case in which none of the ASP.NET AJAX scripts were included, leading to 'Sys is undefined' errors.