I'm working on an MVC3 project right now and just started using SignalR.
I have followed several demos but I can't seem to get it working when my codes are inside \Views\Shared_Layout.cshtml. I always get the "Connection must be started before data can be sent." error.
Please see my codes below:
My Class:
[HubName("notificationsHub")]
public class NotificationsHub : Hub
{
public void updateServer()
{
Clients.updateClient("boom");
}
}
My script inside _Layout.cshtml:
$(function(){
var signalR = $.connection.notificationsHub;
signalR.updateClient = function (message) {
alert(message);
};
$("#open").click(function () {
signalR.updateServer();
});
$.connection.hub.start(function () {
alert("Connected");
});
});
Script references:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.signalR.js")"></script>
<script type="text/javascript" src="#Url.Content("~/signalr/hubs")"></script>
My NotificationsHub Class is inside a folder named NotificationsHub which is of the same directory level as my Views.
I tried this on a .html file and it works perfectly (I get the alert callback for $.connection.hub.start).
What am I missing here?
Thanks
That's weird, I cannot reproduce the problem. Here's my Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.signalR.js")"></script>
<script type="text/javascript" src="#Url.Content("~/signalr/hubs")"></script>
<script type="text/javascript">
$(function () {
var signalR = $.connection.notificationsHub;
signalR.updateClient = function (message) {
alert(message);
};
$("#open").click(function () {
signalR.updateServer();
});
$.connection.hub.start(function () {
alert("Connected");
});
});
</script>
</head>
<body>
#RenderBody()
Open
</body>
</html>
Works perfectly fine. Make sure you don't have script reference errors.
Related
This is index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.js"></script>
<script src="testApp.js"></script>
</head>
<body>
<h3>Lazy load succeded if you can see 'Hello world' below</h3>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
<button ng-click="fun()">Start</button>
</div>
<script>
angular.module("LazyLoadTest", ["oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile) {
$scope.fun=function(MyService){
$ocLazyLoad.load("testApp.js").then(function() { //loading a module
console.log('loaded!!'+$scope);
var el, elToAppend,elToAppend2;
elToAppend = $compile('<say-hello to="world"></say-hello>')($scope); //appending it to div
el = angular.element('#example');
console.log(el);
el.append(elToAppend)
//el.append(elToAppend2);
}, function(e) {
console.log('errr');
console.error(e);
})
}
});
</script>
</body>
</html>
The above code is the module which is to be loaded at run time. Able to load Directive but need some help to load service.
How to laxyload the service defined in testApp.js?
Please help me out with this
I have well known FrontController override
class FrontController extends FrontControllerCore {
public function setMedia()
{
parent::setMedia();
$this->addJS(array(
_THEME_JS_DIR_.'adds.js'
));
}
}
This wokrks as expected but with one issue -> adds this new js/css files at the top of the included files list, like here:
<script type="text/javascript" src="/js/adds.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.easing.js"></script>
<script type="text/javascript" src="/js/tools.js"></script>
<script type="text/javascript" src="/themes/default-bootstrap/js/global.js"></script>
And this is bad because my script land above jquery's script..
How to make it like this
<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery.easing.js"></script>
<script type="text/javascript" src="/js/tools.js"></script>
<script type="text/javascript" src="/themes/default-bootstrap/js/global.js?version=2"></script>
<script type="text/javascript" src="/js/adds.js"></script>
I made a simple custom module (50 lines) with hookHeader function like below. Works like a charm!
public function hookHeader($params)
{
$this->context->controller->addCSS($this->_path.'css/adds.css', 'all');
$this->context->controller->addJS($this->_path.'js/adds.js', 'all');
}
I use addJquery() before addJS() to get jQuery added before, for example:
public function hookBackOfficeHeader()
{
$this->context->controller->addJquery();
$this->context->controller->addJS(Tools::getShopDomainSsl(true, true).__PS_BASE_URI__.'modules/'.$this->name.'/my.js');
}
http://doc.prestashop.com/display/PS16/Using+jQuery+and+jQueryUI
please can anyone help me with this problem that i've encountered. i'm able to capture a url parameter with javascript and i want to add it to my jquery code which calls a page in a div but i'm able to do it. here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function urlink()
{
var tlink = window.location.search.substring(1);
}
jQuery(function($){
$('#mydiv').load('real_news.asp?'+ urllink());
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function urlink()
{
return window.location.search.substring(1);
}
jQuery(function($){
$('#mydiv').load('real_news.asp?'+ urllink());
});
</script>
I'm looking at the PDF.js project on github and looking at their basic demos I've come up with this (the whole view):
#{
ViewBag.Title = "GetPDFLetter";
Layout = null;
}
<!doctype html>
<html>
<head>
<title>PDF.JS TEST</title>
<!-- PDF.js-specific -->
<script src="#Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/pdf.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/core.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/util.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/api.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/canvas.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/obj.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/function.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/charsets.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/cidmaps.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/colorspace.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/crypto.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/evaluator.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/fonts.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/glyphlist.js")"> </script>>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/image.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/metrics.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/parser.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/pattern.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/stream.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/worker.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jpg.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jpx.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jbig2.js")"> </script>
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
var url = '#Url.Content("~/PDFScripts/worker_loader.js")';
PDFJS.workerSrc = url;
</script>
</head>
<div>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
<script type="text/javascript">
$(document).ready(function () {
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
//
// See README for overview
//
'use strict';
//
// Fetch the PDF document from the URL using promices
//
PDFJS.getDocument('helloworld.pdf').then(function (pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
});
</script>
</html>
The File helloworld.pdf is in the same folder as the view, but when I run the project nothing gets rendered, just a small rectangle. Have I missed something? Any special considerations? Thanks for any help.
Figured it out eventually. What an awesome library PDF.js is.
I've taken the liberty of creating a sample MVC3 project using PDF.js. It follows 90% of the PDF.js demo on github, except a tiny, self explanatory (explained in the comments in the code) change in assigning PDF file paths to the viewer.
When I execute the code below in IE7/WinXP32, then the output in the console is "undefined". The output changes to the expected "getContext()", when I make either of two modifications:
I remove the image tag.
I use: <body onload="draw()">
Any idea what is going on here? What may be a workaround?
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
var djConfig = {parseOnLoad: false, isDebug: true};
</script>
<script type="text/javascript"
src="/development/javascript/dojo-release-1.4.3-src/dojo/dojo.js">
</script>
<!--[if IE]>
<script type="text/javascript" src="/javascript/excanvas_r73.js"></script>
<![endif]-->
<script type="text/javascript">
function draw() {
var canvas = dojo.byId("canvas");
console.log(canvas.getContext);
}
dojo.addOnLoad(draw);
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<img src="nonexisting.gif">
</body>
</html>
Update: Seems like replacing "dojo.addOnLoad(draw);" with the following code does the trick.
function init() {
dojo.addOnLoad(draw);
}
if (dojo.isIE) {
dojo.connect('onload', init);
} else {
init();
}
dojo.addOnLoad fires before document.onload. I think it's associated with DOMContentLoaded. Perhaps excanvas does its initialization on the same event? Can you just use document.onload?