SignalR and .NET - asp.net

I'm basically trying to dynamically create a list element and update it across multiple clients. I'm using SignalR library of .NET. Following is my code.
$(function () {
// Reference the auto-generated proxy for the hub.
var listSync = $.connection.myHub1;
console.log("List Sync ");
// Create a function that the hub can call back to display messages and toggle.
listSync.client.addNewItemToPage = function (name, url) {
console.log("List Sync 3");
var play_list = document.getElementById('playlist');
var empty = document.getElementById('empty');
if (empty != null) {
empty.remove();
}
var pli = document.createElement("li");
var ptag = document.createElement('a');
var icon = document.createElement('i');
icon.setAttribute('class', "fa fa-toggle-right");
ptag.setAttribute('href', "#");
ptag.setAttribute('class', "play_track");
ptag.appendChild(icon);
ptag.innerHTML += name;
ptag.type = url;
pli.appendChild(ptag);
play_list.appendChild(pli);
//handler to play songs by playlist
var favLinks = document.getElementsByClassName('play_track');
for (var j = 0; j < favLinks.length; j++) {
var favLink = favLinks[j];
favLink.onclick = function (e) {
e.preventDefault();
xurl = this.type;
myFunc();
}
}
};
// Start the connection.
$.connection.hub.start().done(function () {
window.listFunc = function listFunc(name, url) {
console.log("List Sync 1");
// Call the Send method on the hub.
listSync.server.update_playlist(name, url);
console.log("List Sync 2");
}
});
});
The problem is it doesn't go into the function listSync.client.addNewItemToPage. Can someone please tell me why?

Related

How to get source and target of edge after any change on cell connect?

I'm programming a web application that use workflow. I used jgraph(Mxgraph) for designing workflow.
I will save workflow parts in database (activities, notifications, transitions).
I need to get source and target of transitions. So how should I catch any changes on transitions in client?
I used before from these three events but don't work always. For example when I change connection target.
Editor.graph.connectionHandler.addListener(mxEvent.CONNECT, function (sender, evt) {
console.log('connect');
});
Editor.graph.connectionHandler.addListener(mxEvent.START, function (sender, evt) {
console.log('start');
});
Editor.graph.connectionHandler.addListener(mxEvent.RESET, function (sender, evt) {
console.log('reset');
});
I found it.
We can use mxEvent.Change event for getting any change on graph model.
editor.graph.getModel().addListener(mxEvent.CHANGE, function (sender, evt) {
editor.graph.validateGraph();
var xml = getEditorXml(Editor);
$("#BpmnXml").val(xml);
//console.log(getCells_ByType("Start"));
// /console.log(getCells_ByType("Task"));
let connectors = getCells_ByType("Connector");
if (connectors != null && connectors.length > 0) {
connectors.forEach(element => {
var source = Editor.graph.getModel().getTerminal(element, true);
var target = Editor.graph.getModel().getTerminal(element, false);
setData(element, { FromActivityClientId: source.getId(), ToActivityClientId: target.getId() });
});
}
});
function getCells_ByType(TypeCell) { // dar report estafede mishavad
var AllCells = Editor.graph.getChildCells(Editor.graph.getDefaultParent(), true, true);
var result = $.grep(AllCells, function (s) { return s.getValue().localName == TypeCell; });
if (result.length != 0)
return result;
else
return null;
}

How to get Session obj value on client side from server js?

