-1

I am trying to hide a button with some simple jquery. I tried to put the jquery.js file in the same folder as the html page but this generates a 404 error as it is looking for the jquery.js file on the server as opposed to my local machine.

I thought I would use the CDN but again this does not work and in the console I do not see any requests to the CDN like when I have it specified as a local file.

Can someone point me in the right direction with this?

<html>
<body>
    <script src="jquery.js"></script>
    <script>
    $("#vlan_text").hide();
    </script>
<div class="content-section">
    <!-- ## form method must be POST for button click action-->
   <form method="POST" action="">
    <div class="input-group mb-3">
        <div class="input-group-prepend" id="test">
            <span class="input-group-text">Gi1/0/</span>
        </div>        
        <input type="text" class="form-control" id="port_in" name="port_input" aria-label="Port Number">
    </div>
    <input class="btn btn-info" type="submit" id="run_int" name="sh_run_int" value="Show interface configuration">
    <div class="well">
      <!-- ## the <pre> tags specify preformatted text-->
      <pre> {{ show_run_int }} </pre>
    </div>
    <div class="input-group mb-3" id="vlan_div">
        <input type="text" class="form-control" id="vlan_text" name="vlan_input" aria-label="VLAN">
    </div>
    </div>
   </form>
<body>
</html>
davidism
  • 121,510
  • 29
  • 395
  • 339
fraserc182
  • 237
  • 1
  • 4
  • 13
  • Try it with full path to file public_html/something/something/jquery.js Update: that script you wrote will trigger at the moment, so you should wrap it in jQuery(document).ready(function(){ //SCRIPT }); Reason of this is that DOM is not ready when that script triggers – Armin Nov 26 '19 at 13:30

2 Answers2

0

Try the code below and make sure your HTML and JQuery both files are on same directory.

<html>
<body>
<div class="content-section">
    <!-- ## form method must be POST for button click action-->
   <form method="POST" action="">
    <div class="input-group mb-3">
        <div class="input-group-prepend" id="test">
            <span class="input-group-text">Gi1/0/</span>
        </div>        
        <input type="text" class="form-control" id="port_in" name="port_input" aria-label="Port Number">
    </div>
    <input class="btn btn-info" type="submit" id="run_int" name="sh_run_int" value="Show interface configuration">
    <div class="well">
      <!-- ## the <pre> tags specify preformatted text-->
      <pre> {{ show_run_int }} </pre>
    </div>
    <div class="input-group mb-3" id="vlan_div">
        <input type="text" class="form-control" id="vlan_text" name="vlan_input" aria-label="VLAN">
    </div>
    </div>
   </form>
    <script src="jquery.js"></script>
    <script>
    $("#vlan_text").hide();
    </script>
<body>
</html>
Sajjad Ali
  • 304
  • 3
  • 12
0

  1. Make sure the markup file (HTML) and JQuery are in the same directory or have the correct path for the script.

  2. Why don't you close the body tag (Perhaps the problem is because of him)?

Sherzod
  • 16
  • 1