PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, January 18, 2022

[FIXED] Javascript file won't load using laragon (ERR_ABORTED 404 (Not Found))

 January 18, 2022     javascript, laragon, php, wordpress, wordpress-theming     No comments   

Issue

I cannot use/access the carousel.js file - GET http://name.test/js/carousel.js net::ERR_ABORTED 404 (Not Found)

front-page.php

    <div class="row">
        <div class="col-lg-4">
            <div class="carousel_item carousel_item--visible">first post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">second post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">third post</div>
        </div>
    </div>

    <div class="carousel_actions">
        <button id="carousel_button--prev" aria-label="previous slide">
            <
        </button>
        <button id="carousel_button--next" aria-label="next slide">
            >
        </button>
    </div>
</div>
<script type="text/javascript" src="js/carousel.js"></script>""

JS code:

let slidePosition = 0;
const slides = document.getElementsByClassName('carousel_item');
const totalSlides = slides.length;

document.getElementById('carousel_button--next').addEventListener("click", function() {
    moveToNextSlide();
});

document.getElementById('carousel_button--prev').addEventListener("click", function() {
    moveToPrevSlide();
});

function moveToNextSlide() {
    console.log('next works');
}

function moveToPrevSlide() {
    console.log('prev works');
}

functions.php

function load_js(){

    wp_enqueue_script('jquery');
    wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');
    wp_register_script('carousel', get_template_directory_uri() . '/js/carousel.js');
    wp_enqueue_script('carousel');
}
add_action('wp_enqueue_scripts', 'load_js');

file structure

.
├── js
│   ├── bootstrap.min.js
│   └── carousel.js
├── index.php
├── front-page.php
└── functions.php

(there are other files there, only included the important ones for an easier overview)

I'm pretty sure I typed the correct path to the carousel.js file, can anyone enlighten me what's the problem here?


Solution

1- In your front-page.php file, remove the script tag. (i.e <script type="text/javascript" src="js/carousel.js"></script>). Your wp_enqueue_script function would take care of loading it onto the page!

2- You don't need those wp_register_script functions either! In your functions.php file remove them!

3- In the functions.php file replace the following snippet with your own:

add_action('wp_enqueue_scripts', 'load_js');

function load_js()
{
  wp_enqueue_script('jquery');
  wp_enqueue_script('bootstrap', get_theme_file_uri('/js/bootstrap.min.js'), 'jquery', 1.0, true);
  wp_enqueue_script('carousel', get_theme_file_uri('/js/carousel.js'), NULL, 1.0, true);
}

These should do the trick for you!

When you load the page, right-click on it and view the source. You should be able to find both bootstrap and carousel loaded onto the source!

Let me know if you could get it to work!



Answered By - Ruvee
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing