Why JS function not working when I take it out of JSFiddle?

Question

Similar questions have been asked before BUT all/most of them suggested that I used this:

$(document).ready(function() {
    // put your Javascript here
});

Even with using that It still does not work:

Code is JSFiddle: http://jsfiddle.net/Guruprasad_Rao/ooexfj26/

HTML:

<html>
  <head>
  </head>
  <body>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
          <thead>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Johnn</td>
              <td>Doe</td>
            </tr>
            <tr>
              <td>Sam</td>
              <td>Smith</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">EDIT</h4>
          </div>
          <div class="modal-body">
            <p><input type="text" class="input-sm" id="txtfname"/></p>
            <p><input type="text" class="input-sm" id="txtlname"/></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script src="modal.js" type="text/javascript"></script>
  </body>
</html>

jQuery:

$(document).ready(function () {
  $('table tbody tr  td').on('click', function () {
    $("#myModal").modal("show");
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
  });
});

I have even tried adding these at the end still no difference:

  <script src= "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

The result: All components of html show and no JS functionality seems to be present

You need to add jquery before yours. Either of those jquery links will be fine, but of course not both, that would be silly. :) — Keith, Sep 26 '17 at 11:19
Have you have included your bootstrap script? It's not in the code you showed. — juanferrer, Sep 26 '17 at 11:20
I'm not adding both versions of JQuery at the same time. I'm thinking it is something to do with the bootstrap, as I have not referenced that and its not in the JSFiddle HTML — Macbook, Sep 26 '17 at 11:24
Sidenote/off topic: you can simplyfy this selector to `$("tbody td")` as the other two selectors are pointless; or even to plain `$("td")` as you have 'th's in the table header. Because, where else yould you find a table cell in HTML than inside a table row? And where else would that be, than inside a table? Only the `tbody` adds some value to the selector, as it would exclude the table cells inside a `thead` or `tfoot`, if there were any. — Thomas, Sep 26 '17 at 11:35

Chtioui Malek · Accepted Answer · 2017-09-26T21:32:40.473

1

Add :

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

Because you need bootstrap scripts, bootstrp css and jquery script.

I tested it here, it works.

edited Sep 26 '17 at 21:32

answered Sep 26 '17 at 11:26

Chtioui Malek

11,197
1
72
69

1

Correct but the JQuery version needs to be: Please update so I can mark it as correct. – Macbook Sep 26 '17 at 11:40
yes, answer updated. – Chtioui Malek Sep 26 '17 at 11:45

Lars Peterson · Answer 2 · 2017-09-26T11:29:38.693

0

You need jQuery for your code to work. Try using this CDN since it's more recent than the versions you attempted to use.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

And be sure that you insert this before your JavaScript.

edited Sep 26 '17 at 11:29

answered Sep 26 '17 at 11:19

Lars Peterson

1,508
1
10
27

Unfortunately still doesn't work. I have done exactly as you have said. – Macbook Sep 26 '17 at 11:25
What doesn't work? Are you getting an error? What's the problem?? – Lars Peterson Sep 26 '17 at 11:25
_Doesn't work_ is extremely general – Lars Peterson Sep 26 '17 at 11:26
The behaviour is exactly the same as before. No visible errors, The html loads the table and the modal.all on one page. there seems to be no JS functionality – Macbook Sep 26 '17 at 11:27
Have you also included the `BootstrapJS`? – Lars Peterson Sep 26 '17 at 11:28
View my updated answer, – Lars Peterson Sep 26 '17 at 11:29
Chriwi answer fixes my problem, yours is close but stylesheets should be referenced in a different way with 'link rel'. Otherwise I would give you +1 (if I had the reputation to do so ofcourse) – Macbook Sep 26 '17 at 11:45

Why JS function not working when I take it out of JSFiddle?

2 Answers2