Javascript: Dynamically created html elements referencing an instantiated object

Question

(For further background, this relates to the same piece of work as a previous question)

I'm creating a JavaScript based webchat system using jQuery to make life much easier. All the webchat JavaScript code is in an external js file, which is then referenced and instantiated by the html page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WebchatV3</title>
    <script type="text/javascript" src="/JavaScript/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="WebchatV3.js"></script>
    <link rel="stylesheet" href="WebchatV3.css" />
</head>

<body>
    <div id="WebchatSurround">
        <div style="float:right;width:300px;">
            <div id="MembersBox">
                Members
                <ul id="MembersList">
                </ul>
            </div>
            <div id="QuestionsBox">
                Questions
                <div id="QuestionsList">
                </div>
            </div>
        </div>

        <div style="margin-right:310px;" id="ChatBox">
            <div id="ChatData">
                <ul id="ChatDataList"></ul>
            </div>
            <div id="ChatInput">
                <div id="ChatInputCharRemainText">Characters remaining <span id="ChatInputCharRemain"></span></div>
                <input type="text" maxlength="1000" id="ChatInputTextbox" />
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var webchat;
        webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false);
    </script>
</body>
</html>

In the JavaScript there is code to dynamically create a list of active chat members from a JSON query. This code creates a series of html DIVs and then injects this html into the 'QuestionsList' DIV present in the html.

Now here's the question :)

Within each question are elements with JavaScript onclick events that allows actions to be taken against the question shown. How can I create the onclick code without hard coding the reference to 'webchat' - is there an elegent and acceptable way?

My initial thoughts are to pass in the instance name of the 'webchat' instance when it's created, so it can then be used inside the JavaScript when creating dynamic JavaScript...

Example of code with hard coded reference to instantited 'webchat':

<div id="QuestionsBox">
    Questions
    <div id="QuestionsList">
        <div class="Question">
            <div class="QuestionInnerControls">
                <img src="images/arrow_up.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,1);" >
                <img src="images/arrow_down.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,-1);">
                <img src="images/delete.png" alt="" class="ControlIcon" onclick="webchat.Questions.Delete(1);">
            </div>
            <div class="QuestionInnerText">
                1) <b>Peter Bridger</b>: This is the question text
                <br style="clear: right;">
            </div>
        </div>
    </div>
</div>

Will the instance name ever change? What's wrong with 'hardcoding' the webchat instance name if you know it will always be instantiated with the handle 'webchat'? — KyleFarris
– KyleFarris, Commented Apr 22, 2009 at 15:29
I can't see it changing - I surpose I'm asking this from a good practise perspective. — Peter Bridger
– Peter Bridger, Commented Apr 22, 2009 at 15:37

Jim · Accepted Answer · 2009-04-23 03:52:12Z

1

While I think the live idea will most likely work for you, my initial thought was to create a template div in the initial stages of the code, and then use the clone(true) method to create dynamic copies of the template and its methods. Then within the javascript "loop" each copy could be customised as needed before being appended into the DOM.

http://docs.jquery.com/Manipulation/clone#bool

answered Apr 23, 2009 at 3:52

Jim

6366 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

runxc1 Bret Ferrier · Accepted Answer · 2009-04-22 19:35:35Z

0

Your description is a bit in depth and I hope that I am following it correctly but it seems to me that you are trying to attach a click event(s) to all of the items as well as all of the items that will be created in the future. Rather than specifying the onclick event when creating the you should use the new jQuery feature that came out in jQuery 1.3+ that allows you to specify an event for every element that matches the Selector... even future elements like the ones you will be adding via json.

 $("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});

http://docs.jquery.com/Events/live

answered Apr 22, 2009 at 19:35

runxc1 Bret Ferrier

8,25314 gold badges67 silver badges102 bronze badges

Comments

Peter Bridger · Accepted Answer · 2009-04-24 08:49:45Z

0

Thanks for your input everyone, I've decided to pass in the instance name of the Webchat when instancing it:

        var webchat;
            webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false , 'webchat' );

Then inside the JavaScript I'm referencing the passed in referenced when dynamically building html with JavaScript in it:

onclick="' + this.instanceName + '.popupMemberDetailsShow(' + this.Members.collection[i].memberId + ');

answered Apr 24, 2009 at 8:49

Peter Bridger

9,33316 gold badges61 silver badges89 bronze badges

Collectives™ on Stack Overflow

Javascript: Dynamically created html elements referencing an instantiated object

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related