Develop Reference

Applying SignalR to update gridview

So when using signalR. I followed this example and got it working on a test web form, where in I open 2 tabs of the same page and tested it out:
SignalR Tutorial
Now I tried to modify it a little bit and tried to have 1 page as a sender and another as a receiver,
Page with Button to send message:
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var msg = $.connection.myHub1; //change MyHub1.cs should be in camel myHub
// Create a function that the hub can call to broadcast messages.
msg.client.broadcastMessage = function (name, message) {
// $("[id*=btnRefresh]").click();
};
// Start the connection.
$.connection.hub.start().done(function () {
function RefreshData() {
// Call the Send method on the hub.
msg.server.send('admin', 'Refresh Grid');
};
});
});
</script>
protected void btnSendMsg_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(GetType(), "SigalRFunction", "RefreshData()", true);
}
Page with gridview:
<asp:Button runat="server" ID="btnRefresh" OnClick="btnRefresh_Click" Style="display: none" />
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var msg = $.connection.myHub1; //change MyHub1.cs should be in camel myHub
// Create a function that the hub can call to broadcast messages.
msg.client.broadcastMessage = function (name, message) {
$("[id=btnRefresh]").click();
};
// Start the connection.
$.connection.hub.start().done(function () {
function RefreshData() {
// Call the Send method on the hub.
//msg.server.send('admin', 'Refresh Grid');
};
});
});
</script>
protected void btnRefresh_Click(object sender, EventArgs e)
{
grdview.DataSource = grdviewData();
grdview.DataBind();
}
My idea was every time a message is received, the grid view/page should should automatically refresh. The grdviewDatasource and Databind works i.e placed it in pageload.Sadly nothing happens.
script src="assets/js/app.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/custom.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.10.2.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->

Let me start by saying that you can invoke the hub's method either from client-side or code-behind code. Since it is not clear which way you want I'll cover both.
Your hub, MyHub1 should define the Send method, which you are going to invoke when the button is clicked:
MyHub1.cs
public class MyHub1 : Hub
{
public void Send(string name, string message)
{
var hubContext = GlobalHost.ConnectionManager.GetHubContext<MyHub1>();
hubContext.Clients.All.broadcastMessage(name, message);
}
}
Note that the Send method calls the broadcastMessage javascript function (to notify clients), which you should define in the Receiver. You should add any code necessary to refresh your grid inside that function.
Receiver.aspx
<script type="text/javascript">
$(function () {
var msg = $.connection.myHub1;
// Create a function that the hub can call to broadcast messages.
msg.client.broadcastMessage = function (name, message) {
console.log(name + ", " + message);
// do whatever you have to do to refresh the grid
};
// Start the connection.
$.connection.hub.start().done(function () {
});
});
</script>
The Sender contains the two buttons: btnSendMsg will invoke the hub's Send method from code-behind; btnSendMsg2 will perform the same invocation from javascript. You can pick either depending on your needs.
Sender.aspx
<form id="form1" runat="server">
<div>
<asp:Button ID="btnSendMsg" runat="server" Text="Server-Side" OnClick="btnSendMsg_Click" />
<input type="button" id="btnSendMsg2" value="Client-Side" />
</div>
</form>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var msg = $.connection.myHub1;
// Start the connection.
$.connection.hub.start().done(function () {
$('#btnSendMsg2').click(function () {
// Call the Send method on the hub.
msg.server.send('admin', 'Refresh Grid');
});
});
});
</script>
Sender.aspx.cs
protected void btnSendMsg_Click(object sender, EventArgs e)
{
var myHub1 = new MyHub1();
myHub1.Send("admin", "Refresh Grid");
}
Last but not least, make sure both the sender and the receiver pages reference the necessary jQuery and SignalR scripts and the autogenerated SignalR hub script.

Redirect after processing a POST request in Apps Script

