CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
tom
tom

Reputation: 47

JQuery and CSS file is not working from external file

I am trying to access the jQuery from external file put it is not working on my page. I checked my code and also searched in internet but not finding my mistake...

clearableformfield.jsp

<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
<link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" />
</head>
<body>
<div id="dom">
<input type="text"  class="foo"></input>
  </div>
<script>
$(document).ready(function() {
    $('.foo').clearable();
});</script>

</body>
</html>

jquery.clearable.js

$(this).css({'border-width': '0px', 'outline': 'none'})
    .wrap('<div id="sq" class="divclearable"></div>')
    .parent()
    .attr('class', $(this).attr('class') + ' divclearable')
    .append('<a class="clearlink" href="javascript:"></a>');

$('.clearlink')
    .attr('title', 'Click to clear this textbox')
    .click(function() {

        $(this).prev().val('').focus();

});

jquery.clearable.css

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

#dom{
    background-color:#b0c4de;}
}

All these file are inside the web content in the JQuery folder

Upvotes: 0

Views: 1106

Answers (2)

Selvamani
Selvamani

Reputation: 7684

Your file path should be like this

xxx.html
JQuery [folder]
   |
   |---jquery.clearable.js
   |---jquery.clearable.css
   '---close-button.png

Updated

Your HTML file should be like this

<HTML>
<HEAD>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="JQuery/jquery.clearable.js"></script>
    <link rel="stylesheet" href="JQuery/jquery.clearable.css" type="text/css" media="screen"/>

    <TITLE>Clearable Textboxes in jQuery</TITLE>

</HEAD>
<BODY>


<input type="text" class="clearable style1" size="30"></input>
&nbsp;
<input type="text" class="clearable style1"></input>

</BODY>
<SCRIPT>
$(document).ready(function(){
$('.clearable').clearable()
});
</SCRIPT>
</HTML>

JQuery/jquery.clearable.js file should be like this

jQuery.fn.clearable = function() {
    
    $(this).css({'border-width': '0px', 'outline': 'none'})
        .wrap('<div id="sq" class="divclearable"></div>')
        .parent()
        .attr('class', $(this).attr('class') + ' divclearable')
        .append('<a class="clearlink" href="javascript:"></a>');

    $('.clearlink')
        .attr('title', 'Click to clear this textbox')
        .click(function() {
            
            $(this).prev().val('').focus();

    });
}

JQuery/jquery.clearable.css file should be like this

.divclearable {
    border: 1px solid #888;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    padding-right:5px;
    vertical-align:middle;
}

a.clearlink {
    background: url("close-button.png") no-repeat scroll 0 0 transparent;
    background-position: center center;
    cursor: pointer;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;    
    height: 12px;
    width: 12px;
    z-index: 2000;
    border: 0px solid;
}

and add this image to JQuery folder.

Upvotes: 1

Sean
Sean

Reputation: 6499

You need to include a DOCTYPE like so at the very top of your html file:

<!DOCTYPE html>

This can cause problems in older versions of Internet Explorer, and may be causing your problems.

Without any more information it's very difficult to tell what could be the problem, what browser are you using? What errors are thrown in the console (firebug/IE Developer tools/Chrome dev tools) is it a 404 error or a different JavaScript error?

What does your directory structure look like? Are you sure things are in the right place and you haven't misnamed things? I notice you've put the folder name as JQerey is this an intentional spelling or a mistake?

It could also be that the file is returning with the wrong Mime Type, although I doubt this is the case.

Upvotes: 1

Related Questions