Trying to create a dynamic dashboard with drag/drop and resize functionality. I want to add ASP server controls to 'grid-stack-item-content' and update them through Ajax after every 10 seconds.
https://jsfiddle.net/kLeu7y0h/
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bigslide.js/0.12.0/bigSlide.min.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
margin: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div>
<a class="btn btn-default" id="save-grid" href="#">Save</a>
<a class="btn btn-default" id="load-grid" href="#">Load</a>
<a class="btn btn-default" id="clear-grid" href="#">Clear</a>
<input type="hidden" id="saved-data">
</div>
<br/>
<div class="grid-stack">
</div>
<div class="grid-stack-item" id="moni1">
<div class="grid-stack-item-content">
<p>ASP Panel A</p>
</div>
</div>
<div class="grid-stack-item" id="moni2">
<div class="grid-stack-item-content">
<p>ASP Panel B</p>
</div>
</div>
<div class="grid-stack-item" id="moni3">
<div class="grid-stack-item-content">
<p>ASP Panel C</p>
</div>
</div>
<div class="grid-stack-item" id="moni4">
<div class="grid-stack-item-content">
<p>ASP Panel D</p>
</div>
</div>
</div>
<script>
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
new function () {
this.serializedData = [
{ x: 0, y: 0, width: 2, height: 2, id: moni1 },
{ x: 0, y: 1, width: 2, height: 2, id: moni2 },
{ x: 0, y: 2, width: 2, height: 2, id: moni3 },
{ x: 0, y: 3, width: 2, height: 2, id: moni4 },
];
var grid = $('.grid-stack').data('gridstack');
this.loadGrid = function () {
grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
_.each(items, function (node) {
grid.addWidget(node.id,
node.x, node.y, node.width, node.height);
}, this);
return false;
}.bind(this);
this.saveGrid = function () {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
x: node.x,
y: node.y,
width: node.width,
height: node.height,
id: node.id
};
}, this);
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.clearGrid = function () {
grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
this.loadGrid();
};
});
</script>
</body>
</html>
I need to load elements from JSON retrieved from database to form a layout. But every time I click on 'Load' button, maximum call stack size error displayed.
Related
HTML
<script type="text/javascript" src="/static/opt/require.js" data-main="/static/opt/demo"></script>
<script type="text/javascript" src="/static/opt/demo.js"></script>
<script src="/static/opt/monaco-editor/package/min/vs/loader.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px">
<div class="col-md-4 col-sm-4 col-xs-4" style="padding: 0;display: inline-flex;margin-left: 175px">
<div id="input_editor" ></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="margin-left:165px;display: inline-flex">
<div id="show_editor" ></div>
</div>
</div>
demo.js
require.config({paths:{'vs':'/static/opt/monaco-editor/package/min/vs'}});
$(document).ready(function () {
require(['vs/editor/editor.main'], function(){
var input_editor = monaco.editor.create(document.getElementById("input_editor"), {
value: "aaa"
})
})
require(['vs/editor/editor.main'], function(){
var show_editor = monaco.editor.create(document.getElementById("show_editor"), {
value: "bbbbb"
})
})
})
Is there anything wrong in my code? How should I use monaco editor in HTML?
And is there any api to color somelines red or green in the Monaca Editor?
Thanks
I have this HTML code:
</head>
<body>
<div id="app">
<div
class="demo"
#click="attachRed = !attachRed"
:class="{red: attachRed, blue: !attachRed}"
>
</div>
<div
class="demo">
</div>
<div
class="demo">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
attachRed: false,
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
blue: !this.attachRed,
}
}
}
})
</script>
</body>
</html>
How do I indent the return in the computed section properly to look like this in Vim?
</head>
<body>
<div id="app">
<div
class="demo"
#click="attachRed = !attachRed"
:class="{red: attachRed, blue: !attachRed}"
>
</div>
<div
class="demo">
</div>
<div
class="demo">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
attachRed: false,
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
blue: !this.attachRed,
}
}
}
})
</script>
</body>
</html>
What do I need to change in my Vim or WebStorm settings so that when I select everything in visual mode and press = it indents properly?
Making my first steps in vue. I am crashing in importing a .json file. This job concernes a small shop. Goal of this paragraph is to enter 4 products in the shop. The productfiles are imported with an Axios hook. But the Vue Dev Tool errors an undefined (see picture). When loading the website the div with v-else is automatically loaded.
The products.json files is nested in the same folder as index.html. http://localhost:8000/products.json shows me the .json file.
Here you 'll find all the code for this small shop. Even with a copy/paste of this code mine is not working. I also made it smaller with the relevant code:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct"> <!--not working-->
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">
All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>
Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">
☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<!--skipped this part-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: []
},
order: []
},
products: [],
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
console.log(productsArray);
console.log(this.products);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
..
}
},
beforeCreate: function () { //#B
if (APP_LOG_LIFECYCLE_EVENTS) { //#B
..
},
created: function () {
axios.get('./products.json')
.then((response) => {
this.products = response.data.products;
console.log(this.products);
});
},
beforeMount: function () {
..
},
mounted: function () {
..
},
beforeUpdate: function () {
..
},
updated: function () {
..
},
beforeDestroyed: function () {
..
},
destroyed: function () {
..
}
});
</script>
</body>
</html>
I tried out the same code here and it's working fine, i had did axios call to this json file :
https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct">
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">Pet Depot Checkout</div>
<div class="panel-body">
<div class="form-group">
<div class="col-md-12">
<h4>
<strong>Enter Your Information</strong>
</h4>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<strong>First Name:</strong>
<input v-model.trim="order.firstName" class="form-control" />
</div>
<div class="col-md-6">
<strong>Last Name:</strong>
<input v-model.trim="order.lastName" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>Address:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.address" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>City:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.city" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<strong>State:</strong>
<select v-model="order.state" class="form-control">
<option disabled value="">State</option>
<option v-for="(state, key) in states" v-bind:value="state">
{{key}}
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<strong>Zip / Postal Code:</strong>
<input v-model.number="order.zip" class="form-control" type="number" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 boxes">
<input type="checkbox" id="gift" value="true" v-bind:true-value="order.sendGift" v-bind:false-value="order.dontSendGift" v-model="order.gift">
<label for="gift">Ship As Gift?</label>
</div>
</div>
<!-- end of form-group -->
<div class="form-group">
<div class="col-md-6 boxes">
<input type="radio" id="home" v-bind:value="order.home" v-model="order.method">
<label for="home">Home</label>
<input type="radio" id="business" v-bind:value="order.business" v-model="order.method">
<label for="business">Business</label>
</div>
</div>
<!-- end of form-group-->
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-primary submit" v-on:click="submitForm">Place Order</button>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of form-group-->
<div class="col-md-12 verify">
<pre>
First Name: {{order.firstName}}
Last Name: {{order.lastName}}
Address: {{order.address}}
City: {{order.city}}
Zip: {{order.zip}}
State: {{order.state}}
Method: {{order.method}}
Gift: {{order.gift}}
</pre>
</div>
<!-- end of col-md-12 verify-->
</div>
<!--end of panel-body-->
</div>
<!--end of panel panel-info-->
</div>
<!--end of col-md-10 col-md-offset-1-->
</div>
<!--end of row-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: {
AL: 'Alabama',
AK: 'Alaska',
AR: 'Arizona',
CA: 'California',
NV: 'Nevada'
},
order: {
firstName: '',
lastName: '',
address: '',
city: '',
zip: '',
state: '',
method: 'Home Address',
business: 'Business Address',
home: 'Home Address',
gift: '',
sendGift: 'Send As A Gift',
dontSendGift: 'Do Not Send As A Gift'
},
products: {},
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
if (!parseInt(price)) {
return "";
} //#C
if (price > 99999) { //#D
var priceString = (price / 100).toFixed(2); //#E
var priceArray = priceString.split("").reverse(); //#F
var index = 3; //#F
while (priceArray.length > index + 3) { //#F
priceArray.splice(index + 3, 0, ","); //#F
index += 4; //#F
} //#F
return "$" + priceArray.reverse().join(""); //#G
} else {
return "$" + (price / 100).toFixed(2); //#H
}
}
},
created: function() { //#C
axios.get('https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json')
.then((response) => {
this.products = response.data.products;
// console.log(this.products);
});
}
});
</script>
</body>
</html>
I'm new to nodejs-expressjs-socket.io. I'm trying to implement multiple chatrooms/channels in one running instance of socket.io.
Server:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
app.set('port', process.env.PORT || 3000);
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){
res.sendfile(__dirname + '/public/client.html');
});
io.sockets.on('connection', function(socket){
socket.on('auth-user', function(ud){
});
socket.on('join-room', function(ud){
console.log('User ' + ud.usr + ' joins in channel ' + ud.cid);
socket.join(ud.cid);
io.sockets.to(ud.cid).emit('update-ui',{usr:'Server', msgtype:'notification', msg: 'You have connected to chat'});
});
socket.on('leave-room', function(ud){
});
socket.on('send-message', function(ud){
console.log('User ' + ud.usr + ' sends a message to the channel ' + ud.cid);
io.sockets.to(ud.cid).emit('update-ui', {usr:ud.usr, msgtype:'message', msg:ud.msg});
console.log(io.sockets.adapter.rooms);
});
socket.on('disconnect', function(){
});
});
server.listen(app.get('port'), function(){
console.log('Application is listening to PORT ' + app.get('port'));
});
Client
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script src="/socket.io/socket.io.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="/javascripts/chat.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css"></link>
<link rel="stylesheet" href="/stylesheets/chat.css"></link>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
$( '#cht-1' ).initChatbox({cid:1, chl:'Channel A'},'User1');
$( '#cht-2' ).initChatbox({cid:2, chl:'Channel B'},'User2');
$( '#cht-3' ).initChatbox({cid:3, chl:'Channel C'},'User3');
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<div id="cht-1" style="border: 1px solid red; border-radius: 7px 7px 0px 0px; height: 500px; width: 300px;">
</div>
</div>
<div id="tabs-2">
<div id="cht-2" style="border: 1px solid green; border-radius: 7px 7px 0px 0px; height: 500px; width: 300px;">
</div>
</div>
<div id="tabs-3">
<div id="cht-3" style="border: 1px solid blue; border-radius: 7px 7px 0px 0px; height: 500px; width: 300px;">
</div>
</div>
</div>
<script type="text/html" id="chatui">
<div id="chid-{cid}" class="chid">{cid}</div>
<div id="chcontainer-{cid}" class="chcontainer">
<table id="tblchatmsgs-{cid}" class="tblchatmsgs">
</table>
</div>
<div id="chatinputs-{cid}" class="chatinputs">
<input type="text" id="msgs-{cid}" class="msgs">
<button id="btn-{cid}" class="btnSend">SEND</button>
</div>
</script>
<script type="text/html" id="gchatnotify">
<tr id="trnotify-{cid}">
<td>
<div class="notifier">
<p id="notifymsg-{cid}" class="message">{gchat-message}</p>
</div>
</td>
</tr>
</script>
<script type="text/html" id="chatms">
<tr id="trms-{cid}">
<td>
<div id="usericon-{cid}" class="usericon">
<img id="uavatar-{cid}" class="uavatar" alt="userimage" height="46px" width="46px" src="{avatar}">
</div>
<div id="chat-message-{cid}" class="chat-message">
<label id="uname">{username}</label>
<p id="imsg" class="message">{message}</p>
<label id="timestamp-{cid}" class="timestamp">{timesent}</label>
</div>
</td>
</tr>
</script>
</body>
</html>
Chat.js
$.fn.initChatbox = function(channel, user)
{
/* UI Templates */
var chatui, chatnotifier, chatmsg;
var btnsender, msginput, msgbox;
chatui = $('#chatui').html().replace(/{cid}/ig, channel.cid);
notifier = $('#gchatnotify').html().replace(/{cid}/ig, channel.cid);
chatmsg = $('#chatms').html().replace(/{cid}/ig, channel.cid);
/* Socket.io */
var socket;
btnsender = '#btn-' + channel.cid;
msginput = '#msgs-' + channel.cid;
msgbox = '#tblchatmsgs-' + channel.cid;
socket = io.connect('http://localhost:3000');
this.on('click', btnsender, function(){
socket.emit('send-message',{usr:user, cid:channel.cid, msg:$(msginput).val()});
});
socket.on('connect', function(){
socket.emit('join-room',{usr: user, cid: channel.cid});
});
socket.on('update-ui', function(sd){
console.log(sd);
if(sd.msgtype == 'notification'){
$(msgbox).append(notifier.replace(/{gchat-message}/ig,sd.msg));
} else {
$(msgbox).append(chatmsg.replace(/{message}/ig,sd.msg));
}
});
this.append(chatui);
};
The problem with this is I continue to receive the message I typed from a channel/room to the other channels I created. And also I checked out the output of the rooms I already joined.created. See image attached for the rooms. Please help. Or kindly explain if I missed out some parts. Thanks in advance.
I need to use multiple stream instances with jPlayer using this player. By default it didn't so I tried to make several changes but still can't get it work. First player works but it plays all the other streams together and the second player can't be triggered at all. Any idea? My code is as follows:
SCRIPT
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
var stream = {
title: "ABC Jazz",
mp3: "http://listen.radionomy.com/abc-jazz"
},
ready = false;
jQuery("#jquery_jplayer_11").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
var stream2 = {
title: "Second",
mp3: "http://stream.x-x-x-x.com:1234/stream"
},
ready = false;
jQuery("#jquery_jplayer_12").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream2);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream2).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
//]]>
</script>
HTML
<div id="jquery_jplayer_11" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jquery_jplayer_12" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li">play</li>
<li class="pp-li">pause</li>
<li class="mu-li">mute</li>
<li class="mu-li">unmute</li>
<li class="vo-li">max volume</li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>
<div id="jp_container_2" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li">play</li>
<li class="pp-li">pause</li>
<li class="mu-li">mute</li>
<li class="mu-li">unmute</li>
<li class="vo-li">max volume</li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>
set
cssSelectorAncestor: "#jp_container_2"
cssSelectorAncestor: "#jp_container_1"
like this for all players and after the playlist options (that means at the bottom of the code )
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
put like this for all-players then it will works , if not means put all the codes here then I will correct the errors