Using PrivatePub with Angular JS - ruby-on-rails

I'm trying to use PrivatePub within my Angular app. I've a chat and messages are managed by AngularJS, my API behind is running with Rails, in my controller I use the helper to Publish to the channel, my problem is on the client side with the Subscribe. Here is what I try to do:
chat.controller("MessageController", ['$scope','Message','Project', function($scope,Message,Project) {
//Fetch messages
Message.query(function(data) {
$scope.messages = data;
});
PrivatePub.subscribe(Project.channel, function(data, channel) {
$scope.messages.push(data.message);
});
}]);
I tried to use $apply and $watch around my PrivatePub subscribe, no way to update my scope. My PrivatePub function should be outside Angular but the data it receives should be added to the $scope.I don't what other solution I could try.

Ok I found the problem, I was not using $apply correctly, I was basically doing:
$timeout(function () {
$scope.$apply(function($scope) {
PrivatePub.subscribe("/mychannel", function(data, channel) {
$scope.addMessage(data.chat_message);
});
});
}, 0);
Instead of:
$timeout(function () {
PrivatePub.subscribe("/mychannel", function(data, channel) {
$scope.$apply(function($scope) {
$scope.addMessage(data.chat_message);
});
});
}, 0);
The changes I want to notify to Angular is not the function itself but what happened inside. Just a bad use.

Related

How to run http call as background in ionic Framework?

I am using ionic Framework. i have multiple HTTP service which is working fine. Now problem is that whenever i get response of any http call. i can't proceed further.
Can we run HTTP Service as a background process. So my application continues works without waiting for result.
here is my code
articleService.getArticles().then(function() {
},function(err){
});
and sercvice code
$http({
url: "http://myservice.com",
data: { user_id: 1 },
method: 'POST',
withCredentials: true,
}).success(function (data) {
deferred.resolve(data);
}).error(function (err) {
deferred.resolve(0);
})
return deferred.promise;
}
Any idea? I need a solution in ionic framework which will work both for ios and andriod?
Thanks
try to use html5 web workers what u need to do is multithreading and because that javascript is single threading environment you have to web workers
https://html.spec.whatwg.org/multipage/workers.html
Look at this plunker this what you need and it is all angularjs so will work with ionic.
var app = angular.module('angularjs-starter', []);
app.config(function($routeProvider) {
$routeProvider.
when('/', {controller:'StartCtrl', templateUrl:'start.html'}).
when('/main', {controller:'MainCtrl', templateUrl:'main.html'}).
otherwise({redirectTo:'/'});
});
app.controller('MainCtrl', function($scope, Poller) {
$scope.name = 'World';
$scope.data = Poller.data;
});
app.controller('StartCtrl',function(){});
app.run(function(Poller) {});
app.factory('Poller', function($http, $timeout) {
var data = { response: {}, calls: 0 };
var poller = function() {
$http.get('data.json').then(function(r) {
data.response = r.data;
data.calls++;
$timeout(poller, 1000);
});
};
poller();
return {
data: data
};
});
Maybe i misunderstand your question but i think your service code is wrong.
Try something like this
myApp.factory('articleService', function($http) {
return {
getArticles: function getArticles() {
return $http({...}); // $http returns a promise, so you dont need your own defer.promise
}
}
});
//usage
//first: send or get data async
articleService.getArticles().then(function(resp){
alert('called second');
...
});
// second: do something else, this will not wait for your response
alert('called first');

Youtube API, gapi is not defined?

