Home/ Questions/Q 8558593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:50:52+00:00

so I am experimenting with themes for JQuery and I am having some issues

  • 0

so I am experimenting with themes for JQuery and I am having some issues with it’s placement. Without adding a jquery custom theme downloaded from the website, the autocomplete box loads below the textbox (see image 1), when I load the style sheet (to get rid of the bulleted list), It loads the text box on the top left of the window. The Code is below:
The style sheet I added: <link href="style/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />

The code that I added the style sheet to:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<script>
$(document).ready(function(){
    var drugs = ["Acepromazine (PromAce, Aceproject)", "Acetaminophen (Tylenol)",
        "Acetazolamide (Diamox, Dazamide)", "Acetylcysteine (Mucomyst)", 
        "Acetylsalicylic Acid (Aspirin)", 
        "Activated Charcoal (Toxiban, Liqui-Char, UAA Gel)", "Acyclovir (Zovirax)",
        "Albuterol (Proventil, Volmax, Ventolin)", "Allopurinol (Zyloprim)",
        "Alprazolam (Xanax)", "Amikacin (Amiglyde-V)", "Aminopentamide (Centrine)",
"Aminophylline",
"Amitraz (Mitaban, Preventic)",
"Amitriptyline HCl (Elavil)",
"Amlodipine Besylate (Norvasc)",
"Amoxicillin",
"Amoxicillin and Clavulanate (Clavamox)",
"Amphetamines",
"Amphotericin B",
"Ampicillin (Polyflex)",
"Antibiotic with Steroid Eye Medication",
"Apomorphine",
"Bismuth Subsalicylate (Pepto-Bismol)",
"Brinzolamide (Azopt)",
"Bromides",
"Buprenorphine (Buprenex)",
"Burow's Solution",
"Buspirone HCl (BuSpar)",
"Butorphanol Tartrate (Torbugesic, Torbutrol)",
"Calcitonin",
"Calcitriol (Vitamin D)",
"Calcium Gluconate",
"CAPSTAR (Nitenpyram)",
"Captopril (Capoten)",
"Carbamazepine (Tegretol)",
"Carboplatin (Paraplatin)",
"Carnitine (Carnitor)",
"Carprofen (Rimadyl)",
"Cefadroxil (Cefa-Tabs and Cefa-Drops)",
"Cefazolin (Kefzol, Ancef)",
"Cefixime (Suprax)",
"Cefotaxime (Claforan)",
"Cefotixin (Mefoxin)",
"Cefpodoxime Proxetil (Simplicef)",
"Ceftriaxone (Rocephin)",
"Cephalexin (Keflex)",
"Cephalothin",
"Chlorambucil (Leukeran)",
"Chloramphenicol (Chloromycetin)",
"Chlorhexidine",
"Chlorpheniramine Maleate (Chlor-Trimeton)",
"Chlorpromazine (Thorazine)",
"Cimetidine HCl (Tagamet)",
"Ciprofloxacin (Cipro, Ciloxan)",
"Cisplatin (Platinol-AQ)",
"Colchicine",
"Cyclophosphamide (Cytoxan, Neosar)",
"Cyclosporine (Atopica, Optimmune)",
"Cyclosporine Ophthalmic (Optimmune)",
"Cytarabine",
"Deracoxib (Deramaxx)",
"Derm Caps",
"Desmopressin (DDAVP)",
"Desoxycorticosterone (Percorten-V)",
"Dexamethasone"];
$("#drug_name_1").autocomplete({source:drugs});
});
</script>

<script type="text/javascript">

function addTreatment(){
}

function removeTreatment(){
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="button" name="increase" id="increase" value="Increase Drug Treatments" onclick="addTreatment()"/>
  <input type="button" name="decrease" id="decrease" value="Decrease Drug Treatments" onclick="removeTreatment()"/>
</form>
<form id="add_drugs" name="add_drugs" method="post" action="">
    <table width="100%" border="1" name="drug_treatment_table" id="drug_treatment_table">
          <tr>
            <th width="3%" scope="col">#</th>
            <th width="14%" scope="col">Drug</th>
            <th width="32%" scope="col">Special Directions </th>
            <th width="18%" scope="col">Quantity</th>
            <th width="12%" scope="col">How Often</th>
            <th width="8%" scope="col">Starting</th>
            <th width="13%" scope="col">Finishing</th>
          </tr>
          <tr>
            <td>1</td>
            <td>
            <input type="text" name="drug_name_1" id="drug_name_1" /></td>
            </tr>
         </table>
    </form>
    </body>
    </html>

The images are as follows:
The bullet list is correct position but ugly
The list is better looking but in the wrong position

Anyone have any ideas how to get the autocomplete text box to appear in the right position?

Thanks!
Jon

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I use this all the time and never have had any issues. Although I’m using different versions (I suspect your version of jquery ui and jquery ui theme are not compatible your js seems old):

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    You’ll also need the jquery ui theme, which you appear to have although I haven’t checked if its valid. I use the ui-lightness theme generally and everything works fine.

    • 0