I have had an issue with getting the google scripts page to redirect back towards my custom URL. The script currently executes but I cant get it to redirect back to its previous page after it is finished executing.
Heres the script.gs code:
function doPost(e) {
try {
Logger.log(e); // the Google Script version of console.log see: Class Logger
record_data(e);
// shorter name for form data
var mailData = e.parameters;
var name= String(mailData.name);
var message= String(mailData.message);
var email= String(mailData.email);
var all= ("Name: "+name+"\nReply address: "+email+"\nMessage: "+message);
// determine recepient of the email
// if you have your email uncommented above, it uses that `TO_ADDRESS`
// otherwise, it defaults to the email provided by the form's data attribute
var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;
MailApp.sendEmail({
to: String(sendEmailTo),
subject: String(mailData.subject),
replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
body: String(all)
});
doGet();
return HtmlService.createHtmlOutput('xxxxxxxxxx.com');
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="2;url=xxxxxxxxxx.com" />
<base target="_top">
</head>
<body>
Click here to go back.
</body>
</html>
What would be the best way to make the script open the index.html page so I could easily redirect back to the custom URL?

Here's a working example of redirecting after processing a POST request.
Code.gs
var REDIRECT_URL = "http://www.stackoverflow.com";
function doPost(e) {
Logger.log("POST request");
Logger.log(e)
return redirect();
}
function doGet() {
Logger.log("GET request");
var template = HtmlService.createTemplateFromFile("form");
template.url = ScriptApp.getService().getUrl();
return template.evaluate();
}
function redirect() {
return HtmlService.createHtmlOutput(
"<script>window.top.location.href=\"" + REDIRECT_URL + "\";</script>"
);
}
form.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="<?= url ?>" method="post">
<input type="text" name="test_field" value="test data">
<button type="submit">Submit form</button>
</form>
</body>
</html>
Usage
When I visit the published web app (i.e. using a GET request), I'm presented with the simple form.
Submitting that form (i.e. using a POST request), I'm immediately redirected to http://www.stackoverflow.com.
This output is captured in the script log:
[18-06-19 10:39:04:731 PDT] POST request
[18-06-19 10:39:04:732 PDT] {parameter={test_field=test data}, contextPath=, contentLength=20, queryString=, parameters={test_field=[test data]}, postData=FileUpload}
Regarding your code sample, you have:
doGet();
return HtmlService.createHtmlOutput('xxxxxxxxxx.com');
That doesn't make sense as you're not doing anything with the results of doGet(). In order to make the doGet() call useful, replace the above with the following:
return doGet();

script in HTML string is not executed when passed via JSON

This is a follow-up question of this one.
Goal is to use some user input that is converted to a HTML document that should be displayed in a new tab (that's answered in the link above).
Problem is, however, that - if the HTML document contains <script> tags - those are not executed when this HTML string is passed as JSON. Below I use a simple string:
'<!DOCTYPE html><title>External html</title><div>Externally created</div><script>alert("WORKING");</script>'
This is a minimal example to illustrate the problem (you will see this in your browser when you load the HTML from below):
When I click on the button, the new tab is opened but the script is not executed i.e. there is no alert shown. By clicking on the alert link, the html string is loaded directly and the alert is shown correctly.
My question is, how to postprocess the HTML string that is returned from .getJSON to execute the script correctly. Currently I do it like this (entire code can be found below):
$.get('/_process_data', {
some_data: JSON.stringify('some data'),
}).success(function(data) {
var win = window.open("", "_blank");
win.document.body.innerHTML = data;
})
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">Get new tab!</h3>
</div>
<button type="button" id="process_input">no alert</button>
<a href="/html_in_tab" class="button" target='_blank'>alert</a>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#process_input').bind('click', function() {
$.get('/_process_data', {
some_data: JSON.stringify('some data'),
}).success(function(data) {
var win = window.open("", "_blank");
win.document.body.innerHTML = data;
})
return false;
});
});
</script>
</body>
</html>
and the flask file:
from flask import Flask, render_template, request, jsonify
import json
# Initialize the Flask application
app = Flask(__name__)
#app.route('/html_in_tab')
def get_html():
# provided by an external tool
# takes the user input as argument (below mimicked by a simple string concatenation)
return '<!DOCTYPE html><title>External html</title><div>Externally created</div><script>alert("WORKING");</script>'
#app.route('/_process_data')
def data_collection_and_processing():
# here we collect some data and then create the html that should be displayed in the new tab
some_data = json.loads(request.args.get('some_data'))
# just to see whether data is retrieved
print(some_data)
# oversimplified version of what actually happens; get_html comes from an external tool
my_new_html = get_html() + '<br>' + some_data
print(my_new_html)
# this html should now be displyed in a new tab
return my_new_html
#app.route('/')
def index():
return render_template('index_new_tab.html')
if __name__ == '__main__':
app.run(debug=True)

I think you need something like this:
var win = window.open("", "_blank",);
win.document.write('<!DOCTYPE html><title>External html</title><div>Externally created</div><script>(function(){alert(1);})();</script>');
when you open the popup, this executes JavaScript. You could add data and do whatever you want inside <script>(function(){alert(data);})();</script>

