using SignalR with document onload instead of jquery onload - asp.net-mvc

I have used the signalR chat app (as laid out in this tutorial http://sergiotapia.com/2011/09/signalr-with-mvc3-chat-app-build-asynchronous-real-time-persistant-connection-websites/) in a standalone test site and it all works great.
I'm now trying to incorporate it into my larger project.
Now unfortunately my larger project has a body onload function defined, so i don't use the standard jquery $(function () {}); syntax for executing stuff on page load. This hasn't been too much of an issue so far, most jquery plugins and scripts get executed in the function called by my body onload and its fine.
But for some reason, my signalR code just isn't executing.
Its the exact same code as laid out above, only its called on my body load.
The page loads, does a post to /signalr/negotiate (which returns the url and clientID)
In my sample app which works, it then does a continuous post to /signalr/connect
In my other app, it simply does a single get to the page im currently on.
Its not making the post to connect.
Is there a way to manually call this?
Here is the source of the page not working.
Please note that the reason im not referencing JQuery itself is because its loaded in my master page. JQuery is present.
<script src="/public/javascript/jquery.signalR.min.js">
<script src="/public/javascript/json2.js">
<script type="text/javascript" src="/signalr/hubs">
<div>
<input type="text" id="msg" />
<input type="button" id="broadcast" />
<ul id="messages"></ul>
</div>
<script type="text/javascript">
function ExecuteOnLoad() {
// Proxy created on the fly
var chat = $.connection.chat;
// Declare a function on the chat hub so the server can invoke it
chat.addMessage = function (message) {
$('#messages').append('<li>' + message + '</li>');
};
$("#broadcast").click(function () {
// Call the chat method on the server
chat.send($('#msg').val());
});
// Start the connection
$.connection.hub.start();
}
</script>
EDIT : here is the chat hub
public class Chat : SignalR.Hubs.Hub
{
public void Send(string message)
{
//Call the addMessage method on all clients.
Clients.addMessage(message);
}
}
DOUBLE EDIT : ok, i've made a standard html page in my mvc project and wired up the onload event again and everything works fine. the problem seems to be that polling doesn't seem to working when i call
$.connection.hub.start();
instead its doing a get to the current url and returning the page again in the get request.

The problem had nothing to do with the question I asked.
I thought it might have to do with the onload function, but it did not.
The problem was because my page had a reference to the Jquery.Validate plugin.
The version I was using was 1.7, I updated to 1.9 of the plugin and it worked fine.

Related

Ajax request not fired form partial page when the main page also has an ajax request

In my _layout.cshtml I have a partial view that includes js trough requirejs.
<script data-main="/Scripts/Search" src="/Scripts/require.js"></script>
In this js file I use the following to populate a knockout vm.
$.getJSON("/Search/Index", function (data) {
self.availableCities(data.AvailableCities);
});
This works well on all pages except when my main view also has an ajax request.
<script data-main="/Scripts/Index" src="/Scripts/require.js"></script>
$.getJSON("/Property/All", function (data) {
self.properties(data);
});
Here is my require config, it is the same for the partial and the main view.
require.config({
baseUrl: "/Scripts",
paths: {
"text": "text",
"knockout": "knockout-3.3.0",
"jquery": "jquery-2.1.3.min"
},
shim: {
"jquery": { exports: "$" }
}
});
When the main page has an ajax request only this request is fired, I am not sure how to fix this. It looks like a configuration issue, tested it in both Firefox an Chrome so it does not appear to be browser specific.
It turns out having multiple <script data-main="/Scripts/Search" src="/Scripts/require.js"></script> tags in one page isn't such a bright idea.
I figured it out after some more research,
this question has a good solution if you run into a similar problem.
Basically you need one 'main.js' file and add the other page components via the require logic.
Edit:
Doing this may result in the following knockout error:
Error: You cannot apply bindings multiple times to the same element.
To fix this I have used the following binding handler:
ko.bindingHandlers.stopBinding = {
init: function () {
return { controlsDescendantBindings: true };
}
};
To enable this binding handler on containerless elements use the following:
ko.virtualElements.allowedBindings.stopBinding = true;
Apply the following binding around the partial view. To prevent the main-page from binding to the elements in the partial.
<!-- ko stopBinding: true-->
<!-- /ko -->
Finally use ko.applyBinings on the partialview like this:
ko.applyBindings(new partialViewModel(), document.getElementById("your-partial"));

MVC not functioning on server /signalr/hubs

I have a project that uses SignalR (uses tutorial from https://gkulshrestha.wordpress.com/2014/05/02/signalr-with-sql-server-query-notification/)
When I run it from visual studio, my project works perfectly. However, when I run it on a server (after having published it and with IIS), it doesn't work.
Specifically, I found out that a certain part of the JS is not running.
I have
#section Scripts{
<script src="/Scripts/jquery.signalR-2.1.1.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// Reference the auto-generated proxy for the hub.
alert(1);
var clientHub = $.connection.messageSender;
alert(5);
// Create a function that the hub can call back to display messages.
clientHub.client.broadcastMessage = function (message) {
// Add the message to page.
$('#messagecontainer').append('<li>' + message + '</li>');
};
alert(2);
$.connection.hub.start().done(function () {
alert("connection started")
}).fail(function (e) {
alert(e);
});
alert(3);
});
</script>
}
When running this through visual studio, I hit all the alerts in here. When running it on the server (by pressing Browse), I only hit alert(1) and none of the others.
Any help would be appreciated! Thanks!
[edit]
I've looked around and I'm suspecting it has to do with my signalr/hubs reference. I've tried everything on SignalR /signalr/hubs 404 Not Found but no luck.
Try using helpers when including static resources:
<script src="#Url.Content("~/Scripts/jquery.signalR-2.1.1.js")"></script>
and:
<script src="#Url.Content("~/signalr/hubs")"></script>
This will take into account the virtual directory in which your application might be running in IIS. Also if you are using the latest Razor you could just prefix with ~ to indicate the relative path:
<script src="~/Scripts/jquery.signalR-2.1.1.js"></script>
and:
<script src="~/signalr/hubs"></script>

