We Keep Coding

How would I make user wait to join until meeting organizer joins first

I am implementing a video conference room in which a user can create a video conference and invite other users.
Now I want to make sure that the user can't join the conference until the meeting organizer opens the room.
I have the following code but it is not working. The meeting organizer can open the room but when users click on "join conference" it doesn't join.
// https://github.com/muaz-khan/RTCMultiConnection
var rmc = new RTCMultiConnection();
rmc.userid = "<?php echo $user->fname . ' ' . $user->lname . ' (' . $user->username . ')' ; ?>";
rmc.session = {
video: true,
audio: true,
data: true
};
var room_status = 0; //room closed
$('#open-room').click(function () {
// http://www.rtcmulticonnection.org/docs/open/
room_status = 1; //room opened
rmc.open();
rmc.streams.mute({video : true});
document.getElementById("on-off-video").style.color= 'red';
});
$('#join-room').click(function () {
if(room_status == 1) {
// http://www.rtcmulticonnection.org/docs/connect/
rmc.connect();
rmc.streams.mute({video: true});
document.getElementById("on-off-video").style.color= 'red';
}
console.log("Waiting for meeting organizer");
});
// display a notification box
window.addEventListener('beforeunload', function () {
return 'Do you want to leave?';
}, false);
// leave here
window.addEventListener('unload', function () {
rmc.leave();
}, false);
rmc.onMediaCaptured = function () {
$('#share-screen').removeAttr('disabled');
$('#open-room').attr('disabled', 'disabled');
$('#join-room').attr('disabled', 'disabled');
};
//chat
rmc.onopen = function (event) {
//alert('Text chat has been opened between you and ' + event.userid);
document.getElementById('input-text-chat').disabled = false;
room_status = 1;
};
//end of chat
$('#disconnect').click(function () {
room_status = 0; //room closed
rmc.leave();
setTimeout("location.href = '../';",2000);
});
//to know the stream type
rmc.onstream = function (e) {
if (e.type == 'local') {
// alert("the stream is local");
}
if (e.type == 'remote') {
// alert("the stream is remote");
}
if (e.isVideo) {
var uibox = document.createElement("div");
uibox.appendChild(document.createTextNode(e.userid));
uibox.className = "userid";
uibox.id = "uibox-" + e.userid.replace(/ |\(|\)/g, '');
document.getElementById('video-container').appendChild(e.mediaElement);
document.getElementById('video-container').appendChild(uibox);
}
else if (e.isAudio) {
document.getElementById('video-container').appendChild(e.mediaElement);
}
else if (e.isScreen) {
$('#cotools-panel iframe').hide();
$('#cotools-panel video').remove();
document.getElementById('cotools-panel').appendChild(e.mediaElement);
}
};
//removes the div containing the userid of the user who is leaving
rmc.onleave = function (e) {
$('#' + "uibox-" + e.userid.replace(/ |\(|\)/g, '')).remove();
};

It seems you have 3 problems here.
1) First, I think you can't use only one RTCMultiConnection object to open and join a room. You have to create 2 separate objects. But, your code is not supposed to run in the same window for opening and joining the room. So It's not a problem if you run it once in a window to open the room and one in another window to join it.
In this case you have a more important problem. Your variable room_status is set to 1 when you open the room in one window. But in the other window, room_status is still equals to 0 so you don't call the code inside the if() in $('#join-room').click function.
It's not a big deal, for now, let's delete the if statement to be sure your code is executed (and read my point 3 for your original goal).
2) I look to the simple example given on https://github.com/muaz-khan/RTCMultiConnection : https://jsfiddle.net/c46de0L8/ and it seems you should use join and not connect. And above all, you should use a Channel ID and a Room Id to be able to connect 2 users.
So I change your code a little and it seems to work well :
var CHANNEL_ID = "MYCHANNEL-" + window.RMCDefaultChannel;
var ROOM_ID = "MYROOM";
var SESSION = {
video: true,
audio: true,
data: true
};
var USERID = "<?php echo $user->fname . ' ' . $user->lname . ' (' . $user->username . ')' ; ?>";
var rmc = undefined;
var room_status = 0; //room closed
$('#open-room').click(function () {
// http://www.rtcmulticonnection.org/docs/open/
room_status = 1; //room opened
rmc = new RTCMultiConnection(CHANNEL_ID);
rmc.userid = USERID;
rmc.session = SESSION;
rmc.open({
dontTransmit: true,
sessionid: ROOM_ID
});
rmc.streams.mute({video : true});
document.getElementById("on-off-video").style.color= 'red';
});
$('#join-room').click(function () {
//if(room_status == 1) {
// http://www.rtcmulticonnection.org/docs/connect/
rmc = new RTCMultiConnection(CHANNEL_ID);
rmc.join({
sessionid: ROOM_ID,
userid: USERID,
session: SESSION
});
rmc.streams.mute({video: true});
document.getElementById("on-off-video").style.color= 'red';
//}
console.log("Waiting for meeting organizer");
});
The rest of the code remains unchanged.
I put a rough working code in a JSFiddle: https://jsfiddle.net/sebdoncker/fjtkvnjq/2/
3) Now you still have the problem : How to be sure that the room is opened before to be able to join it. I think you can use the ROOM ID for this. When one user open a new room you should generate a ROOM ID. Now, you have to send this ROOM ID to your joiner user (by server communication or another way depending of your application architecture). And Since the joiner user doesn't have the ROOM ID, you can disable the join button.
It's just a lead, this depends of your overall application architecture.

