Develop Reference

Audio-Video Call webRTC and Ratchet (PHP WebSocket)

I have my own chat system based on "My friends" and i have a list with online friends and i want when i click on a friend conversation to add the call functions but i don't know how to manage'it to have'it work. Can u help me pls? the conversation is with me (a) and user b (daniel) something like facebook calls for example, but here i have "localhost/chat/chat.php?room=Daniel "to be created when i click user b and all the call functions to work. (The code is written in PHP + Jquery and for audio call & video call i use (https://github.com/amirsanni/Video-Call-App) check the comm.js and comm.html files i guess from here i can mangete to have'it work..
Javascript Code:
$(document).on('click', '.contact', function(){
$('.contact').removeClass('active');
$(this).addClass('active');
var username = $(this).attr('data-tousername');
var to_user_id = $(this).data('touserid');
showUserChat(to_user_id);
history.pushState( null,null, '?chat='+username); //This is changing the url to ?room=username, but it dsn't do the trick..
});
function showUserChat(to_user_id){
$.ajax({
url:"pagini/chat/chat_action.php",
method:"POST",
data:{to_user_id:to_user_id, action:'show_chat'},
dataType: "json",
success:function(response){
$('#userSection').html(response.userSection);
$('#aboutusr').html(response.aboutme);
$('#conversation').html(response.conversation);
$('#unread_'+to_user_id).html('');
}
});
}

Adding search criteria to the url, but can't go back

I'm trying to get the parameters of my search criteria into the url so that it's possible to copy and paste the specific search.
Currently I have this:
// Search criteria in the url
var ready = function(e){
$("#filterrific_filter").click(function(){
$.get($("#filterrific_filter").attr("action"), $("#filterrific_filter").serialize(), null, "script");
history.pushState(null, document.title, $("#filterrific_filter").attr("action") + "?" + $("#filterrific_filter").serialize());
e.preventDefault();
});
$(window).bind("popstate", function() {
$.getScript(location.href);
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
The problem is: when a result is clicked on, and the users tries to go back to the search page again, they don't get back, they stay on the same page. The url changes though.
Here is a video to display the problem
And here is a link to the webpage, if you would like to test it yourself
Thanks in advance!

Try removing this whole section:
$(window).bind("popstate", function() {
$.getScript(location.href);
});
Since your apartments#show action (a guess, assuming you're using a RESTful design in your Rails backend) is a round-trip request (not AJAX, like your filter), and your query string URL will run the filterrific scripts correctly on a reload, you might as well let the back button work the default way.
Disclaimer: this is a shot in the dark without more context. If it doesn't work for you, and you provide more context, I'll happily revisit.

How load dynamic and well separeted part of views with callback

I have an architectural problem that I can't find an angular-oriented solution. My application has several objects that interact through modals.
For Example:
I can create a new color from functionality of colors management. My creation works through a modal, and in this case the modal will refresh the list of colors behind it.
But when I create a new product I also can create color through this SAME modal. In this case, the modal will refresh my product screen.
With the url and using ajax I can append this modals in html and work with any modal that my system provides in anywhere.
I want to give a different callback for each kind of caller, if possible through the digest cycle of the angular caller scope. But I want to keep my modal independent of the caller.
Note: I don't know the modals that my functionality will need on load, i just know it when the user interacts with the links.
Could I do something like this with angular ?
Here some example:
$(function() {
$('.js-content-link').click(function() {
//here normally is a ajax request with parameters
var url = $(this).data('file');
$.get(url, function(data) {
$('#main-content').html(data);
$('.js-modal-link').click(onClickModalLink);
});
});
var loadModal = function(html) {
$('#modal-content').html(html);
$('.js-modal-link').click(onClickModalLink);
};
var onClickModalLink = function() {
//here normally is a ajax request with parameters
$.get($(this).data('file'), loadModal);
};
})
Plnkr link:
https://plnkr.co/edit/rJdfGC?p=preview

onclick() function is not working with Jquery?

So yesterday, I added some Jquery code and it worked perfectly. Today I was adding some more for a new part of my website and it did not work. When I tried the code I added yesterday, that stopped working as well. The first thing I do is create a function to get anything from the url that I need. The first 2 inputs are for following users. The first input should send the id variable to the url bar and is retrieved in the php file called follow.php. The second input should do the same thing. Finally the last function is for liking peoples posts. It sends the type of like(like or unlike) to the php file named like.php and is retrieved there. And should post the retrieved data into a div called likes. However, none of which is occurring when the buttons are pressed. Even when I just send an alert to make sure the on click is working, nothing happens either.
Here is my code:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$('input#sub').on('click', function(){
var id = getParameterByName('id');
$.get('follow.php' , {id: id}, function(data){
location.reload();
});
});
$('input#sub1').on('click', function(){
var id = getParameterByName('id');
$.get('unfollow.php' , {id: id}, function(data){
location.reload();
});
});
function doAction(postid , type){
alert("Works");
$.post('like.php' , {postid: postid type: type} , function(data){
$('div#likes').text(data);
});
}

Let's try to sum things up. I'm gonna change most of your code simply because you don't need all of that, otherwise jQuery wouldn't be helpful at all.
Assuming your caller is this anchor:
<img id="like" src="Social/down.png"/>
After this you can manipulate the clicked object getting its attributes easily through:
$('.idsfromdb').click(function(){
var id = $(this).prop('id');
var another_id_obj = $('newselector').prop('id');
// more logic, ajax,...
});
You can attach this kind of functions to every click event and then manipulate the object, call a php file, and so on... I hope I helped you somehow with this.

open google developer tools > network and see if request is made and if it has all data you want as request and if there is anything in response.
if there is request with all parameters, you have problem on server side,
if parameters not same that you are trying to send with ajax, than prevent buttons default action, you must prevent it every time when using ajax especially when button submits form.
$('input#sub').on('click', function(event){
event.preventDefault();
//your ajax
}

Getting to know when URL is shared

I would like to know when user shares my site on Facebook or Tweets about it after clicking on buttons provided by me - is there ay way to do so using Javascript?

You can just use a service like AddThis or ShareThis?
They both have reporting tools to see how many times a page has been shared.

You can use FB.Event.subscribe for facebook.
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
// you can make an ajax request to save this "Like", it's up to you.
}
);