Question

I am beginner in jQuery and asp.net. I created a simple chat application using SignalR, the design of which you can find here fiddle

How can I create a new instance of that chat design whenever a user has been call by other user while he/she were in chat from before with other user. Here I think I can convert it to User Control. but I dont want to have same Id‘s which I am using for other chat design and those generated instances should work differently, I mean if userA calls userB and at the same time userC calls userB then they must be created in such a way that they must be unique in handling there own calls (just like FB Chat).

The another issue may arise after successfully creating a new instance is that they might not be get attached to the jQuery functions and server side code automatically. If so, anyway to solve this too?

Before asking here I searched alot (maybe I dont know the exact keyword to search for).

EDIT: Many jQuery developers suggested me to go with Knockout.js or Backbone.js or simple jQuery. But I think there is some simple way to achieve this using ASP.NET functions like User Control or HTTP Handlers (or something else). About which I dont know anything. So, please suggest me which concept to opt for ? and please give detailed explanation(if possible with simple example).

jquery related answers are also welcome.

Single Instance

Multiple Instances

Answer 1

Use JQuery to populate or popup new instance of chat but change your ids using jquery. I would suggest have all your styling and ids done according to a parent container so you can easily grap the parent, duplicate it and change the IDs or content.

I would keep a non filled chat window with ID’s like “updateme1” updateme2 etc and then once i get it as a template i will replace all ids one by one with relevant content.

You are doing it right and i dont think its signalR that you need to look into. SignalR would be able to help you pass on specific parameters like “requirechatwindow=true or false” based on if this person is in chat with current person but you can always do this on client as well by going through current open chat sessions. If current chat session does not contain a chat between A and B then open new window with new ID and put a data-from= A and data-to=B as a palceholder so you know this chat is between A and B etc

Hope this helps

UPDATED Fiddle and technique

Here is the fix on Your fiddle edited to show creation and multiple ids I had to adjust some of your css to view the boxes in different location

Updated the code with some comments

The technique is simple:

1. You create a html template on your page might be in a hidden region
2. You then use that to create new element in a container and have a handle to pickup this element for example in my code the currentid is my handle but i know the container name so i will only pickup template populated within the actual container to avoid conflict with template itself.
3. Assign a new id and then you can use any events or any speacial objects on there.

4. You can then pickup new elements from the new id or any other handle you might have inside them. For example i have just added a click even on it with confirm to hide it.

   $('#doubleme').click(function(){    
       var currentid = $("#chattemplate .chat-outline").attr('data-tid');     
       var newid = parseInt(currentid,10) + 1;
       $("#chatcontainers").append($("#chattemplate").html());    
       $("#chatcontainers .chat-outline").attr('id',"id"+newid); 
       $("#chattemplate .chat-outline").attr('data-tid',newid);  
   });
   

You only need these five lines of code actually and if you go to fiddle i have commented all of them but they are easy to understand. I am using selectors used in fiddle but these can be further optimised with attributes like data-handle-for or whatever name you can give.

If you are considering this for SignalR then within your hub response of new request you can call the intiate chat window which can setup everything on the client. Any subsequent messages using that data handle can be updated within this new chat window.

For example i assume you create a new group called “chatwindow7” and “chatwindow8” which makes its round trip in your send method and so on get broadcast to only user with this group. Then each user might have multiple windows open but you only need to pickup chatwindow7 for messages with that data handle and update it and so on.

If you are using one-to-one chat users only then you can use connection id as well which means all messages broadcasted will have both sender and reciever (by deafault) connection ID and you only need to pickup the window with connection id handle and update its list of messages or whatever.