with the following html/js code I am able to successfully call my signalR 2.0 hub if html/js and hub resides on the same server.
<!DOCTYPE html>
<html>
<head>
<title>Test SignalR 2.0</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" size=100 id="message" />
<input type="button" id="sendmessage" value="Send" />
</div>
<ul id="discussion"></ul>
<!--Script references. -->
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.3.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
//Instanciating Hub-Class
var srv = $.connection.pvHub;
// Definition of function called by HUB (Server)
srv.client.receiveData = function (message) {
var encodedMsg = $('<div />').text(message).html();
$('#discussion').append('<ul>' + encodedMsg + '</ul><br>');
};
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// call HUB function (on Server)
srv.server.getBnoData($('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
Now I am trying to call the hub with the same html/js file located on a client. But no success.
I think, there are some issues with the hub proxy and the URL of my hub on instantiating the connection and start it. But strictly speaking no idea how to resolve this.
Any idea?
thx.
You just need to enable Cross Domain support. Read this:
http://www.asp.net/signalr/overview/signalr-20/hubs-api/hubs-api-guide-javascript-client#crossdomain
Also, in case you have already set it up, you have to update your client code to point at the right endpoint, by updating the /signalr/hubs relative address to an absolute one, and by specifying a valid absolute address for $.connection.hub.url. Something like:
<script src="http://foo.com/signalr/hubs"></script>
<script>
...
$.connection.hub.url = 'http://foo.com/signalr';
...
</script>
Related
This might already be asked but I just searched through for hours. I am trying to comment on a post that I made with my web app while signed in on facebook. I do not want to post a comment as the Web app page admin. Id like to post the comment as a user signed into facebook on my site while the post id is remembered. when I try to post a comment I get this
Publishing comments through the API is only available for page access tokens
I'm using this piece of code
FB.api(response.data[0].id+'/comments', 'post',{message: "good work"},function(response){
console.log(response);
});
I'm starting to think that it is not possible anymore. I just would like someone to give me a concrete answer about it thank you.
The error message tells you that it is not possible to comment "as User" anymore. You can only comment with a Page Token, which means that you can only comment "as Page".
Changelog: https://developers.facebook.com/docs/graph-api/changelog/version2.10#gapi-90-comments
POST and DELETE /{object-id}/comments — This node now requires a valid
page access token.
Basic Full Page Login Example:
//<![CDATA[
/* external.js */
var doc, bod, I, fI, old = onload; // for use on other loads
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
I = function(id){
return doc.getElementById(id);
}
fI = function(client_id, redirect_uri, onLogin, onLoginContext){
var c = onLoginContext || this;
FB.getLoginStatus(function(r){
if(r.status === 'connected'){
onLogin.call(c);
}
else{
location = 'https://www.facebook.com/dialog/oauth?client_id='+client_id+'&redirect_uri='+redirect_uri;
}
});
}
var out = I('out');
fI('571652776188445', 'https://phpglue.com/fakebook', function(){
FB.api('708713672667337', 'post', {message:'Testing Facebook JavaScript SDK'}, function(r){
out.innerHTML = r.message;
});
}); // app I will never fully develop
}
//]]>
/* external.css */
html,body{
padding:0; margin:0;
}
body{
background:#000; overflow-y:scroll;
}
.main{
width:936px; background:#fff; padding:20px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Facebook Basic Full Page Login</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='https://connect.facebook.net/en_US/sdk.js'></script>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<div id='out'>You have to test this from Your Facebook App</div>
</div>
</body>
</html>
I'm working on a project where, on the client side, the user would have to fill out an online survey and on the server side, the data is stored in a database. The survey itself consists of multiple pages, where each page is a form. So essentially, that single online survey consists of multiple forms.
I'm picking up right after where the person who created the online survey left off. The way she had it done was something like this:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="survey.css">
<script>
// when the user clicks the button on the first page, he/she is brought to a new page where the stuff inside the function is displayed
function Q2(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q3()'>Next</button>";
// same deal here, stuff in this function are displayed in a new page
function Q3(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q4()'>Next</button>";
// same as the two functions above
function Q4(){
document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q5()'>Next</button>";
// keeps going until the last question
</script>
</head>
<body>
<!-- this is the first page when the file is opened -->
<h1>Meeting 1</h1>
<p id="Q">Some text...<br><input type="text" name="tweet" style='height: 50px;width: 500px;'><br><br>
<button type="button" onclick="Q2()">Next</button>
</p>
</body>
</html>
I have to store things in a database, and that's where things started getting confusing for me. I've done research online and I'm sure that rather than having each page/form be a function (Q2, Q3, etc.) in JS, it would be better to have each page be its own HTML form and send the data to a PHP file, where the connection and storing data to the database happens.
WHAT I WANT TO HAPPEN: Is it possible to have all the forms be written/stored in a single HTML file, and at the same time, have each subsequent form be displayed on the next page? If that's not possible, what should I do?
Here's some test code I created (currently displays both forms on the same page, which isn't what I want):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<link rel="stylesheet" type="text/css" href="survey.css">
</head>
<body>
<div>
<h1>Meeting 1</h1>
<form name="form1">
<!-- Some HTML code goes here -->
<button type="button">Next</button>
</form>
</div>
<div>
<form name="form2">
<!-- Some HTML code goes here -->
<button type='button'>Next</button>
</form>
</div>
</body>
</html>
Thank you in advance!
you could use actually simply use jQuery and CSS to put all your forms in the same place one behind the other. However you'd have to use ajax to put the form info into your database. Do it as such:
$(".step1").show();
$(".step2").hide();
$(".step3").hide();
$(".step1").submit(function(e)
{
e.preventDefault();
$.ajax({
url : 'submission1.php',
data : { name : $(".step1").children("input[name='username']") },
method : 'POST'
})
.done(function(data)
{
$(".step2").show();
});
});
/** Repeat the same process with step 2 and 3 **/
Then your CSS could be as follows Your forms must be in a parent container:
.step1
{
position: relative;
top: 0;
left: 0;
z-index: 10;
}
.step2
{
position: relative;
top: 0;
left: 0;
z-index: 5;
}
.step3
{
position: relative;
top: 0;
left: 0;
z-index: 1;
}
Complete example here: https://jsfiddle.net/LkjmL43h/3/
I'm starting to learn HTML5+CSS+JS. It was all going fine on my Windows desktop, but when I try doing something on my Linux notebook, no javascript seems to work.
This is the mini tutorial I followed: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript
and this is my page with the result: http://www.lele.bbt.net.ar/prueba01/
(As you can see, the JS is not doing a thing).
// JavaScript demonstration
var changeBg = function(event) {
console.log("method called");
var me = event.target,
square = document.getElementById("square");
square.style.backgroundColor = "#ffaa44";
me.setAttribute("disabled", "disabled");
setTimeout(function() {
clearDemo(me)
}, 2000);
}
function clearDemo(button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);
#square {
width: 120px;
height: 120px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
</body>
</html>
(Here it works, but for some reason, not when I do it on my computer).
I don't know if it can be a priviledge problem or something like that (js has read/write priviledges, not execute. But I guess that's how it should be)
Thanks!
I'm pretty sure it's because the script can't find the button.
You load your script before everything else is loaded, which is fine. But you can have problems like this. To avoid this kind of problems you load the JavaScript file after the HTML.
At the moment if you try to print the var "button" you will receive "null".
The Chrome console when you open the page gives you this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
That means that it is trying to read the property of the button, which is null.
Move the script tag to the very end, just before the closing </body> tag:
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
<script type="text/javascript" src="script.js"></script>
</body>
i want to use this: http://jqueryui.com/draggable/ in my Firefox SDK Addon.
This is the source code for a simple example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
My Problem is, that i dont know how to handle the function
$(function() {
$( "#draggable" ).draggable();
});
in my content script, by using port communication between my main and content script.
Unfortunately, you placed the draggable function in a page script, not a content script, making communication way too complicated.
Instead, place all of your jQuery files and create a javascript file (let's call it draggable.js) in the data folder of your add-on (this is the content script) and place the draggable function there. Then use tabs.attach like so.
main.js
var tabs = require("sdk/tabs");
var data = require('sdk/self').data;
var worker;
var widget = require("sdk/widget").Widget({
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico"
onClick: function() {
worker = tabs.activeTab.attach({
contentScriptFile: [data.url('jquery.js'),
data.url('jquery-ui.js'),
data.url('draggable.js')]
});
worker.port.on("anything", function(variable) {
console.log("Got variable: "+variable);
}
}
});
Then you can communicate with the script by using self.port.emit in draggable.js and worker.on in main.js
Update: Edited main.js and draggable.js will look like this:
draggable.js
$("#draggable").draggable();
self.port.emit("anything", variable);
You should do anything that pertains to the page in this draggable.js and only send variables out if you need access to any Firefox sdk modules (which are only accessible in main.js).
So what I want to do is to replace the main database loaded into a Google Earth GEPlugin instance in a web browser. If I go to the Code Playground: Here http://code.google.com/apis/ajax/playground/#mars/alternate_server_connectivity
Then I get an example of loading a new database. However, if I try to make the CreateInstance calls multiple times, I keep getting the same database (I am guessing this is due to the GEPlugin.exe running in the background still using the first database. If I remove that instance by killing the geplugin.exe process then the load works)
On that code page for an example edit the HTML and I used the following html/script combo
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback,
{ database: 'http://khmdb.google.com/?db=mars' });
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function loadmoon()
{
delete ge;
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
//http://khmdb.google.com/?db=moon
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
LOAD THE MOON
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
This works in that it reloads the instance, BUT it does NOT change the database.
I should say that I am aware of the option of adding a side database, but if I try to load a side database the Terrain is still mapped to the terrain of the first database. For me this is not acceptable.
Set the innerHTML of 'map3d' to an empty string before creating the instance again.
function loadmoon(){
document.getElementById('map3d').innerHTML = '';
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
}
Take a look at this example, should be exactly what you need. http://earth-api-samples.googlecode.com/svn/trunk/examples/alternate-spheres.html