.show() not working

Question

Here is my code:

<script type="text/javascript">
$('#reqtype').on('change', function() {
  if ($(this).val() === "Edit") {
    $("#crtype").show()
  } else {
    $("#crtype").hide()
  }
});
$('#crtypes').on('change', function() {
  if ($(this).val() === "editrule") {
    $("#ruletitle").show();
  } else if ($(this).val() === "addrule") {
    $("#ruletitle").show();
  } else {
    $("#ruletitle").hide()
  }
});
</script>

And here is my html:

<body>
<div>
  <label>Request Type*:</label>
  <select name="reqtype" id="reqtype" required tabindex="4">
    <option value="">- Select Request Type -</option>
    <option value="Create">Create</option>
    <option value="Edit">Edit</option>
  </select>
  <br/>
  <br/>
</div>
<div>
  <label>Assignment Profile ID
    <br/><span style="font-weight:normal; font-
      style:italic">(Leave blank if requesting new Assignment Profile)         
      </span>:</label>
  <input name="assignmentid" size="50" tabindex="5" type="text" class="w250" />
  <br/>
  <br/>
</div>
<div id="crtype" style="display:none;">
  <label for="changerequesttype">Change Request Type</label>
  <select name="crtypes" id="crtypes">
    <option>Choose Request Type</option>
    <option value="addrule">Add Rule</option>
    <option value="editrule">Edit Rule</option>
    <option value="addcontent">Add Content</option>
    <option value="editcontent">Edit Content</option>
  </select>
  <br/>
  <br/>
  <div id="ruletitle" style="display:none;">
    <label>Rules (Rule Title):</label>
    <input name="ruletitle" size="50" tabindex="5" type="text" class="w250" />
    <br/>
    <br/>
    <label>Rules (Attribute):</label>
    <select name="ruleattribute" id="ruleattribute" tabindex="8">
      <option value="">- Select Attribute -</option>
      <option value="Business Group">Business Group</option>
      <option value="Business Unit">Business Unit</option>
      <option value="Business Value Center">Business Value Center</option>
      <option value="Company Code">Company Code</option>
      <option value="Customer Code">Customer Code</option>
      <option value="Employee ID">Employee ID</option>
      <option value="Function">Function</option>
      <option value="Is People Leader?">Is People Leader?</option>
      <option value="Job Family">Job Family</option>
      <option value="Job Grade">Job Grade</option>
      <option value="Address">Address</option>
      <option value="Alternate Job Code ID">Alternate Job Code ID</option>
      <option value="City">City</option>
      <option value="Country">Country</option>
      <option value="Domain ID">Domain ID</option>
      <option value="Employee Status ID">Employee Status ID</option>
      <option value="Employee Type ID">Employee Type ID</option>
      <option value="Is Full-Time">Is Full-Time</option>
      <option value="Hire Date">Hire Date</option>
      <option value="Hire Month">Hire Month</option>
      <option value="Is Supervisor">Is Supervisor</option>
      <option value="Item Completion">Item Completion</option>
      <option value="Job Location ID">Job Location ID</option>
      <option value="Job Code ID">Job Code ID</option>
      <option value="Organization ID">Organization ID</option>
      <option value="Postal Code">Postal Code</option>
      <option value="Region ID">Region ID</option>
      <option value="Regular/Temp">Regular/Temp</option>
      <option value="State">State</option>
      <option value="User ID">User ID</option>
      <option value="Supervisor ID">Supervisor ID</option>
      <option value="Plant ID">Plant ID</option>
      <option value="Sub Function">Sub Function</option>
      <option value="Vendor Code">Vendor Code</option>
    </select>
    <br/>
    <br/>
    <label>Rules (Operator):</label>
    <select name="ruleoperator" id="ruleoperator" tabindex="8">
      <option value="">- Select Operator -</option>
      <option value="Contains">Contains</option>
      <option value="Does Not Contain">Does Not Contain</option>
      <option value="Does Not Match">Does Not Match</option>
      <option value="Does Not Start With">Does Not Start With
      </option>
      <option value="Matches">Matches</option>
      <option value="Is Empty">Is Empty</option>
      <option value="Is Not Empty">Is Not Empty</option>
      <option value="Starts With">Starts With</option>
    </select>
    <br/>
    <br/>
    <label>Rules (Value):</label>
    <input name="rulevalue" size="50" tabindex="5" type="text" class="w250" />
    <br/>
    <br/>
  </div>
