Create a new item group instance

Question

I am starting to work in jQuery and asp.net. I created a chat application using SignalR, the design of which you can find here is a violin

How can I create a new instance of this chat design when the user was called by another user, when he / she was in the chat earlier with another user. Here I think I can convert it to User Control. but I don’t want to have the same Id that I use for another 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 so that they are unique in processing their own calls (as in FB chat).

Another problem that can occur after successfully creating a new instance is that they cannot be bound to jQuery functions and server code automatically. If so, one way or another, to solve this?

Before asking, I searched for alot (maybe I do not know the exact keyword to search).

EDIT . Many jQuery developers have suggested that I go with Knockout.js or Backbone.js or plain jQuery. But I think there is an easy way to achieve this using ASP.NET features like User Control or HTTP Handlers (or something else). About which I know nothing. So please suggest me which concept to choose? and please give a detailed explanation (if possible, with a simple example).

Responses to jquery are also welcome.

Single copy

Multiple instances

Answer 1

Use jQuery to populate or pop up a new chat instance, but change your ids with jquery. I would suggest that all your styles and identifiers be executed in accordance with the parent container so that you can easily grab the parent, duplicate it and change the identifiers or contents.

I would save an unfilled chat window with an identifier like updateme1 updateme2, etc., and then, as soon as I get it as a template, I will replace all the identifiers one by one with the corresponding content.

You are doing it right, and I don't consider it signalR, which you need to learn. SignalR will be able to help you pass certain parameters, such as “requirechatwindow = true or false,” based on whether that person is chatting with the current person, but you can always do this on the client by going through current open chat sessions. If the current chat session does not contain a chat between A and B, then open a new window with a new identifier and put the data with = A and data-to = B as an observer so that you know that this chat is between A and B, etc. d.

Hope this helps

UPDATED Fiddle and technique

Here is the fix for your script edited to show the creation and several identifiers. I had to configure some of your css to view fields in different places

Updated code with comments

The technique is simple:

• You create an html template on your page, it may be in a hidden region
• Then you use this to create a new element in the container and have a descriptor for entering this element, for example, in my code currentid is my descriptor, but I know the name of the container, so I will only use the pickup template filled in the actual container, avoid conflict with the template itself.
• Assign a new identifier, and then you can use any events or any special objects there.

• Then you can load new items from the new identifier or any other descriptor that you might have inside. For example, I just added a click, even on it, with confirmation 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, and if you go to the violin, I commented on all of them, but they are easy to understand. I use the selector used in the violin, but they can be further optimized using attributes such as data-handle-for or any other name you can give.

If you are considering this for SignalR, then in response to your new hub response, you can call up a chat window that can configure everything on the client. Any subsequent messages using this data descriptor can be updated in this new chat window.

For example, I assume that you create a new group called "chatwindow7" and "chatwindow8", which makes its round trip in your sending method and so on, so that only the user with this group is broadcast. Then each user can open several windows, but you only need to pick up chatwindow7 for messages with this data descriptor and update it, etc.

If you are using individual chat users, then you can also use the connection identifier, which means that all transmitted messages will have a sender and receiver connection identifier (via deafault protocol), and you only need to select a window with an id connection and update the message list or what something else.

Answer 2

The easiest way to do this is to replace the id attributes with class attributes.

 <div id="chat-outline"> ... </div> 

becomes

 <div class="chat-outline"> ... </div> 

And update your CSS accordingly.

 .chat-outline { background-color: gray; .... } 

Then use the text / template tag to make it available for jQuery.

 <script type="text/template" id="chat-template"> <div class="chat-outline"> ... </div> </script> 

Note that since the browser ignores script types that they do not recognize, this will be ignored by the html rendering engine, but since it has an identifier, it will be visible to jQuery and can be accessed this way:

 <div id="container"> </div> <script type="text/javascript"> $(function() { var chatTemplate = $('#chat-template').html(); $('#container').append(chatTemplate); // First instance $('#container').append(chatTemplate); // Second instance $('#container').append(chatTemplate); // Third instance }); </script> 

Of course, if your code needs the id attribute as a handle to the chat instance, you can create a function that creates an html-chat-instance with an identifier. In this case, I use underscore to provide random identifier, pattern, and iteration functions, but it's easy to use another library or write my own.

 <div id="container"> </div> <script type="text/template" id="chat-template"> <div class="chat-outline" id="<%= id %>"> ... </div> </script> <script type="text/javascript"> var createChatInstance(idstring) { return _.template($('#chat-template').html(), { id: idstring }); } $(function() { var chatTemplate = $('#chat-template').html(); // Create an array of 3 unique ids by which chat instances will be accessed. var chatIds = [_.uniqueId('chat-outline'), _.uniqueId('chat-outline'), _.uniqueId('chat-outline')]; _.each(chatIds, function(chatId) { $('#container').append(createChatInstance(chatId)); }); // You now have an array of 3 unique ids matching 3 divs. // You can access individual sub-divs via descendent class matching from the id // thus: $('#' + chatIds[n] + ' .chat-message').keyup(...code handling event...); }); </script> 

At this point, if you want to use the architecture further, you really need to consider exploring something like backbone.js.

Hope this helps.