homepage Welcome to WebmasterWorld Guest from 54.226.18.74
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Support Javascript
chrisguk




msg:4547231
 8:38 pm on Feb 20, 2013 (gmt 0)

Hi,

I have been trying to implement this in my website but for some reason i cant seem to get it to work. I have provided the code and explanation below:


You can query the online status of your operators. Using this data enables you to build chat buttons with the operator pictures and displaying the availability of each team member.




userlikeCheckOperatorStatus(function(operators) {
console.log(operators);
});





The response object looks like this.





[
{
"lang": "en",
"operator_group": {
"chat_widget_set": [
{
"locale": "en_US",
"name": "Firefox 15 Windows",
"id": 14
},
{
"locale": "en_US",
"name": "Chrome 21 OSX",
"id": 15
},
{
"locale": "en_US",
"name": "Chrome 21 Windows",
"id": 16
},
{
"locale": "en_US",
"name": "Internet Explorer 9",
"id": 19
},
{
"locale": "en_US",
"name": "Internet Explorer 8",
"id": 20
},
{
"locale": "en_US",
"name": "Internet Explorer 7",
"id": 21
}
],
"name": "Testing David",
"id": 7
},
"name": "David Voswinkel",
"locale": "en_US",
"url_image": "s3-eu-west-1.amazonaws.com/devel-cdn-operators/ef2********************839d_80x80.jpg",
"user": {
"first_name": "David",
"last_name": "Voswinkel",
"email": "david@example.com"
},
"slots": {
"used": 1,
"free": 9,
"online": true
},
"id": 5
},
{
"lang": "en",
"operator_group": {
"chat_widget_set": [
{
"locale": "en_US",
"name": "Safari 6",
"id": 17
}
],
"name": "Testing Timoor",
"id": 8
},
"name": "Timoor Taufig",
"locale": "en_US",
"url_image": "s3-eu-west-1.amazonaws.com/devel-cdn-operators/e7f********************3_80x80.jpg",
"user": {
"first_name": "Timoor",
"last_name": "Taufig",
"email": "timoor@devcores.com"
},
"slots": {
"used": 0,
"free": 10,
"online": true
},
"id": 6
}
]



Using the result object you can iterate the operators and display corresponding elements in your DOM. Here is a little sample script. Make sure to use the userlikeReady() hook, which gets called when Userlike client is loaded.



<style>
.operator {
margin: 2px 20px 2px;
}
.chatbutton {
-webkit-border-radius: 10px;
border-radius: 10px;
width : 60px;
height : 60px;
}
.name {
padding: 2px;
}
</style>

<div class="container">
<div class="operator" id="operator_5">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
<div class="operator" id="operator_6">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
<div class="operator" id="operator_7">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
<div class="operator" id="operator_8">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
</div>

<script>
userlikeReady = function() {
userlikeCheckOperatorStatus(function(operators) {
var operator, _i, _len;
for (_i = 0, _len = operators.length; _i < _len; _i++) {
operator = operators[_i];
if (operator.slots.online) {
$("#operator_" + operator.id + " .chatbutton").data('id', operator.id).css({
"background-image": "url(//" + operator.url_image + ")",
}).click(function() {
userlikeRequestOperatorChat($(this).data('id'));
});
$("#operator_" + operator.id + " .name").text(operator.name + " is online")
} else {
$("#operator_" + operator.id + " .chatbutton").show().css({
"background-image": "url(//" + operator.url_image + ")",
})
$("#operator_" + operator.id + " .name").text(operator.name + " is offline")
}
}
});
};
</script>




They said I must use jquery include too which I have done. Any idea how I can get this to work?

[edited by: tedster at 6:43 am (utc) on Feb 21, 2013]
[edit reason] obscure cdn operators, email address [/edit]

 

Fotiman




msg:4547245
 9:27 pm on Feb 20, 2013 (gmt 0)

Each of your .css calls has a trailing comma that should be removed. Also, you have a few lines that are missing a closing ; at the end.

With that said, you haven't specified which order you're including your scripts. I would guess that they should be included in this order:
1. jQuery
2. Your script that defined userlikeReady
3. The userlike script

If it's not working, try using the Developer Tools / Console in Chrome to see if there is an error in the console log (Press F12 to open the developer tools).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved