$ is undefined SignalR Javascript Client - javascript

I create a javascript Signalr Client, but I debug in Firefox, it shows "$ is undefined".
My index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SignalR Client</title>
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.js"></script>
<script src="/signalr/hubs"></script>
<script>
$(function () {
var connection = $.hubConnection('http://localhost:8080');
var hub = connection.ChatHub;
$.connection.hub
.start()
.done(function () {
$('#send').click(function () {
hub.server.hello();
});
});
});
</script>
</head>
<body>
<button id="send">Say Hello!</button>
<p id="message"></p>
</body>
</html>
I have searched some topics like this but it's not working.
I also created a console application and it connected to my HubServer.
The reference is like this image below.

This means that jQuery is not being included, you may load it from Google or jQuerys own CDN if you local link is not good.

Related

Javascript: Uncaught ReferenceError: tb is not defined

app.js
"use strict";
var tb = {
rahmen: {
eigenschaften: [
"hochwertig",
"verwindungssteif",
"vergleichsweise verwindungssteif",
"sehr verwindungssteif",
"sehr hohe Verwindungssteifigkeit",
"hohe Steifigkeit"
]
}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
((Some Head-Tags))
<script src="dist/app.js" defer></script>
((Some Head-Tags))
</head>
<body>
<div class="container">
<section>
<h1>Test</h1>
<script>
console.log(tb.rahmen.eigenschaften[3]);
</script>
</section>
</div>
</body>
</html>
Error Message
Uncaught ReferenceError: tb is not defined
The problem
It must be something simple, but after reading many posts I still have no clue.
Why is my Javascript-Object still undefined.
Sorry, for the dump question.
Thanks,
Musa
The reason for the error is that you have defer on your script tag for app.js, so that code isn't run until after all the HTML has been parsed. But your inline script trying to use tb isn't deferred, so it will run as soon as it's encountered, which is during the HTML parsing and thus before app.js is run.
The spec has a great graphic showing what defer and such do:
I'd suggest keeping all of the logic in app.js and removing the second script. If you need to add content there with your script, do it via the DOM after the HTML has been parsed.
For instance, if you wanted to add content there:
app.js:
"use strict";
var tb = {
rahmen: {
eigenschaften: [
"hochwertig",
"verwindungssteif",
"vergleichsweise verwindungssteif",
"sehr verwindungssteif",
"sehr hohe Verwindungssteifigkeit",
"hohe Steifigkeit"
]
}
};
document.getElementById("main-section-content").textContent = tb.rahmen.eigenschaften[3];
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
((Some Head-Tags))
<script src="dist/app.js" defer></script>
((Some Head-Tags))
</head>
<body>
<div class="container">
<section>
<h1>Test</h1>
<div id="main-section-content"></div>
</section>
</div>
</body>
</html>
Notice that now there's just one script, which does its work when loaded.
Remove defer. That should help and fix the issue.

Unable to create Rx.Observable from JS event

I'm trying to figure out how to use rx.js with a dog-simple example, but can't figure out what reference or file I'm missing that means it isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Empty</title>
<script src="/Scripts/rx.js"></script>
</head>
<body>
<script>
var thing = Rx.Observable.fromEvent(document, 'keydown');
</script>
</body>
</html>
That's literally it. The script line correctly loads a local copy of rx.js 2.4.1 freshly downloaded from nuget.
I'm getting the error Rx.Observable.fromEvent is not a function, so I'm assuming that there is a missing reference.
It might just be the time of night, but I'm struggling to see what I'm doing wrong. Any help?
Resolved by downloading and using additional Rx files rx.async.js and rx.binding.js like so:
<!DOCTYPE html>
<html>
<head>
<title>Empty</title>
<script src="/Scripts/rx.js"></script>
<script src="/Scripts/rx.async.js"></script>
<script src="/Scripts/rx.binding.js"></script>
</head>
<body>
<script>
var thing = Rx.Observable.fromEvent(document, 'keydown');
</script>
</body>
</html>

JavaScript Not Sending Info To WebSocket When Page is Loaded

I am having trouble sending information of a session cookie when loading a page.
Here is how the function executes
<body onload="example();">
Here is the function it self
function example() {
websocket.send("<?php print($_SESSION['example']) ?>")
}
I've tried this way as well, but still does not work.
function example() {
websocket.send("Test")
}
I also tried calling this function when a button is clicked and it does work.
I was thinking maybe the connection to the websocket is not fast enough and the example(); function is called before the connection is established. Please let me know how I can make this work.
This a complete example of how to connect to a WebSocket from the onload document event:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WebSocket Sample</title>
<script type="text/javascript">
function example()
{
// open websocket
var socket = new WebSocket('ws://localhost:80');
socket.onopen = function() {
console.log("onopen!");
// Web Socket is connected. send an initial random message.
socket.send("Hello!");
};
}
</script>
</head>
<body onload="example();">
<h1>Title</h1>
</body>
</html>
I found out that the connection stablish after the execution of the function so what I simply did was setTimeout, even duh its not a good practice, it will be enough for the project am doing. Here is short version of my solution.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script language="javascript" type="text/javascript">
function example() {
function sendUser() {
setTimeout(
function() {
websocket.send("Wroked!")
}, 1000);
}
}
</script>
</HEAD>
<BODY onload="example();">
</BODY>
</HTML>

sample HTML to test javascript codes

I have just started learning Javascript and Ok here is a code I want to try and see it in the browser, so I create a test.js file and put this in it:
function useless(callback) {
return callback
}
var text = 'Amigo';
assert(
useless(function(){ return text; }) === text,
"The useless function works! " + text);
But still there is more, I should write a minimum HTML page than can call this function, What is sample HTML to host this method in it?
I have written something like this but still there is something wrong with it:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="hehe.js" >
useless('Amigo');
window.onload=useless('Amigo')
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="hehe.js"></script>
<script >
useless('Amigo');
window.onload=useless('Amigo')
</script>
</body>
</html>
You can load the source in a separate script from the inline one that you call it in. Note that this assumes that hehe.js is in the root directory of your site.
For testing js in general jsFiddle is a nice resource that lets you define your html/js/css and experiment with small changes without having to write out all the files.

Can't write to dynamic iframe using jQuery

My goal is to dynamically create an iframe and write ad JavaScript into it using jQuery (e.g. Google AdSense script). My code works on Chrome, but fails intermittently in Firefox i.e. sometimes the ad script runs and renders the ad, and other times it doesn't. When it doesn't work, the script code itself shows up in the iframe.
My guess is these intermittent failures occur because the iframe is not ready by the time I write to it. I have tried various iterations of iframe_html (my name for the function which is supposed to wait for the iframe to be ready), but no luck. Any help appreciated!
PS: I have read various threads (e.g. jQuery .ready in a dynamically inserted iframe). Just letting everyone know that I've done my research on this, but I'm stuck :)
Iteration 1:
function iframe_html(html){
$('<iframe name ="myiframe" id="myiframe"/>').appendTo('#maindiv');
$('#myiframe').load(
function(){
$('#myiframe').ready( function(){
var d = $("#myiframe")[0].contentWindow.document;
d.open();
d.close();
d.write(html);
});
}
);
};
Iteration 2:
function iframe_html(html){
$('<iframe id="myiframe"/>').appendTo('#maindiv').ready(
function(){
$("#myiframe").contents().get(0).write(html);
}
);
};
Honestly, the easiest and most reliable way I have found when dealing with the load events on iframes uses the "onload" attribute in the actual iframe tag. I have never had much of a problem with setting the content once the "onload" event fires. Here is an example:
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
$(function() {
var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html' onload='iframe_load()'></iframe>");
$("body").append($iframe);
});
function iframe_load() {
var doc = $("#myiframe").contents()[0];
$(doc.body).html("hi");
}
</script>
</head>
<body></body>
</html>
The problem with this is that you have to use attribute tags and global function declarations. If you absolutely CAN'T have one of these things, I haven't had problems with this (although it doesn't look much different than your attempts, so I'm not sure):
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
$(function() {
var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html'></iframe>");
$iframe.load(iframe_load);
$("body").append($iframe);
});
function iframe_load() {
var doc = $("#myiframe").contents()[0];
$(doc.body).html("hi");
}
</script>
</head>
<body></body>
</html>
This is one of the most frustrating parts of the DOM and JavaScript - my condolences are with you. If neither of these work, then open up Firebug and tell me what the error message is.
false.html:
<html>
<head><title></title></head>
<body></body>
</html>
JS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function iframe_html(html)
{
var id = "myiframe_" + ((new Date()).getTime());
$('<iframe src="false.html" name ="'+id+'" id="'+id+'" />').appendTo('#maindiv');
var loadIFrame = function()
{
var elIF = window.document.frames[id];
if (elIF.window.document.readyState!="complete")
{
setTimeout(loadIFrame, 100);
return false;
}
$(elIF.window.document).find("body").html(html);
}
loadIFrame();
};
$(function(){
iframe_html("<div>hola</div>");
});
</script>
</head>
<body>
<div id="maindiv"></div>
</body>
</html>
then please see this link

Categories