Pull working PHP file (with scripts) into div using JavaScript without iframes

Working within system constraints, I needed a way to put working code from a local .php or .html into a target div without additional libraries, jfiddle, iframes, etc. (jquery was fine)
Here are my failed attempts.
First part of file
This is some page!
<script>$("#fruit").click(function(){Expand01("fruit.php"); return false;});</script>
A pretty good page...
<script>$("#orange").click(function(){Expand01("orange.php"); return false;});</script>
I like this page
<script>$("#tomato").click(function(){Expand01("tomato.php"); return false;});</script>
Later in file (after Expand01 function declared)
<div id="thisdiv"></div>
Attempt 1
<script> function Expand01(targetUrl){
document.getElementById('thisdiv').style.display = "block";
document.getElementById('thisdiv').innerHTML = targetUrl;
document.getElementById('thisdiv').append = '<div id="thatdiv"></div>';
} </script>
Attempt 2
<script> function Expand01(targetUrl){
var myTargetUrl = new XMLHttpRequest();
document.getElementById('thisdiv').style.display = "block";
myTargetUrl.open("GET", targetUrl, true);
myTargetUrl.setRequestHeader("Content-Type","text/plain");
myTargetUrl.send("");
document.getElementById('thisdiv').innerHTML = myTargetUrl.responseText;
document.getElementById('thisdiv').append = '<div id="thatdiv"></div>';
} </script>
Attempt 3
<script> function Expand01(targetUrl){
document.getElementById('thisdiv').innerHTML = $.get(targetURL);
} </script>
Attempt 4
<script> function Expand01(targetUrl){
var myFile = getHTTPObject();
myFile.onreadystatechange = function() {
if(request.readyState == 4) {
if(myFile.status == 200 || request.status == 304) {
var targetDiv = document.getElementById('thisdiv');
targetDiv.innerHTML = myFile.responseText;
} else {
alert("Failure");
}
}
}
myFile.open("GET", targetUrl, true);
myFile.send(null);
} </script>

This is the method I use when doing this for ajax applications. It also allows for the usage of $_SESSION[] variables as well as any Javascript or jQuery located in the php file you are pulling into your container.
jQuery:
$.post('pageloader.php', {url: 'path/to/file.php'}, function(data){
var o = $.parseJSON(data);
if(o.status == 1){
$('#yourContainer').html(o.markup);
} else {
alert(o.message);
}
});
PHP: (pageloader.php)
$url = $_POST['url'];
$response = array();
ob_start();
include("markup/" . $url); // Replace or remove '"markup/" . ' depending on file locations
$response['markup'] = ob_get_clean();
if($response['markup']){
$response['status'] = 1;
} else {
$response['status'] = 0;
$response['message'] = 'There was an issue loading the page.';
}
echo json_encode($response);
Hope this helps!

How to pass two data to Controller using Script?

I have script like this:
delete_event: function() {
if (this.id != 0) {
var url = base_url + "event/delete_event_data/" + this.id + this.event_id;
location.href = url;
}
else {
alert('Please Select Event');
}
},
I want to pass id and event id to following controller:
public function delete_event_data($id,$event_id) {
$result = $this->event_model->delete_event_data($id);
if ($result == TRUE) {
$this->session->set_flashdata('success-msg', ' Event Data Successfully Deleted. ');
redirect('event');
} else {
$this->session->set_flashdata('failure-msg', ' ERROR! Something went Wrong. ');
redirect('event');
}
}
I have done above but it doesn't work..
Please guide me..

how can I load tinymce 4 in modal window?

I have a form in cakephp.. I am opening it in a modal window whih extends jquery.
Now I have loaded tinymce in my form but it is not loading in modal.
tinymce.js is loading. even its all settings are also loading properly.
Can anyone suggest What can be problem ?
Thanks

