CODEWITHSUNDEEP
jqueryjquery-ui
Tom
Tom

Reputation: 2634

jquery dialog load issue

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.

Upvotes: 0

Views: 689

Answers (2)

Tom
Tom

Reputation: 2634

@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.

Upvotes: 1

deltree
deltree

Reputation: 3824

copied to JSFiddle

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

Upvotes: 2

Related Questions