MVC receive post from another website - Chrome says Post Cancelled

I am posting via a plain html text file on c:\ drive into my mvc website running on my machine:
<body>
<a id="testPost" href="./post_files/post.htm">test post</a>
<script type="text/javascript">
$("#testPost").click(function () {
$.post("http://hml.backend/Helix/Authorisation",
{
ClientIP: "192.168.20.34"
}, function (resultData) {
alert(resultData);
});
return false;
});
the controller is setup thus:
[HttpPost]
public ActionResult Authorisation(string ClientIP)
{
string result = _videoSecurityService.CheckHelixAuthorisation(ClientIP);
return Content(result);
}
The controller event gets hit in debug and there is no exception but Chrome says
'POST: Cancelled' in the debug window
Any ideas why?
This is a cross domain call and is not allowed in a lot of browsers, since it's a possible security risk. You could try to redirect your call on the server-side. (make the call to your own application and handle the request-response to the other website there)

Problems Submitting Form with FCKEditor on in MVC

I've a bit of an odd issue with FCKEditor in my MVC project.
I've essentially got a View which renders a Partial View containing my FCKEditor (javascript, html and any other bits to make my control reusable throught my app)
I'm calling FCKEditor by doing the following:
<script src="<%= Url.Content("~/Scripts/fckeditor/fckeditor.js") %>" type="text/javascript" ></script>
<script type="text/javascript">
window.onload = function () {
var sBasePath = '<%= Url.Content("~/Scripts/fckeditor/") %>';
var oFCKeditor = new FCKeditor('FckEditor1');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.ReplaceTextarea();
}
</script>
To validate my form, I'm using jQuery.Validate with the following code:
//FORM VALIDATION
$("#NewPageForm").validate({
errorContainer: "#errorblock-div1, #errorblock-div2",
errorLabelContainer: "#errorblock-div2 ul",
wrapper: "li",
rules: {
titleTxt: "required",
FckEditor1: "required"
},
messages: {
titleTxt: "You must enter a page title.",
FckEditor1: "You must enter at least some content."
},
submitHandler: function (form) {
form.submit();
}
});
Locally, when debugging my project, this works absolutely fine and throws up an error to the user when they leave the editor blank.
However, when I publish the application and run it from the server, whenever the editor has content in, the form won't validate, telling me that my FCKEditor control is empty, when it clearly isn't.
If I take away the validation, and submit the form with all the relevant boxes filled, the collection of collection("FckEditor1") is also empty, but again, running this locally works first time, every time.
I've had a search around and what seems to be happening is that my text area <%= Html.TextArea("FckEditor1", New With {.name = "FckEditor1", .class = "required"})%> isn't being populated with the content entered into the FCKEditor, even though this is the box that FCK is linked to.
The issue exists in all the browsers I've tried (IE8 and FF).
Not sure if it's also worth noting that FCK still renders fine too?
I'm not entirely convinced it's an issue with my code as it runs perfect locally. Is there anything I need to configure server-side or in web.config that could be causing it?
Has anyone else come across this or have any ideas as to how to solve the issue?
EDIT
I think I could be partway there with a fix.
I've added the following so far:
$('#publishBtn').button().click(function () {
if (typeof (FCKeditorAPI) == "object") {
FCKeditorAPI.GetInstance("FckEditor1").UpdateLinkedField();
} else {
alert('this is not an object!');
}
if ($("#FckEditor1").val() == "") {
alert("FCKEditor is empty");
} else {
$("#NewPageForm").submit();
}
});
Though, I now get sent to a blank page when the form is submitted, though nothing in my controller seems to be the issue - at least I don't think so as if there was an issue there, it'd do the same on my local machine.
One thing that may be causing your issue if you are validating on the server is that once it's on IIS you cannot post HTML content without the request validation preventing the FCKContent from being passed. Cassini wont check this so it works on your local machine.
try adding this to your the action which is called when you post to validate:
[ValidateInput(false)]
public ActionResult UpdateAction()
{
}
If possible, use CKEditor instead; it integrates with MVC much better.
http://ckeditor.com/
http://ckeditor.com/what-is-ckeditor
I found the source of my problem, and it's to do with the way I'm handling multiple submit buttons in my controller.
I've tweaked it and it's now fixed.

Hash navigation problem while using jquery mobile with asp.net mvc2

I am looking to standardize the processing of ajax #anchors at the server side, using MVC.
Before a controller action is invoked I want to convert every request with ajax anchors into a request without ajax anchors, so that the controller code does not know there were anchors in the request:
For example:
1) /user/profile#user/photos should be treated as /user/photos
2) /main/index#user/profile/33 should be treated as /user/profile/33
What is the best technique in MVC to accomplish that?
This should necessarily be done on the client side, probably using jquery as everything that follows the # sign is never sent to the server.
I too struggle with same issue and I solved this problem after looking at Visual Studio 11 Developer Preview template code. I added following code in my _layout.cshtml, please note we must load jquery.mobile*.js file after following script tag:
<script type="text/javascript">
$(document).bind("mobileinit", function () {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it. http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
#{
if (ViewBag.JqueryMobileAjaxEnabled != null && ViewBag.JqueryMobileAjaxEnabled == true)
{
#: $.mobile.ajaxEnabled = true;
}
else
{
#: $.mobile.ajaxEnabled = false;
}
}
});
</script>
**<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>**

Resources