I have this problem too..
I'm using bootstrap modal box and use the plugin for open multi-modal
I'm use this code Helper :
http://bakery.cakephp.org/articles/jwilcox09/2012/01/04/adding_a_tinymce_image_browser_to_cakephp_2
In the controller i use this code :
public function add() {
if ($this->RequestHandler->isAjax()) {
$this->layout = 'modal';
}
if ($this->request->is('post')) {
$this->Post->create();
if ($this->Post->saveAll($this->request->data, array('deep' => true))) {
$this->Session->setFlash(__('The post has been saved.'));
return $this->redirect(array('action' => 'index'));
} else {
$this->Session->setFlash(__('The post could not be saved. Please, try again.'));
}
}
$users = $this->Post->User->find('list');
$this->set(compact('users'));
}
In the index view i use this code
از این قسمت میتوانید یک پست تازه وارد سایت کنید Js->link(__('پست تازه'), array('action' => 'add'), array(
'update' => '#ajax-modal',
'htmlAttributes' => array('id' => 'EzafKardan', 'class'=>'modalBarGozar btn btn-primary btn-lg',
'data-toggle'=>'modal')
)); ?>
$(function(){
$.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
'<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
'<div class="progress progress-striped active">' +
'<div class="progress-bar" style="width: 100%;"></div>' +
'</div>' +
'</div>';
$.fn.modalmanager.defaults.resize = true;
$('[data-source]').each(function(){
var $this = $(this),
$source = $($this.data('source'));
var text = [];
$source.each(function(){
var $s = $(this);
if ($s.attr('type') === 'text/javascript'){
text.push($s.html().replace(/(\n)*/, ''));
} else {
text.push($s.clone().wrap('<div>').parent().html());
}
});
$this.text(text.join('\n\n').replace(/\t/g, ' '));
});
}); </script>
var $modal = $('#ajaxKhabari');
$('.modalBarGozar').on('click', function(){
var link = $(this).attr("href"); $('body').modalmanager('loading');
setTimeout(function(){
$modal.load(link, '', function(){
$modal.modal();
}); }, 1000); });
in the modal layout i add the link for tinymce.js and also add to defoult layout and other layout
I'm try everything but did not work...

jquery and data-attr not working in ie8

This concerns a table where I show 5 rows at a time.
The follow code is working 100 percent perfect in firefox. But in ie8,
only the top row can be clicked for the editdiv to show. Whereas, in firefox
I can click on any of the five rows and the editdiv loads as expected.
Line in php file that calls the function:
echo "<td><a id=\"editjq\" href=\"#\" vid='".$vid."' t1='".$db->hscadd($t1)."' page='".$page."' flag='1')\"> [edit ] </a></td>";
The function:
$(document).ready(function() {
$('a#editjq').click(function() {
var petid = $(this).attr('vid');
var t1 = $(this).attr('t1');
var page = $(this).attr('page');
var flag = $(this).attr('flag');
$("#petdiv").hide();
$.post("edit_lookup.php", {
petid : petid,
t1 : t1,
page : page
}, function(data){
if (data.length>0){
$("#editdiv").html(data);
}
});
$(this).unbind();
return false;
});
});

Are you producing five rows which each have an anchor with the same id attribute? If so, that's your problem. It is syntactically illegal to have more than one element with the same id. Instead of id="editjq" use class="editjq" and $('a.editjq').click(...).

You could put this piece of jquery plugin code in your page script (just make sure that it comes after the jquery.min.js script tag);
(function($){
var store = {};
$.fn.extend({
collection : function(action, name, value) {
var $this = this;
var generate = function(){
return "COLLECTION" + parseInt((Math.random() * 100000), 16);
}
var item_id;
var methods = {
put: function(){
item_id = $this.attr("id");
if(store[item_id]){
store[item_id][name] = value;
} else {
while(store[item_id] && $(item_id).length > 0){
item_id = generate();
}
$this.attr("id", item_id);
store[item_id] = {};
store[item_id][name] = value;
}
return $this;
},
get: function(){
item_id = $this.attr("id");
if(store[item_id] && store[item_id][name]){
return store[item_id][name];
}
else{
return null;
}
},
remove: function(){
item_id = $this.attr("id");
if(store[item_id]){
store[item_id][name] = null;
}
return $this;
}
}
if(methods[action]){
return methods[action]();
} else{
return alert(store.text.length);
}
return $this;
}
});
})(jQuery);
It can be used as follows:
store a data value
$(*selector*).collection("put", *DataName*, *DataValue*);
retreive a data value
var referencing_variable = $(*selector*).collection("get", *DataName*);
delete a data value
$(*selector*).collection("remove", *DataName*);
This is a cross browser solution. Though i have only tested it with Jquery 1.5.1