I'm trying to do a Youtube API and I feel like I got everything working except this gapi and res thing? It says gapi is not defined. How can I make this work?
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
$(function() {
$("form").on("submit", function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 3,
order: "viewCount",
publishedAfter: "2015-01-01T00:00:00Z"
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("tpl/item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
function init() {
gapi.client.setApiKey("AIzaSyD646m4ZfK5yKBZj9p95LohN-PTUnRHBRY");
gapi.client.load("youtube", "v3", function() {
});
}
gapi is an object created by the Google API javascript library that manages all interactions (i.e. does all the heavy lifting of the requests) for you. If the object is not defined, you may not have included the library itself in your page. Somewhere in your HTML, you'll need a script tag that loads the library located at:
https://apis.google.com/js/client.js
Note that, in loading the library with a script tag, you should also pass it a callback ... this is a function that will be automatically called as soon as the library is done loading. So in your case, your init() method is that callback, and so your script tag would look like this:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
The browser will get the library, load it, then run init() when the library is done loading, and all will be ready for your form to execute when triggered.

SignalR- send data to a specific client

I want to send data to a specific client. to do that I am trying with the following;
public Task GetWaitingOrdersCount(string id, string clientId)
{
DateTime today = Util.getCurrentDateTime();
var data = 10
return Clients.Client(Context.ConnectionId).loadOrders(data);
//return data;
}
In the above code, I want to send 'data' to the 'clientId' passed to this method.
BUT I m having an error in this line
return Clients.Client(Context.ConnectionId).loadOrders(data);
And the error is
'System.Threading.Tasks.Task<object>' does not contain a definition for 'loadOrders'
the client side code
con.loadOrders = function (data) {
loadOrders(data);
};
function loadOrders(data) {
$('#totalOrders').html(data);
}
Any help about the error???
EDIT:
This is my full client code..
<script type="text/javascript">
var con;
$(document).ready(function () {
con = $.connection.messagingHub;
$.connection.hub.start(function () {
var myClientId = $.connection.hub.id;
con.getWaitingOrdersCount('<%:ViewBag.rid%>',myClientId).done(function (data) {
console.log(data);
});
});
con.client.loadOrders = function (data) {
loadOrders(data);
};
});
function loadOrders(data) {
$('#totalOrders').html(data);
I just tried out your code (slightly modified) and it works fine for me. What version of SignalR are you using? Judging by your server code I'd say 1.0Alpha1+ but your client code looks more like 0.5.3, that is unless your con object is assigned to $.connection.yourhub.client;
If you update to SignalR 1.0Alpha2 and change your client code to be:
var con = $.connection.myCon;// This is arbitrary and would change based on your naming
con.client.loadOrders = function (data) {
loadOrders(data);
};
function loadOrders(data) {
$('#totalOrders').html(data);
}
That being said I believe your issue has to do with the version of SignalR you are using, server side that is: since you're receiving a task oriented error. Another piece of information that might be beneficial would be to know how GetWaitingOrdersCount is being called. Aka is it being invoked from the client directly via: con.server.getWaitingOrdersCount or is it being called from within the hub.
Hope this info helps!

jQuery UI- How to prevent autocomplete menu from temporarily disappearing between keystrokes?

I'm using jQuery UI autocomplete with data from a remote datasource. My use case is really similar to the example here:
http://jqueryui.com/demos/autocomplete/#remote
The only difference is that I set my delay to 0. In between the keystrokes, the menu disappears for about 1/10th of a second ~100milli seconds prior to the updated autocomplete list being displayed.
Is there anyway I can prevent the menu from temporarily disappearing between keystrokes? A good use case is google's search, where between keystrokes, the suggestion box does not temporarily disappear.
IMO, it is not a good practice to set a delay of zero when using a remote datasource. It will send more requests than needed and surcharge the server with no benefit.
Anyway, I think you can achieve what you want by defining the source option as a callback yourself.
First a bit of explanaton. I suppose you are using the remote feature passing an url as the source for the plugin. The plugin actually wraps this into a callback implemented this way:
// in case the option "source" is a string
url = this.options.source;
this.source = function(request, response) {
if (self.xhr) {
self.xhr.abort();
}
self.xhr = $.ajax({
url: url,
data: request,
dataType: "json",
autocompleteRequest: ++requestIndex,
success: function(data, status) {
if (this.autocompleteRequest === requestIndex) {
response(data);
}
},
error: function() {
if (this.autocompleteRequest === requestIndex) {
response([]);
}
}
});
};
As you can see, if there is already an ajax request going on, it abords it. This happenning in your case as a request, as fast as your server can be, takes some time and your delay is zero.
if (self.xhr) {
self.xhr.abort();
}
This will actually execute the error callback of the aborted request that will execute itself the response callback with an empty dataset. If you look at the response callback, it closes the menu if data is empty:
_response: function(content) {
if (!this.options.disabled && content && content.length) {
...
} else {
this.close();
}
You can actually define your own source callback to make your ajax request yourself and change the default behavior by not aborting any pending request. Something like:
$('#autocomplete').autocomplete({
source: function(request, response) {
$.ajax({
url: url,
data: request,
dataType: "json",
success: function(data, status) {
// display menu with received dataset
response(data);
},
error: function() {
// close the menu on error by executing the response
// callback with an empty dataset
response([]);
}
});
}
});

jquery ui autocomplete without filter

I need to show user all autocomplete choices, no matter what text he already wrote in the field? Maybe i need some other plugin?
$('#addressSearch').autocomplete("search", "");
That doesn't work.
There are two scenarios:
You're using a local data source. This is easy to accomplish in that case:
var src = ['JavaScript', 'C++', 'C#', 'Java', 'COBOL'];
$("#auto").autocomplete({
source: function (request, response) {
response(src);
}
});
You're using a remote data source.
$("#auto").autocomplete({
source: function (request, response) {
// Make AJAX call, but don't filter the results on the server.
$.get("/foo", function (results) {
response(results);
});
}
});
Either way you need to pass a function to the source argument and avoid filtering the results.
Here's an example with a local data source: http://jsfiddle.net/andrewwhitaker/e9t5Y/
You can set the minLength option to 0, then it should work.

Resources