CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nihilish
Nihilish

Reputation: 105

How to add this jQuery library to my project?

I've worked with JS a lot in school, but we never used libraries. There's so little info online as to how to succesfully add one with all the necessary external resources to a project.

I'm trying to add a library that uses jQuery to have a small window pop-up inside the page (http://jsfiddle.net/55DBx/1/) of a website I'm working on but no matter what I do, it doesn't work as it's supposed to. On jsFiddle, it says the library needs jquery-ui.js and jquery-ui.css which I've both linked to my HTML file as follows:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
<link rel="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

and I've added the sample code from jsFiddle to my project, and it doesn't work. The pop-up window's content just shows up directly on the page.

<button id="btnExample">open the dialog</button>
<div id="dialog" title="Test">
    <img src="image.png" />
</div>

<script>$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});</script>

What am I missing? :(

Upvotes: 0

Views: 1216

Answers (1)

pblyt
pblyt

Reputation: 518

You may place the library references in wrong places, you should place them within the <head></head> section. And in your css reference, you are adding the link for rel attribute, which is used for specifies the relationship between the current document and the linked document/resource, you should add the link for href attribute.

$( "#dialog" ).dialog({ autoOpen: false });
$( "#btnExample" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<button id="btnExample">open the dialog</button>
<div id="dialog" title="Randy">
    <img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
</div>

The entire code:

<html>

<head>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#dialog").dialog({
            autoOpen: false
        });
        $("#btnExample").click(function() {
            $("#dialog").dialog("open");
        });
    });
    </script>
</head>

<body>
    <button id="btnExample">open the dialog</button>
    <div id="dialog" title="Randy">
        <img src="http://icons.iconarchive.com/icons/sykonist/south-park/256/Randy-Marsh-Jamming-2-icon.png" />
    </div>
</body>

</html>

Upvotes: 1

Related Questions