After the HTML has been added to the page, you could execute a function to run it. This would require wrapping your scripts with functions like this:
function onStart() {
// Your code here
}
Then after the HTML is added to the page, run the function:
$.get('/_process_data', {
some_data: JSON.stringify('some data'),
}).success(function(data) {
var win = window.open("", "_blank");
win.document.body.innerHTML = data;
onStart();
})

Instead of...
var win = window.open("", "_blank");
win.document.body.innerHTML = data;
Use jquery to load the html and wait for loading to complete:
$.get('/_process_data', {
some_data: JSON.stringify('some data'),
}).success(function(data) {
var w = window.open("", "_blank");
$(w.document.body).load(data, function () {
//execute javascript here
});
})

desktop notification using javascript in windows form

i am new to this and i am creating simple application in which i click a button and a notification on desktop should be displayed. i am doing this in windows form c#
the error is " NullReferenceException was unhandled
i have one button Notify in form1. i have tried this:
form1.cs
public Form1()
{
InitializeComponent();
this.Load += new EventHandler(Form1_Load);
webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser1_DocumentCompleted);
webBrowser1.ScriptErrorsSuppressed = true;
}
private void btnNotify_Click(object sender, EventArgs e)
{
webBrowser1.Document.InvokeScript("notifyMe");
}
private void Form1_Load(object sender, EventArgs e)
{
string CurrentDirectory = Directory.GetCurrentDirectory();
webBrowser1.Navigate(Path.Combine(CurrentDirectory,"HTMLPage1.html"));
}
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
webBrowser1.ObjectForScripting = this;
code for HTMLPage1.html :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifyMe() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Notification title', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: "Hey there! You've been notified!",
});
notification.onclick = function () {
window.open("http://stackoverflow.com/a/13328397/1269037");
};
}
}
</script>
</head>
<body>
</body>
</html>
even if i simply put alert("Hi") in notifyMe() function, nothing else. still it displays the same error.

I have tried your code.. you should use
document.attachEvent('DOMContentLoaded', function () {..
Instead of
document.addEventListener("..
That worked from here...read more about it here https://stackoverflow.com/a/1695383/4155741
you should also remove that comma at the end of .. body: "Hey there! You've been notified!", as it prevent the script from be compiled.

You have to put your html and scripts in the debug directory if they are not automatically placed. Thats where getcurrentdirectory() hits.

Understanding XSockets.NET pubsub: producing and consuming messages from JavaScript

Let's say I've the following sample code (JavaScript):
// Client A
var conn = new XSockets.WebSocket([wsUri]);
conn.on(XSockets.Events.open, function (clientInfo) {
conn.publish("some:channel", { text: "hello world" });
});
// Client B (subscriber)
var conn = new XSockets.WebSocket([wsUri]);
conn.on(XSockets.Events.open, function (clientInfo) {
conn.on("some:channel", function(message) {
// Subscription receives no message!
});
});
Client B never receives a message. Note that this is a sample code. You might think that I don't receive the message because Client B got connected after Client A sent the message, but in the actual code I'm publishing messages after both sockets are opened.
The server-side XSocketsController is working because I'm using it for server-sent notifications.
What am I doing wrong? Thank you in advance!

It looks like you have mixed up the pub/sub with the rpc, but I cant tell for sure if you do not post the server side code as well.
But what version are you using? 3.0.6 or 4.0?
Once I know the version and have the server side code I will edit this answer and add a working sample.
EDIT (added sample for 3.0.6):
Just wrote a very simple chat with pub/sub.
Controller
using XSockets.Core.Common.Socket.Event.Interface;
using XSockets.Core.XSocket;
using XSockets.Core.XSocket.Helpers;
namespace Demo
{
public class SampleController : XSocketController
{
/// <summary>
/// By overriding the onmessage method we get pub/sub
/// </summary>
/// <param name="textArgs"></param>
public override void OnMessage(ITextArgs textArgs)
{
//Will publish to all client that subscribes to the value of textArgs.#event
this.SendToAll(textArgs);
}
}
}
HTML/JavaScript
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/XSockets.latest.min.js"></script>
<script>
var conn;
$(function() {
conn = new XSockets.WebSocket('ws://127.0.0.1:4502/Sample');
conn.onopen = function(ci) {
console.log('open', ci);
conn.on('say', function(d) {
$('div').prepend($('<p>').text(d.text));
});
}
$('input').on('keydown', function(e) {
if (e.keyCode == 13) {
conn.publish('say', { text: $(this).val() });
$(this).val('');
}
});
});
</script>
</head>
<body>
<input type="text" placeholder="type and hit enter to send..."/>
<div></div>
</body>
</html>
Regards
Uffe