Hi as i mensioned above how to get the session variable from server to client js using meteor below placed the code verify and give me a sugession.In the bellow code how to get the ltest on client JS.
validation.Js:
Meteor.methods({
signupUser: function signupUser(rawData){
console.log("rawData :: "+rawData);
Mesosphere.signupForm.validate(rawData, function(errors, exmp){
if(!errors){
console.log("No Errors Found");
var username = '';
var password = '';
console.log(rawData.length + ">>>>>>>");
for(var i = 0;i < rawData.length ; i++)
{
var obj = rawData[i];
if(i == 0)
{
username = rawData[i].value;
console.log(rawData[i].value + ">>>>>>>" + obj.value);
}
else(i == 1)
{
password = rawData[i].value;
}
}
var obj = Meteor.call('ltest', username,password);
console.log("**********************"+obj);
//Session.set('q', obj);
//Do what you want with the validated data.
}else{
_(errors).each( function( value, key ) {
console.log("signupUser >> "+key+": "+value.message);
});
}
});
}
});
First of all, You need to use Future for this to return data from async call in method.
Second, Looks like you are trying to do code re-use with calling another meteor method.
IMO, you should not call the meteor method from another meteor method, which will create the another callback for getting results, which is added overhead and also make code unreadable. You should basically create the common function and try calling it from both Meteor method.
Following is listing, which should work
// define this future at top of file
Future = Npm.require("fibers/future")
Meteor.methods({
signupUser: function signupUser(rawData){
console.log("rawData :: "+rawData);
future = new Future()
Mesosphere.signupForm.validate(rawData, function(errors, exmp){
if(!errors){
console.log("No Errors Found");
var username = '';
var password = '';
console.log(rawData.length + ">>>>>>>");
for(var i = 0;i < rawData.length ; i++)
{
var obj = rawData[i];
if(i == 0)
{
username = rawData[i].value;
console.log(rawData[i].value + ">>>>>>>" + obj.value);
}
else(i == 1)
{
password = rawData[i].value;
}
}
//var obj = Meteor.call('ltest', username,password);
// replace above call to common method as described above
obj = common_ltest(username, password);
console.log("**********************"+obj);
future['return'](obj);
}else{
_(errors).each( function( value, key ) {
console.log("signupUser >> "+key+": "+value.message);
});
// assuming some error here, return null to client
future['return'](null);
}
});
// **note that, this important**
return future.wait()
}
});
Hope this helps

Older asynchronous messages overwriting newer ones

We are developing a document collaboration tool in SignalR where multiple users can update one single WYSIWYG form.
We are struggling getting the app to work using the KeyUp method to send the changes back to the server. This causes the system to overwrite what the user wrote after his first key stroke when it sends the message back.
Is there anyway to work around this problem?
For the moment I tried to set up a 2 seconds timeout but this delays all updates not only the "writer" page.
public class ChatHub : Hub
{
public ChatHub()
{
}
public void Send(int id,string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(id,message); //id is for the document id where to update the content
}
}
and the client:
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
//console.log("Declare a proxy to reference the hub.");
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (id, message) {
var encodedValue = $('<div />').text(id).html();
// Add the message to the page.
if (encodedValue == $('#hdnDocId').val()) {
$('#DiaplayMsg').text(message);
tinyMCE.activeEditor.setContent("");
tinyMCE.get('txtContent').execCommand('insertHTML', false, message); //!!!
}
};
// Start the connection.
$.connection.hub.start().done(function (e) {
//console.log("Start the connection.");
if ($('#hdnDocId').val() != '') {
tinyMCE.activeEditor.onKeyUp.add(function (ed, e) {
var elelist = $(tinyMCE.activeEditor.getBody()).text();
var content = tinyMCE.get('txtContent').getContent();
function Chat() {
var content = tinyMCE.get('txtContent').getContent();
chat.server.send($('#hdnDocId').val(), content); //send a push to server
}
typewatch(Chat, 2000);
});
}
});
});
var typewatch = function () {
var timer = 0;
return function (Chat, ms) {
clearTimeout(timer);
timer = setTimeout(Chat, ms);
}
} ();
</script>
Hello, here is an update of the client KeyUp code. It seems to be working but I would like your opinion. I've used a global variable to store the timeout, see below:
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
//console.log("Declare a proxy to reference the hub.");
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (id, message) {
var encodedValue = $('<div />').text(id).html();
var currenttime = new Date().getTime() / 1000 - 2
if (typeof window.istyping == 'undefined') {
window.istyping = 0;
}
if (encodedValue == $('#hdnDocId').val() && window.istyping == 0 && window.istyping < currenttime) {
function Update() {
$('#DiaplayMsg').text(message);
tinyMCE.activeEditor.setContent("");
tinyMCE.get('txtContent').execCommand('insertHTML', false, message); //!!!
// tinyMCE.get('txtContent').setContent(message);
window.istyping = 0
}
Update();
}
};
// Start the connection.
$.connection.hub.start().done(function (e) {
//console.log("Start the connection.");
if ($('#hdnDocId').val() != '') {
tinyMCE.activeEditor.onKeyUp.add(function (ed, e) {
var elelist = $(tinyMCE.activeEditor.getBody()).text();
var content = tinyMCE.get('txtContent').getContent();
function Chat() {
//alert("Call");
var content = tinyMCE.get('txtContent').getContent();
chat.server.send($('#hdnDocId').val(), content);
window.istyping = new Date().getTime() / 1000;
}
Chat();
});
}
});
});
var typewatch = function () {
var timer = 0;
return function (Chat, ms) {
clearTimeout(timer);
timer = setTimeout(Chat, ms);
}
} ();
Thanks,
Roberto.
Is there anyway to work around this problem?
Yes, by not sending the entire document to the server, but document elements like paragraphs, table cells, and so on. You can synchronize these after the user has stopped typing for a period, or when focus is lost for example.
Otherwise add some incrementing counter to the messages, so older return values don't overwrite newer ones arriving earlier.
But you're basically asking us to solve a non-trivial problem regarding collaborated document editing. What have you tried?
"This causes the system to overwrite what the user wrote"
that's because this code isn't making any effort to merge changes. it is just blindly overwriting whatever is there.
tinyMCE.activeEditor.setContent("");
tinyMCE.get('txtContent').execCommand('insertHTML', false, message);
as #CodeCaster hinted, you need to be more precise in the messages you send - pass specific changes back and forth rather re-sending the entire document - so that changes can be carefully merged on the receiving side

