Раскрывающийся список начальной загрузки не работает, может быть конфликт между jquery и webpacker? - PullRequest
Новая
       15

Раскрывающийся список начальной загрузки не работает, может быть конфликт между jquery и webpacker?

1 голос
/ 11 марта 2019

Я пытаюсь добавить эту боковую панель в мой проект rails, и кажется, что есть конфликт с моими Js и предоставленными js.

Так что, когда я нажимаю на раскрывающийся список боковой панели,он закрывается так же быстро, как и был открыт ..... Я попробовал этот код в новом приложении rails, и он работает ... Так что я думаю, что-то в моем беспорядке приложения, но я не могу найти что.В консоли браузера нет ошибок ...

Я завернул js-код примерно так в app/assets/sidebar.js У меня есть: 

$(document).on('turbolinks:load', function() {
  jQuery(function ($) {

  $(".sidebar-dropdown > a").click(function() {
    $(".sidebar-submenu").slideUp(200);
    if (
      $(this)
        .parent()
        .hasClass("active")
    ) {
      $(".sidebar-dropdown").removeClass("active");
      $(this)
        .parent()
        .removeClass("active");

        alert("I am in the if");
    } else {
      $(".sidebar-dropdown").removeClass("active");
      $(this)
        .next(".sidebar-submenu")
        .slideDown(200);
      $(this)
        .parent()
        .addClass("active");

        alert("I am in the else"); // this alert is working when i click
    }
  });

  $("#close-sidebar").click(function() {
    $(".page-wrapper").removeClass("toggled"); // this is working when i click
  });
  $("#show-sidebar").click(function() {
    $(".page-wrapper").addClass("toggled"); // this is working when i click
  });

});

});

В моем app/assets/application.js У меня есть: 

//= require jquery
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require cocoon
//= require highcharts
//= require chartkick
//= require_tree

В app/javascript/components/packs/application.js У меня есть: 

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)
import flatpickr from 'flatpickr'
import 'flatpickr/dist/flatpickr.min.css'
import { French } from "flatpickr/dist/l10n/fr.js"

flatpickr(".datepicker",{
    altInput: true,
    "locale": French

});

в приложении / views / layouts / aplication.html.erb 

<!DOCTYPE html>
<html>
  <head>
    <title>SuperShop</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400" rel="stylesheet">    
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag    'application' %>
    <%#= javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= render "admin/shared/menu" %>
    <%= render "layouts/admin/admin_nav" %>
    <%= render "layouts/shared/flashes" %>  
    <%= yield %>
    <%= javascript_pack_tag 'application' %> <!-- doit etre en dessous de turbolink -->
    <!-- !!!!!! Il faut laisser les javascript_tags sous le yield si non probleme de react--> 
  </body>
</html>
...