My little chat project is barking at me "Uncaught TypeError: Cannot read property 'chatterHub' of undefined"
I must have something out of order. I checked in Chrome inspector the signalr/hubs defines 'chatterHub'. Below is signalr/hubs. (is it generated? if yes, by what and when?)
/*!
* ASP.NET SignalR JavaScript Library v2.0.1
* http://signalr.net/
*
* Copyright Microsoft Open Technologies, Inc. All rights reserved.
* Licensed under the Apache 2.0
* https://github.com/SignalR/SignalR/blob/master/LICENSE.md
*
*/
/// <reference path="..\..\SignalR.Client.JS\Scripts\jquery-1.6.4.js" />
/// <reference path="jquery.signalR.js" />
(function ($, window, undefined) {
/// <param name="$" type="jQuery" />
"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 () {
// Call the client hub method
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)) {
// Not a client hub
continue;
}
if (shouldSubscribe) {
// We want to subscribe to the hub events
subscriptionMethod = hub.on;
} else {
// We want to unsubscribe from the hub events
subscriptionMethod = hub.off;
}
// Loop through all members on the hub and find client hub functions to subscribe/unsubscribe
for (memberKey in hub.client) {
if (hub.client.hasOwnProperty(memberKey)) {
memberValue = hub.client[memberKey];
if (!$.isFunction(memberValue)) {
// Not a client hub function
continue;
}
subscriptionMethod.call(hub, memberKey, makeProxyCallback(hub, memberValue));
}
}
}
}
}
$.hubConnection.prototype.createHubProxies = function () {
var proxies = {};
this.starting(function () {
// Register the hub proxies as subscribed
// (instance, shouldSubscribe)
registerHubProxies(proxies, true);
this._registerSubscribedHubs();
}).disconnected(function () {
// Unsubscribe all hub proxies when we "disconnect". This is to ensure that we do not re-add functional call backs.
// (instance, shouldSubscribe)
registerHubProxies(proxies, false);
});
proxies.chatterHub = this.createHubProxy('chatterHub');
proxies.chatterHub.client = { };
proxies.chatterHub.server = {
send: function (name, message) {
return proxies.chatterHub.invoke.apply(proxies.chatterHub, $.merge(["Send"], $.makeArray(arguments)));
}
};
proxies.products = this.createHubProxy('products');
proxies.products.client = { };
proxies.products.server = {
add: function (newProduct) {
return proxies.products.invoke.apply(proxies.products, $.merge(["Add"], $.makeArray(arguments)));
},
getAll: function () {
return proxies.products.invoke.apply(proxies.products, $.merge(["GetAll"], $.makeArray(arguments)));
},
remove: function (ProductId) {
return proxies.products.invoke.apply(proxies.products, $.merge(["Remove"], $.makeArray(arguments)));
},
update: function (updatedProduct) {
return proxies.products.invoke.apply(proxies.products, $.merge(["Update"], $.makeArray(arguments)));
}
};
return proxies;
};
signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
$.extend(signalR, signalR.hub.createHubProxies());
}(window.jQuery, window));
And here is Chatter.cshtml
#{
ViewBag.Title = "Chatter";
}
<h2>Welcome #ViewBag.UserName!</h2>
<div id="container">
<input type="text" id="message" />
<input type="button" id="sendMessage" value="Send " />
<input type="hidden" id="displayName" />
<ul id="discussion"> </ul>
</div>
#section Scripts {
#Scripts.Render("~/bundles/signalr")
<script src="/Scripts/jquery.signalR-2.0.1.min.js" type="text/javascript"></script>
<script src="~/signalr/hubs" type="text/javascript"></script>
<script src="/Scripts/jquery-2.0.3.min.js"></script>
<script>
$(function () {
// the client proxy object chat takes all the work communicating to the server
var chat = $.connection.chatterHub; // client proxy object starts lowercase. The server Class starts uppercase
// dynamically defines function addNewMessageToPage that corresponding to the one defined in the ChatterHub on server side
// this is what the server is to call to send messages to each clients
chat.client.addNewMessageToPage = function (name,message) {
$("#discussion").append("<li>" + (new Date).toString("HH:mm:ss") + "<strong>" + htmlEncode(name) + "</strong>" + htmlEncode(message) + "</li>");
};
$("#displayName").val('#ViewBag.UserName');
$("#message").focus();
// a ready function for SignalR
$.connection.hub.start().done(function () {
// click event to send username and message to the server and all clients
$("#sendMessage").click(function () {
chat.server.send($("#displayName").val(), $("#message").val());
$("#message").focus();
});
});
$("#message").keypress(function (event) {
if (event.which === 13) $("#sendMessage").click();
});
});
function htmlEncode(value) {
var encodedValue = $("<div />").text(value).html();
return encodedValue;
}
</script>
}
Can anyone tell what is missing or out of order?
Thanks,
I found it. the page source shown in Chrome inspector like this
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.signalR-2.0.1.min.js" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
<script src="/Scripts/jquery-2.0.3.min.js"></script>
<script>
$(function () {
// the client proxy object chat takes all the work communicating to the server
var chat = $.hubConnection.chatterHub; // client proxy object starts lowercase. The server Class starts uppercase
Obviously jquery-2.0.3 was loaded twice. I removed
<script src="/Scripts/jquery-2.0.3.min.js"></script>
and it worked.
I have four controls on the page, a simple form with first and last names, date of birth and this drop down that contains some names of countries. When I make changes to the these controls I am able to see those changes in my viewModel that is passed in as a parameter in the SavePersonDetails POST below, but I never see the LocationId updated in that view model and I am not sure why.
This is what I have in my markup, Index.cshtml:
#model Mvc4withKnockoutJsWalkThrough.ViewModel.PersonViewModel
#using System.Globalization
#using Mvc4withKnockoutJsWalkThrough.Helper
#section styles{
#Styles.Render("~/Content/themes/base/css")
<link href="~/Content/Person.css" rel="stylesheet" />
}
#section scripts{
#Scripts.Render("~/bundles/jqueryui")
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/Application/Person.js"></script>
<script type="text/javascript">
Person.SaveUrl = '#Url.Action("SavePersonDetails", "Person")';
Person.ViewModel = ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)));
var userObject = '#Html.Raw(Json.Encode(Model))';
var locationsArray = '#Html.Raw(Json.Encode(Model.Locations))';
var vm = {
user : ko.observable(userObject),
availableLocations: ko.observableArray(locationsArray)
};
ko.applyBindings(vm);
</script>
}
<form>
<p data-bind="with: user">
Your country:
<select data-bind="options: $root.availableLocations, optionsText: 'Text', optionsValue: 'Value', value: LocationID, optionsCaption: 'Choose...'">
</select>
</p>
</form>
This is my View Model:
public class PersonViewModel
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime DateOfBirth { get; set; }
public string LocationId { get; set; }
public IEnumerable<SelectListItem> Locations { get; set; }
}
I have a simple controller that loads my Person and a drop down list containing three countries.
private PersonViewModel _viewModel;
public ActionResult Index()
{
var locations = new[]
{
new SelectListItem { Value = "US", Text = "United States" },
new SelectListItem { Value = "CA", Text = "Canada" },
new SelectListItem { Value = "MX", Text = "Mexico" },
};
_viewModel = new PersonViewModel
{
Id = 1,
FirstName = "Test",
LastName = "Person",
DateOfBirth = new DateTime(2000, 11, 12),
LocationId = "", // I want this value to get SET when the user changes their selection in the page
Locations = locations
};
_viewModel.Locations = locations;
return View(_viewModel);
}
[HttpPost]
public JsonResult SavePersonDetails(PersonViewModel viewModel)
{
int id = -1;
SqlConnection myConnection = new SqlConnection("server=myMachine;Trusted_Connection=yes;database=test;connection timeout=30");
try
{
// omitted
}
catch (Exception e)
{
Console.WriteLine(e.ToString());
}
finally
{
myConnection.Close();
}
return Json(id, "json");
}
Lastly, here is my Person.js file, I am using knockout
var Person = {
PrepareKo: function () {
ko.bindingHandlers.date = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
element.onchange = function () {
var observable = valueAccessor();
observable(new Date(element.value));
}
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var observable = valueAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(observable);
if ((typeof valueUnwrapped == 'string' || valueUnwrapped instanceof String) && valueUnwrapped.indexOf('/Date') === 0) {
var parsedDate = Person.ParseJsonDate(valueUnwrapped);
element.value = parsedDate.getMonth() + 1 + "/" + parsedDate.getDate() + "/" + parsedDate.getFullYear();
observable(parsedDate);
}
}
};
},
ParseJsonDate: function (jsonDate) {
return new Date(parseInt(jsonDate.substr(6)));
},
BindUIwithViewModel: function (viewModel) {
ko.applyBindings(viewModel);
},
EvaluateJqueryUI: function () {
$('.dateInput').datepicker();
},
RegisterUIEventHandlers: function () {
$('#Save').click(function (e) {
// Check whether the form is valid. Note: Remove this check, if you are not using HTML5
if (document.forms[0].checkValidity()) {
e.preventDefault();
$.ajax({
type: "POST",
url: Person.SaveUrl,
data: ko.toJSON(Person.ViewModel),
contentType: 'application/json',
async: true,
beforeSend: function () {
// Display loading image
},
success: function (result) {
// Handle the response here.
if (result > 0) {
alert("Saved");
} else {
alert("There was an issue");
}
},
complete: function () {
// Hide loading image.
},
error: function (jqXHR, textStatus, errorThrown) {
// Handle error.
}
});
}
});
},
};
$(document).ready(function () {
Person.PrepareKo();
Person.BindUIwithViewModel(Person.ViewModel);
Person.EvaluateJqueryUI();
Person.RegisterUIEventHandlers();
});
As you can see, I have the data in the page but none of them show as selected
Your solution is overly complex and is leading to certain weirdness with your data. Instead of trying to patch the Titanic, your best bet is to start over and simplify:
Your page's model contains all the information you need. There's no need to try to create two totally separate view models to work with the user data versus locations. With the mapping plugin, you can specify different "view models" for various objects in your main view model, and there's a simpler pattern that can be followed to set all that up. Here's what I would do:
// The following goes in external JS file
var PersonEditor = function () {
var _init = function (person) {
var viewModel = PersonEditor.PersonViewModel(person);
ko.applyBindings(viewModel);
_wireEvents(viewModel);
}
var _wireEvents = function (viewModel) {
// event handlers here
}
return {
Init: _init
}
}();
PersonEditor.PersonViewModel = function (person) {
var mapping = {
'Locations': {
create: function (options) {
return new PersonEditor.LocationViewModel(options.data)
}
}
}
var model = ko.mapping.fromJS(person, mapping);
// additional person logic and observables
return model;
}
PersonEditor.LocationViewModel = function (location) {
var model = ko.mapping.fromJS(location);
// additional location logic and observables
return model;
}
// the following is all you put on the page
<script src="/path/to/person-editor.js"></script>
<script>
$(document).ready(function () {
var person = #Html.Raw(#Json.Encode(Model))
PersonEditor.Init(person);
});
</script>
Then all you need to bind the select list to the locations array is:
<p>
Your country:
<select data-bind="options: Locations, optionsText: 'Text', optionsValue: 'Value', value: LocationId, optionsCaption: 'Choose...'">
</select>
</p>
Based on your updated question, do this.
1.We do not need locationsArray actually. Its already in user.Locations (silly me)
2.On Index.cshtml, page change the JavaScript like this.
var userObject = #Html.Raw(Json.Encode(Model)); // no need for the quotes here
jQuery(document).ready(function ($) {
Person.PrepareKo();
Person.EvaluateJqueryUI();
Person.RegisterUIEventHandlers();
Person.SaveUrl = "#Url.Action("SavePersonDetails", "Knockout")";
Person.ViewModel = {
user : ko.observable(userObject)
};
Person.BindUIwithViewModel(Person.ViewModel);
});
3.On your Person.js page, inside RegisterUIEventHandlers #Save button click event, do this.
$('#Save').click(function (e) {
var updatedUser = Person.ViewModel.user();
updatedUser.Locations.length = 0; // not mandatory, but we don't need to send extra payload back to server.
// Check whether the form is valid. Note: Remove this check, if you are not using HTML5
if (document.forms[0].checkValidity()) {
e.preventDefault();
$.ajax({
type: "POST",
url: Person.SaveUrl,
data: ko.toJSON(updatedUser), // Data Transfer Object
contentType: 'application/json',
beforeSend: function () {
// Display loading image
}
}).done(function(result) {
// Handle the response here.
if (result > 0) {
alert("Saved");
} else {
alert("There was an issue");
}
}).fail(function(jqXHR, textStatus, errorThrown) {
// Handle error.
}).always(function() {
// Hide loading image.
});
}
});
5.Finally, our markup
<p data-bind="with: user">
Your country:
<select data-bind="options: Locations,
optionsText: 'Text',
optionsValue: 'Value',
value: LocationId,
optionsCaption: 'Choose...'">
</select>
</p>
On an unrelated side-note,
The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are
deprecated as of jQuery 1.8. To prepare your code for their eventual
removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
I am using the OpenSource version of Kendo-UI with a MVC4 project and Entity Framework. Can someone please explain how to connect the kendo-ui grid to my datasource in my .cshtml file. I am used to just simply creating a view and using #model to pull in the info from my controller. Since I don't have ASP.NET server tags for Kendo-UI. What would I put after the datasource: part when declaring my grid in javascript?
Please try with the below code snippet.
Let me know if any concern.
VIEW
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="Grid">
</div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "Home/GetDummydata",
dataType: "json"
}
}
,
schema: {
data: function (data) {
return data;
}
}
});
$("#Grid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ID",
title: "ID"
},
{
field: "Name",
title: "Name"
}
]
});
});
</script>
CONTROLLER
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[AllowAnonymous]
[HttpGet]
public JsonResult GetDummydata()
{
List<TestModels> models = new List<TestModels>();
for (int i = 1; i < 6; i++)
{
TestModels t1 = new TestModels();
t1.ID = i;
t1.Name = "Name" + i;
models.Add(t1);
}
return Json(models, JsonRequestBehavior.AllowGet);
}
}
MODEL
public class TestModels
{
public int ID { get; set; }
public string Name { get; set; }
}
I need to inform user about success/failure of clicked operation. In view I've prepared action link that goes to controller, performs database operation and returns with result. Then I'd like to show alert with message "done" or "failure". Everything should be done without reloading page. I've tried to define #Ajax.ActionLink and text/javascript function but it doesn't work at all... Please help. Thanks in advance.
Robert
Firstly you should include scripts: jquery and jquery.unobtrusive-ajax like:
<head>
...
<script src="#Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>
Inside View:
<script type="text/javascript">
function myCallback(data) {
if(!data.Success)
{
alert(data.ErrorMessage);
}
else
{
alert("id: " + data.Id);
}
}
</script>
#Ajax.ActionLink("Actionlink", // <-- Text to display
"GetDeneme", // <-- Action Method Name
new { id = "2"},
new AjaxOptions
{
HttpMethod = "POST", // <-- HTTP method
OnSuccess = "myCallback"
})
In Controller:
public ActionResult GetDeneme(string id)
{
var error = (id == "3");
if (error)
{
return Json(new { Success = false, ErrorMessage = "Error!" });
}
return Json(new { Success = true, Id = id });
}
i have been working for hours on the live search concept, and i am having problems with just one part of the Code.
html
<input id="searchs" autocomplete="off" />
<div class="livesearch" ></div>
javascript
$(function () {
$("#searchs").keyup(function () {
var searchs = $(this).val();
$.get("livesearch.php?searchs=" + searchs, function (data) {
if (searchs) {
$(".livesearch").html(data);
} else {
$(".livesearch").html("");
}
});
});
$(".page").live("click", function () {
var searchs = $("#searchs").val();
var page = $(this).attr("id");
$(".livesearch").load("livesearch.php?searchs=" + searchs + "&page=" +page);
});
});
the part var page = $(this).attr("id"); is not working. The page shows the error below
Notice: Undefined index: page in C:\xamp\...
and this error comes from the livesearch.php file which intends to use the index.
I am new to this way of scripting.
what could be the problem?
the part where the error is coming from on livesearch.php
if($_GET["page"]){
$pagenum = $_GET["page"];
} else {
$pagenum = 1;
}
Try this:
$(".livesearch").load("livesearch.php", {
searchs: searchs,
page: page
});
You weren't properly encoding the search string, and it could cause problems parsing the URL. jQuery will do that for you if you put the parameters in an object.