Pulling Docs List from Collection

I there a way to display specific collection files and URL in a spreadsheet?
I have already tried running a basic DocList Search script but I need something to be more direct. I would need the script to display File Name, Collections It belongs to, and URL.
The end goal of this project is to create a Google site that allows users to click a Image link launching a simple "Copy Function" this copy function will create a copy of that document for the user in there individual drive. However we will be doing this on a mass scale of over 1,000 documents. So pulling the information and having it more organized would be alot easier then copying the URL section out of each document and then pasting it into the scripts functions.
here is a script I wrote quite a while ago that does (a bit more than ) what you want... it shows the IDs but you can easily change it to show the urls instead.
// G. Variables
var sh = SpreadsheetApp.getActiveSheet();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var lastrow = ss.getLastRow();
//
//
//
function onOpen() {
var menuEntries = [ {name: "generic doclist", functionName: "gendoclisttest"},
{name: "categorized list(spreadsheet/docs)", functionName: "doclistcat"},
{name: "Search DocList", functionName: "searchUI"},
];
ss.addMenu("Utilities", menuEntries);//
}
//
// Build a simple UI to enter search item and show results + activate result's row
function searchUI() {
var app = UiApp.createApplication().setHeight(130).setWidth(400);
app.setTitle("Search by name or folder name");
var panel = app.createVerticalPanel();
var txtBox = app.createTextBox().setFocus(true).setWidth("180");
var label=app.createLabel(" Eléments à rechercher :")
var label=app.createLabel(" Item to search for :")
panel.add(label);
txtBox.setId("item").setName("item");
var label0=app.createLabel("Row").setWidth("40");
var label1=app.createLabel("Doc Name").setWidth("180");
var label2=app.createLabel("Doc ID").setWidth("180");
var hpanel = app.createHorizontalPanel();
hpanel.add(label0).add(label1).add(label2);
//
var txt0=app.createTextBox().setId("lab0").setName("0").setWidth("40");
var txt1=app.createTextBox().setId("lab1").setName("txt1").setWidth("180");
var txt2=app.createTextBox().setId("lab2").setName("txt2").setWidth("180");
var hpanel2 = app.createHorizontalPanel();
hpanel2.add(txt0).add(txt1).add(txt2);
var hidden = app.createHidden().setName("hidden").setId("hidden");
var subbtn = app.createButton("next ?").setId("next").setWidth("250");
panel.add(txtBox);
panel.add(subbtn);
panel.add(hidden);
panel.add(hpanel);
panel.add(hpanel2);
var keyHandler = app.createServerHandler("click");
txtBox.addKeyUpHandler(keyHandler)
keyHandler.addCallbackElement(panel);
//
var submitHandler = app.createServerHandler("next");
subbtn.addClickHandler(submitHandler);
submitHandler.addCallbackElement(panel);
//
app.add(panel);
ss.show(app);
}
//
function click(e){
var row=ss.getActiveRange().getRowIndex();
var app = UiApp.getActiveApplication();
var txtBox = app.getElementById("item");
var subbtn = app.getElementById("next").setText("next ?")
var txt0=app.getElementById("lab0").setText('--');
var txt1=app.getElementById("lab1").setText('no match').setStyleAttribute("background", "white");// default value to start with
var txt2=app.getElementById("lab2").setText('');
var item=e.parameter.item.toLowerCase(); // item to search for
var hidden=app.getElementById("hidden")
var data = sh.getRange(2,1,lastrow,8).getValues();// get the 8 columns of data
for(nn=0;nn<data.length;++nn){ ;// iterate trough
if(data[nn].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){;// if a match is found in one of the 3 fields, break the loop and show results
var datarow=data[nn]
for(cc=0;cc<datarow.length;++cc){
if(datarow[cc].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){break}
}
var idx=cc
txt0.setText(nn+2);
txt1.setText(data[nn][idx]).setStyleAttribute("background", "cyan");
txt2.setText(data[nn][idx+1]);
sh.getRange(nn+2,idx+1).activate();
subbtn.setText("found '"+item+"' in row "+Number(nn+2)+", next ?");
hidden.setValue(nn.toString())
break
}
}
return app ;// update UI
}
function next(e){
var row=ss.getActiveRange().getRowIndex();
var app = UiApp.getActiveApplication();
var txtBox = app.getElementById("item");
var subbtn = app.getElementById("next").setText("no other match")
var hidden=app.getElementById("hidden");
var start=Number(e.parameter.hidden)+1;//returns the last search index stored in the UI
var item=e.parameter.item.toLowerCase(); // item to search for
var txt0=app.getElementById("lab0");
var txt1=app.getElementById("lab1").setStyleAttribute("background", "yellow");
var txt2=app.getElementById("lab2");
var data = sh.getRange(2,1,lastrow,8).getValues();// get the 3 columns of data
for(nn=start;nn<data.length;++nn){ ;// iterate trough
if(data[nn].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){;// if a match is found in one of the 3 fields, break the loop and show results
var datarow=data[nn]
for(cc=0;cc<datarow.length;++cc){
if(datarow[cc].toString().toLowerCase().match(item.toString())==item.toString()&&item!=''){break}
}
var idx=cc
txt0.setText(nn+2);
txt1.setText(data[nn][idx]).setStyleAttribute("background", "cyan");
txt2.setText(data[nn][idx+1]);
sh.getRange(nn+2,idx+1).activate();
subbtn.setText("found '"+item+"' in row "+Number(nn+2)+", next ?");
hidden.setValue(nn.toString())
break
}
}
return app ;// update UI
}
//
function gendoclisttest(){
sh.getRange(1,1).setValue('.');// usefull to allow for 'clear' if page is empty
sh.getRange(1,1,ss.getLastRow(),ss.getLastColumn()).clear().setWrap(false).setBorder(false,false,false,false,false,false);// clears whole sheet
var doclist=new Array();
var folders=DocsList.getFolders()
for(ff=0;ff<folders.length;++ff){
doclist=folders[ff].getFiles(0,2000)
var names = new Array();
for (nn=0;nn<doclist.length;++nn){
names.push([doclist[nn].getName(),doclist[nn].getId()]);
}
if (names.length>0){
names.sort();
var row=ss.getLastRow()+1;
sh.getRange(row,1,1,3).setValues([["Folders","Generic Doc Names","ID"]]).setBorder(false,true,true,true,true,true).setBackgroundColor("#dddddd");
sh.getRange(row+1,1).setValue(folders[ff].getName())
sh.getRange(row+1,2,names.length,2).setValues(names);
}
}
doclist=DocsList.getRootFolder().getFiles(0,2000)
var names = new Array();
for (nn=0;nn<doclist.length;++nn){
names.push([doclist[nn].getName(),doclist[nn].getId()]);
}
if (names.length>0){
names.sort();
var row=ss.getLastRow()+1;
sh.getRange(row,1,1,3).setValues([["Root","Generic Doc Names","ID"]]).setBorder(false,true,true,true,true,true).setBackgroundColor("#dddddd");
sh.getRange(row+1,2,names.length,2).setValues(names);
}
}
//
function doclistcat(){
var doclist=new Array();
var folders=DocsList.getFolders()
var zz=0;var nn=0
for(ff=0;ff<folders.length;++ff){
doclist=folders[ff].getFilesByType("spreadsheet",0,2000);
var names = new Array();
for (nn=0;nn<doclist.length;++nn){
names.push([doclist[nn].getName(),doclist[nn].getId()]);
}
if(names.length>0){
names.sort();
zz=zz+nn
var row=zz-nn+1
sh.getRange(row,4,1,3).setValues([["Folders","Spreadsheet Names","ID"]]).setBorder(true,true,true,true,true,true).setBackgroundColor("#dddddd");
sh.getRange(row+1,4).setValue(folders[ff].getName()).setB
sh.getRange(row+1,5,names.length,2).setValues(names);
}
}
doclist=DocsList.getRootFolder().getFilesByType("spreadsheet",0,2000);
var names = new Array();
for (nn=0;nn<doclist.length;++nn){
names.push([doclist[nn].getName(),doclist[nn].getId()]);
}
if(names.length>0){
names.sort();
zz=zz+nn
var row=zz-nn+1
sh.getRange(row,4,1,3).setValues([["Root","Spreadsheet Names","ID"]]).setBorder(true,true,true,true,true,true).setBackgroundColor("#dddddd");
sh.getRange(row+1,5,names.length,2).setValues(names);
}
//
var zz=0;var nn=0
for(ff=0;ff<folders.length;++ff){
doclist=folders[ff].getFilesByType("document",0,2000);
var names = new Array();
for (nn=0;nn<doclist.length;++nn){
names.push([doclist[nn].getName(),doclist[nn].getId()]);
}
if(names.length>0){
names.sort();
zz=zz+nn
var row=zz-nn+1
sh.getRange(row,7,1,3).setValues([["Folders","Text Document Names","ID"]]).setBorder(true,true,true,true,true,true).setBackgroundColor("#dddddd");
sh.getRange(row+1,7).setValue(folders[ff].getName()).setB
sh.getRange(row+1,8,names.length,2).setValues(names);
}
}
doclist=DocsList.getRootFolder().getFilesByType("document",0,2000);
var names = new Array();
for (nn=0;nn<doclist.length;++nn){
names.push([doclist[nn].getName(),doclist[nn].getId()]);
}
if(names.length>0){
names.sort();
zz=zz+nn
var row=zz-nn+1
sh.getRange(row,7,1,3).setValues([["Root","document Names","ID"]]).setBorder(true,true,true,true,true,true).setBackgroundColor("#dddddd");
sh.getRange(row+1,8,names.length,2).setValues(names);
}
}
//
//eof

