JQuery and CSS file is not working from external file

Question

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

Can you show the directory structure of the file? because there must be jquery folder at the root of html file and this jquery folder must contain jquery.clearable.js and jquery.clearable.css files — Sandeep Kumar
– Sandeep Kumar, Commented Jun 10, 2013 at 7:44
Your jquery.clearable.js file won't work, because: (1) you don't wait for document ready (2) $(this) is meanless, you must write a selector. — user1823761
– user1823761, Commented Jun 12, 2013 at 6:16

crusy · Accepted Answer · 2020-07-14 08:05:31Z

1

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.

edited Jul 14, 2020 at 8:05

crusy

1,5303 gold badges28 silver badges60 bronze badges

answered Jun 10, 2013 at 7:45

Selvamani

7,7144 gold badges34 silver badges43 bronze badges

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

4 Comments

Selvamani Over a year ago

what's your mail id.? I will send you that verified file.

tom Over a year ago

i checked your code jquerey is working but using it i want to make clearable form is field that is still not working. i am usng this xample viralpatel.net/blogs/clearable-textbox-jquery

Selvamani Over a year ago

I updated code for you. Copy the code from here and past it to your corresponding files. Then add the image in "JQerey" folder.

tom Over a year ago

have you checked this code in your system because it is not working here and thanks for being so helpfull

Sean · Accepted Answer · 2017-10-12 10:07:47Z

1

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.

edited Oct 12, 2017 at 10:07

answered Jun 10, 2013 at 8:31

Sean

6,5099 gold badges49 silver badges70 bronze badges

1 Comment

tom Over a year ago

<! DOCTYPE> Is not a problem when i am using jquery in same page it is working but from the outsidefile it is not working

Collectives™ on Stack Overflow

JQuery and CSS file is not working from external file

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related