Automatically call a click handler to load a jQuery dialog box on page load

Question

I've got a page, on the page there is a button wrapped in an anchor tag:

<a href="javascript:void(0)" data-bind="click: AddNewThread, text: 'Add New Discussion'" class="btn new"></a>

This calls a function labeled as AddNewThread, now this function opens up a dialog Box using jQuery, and in the dialog box there is a text field that you enter text to, and this text is then pasted on the page using ajax.

The problem: I want to remove the click event entirely; I want to have it on page load, it will load the text box, and the functionality is remaining the same, But I just don't know how to go about this.

Here's the code for the AddNewThread function:

function DiscussionViewModel() {
    var self = this;
    self.New = ko.mapping.fromJS(newDiscussion);
    self.Threads = ko.mapping.fromJS(threads, mapping);
    self.AddNewThread = function () {
        $("#dvAddDiscussion").dialog('open');
        ko.mapping.fromJS(newDiscussion, self.New);

        if (CKEDITOR.instances["txtDiscussioinDescription"] != undefined) {
            CKEDITOR.instances["txtDiscussioinDescription"].setData('');
        }
    };
    self.AddReply = function (thread) {
        $("#txtDiscussioinDescription").val('');
        self.LastDiscussionId(thread.New.ParentId());
        self.New.Title('');
        self.New.DiscussionId(thread.New.DiscussionId());
        self.New.Type(thread.New.Type());
        self.New.TypeId(thread.New.TypeId());
        self.New.Description('');
        self.New.ParentId(thread.New.ParentId());
        self.New.UserId(thread.New.UserId());
        self.New.User(thread.New.User());
        $("#dvAddDiscussion").dialog('open');

    };
    self.LastDiscussionId = ko.observable();
    self.SubmitReply = function (form) {
        var jForm = $(form);
        $("#dvAddDiscussion").dialog('close');
        var request = jForm.serialize();
        var discussionId = $("#DiscussionID").val();
        var parentId = $("#ParentId").val();
$.post(addDiscussionUrl, request, function (response) {
            if (response) {
                if ((discussionId == '' || discussionId == undefined) && parentId == '') {
                    $.post(summariesUrl, { type: type, objectId: objectId }, function (response) {
                        ko.mapping.fromJS(response, mapping, self.Threads);
                        $("abbr.timeago").timeago();
                    });
                } else {
                    self.LoadReplies(self.LastDiscussionId());
                }

            } else {
                alert("Error occured while adding discussion");
            }
        });


    };
    self.GetReplies = function (data) {
        var thread;

        if (data.IsMaximized() == true) {
            for (var i = 0; i < self.Threads().length; i++) {
                if (self.Threads()[i].DiscussionId() == data.DiscussionId()) {
                    self.Threads()[i].IsMaximized(false);
                    break;
                }
            }
        } else {
            for (var i = 0; i < self.Threads().length; i++) {
                if (self.Threads()[i].DiscussionId() == data.DiscussionId()) {
                    self.Threads()[i].IsMaximized(true);
                    self.LoadReplies(data.DiscussionId());
                    break;
                }
            }
        }

    };
    self.LoadReplies = function (discussionId) {
        var request = {
            discussionId: discussionId,
            type: type,
            objectId: objectId
        };
        $.post(threadsUrl, request, function (response) {
            for (var i = 0; i < self.Threads().length; i++) {
                if (self.Threads()[i].DiscussionId() == discussionId) {
                    self.Threads()[i].Replies.splice(0, self.Threads()[i].Replies().length);
                    for (var j = 0; j < response.length; j++) {
                        self.Threads()[i].Replies.push(new ReplyModel(response[j]));
                    }
                    break;
                }
            }
            $("abbr.timeago").timeago();
        });
    };
    self.EditReply = function (dicussion) {
        self.New.Title(dicussion.Title());
        self.New.DiscussionId(dicussion.DiscussionId());
        self.New.Type(dicussion.Type());
        self.New.TypeId(dicussion.TypeId());
        self.New.Description(dicussion.Description());
        self.New.ParentId(dicussion.ParentId());
        self.New.UserId(dicussion.UserId());
        self.New.User(dicussion.User());
        self.LastDiscussionId(dicussion.DiscussionId());
        $("#dvAddDiscussion").dialog('open');
    };
    self.ToggleView = function (data) {
        for (var i = 0; i < self.Threads().length; i++) {

            for (var j = 0; j < self.Threads()[i].Replies().length; j++) {
                if (self.Threads()[i].Replies()[j].DiscussionId == data.DiscussionId) {
                    self.Threads()[i].Replies()[j].HasMore(!self.Threads()[i].Replies()[j].HasMore());
                    break;
                }

            }
        }
    };
}
var discussionViewmodel = new DiscussionViewModel();
ko.applyBindings(discussionViewmodel, document.getElementById("dvThreads"));

$(function () {
    $("#accordion").accordion();
    var dialog = $("#dvAddDiscussion").dialog({
        autoOpen: false,
        width: 720,
        height: 500,
        title: 'Discussion',
        modal: true,
        open: function () {
            if (typeof DISABLE_FOR_DIALOG != 'undefined')
                DISABLE_FOR_DIALOG = true;
            CKEDITOR.replace('txtDiscussioinDescription');

        },
        close: function (parameters) {
            if (typeof DISABLE_FOR_DIALOG != 'undefined')
                DISABLE_FOR_DIALOG = false;
            if (CKEDITOR.instances["txtDiscussioinDescription"] != undefined) {
                CKEDITOR.instances.txtDiscussioinDescription.updateElement();
                CKEDITOR.instances.txtDiscussioinDescription.destroy();
            }

        }
    });
    dialog.parent().appendTo($("#dvDialogs"));
    $("#frmAddDiscussion").data("validator").settings.submitHandler = discussionViewmodel.SubmitReply;
    $("#frmAddDiscussion").bind('click', function () {
        CKEDITOR.instances.txtDiscussioinDescription.updateElement();
    });
});


</script>

Answer 1

You just need to call the function at the appropriate time, which in this case is within your jQuery ready handler, right after this block:

$("#frmAddDiscussion").bind('click', function () {
    CKEDITOR.instances.txtDiscussioinDescription.updateElement();
});

You should be able to just add:

discussionViewmodel.AddNewThread();

This will invoke the function the same way that knockout would have done through the click data binding.