wordpress rendering invisible

I have a page on a wordpress site located here: http://www.3cdesignsolutions.com/?page_id=331
It's not rendering anything visible but I know the code is there because I'm pasting it into the editor and I can see it in the admin area. Ideas?
<div id="album-6"><br></div><script type="mce-text/javascript"><!--
/** SCRIPT TO ENSURE window.onload WORKS FOR ALL BROWSERS ****************/
function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
// do your thing
loadAjaxPage("touch-ups","../../ajax.get-photo-touch-ups.php");
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
}
(function() {
/*#cc_on
if (document.body) {
try {
document.createElement('div').doScroll('left');
return init();
} catch(e) {}
}
/*#if (false) #*/
if (/loaded|complete/.test(document.readyState)) return init();
/*#end #*/
if (!init.done) setTimeout(arguments.callee, 50);
})();
_prevOnload = window.onload;
window.onload = function() {
if (typeof _prevOnload === 'function') _prevOnload();
init();
};
/** AJAX FOR RFQ FORM SUBMISSION *****************************************/
var ajax = new sack();
function whenLoading(element){
var e = document.getElementById(element);
e.innerHTML = "Sending Data...";
}
function whenLoaded(element){
var e = document.getElementById(element);
e.innerHTML = "Data Sent...";
}
function whenInteractive(element){
var e = document.getElementById(element);
e.innerHTML = "Getting data...";
}
function whenCompleted(){
/* do nothing...*/
}
function loadAjaxPage(el,file){
ajax.requestFile = file;
ajax.element = el;
var onLoading = whenLoading(ajax.element);
var onLoaded = whenLoaded(ajax.element);
var onInteractive = whenInteractive(ajax.element);
ajax.onCompletion = whenCompleted;
ajax.runAJAX();
}
// --></script><br> <!-- LOAD RSS FEED INTO DIV -->

Resources