</div>
</body>

Here is my problem: When I select "Edit:" from my first drop down list, it should show "Change Request Type". If I select either Add or Edit Rule from that drop down list, it should show the next 3 fields. This works fine on JSFiddle. My practice code

When I put the code back into my larger page, it fails. So I stripped it down to the bare minimum code as seen here and it still will not work. What am I missing?

You **must** include the jquery library to use jquery functions. I see no jquery script in your HTML. You *do* have jquery linked at jsfiddle.... which is why it's working there. — Scott, Jun 01 '17 at 20:12
I have added the following line per your suggestion and @B1ll suggestion below: I put that before my first script line and it still does not work. — abaragar, Jun 01 '17 at 20:35
.....do you have jquery in a "scripts' directory? You have to *link to the jquery library*. If the "scripts' directory doesn't have the jquery library within it, then that path for the `src` attribute won't work. — Scott, Jun 01 '17 at 20:41
Yes, I have downloaded the 3.2.1.min.js file and put it in the /scripts directory. I even copied the file name and pasted it into the code so that I would not misspell anything or leave off one of the periods. — abaragar, Jun 01 '17 at 20:48
There was a typo. The file I downloaded was jquery-3.2.1.js. The code now reflects that change. — abaragar, Jun 01 '17 at 20:56
I don't really know what else to tell you. It *must* be an issue with the linking to jquery. — Scott, Jun 01 '17 at 20:56
I completely agree. I have had a similar issue in the past linking to a db in my virtual directory. It seems like I am facing that same problem here. I will keep at it. Thanks for the help. — abaragar, Jun 01 '17 at 20:59

score 0 · Answer 1 · answered Jun 01 '17 at 20:17

0

You need to load jQuery before you can use jQuery $ functions. jQuery is included in the JSFiddle, which is why your JavaScript runs there.

Add this before your first <script>:

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

More details: How to add jQuery code into HTML Page

answered Jun 01 '17 at 20:17

B1ll

50
5

I used your link as described above with no luck. I have downloaded the 3.2.1 file, put it in my scripts directory, linked it in my code and it still failed. Any other ideas? Thanks in advance. – abaragar Jun 01 '17 at 21:17
In that case I would open the developer tools in your browser, go to the console, and enter `$(document)`. If something like `[document, context: document]` appears, then jQuery was loaded. – B1ll Jun 02 '17 at 08:49

score 0 · Answer 2 · answered Jun 01 '17 at 20:17

I would open the developer tools in your browser and put breakpoints and walk through them. In most of them the shortcut key is f12. Set a breakpoint right at the if( $(this).val()==="Edit") then when your breakpoint hits it then highlight $(this).val() then right click and select add to watch. It will also tell you if it's the case that Metis presents that you do not have any jquery files linked in your html because you will get an error that the jquery functions don't exist basically.

score 0 · Answer 3 · answered Aug 02 '17 at 04:20

Try:

$.getScript("insert name of jquery file", function(){

    //do something simple with jQuery Here

 });

or

$(window).on('load', function() {
    // do something simple with jQuery
});

I want to see if there is a problem with your file because the code inside both of these functions should trigger after it loads your jQuery script. Additionally, try using an absolute path rather than the relative path when importing in the library and see if that helps to fix the issue

Macfer Ann · Answer 4 · 2017-08-02T04:51:24.133

0

Check these things

Whether another element has same ID (reqtype)
wrap the code like below
Place the script in bottom of the page (before body closing tag) and call jquery.js script before your code.

$(document).ready(function () {

$('#reqtype').on('change', function () {
    //code 
});

$('#crtypes').on('change', function () {
    //code
});

});

edited Aug 02 '17 at 04:51

answered Aug 02 '17 at 04:45

Macfer Ann

153
1
9

.show() not working

4 Answers4