jQuery: Uncaught TypeError: $(...).dialog is not a function

Question

This is my javascript function am calling on a page:

<script>
    $.fn.tabbedDialog = function () {
        this.tabs();
        this.dialog({ 'minWidth': 300, 'minHeight': 300, 'draggable': true, 'autoOpen': false, 'resizable': false, });
        var $dialog = $(this).closest('.ui-dialog');
        this.find('.ui-icon-closethick').append($('.ui-dialog-titlebar-close')).css('position', 'static');
        $dialog.find('.ui-draggable-handle').append($('.ui-tabs-nav').removeClass().addClass('ui-tabs-nav')).addClass('ui-tabs');
        $dialog.find('.ui-dialog-title').remove();
    }
    $('#xxx').tabbedDialog();

    $('a#show').click(function () {
        if ($('#xxx').dialog("isOpen")) {
            $('#xxx').dialog('close');
        }
        else {
            $('#xxx').dialog('open');
        }
    });
</script>

jQuery dialog is conflicting with this script that is global to my template at this point when I try to open the dialog box and this is the script defined in the other javascript file attached to my template:

this.$dialog.on('mousedown.dismiss.bs.modal', function () {
      that.$element.one('mouseup.dismiss.bs.modal', function (e) {
        if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
      })
    })

I have tried commenting the line of code disturbing the dialog but it distorts the other parts of my project. please how can I resolve this dialog conflict Kindly assist!

create a demo with both plugins installed that replicates problem. Might have to rename one of the $.fn methods — charlietfl
– charlietfl, Commented Jul 11, 2015 at 15:21
That doesn't make much sense, this.$dialog and jQuery.fn.dialog has nothing to do with each other, you'd have to actually overwrite the prototyped method on the jQuery instance. You're sure the issue isn't just that you didn't load jQuery UI. — adeneo
– adeneo, Commented Jul 11, 2015 at 15:50

Learner · Accepted Answer · 2015-07-13 10:43:47Z

1

Was able to solve my problem after much trying. I added this,

jQuery(document).ready(function ($) {
//functions here
this.tabs();
$.noConflict(true);
.....
});

And the conflict was resolved.

answered Jul 13, 2015 at 10:43

Learner

831 silver badge14 bronze badges

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

Collectives™ on Stack Overflow

jQuery: Uncaught TypeError: $(...).dialog is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related