0

First time using JQuery, so please try to be nice if it is a stupid error. I am working on an HTML based project just for fun and want to create a bootstrap based carousel that first reads a folder for images, and sticks them into the slideshow. As I found out, HTML is weird and picky when it comes to what languages can touch folder. I tried PHP, and then realized I needed to install a bunch of other things to make it work, so I am trying jQuery, as it has the ability to access folders, based on info from here.

I have been able to inject HTML snippets using the append() method of jquery, but I cannot connect the 2 of them together. I get the following error: "jquery-3.2.1.min.js:2 Uncaught TypeError: jQuery.ajax is not a function".

This error started appearing when I added in the for loop to build the URL to the folder. It seems to be caused by for loops not being allowed to run before ajax calls.

please see the following code. Main area affected is the large script field in the header, and output should show up in the carousel-inner.

Any help is appreciated. Thank you

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script>
        $(document).ready(function(){
            var folder = "slides/";
            var href=window.location.href;
            var pathArray=href.split('/');
            var path="";
            for(i=0;i<pathArray.length-1;i++){
                path+=pathArray[i];
                path+="/";
            };
            path+=folder;
            console.log(path);

            $.ajax({
                url : path,
                async: false,
                success: function (data) {


                    $(data).find("a").attr("href", function (i, val) {
                        if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                            $(".carousel-inner").append( "<div class=\"carousel-item\"> <img src='"+ folder + val +"'> </div>" );
                        } 
                    });
                }
            });

        });
    </script>


    <style>
        .scroll-div {
          height:150px;
          overflow-y: scroll;
        }
    </style>    

    <title>Test</title>
  </head>
  <body>
    <!-- Page stuff goes here -->


        <main class="col-12 " role="main">
            <div class="row ">
                <div class="col-3">
                    <a class="weatherwidget-io" href="https://forecast7.com/en/42d31n83d04/windsor/" data-label_1="WINDSOR" data-label_2="WEATHER" data-theme="original" >WINDSOR WEATHER</a>
                    <script>
                    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
                    </script>
                </div>

                <div class="col-9">
                    <div class="test">test</div>
                    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">

                        </div>
                    </div>
                </div>
            </div>
        </main> 

    <!-- End of page stuff -->


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
Collin
  • 73
  • 8
  • 1
    You have multiple copies of jQuery and the last one is the slim version which does not support `jQuery.ajax()`. Remove the slim version – Phil Jun 09 '20 at 01:43
  • thank you for your help with that! I spent an hour trying to find what broke! I have another error now though. "Access to XMLHttpRequest at [filepath]] from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." – Collin Jun 09 '20 at 01:49
  • If you search for that error message, you will find out what's causing it – Phil Jun 09 '20 at 01:49
  • 1
    That shouldn't happen if you're doing AJAX to the same server. You can't do AJAX if you're loading from a local file, you need to go through a server. – Barmar Jun 09 '20 at 01:50
  • Is there any way to do what I am trying to achieve such that I don't need to spin up a server or anything like that? I plan on just having this run local, allow me to drop in images in the folder, and it just works. I don't plan on having anyone visit it, but to use it as a screen with a slideshow and weather on it. – Collin Jun 09 '20 at 01:57
  • Use a browser plugin that lets the browser act as a server? E.g. https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en – kmoser Jun 09 '20 at 03:13
  • 1
    Thank you for all of your help. I found that Python allows me to create a simple server using 1 line of command. This thing will not be made public, so it should be ok running that server. Thank you all for your help – Collin Jun 09 '20 at 03:37

0 Answers0