JavaScript functionality is not functioning properly in conjunction with BootStrap 4 due to the absence of a hidden class

Check out this Fiddle I created! It seems to be working fine with Bootstrap 3, but not with Bootstrap 4. I suspect it might have something to do with the hidden class in Bootstrap 4. Any suggestions on how to modify the JS code to make it compatible?

JS:

$(document).ready(function() {
      function readURL(input) {
          if (input.files && input.files[0]) {
              var reader = new FileReader();

              var
                  $container = $(input).closest('.upload'), 
                  $preview = $container.find('.img-preview'), 
                  $uploadedImage = $container.find('.uploaded-image'), 
                  $addImage = $container.find('.add-image'); 

              reader.onload = function(e) {

                  $preview.attr('src', e.target.result);
                  if ($uploadedImage.is(':hidden')) {
                      $uploadedImage.toggleClass("hidden")
                      $addImage.toggleClass("hidden")
                  }
              }

              reader.readAsDataURL(input.files[0]);
          }
      }

      $(".imgInp").change(function() {
          readURL(this);
      });

  });



  $('#delete2').on('click', function() {
      $('#image2').val("")

      $('.deleteme2a').removeClass("hidden")
      $('.deleteme2b').addClass("hidden")
      $("#hidden-image2").val("change");

  });


  // Repeat delete functions for image 3, 4 and 5

HTML:

<div class="col-md-4 col-lg-2 ">
              <p style="text-align:center;"> <b> Image 5</b>
              </p>
              <div class="upload center-block">
                <span style="background: #black;float:right; position:absolute;cursor:pointer; left: 145px; z-index: 10; padding: 6px 7px;" class="badge " id="delete5"> <i class="fa fa-remove"></i>  </span>
                <input class="input-file imgInp" id="image5" name="image5" type="file">
                <label for="files">
                  <span class="add-image deleteme5a   ">
                    Add Image
                  <br>Image</span>
                  <span class="uploaded-image deleteme5b  hidden  ">
                    <img class="img-preview" src="" width="160" height="160" alt="your image" style="margin:0px">
                  </span>
                  <output id="list"></output>
                </label>
              </div>
            </div>
javascriptjquerycsstwitter-bootstrap-3bootstrap-4

Answer №1

Since Bootstrap 4 necessitates Tether JS

Here is the CDN URL:

https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js

Avoid including jQuery twice.

