jquery dialog load issue

Question

I'm just trying to play around with Jquery dialog. I click a button and the dialog appears. This code is just straight copy from Jquery docs (well, through a link to a blog post).

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript">

var js = jQuery.noConflict();

js(document).ready(function() {
var $dialog = js('<div></div>')
    .html('This dialog will show every time!')
    .dialog({
        autoOpen: false,
        title: 'Basic Dialog'
    });

js('#axis-details').click(function() {
    $dialog.dialog('open');
    // prevent the default action, e.g., following a link
    return false;
});
});
</script>

The simple html button:

<button id="axis-details" >API Key</button>

I get this error: js("<div></div>").html("This dialog will show every time!").dialog is not a function

First I want to make sure I didn't do anything wrong with the code here. Typically this means it is not loading the jquery-ui appropriately but I can see with firebug it is loaded fine. I also make sure it doesn't conflict with any other package, hence the noConflict().

Any hints where I'm going wrong would be appreciated.

Seems to be some bugs with using .noConflict(), especially with jQuery UI. Check out the comments at the bottom of the api page for noConflict: api.jquery.com/jQuery.noConflict — Travis J
– Travis J, Commented Mar 5, 2012 at 20:46
sounds like you may be loading jQuery again in page somewhere else, which will wipe out jQueryUI being part of jQuery object — charlietfl
– charlietfl, Commented Mar 5, 2012 at 20:48
Thanks all, @Travis J is right. There is some sort of conflict. — Tom
– Tom, Commented Mar 6, 2012 at 1:21

deltree · Accepted Answer · 2012-03-05 20:49:09Z

2

copied to JSFiddle

And it works fine. Your problem must be outside of this bit of code

answered Mar 5, 2012 at 20:49

deltree

3,8242 gold badges34 silver badges53 bronze badges

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

Comments

Tom · Accepted Answer · 2012-03-06 01:19:56Z

1

@Travis J had this right. Seems like there is some sort of conflict with .noConflict() and jQuery UI. How ironic ;)

Removing noConflict() makes this work.

answered Mar 6, 2012 at 1:19

Tom

2,63411 gold badges61 silver badges96 bronze badges

Collectives™ on Stack Overflow

jquery dialog load issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related