How do you call Jquery code in sub-html pages?

Question

I'm starting a website using jQuery.

I'm trying to get a clean code with a main skeleton page - index.html - and call jQuery to load other components. So in the future if I can call my components the same way.

<head>
  <title>my site</title>
</head>

<body>
  <div id="sidebar">
    <script>
      $(function() {
        $("#sidebar").load("components/sidebar.html");

      });
    </script>
  </div>

  <!-- Main Content -->
  <div id="content">
  </div>
</body>

</html>

And my sidebar.html is

<!-- Sidebar -->
<ul>
  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>
</ul>
<!-- End of Sidebar -->

It's working for now, but I want to display only an element using user data for example with this component.html is not working

<!-- Sidebar -->
<ul>

  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>

  <script>
    var access = 0;
    if (access == 0) {
      $(function() {
        $(this).html(
          '<li><a>element 3</a></li>')
      });
  </script>

</ul>
<!-- End of Sidebar -->

Maybe it's because the load("components/sidebar.html") doesn't trigger my script in my sidebar.html file?

Is there a better way to do it?

Thanks a lot.

Sebastian Brosch · Accepted Answer · 2021-07-13T09:33:05.587

There are multiple issues:

The if statement isn't closed properly. The closing } is missing.
$(this) is referencing the whole document (index.html with embedded sidebar.html) and not the current position of the script.

You can use this sidebar.html instead:

<!-- Sidebar -->
<ul>

  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>

  <script>
    var access = 0;
    if (access == 0) {
      $(function() {
        let script = this.scripts[this.scripts.length - 1];
        $('<li><a href="index.html">element 3</a></li>').insertBefore(script);
      });
    }
  </script>
</ul>
<!-- End of Sidebar -->

Another solution, adding the new list item to the specific list (requires something on the list element to identify):

<!-- Sidebar -->
<ul id="sidebar">

  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>

  <script>
    var access = 0;
    if (access == 0) {
      $(function() {
        $('ul#sidebar').append('<li><a href=\"index.html\">element 3</a></li>');
      });
    }
  </script>
</ul>
<!-- End of Sidebar -->

The .load doesn't trigger my script in my sidebar.html file?

In your example the script on sidebar.html is executed. But be careful, the script is not executed using a selector expression (e.g. sidebar.html #example). This behavior is also described in the jQuery documentation:

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

score 0 · Answer 2 · answered Jul 13 '21 at 09:45

You have to use the $('ul') instead of the $(this) and it is not .html() but it should be .append() like this if you want to add new li or else .html() is fine.

var access = 0;
if (access == 0) {
  $(function() {
    $('ul').append(
      '<li><a>element 3</a></li>')
  }); }

How do you call Jquery code in sub-html pages?

2 Answers2