$(window).load(function() {
  $(document).ready(function() {
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        var
          $container = $(input).closest('.upload'), // Locate relative .upload container
          $preview = $container.find('.img-preview'), // Locate relative .img-preview in the container
          $uploadedImage = $container.find('.uploaded-image'), // Locate relative .uploaded-image in the container
          $addImage = $container.find('.add-image'); // Locate relative .add-image in the container

        reader.onload = function(e) {
          // Utilize relative elements in your code
          $preview.attr('src', e.target.result);
          if ($uploadedImage.is(':hidden')) {
            $uploadedImage.toggleClass("hidden")
            $addImage.toggleClass("hidden")
          }
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    $(".imgInp").change(function() {
      readURL(this);
    });
  });

  $('#delete2').on('click', function() {
    $('#image2').val("")
    $('.deleteme2a').removeClass("hidden")
    $('.deleteme2b').addClass("hidden")
    $("#hidden-image2").val("change");
  });

  $('#delete3').on('click', function() {
    $('#image3').val("")
    $('.deleteme3a').removeClass("hidden")
    $('.deleteme3b').addClass("hidden")
    $("#hidden-image3").val("change");
  });


  $('#delete4').on('click', function() {
    $('#image4').val("")
    $('.deleteme4a').removeClass("hidden")
    $('.deleteme4b').addClass("hidden")
    $("#hidden-image4").val("change");
  });

  $('#delete5').on('click', function() {
    $('#image5').val("")
    $('.deleteme5a').removeClass("hidden")
    $('.deleteme5b').addClass("hidden")
    $("#hidden-image5").val("change");
  });

  $(function() {
    $("#image1:file").change(function() {
      $("#hidden-image1").val("change");
    });
  });

  $(function() {
    $("#image2:file").change(function() {
      $("#hidden-image2").val("change");
    });
  });

  $(function() {
    $("#image3:file").change(function() {
      $("#hidden-image3").val("change");
    });
  });
  $(function() {
    $("#image4:file").change(function() {
      $("#hidden-image4").val("change");
    });
  });

  $(function() {
    $("#image5:file").change(function() {
      $("#hidden-image5").val("change");
    });
  });
});
.upload {
  position: relative;
  display: block;
  width: 160px;
}

.upload label {
  color: #5F626A;
  cursor: pointer;
  width: 160px;
  height: 160px;
  position: relative;
  display: block;
  border: 3px dashed #5F626A;
  border-radius: 10px;
  overflow: hidden;
  transition: background ease .5s;
  pointer-events: none;
  /*This for FF*/
}

.input-file {
  opacity: 0;
  /*This*/
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.add-image {
  display: block;
  width: 100%;
  margin: 65px auto;
  text-align: center;
  font-size: 11px;
  font-family: sans-serif;
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>



<div class="col-md-4 col-lg-2 ">
    <p style="text-align:center;"> <b> Image 5</b>
    </p>
    <div class="upload center-block">
        <span style="background: #black;float:right; position:absolute;cursor:pointer; left: 145px; z-index: 10; padding: 6px 7px;" class="badge " id="delete5"> <i class="fa fa-remove"></i>  </span>
        <input class="input-file imgInp" id="image5" name="image5" type="file">
        <label for="files">
            <span class="add-image deleteme5a   ">
                Add Image
                <br>Image
            </span>
            <span class="uploaded-image deleteme5b  hidden  ">
                <img class="img-preview" src="" width="160" height="160" alt="your image" style="margin:0px">
            </span>
            <output id="list"></output>
        </label>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fixing a JavaScript conflict between the parent theme and the child theme in WordPress

Recently, I created a customized child theme based on the Divi Theme, tailor-made for integration with Buddypress. Everything was going smoothly until I encountered a conflict involving the commenting buttons due to a script. In my theme, there is a JavaS ...

javascriptajaxwordpresswordpress-themingbuddypress

Creating an AJAX request in PHP to send data from multiple input fields with the same name

My goal is to create a poll system similar to Facebook for my project, but I am facing a challenge. I have implemented the following JavaScript code to add answers to inputs: $("body").on("click",".createnew", function(){ $(".inputsl").append("<d ...

javascriptphpjqueryajax

What causes AngularJS to alter my GET parameters when using $http?

I am currently making a basic GET request to a REST service in order to obtain a list of users and sort them by their usernames. Using jQuery, the process runs smoothly: $.getJSON('/api/users', { sort: { username: 'asc' } }, funct ...

jqueryangularjsexpress

What advantages does utilizing NPM provide compared to directly incorporating the JavaScript library into an MVC project?

When working on an MVC project, I experimented with two different methods of including jQuery: I first downloaded the jQuery files and manually added them to the project, as shown here: https://i.sstatic.net/2TjqX.png I also tried using the bundle sett ...

javascriptjquerynpm

Ways to align a div in relation to a span element?

I have a large block of text within a div. I am seeking a way to create a hover effect on specific words within the text, which will then display a div below the word containing a customized div. This functionality resembles the feature on Wikipedia where ...

htmlcsspositioning

jQuery - Instances are sharing a variable

I'm currently developing an image slider plugin that functions well with a single instance. However, I encountered an issue when multiple instances are present on the same page - the variables are shared across these instances, specifically currentPos ...

jqueryscopejquery-pluginsmultiple-instances

I am encountering an issue with the material ui dropdown component in my react native app where I am receiving a TypeError stating that it cannot read the property 'style' of undefined. This error is likely caused

Upon installation of Material UI and importing The Dropdown component, I encountered the error TypeError: Cannot read property 'style' of undefined, js engine: hermes. This is my code import React, { useEffect, useState } from "react"; import { ...

javascriptreact-nativematerial-ui

jQuery UI fails to load correctly? Unable to find the Dialog method

I'm encountering a problem with my jQuery UI dialog specifically on this page: Despite it functioning correctly on all other pages of the site, I am receiving an error stating that the $("#DealerSearch") object does not have a dialog method. It' ...

javascriptjquery

Updating properties in the code-behind from JavaScript

I have a JavaScript function called Func() within my user control that updates the value of a hidden field. I am looking to also assign this hidden field value to a code-behind property in the same JavaScript function so that it can be accessed in the pare ...

javascriptasp.net

Demonstrating various elements within an application using Vue3

I created two components and attempted to display them in a Vue 3 application. Here is my HTML code: <div id="app"> <image_preview> URL: [[image]] </image_preview> <file_uploader> Counter:[[coun ...

javascripthtmlvue.jsvuejs3

Listening on port 80 with a Javascript Websocket server

My web server is running on port 80 and I have Websocket functionality implemented in its JavaScript. var wsURL = "ws://localhost:80/ws"; wsConn = new WebSocket(wsURL); However, I am encountering the following error: WebSocket connection to 'ws:/ ...

javascriptjqueryhtmlwebsocket

Crafting hover effects in Dreamweaver

Looking for a hover-over tutorial that divides the page in half? Check out these two diagrams below: https://i.sstatic.net/bkR1f.jpg https://i.sstatic.net/bqClq.png Basically, when hovering over any of the 3 buttons, I want to display another list of but ...

jquerycsshtmldreamweaver

Learn how to smoothly scroll to the top of a div by clicking on a team name

CSS Code .hover-div { position:absolute; margin-top:-150px; visibility:hidden; transition:all 0.5s linear 0s; } .team_hover:hover + .hover-div { margin-top:0px; visibility:visible; } .hover-div:hover { margin-top:0px; visi ...

angularjscss

Implementing a horizontal scroll bar for mobile view using this code tutorial

Can someone provide guidance on how to implement a horizontal scrollbar for mobile view with the following code? <ul class="nav nav-tabs nav-justified" id="menutabs" style="width: 100%;"> <li class="nav-item ...

htmlcssbootstrap-4

Await that's locked within a solo asynchronous function

async function submitForm(e){ e.preventDefault() console.log(e.target) try { const response = await axios.post('/api/<PATH>', {username, password}); console.log(response.data); const token = response.data.token if (t ...

javascriptasynchronousasync-awaitaxiosnext.js

Is there a way in CSS/3 to dynamically adjust the height based on the width?

Is there a way in CSS/3 to maintain the shape ratio of a div while keeping it responsive? Let's say the container is 100px wide. For example: width: 100%; height: 100%-of-width; Result: The div is 100px wide and 100px high. Another example: ...

javascripthtmlcssaspect

How to toggle between tabs in AngularJS with ui.bootstrap

I am facing an issue with setting up two buttons to switch to other two tabs on click, as it is not functioning properly. Below is the snippet of HTML code: <div ng-controller="TabCtrl"> <uib-tabset class="tabbable"> <uib-tab h ...

javascriptangularjsangular-ui-bootstrapui.bootstrap

I'm seeking advice on how to transform the code below from vanilla JavaScript to React. Any suggestions?

I am planning to convert this vanilla JavaScript code to React. The following are the HTML and JavaScript codes... HTML <div class="middle"> <img src="images/vr-iootz.jpg" draggable="false"/> ...

javascriptreactjs

The functionality of jquery .serialize is not effective when used on forms that are generated dynamically

Currently, I am utilizing Java/Spring within a .jsp file. The issue arises when attempting to dynamically load a form (including form tags) from myForm.jsp into a div in myPage.jsp and making an ajax post call with the data. Upon using jQuery .serialize a ...

jqueryhtmljsp

Add a series of characters to the conclusion of an element's property

Currently, I am working on a function that is tasked with adding and removing checkbox values in an array. The goal is to assign the array name based on the ID attribute of each element. For instance, if the ID is "color", the values will be pushed to the ...

javascriptjquery