Page automatically go to the top when opening a dynamic jquery dialog box first time

Question

I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
        $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' 
                              + dialogText + '</div>').dialog({
            draggable: true,
            modal: true,
            resizable: false,
            width: 'auto',
            title: dialogTitle || 'Confirm',
            minHeight: 75,
            position: {
                my: "center",
                at: "center",
                of: window
            },
            buttons: {
                OK: function() {
                    if (typeof(okFunc) == 'function') {
                        setTimeout(okFunc, 50);
                    }
                    $(this).dialog('destroy');
                },
                Cancel: function() {
                    if (typeof(cancelFunc) == 'function') {
                        setTimeout(cancelFunc, 50);
                    }
                    $(this).dialog('destroy');
                }
            }
        });
    }

But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.

I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.

Please advice how i can fix it for word add-in.

Answer 1

You can try below code when you are calling your function :-

onclick="myConfirm();return false;"

Just add "return false;" after your function name as shown above.

Edit 1:-

Or you can return false from your function as well.

Edit 2 :-

$form.show().dialog({
                close: function (event) { event.preventDefault(); }
                resizable: false,
                etc....
            });