Ruby on Rails 4: Probleme beim Hinzufügen von Javascript-Dateien in Rails Web-Anwendung

Ich habe Probleme beim Hinzufügen von Javascript in meine Rails-Anwendung. Ich habe das Javascript direkt in meine application.html.erb Datei hinzugefügt und es funktioniert nur Datei. Hier ist das ein Skript unter:Ruby on Rails 4: Probleme beim Hinzufügen von Javascript-Dateien in Rails Web-Anwendung

// Javascript //

$("#accordion").accordion(); 



var availableTags = [ 

]; 
$("#autocomplete").autocomplete({ 
    source: availableTags 
}); 



$("#button").button(); 
$("#radioset").buttonset(); 



$("#tabs").tabs(); 



$("#dialog").dialog({ 
    autoOpen: false, 
    width: 400, 
    buttons: [ 
     { 
      text: "Ok", 
      click: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     { 
      text: "Cancel", 
      click: function() { 
       $(this).dialog("close"); 
      } 
     } 
    ] 
}); 

// Link to open the dialog 
$("#dialog-link").click(function(event) { 
    $("#dialog").dialog("open"); 
    event.preventDefault(); 
}); 



$("#datepicker").datepicker({ 
    inline: true 
}); 



$("#slider").slider({ 
    range: true, 
    values: [ 17, 67 ] 
}); 



$("#progressbar").progressbar({ 
    value: 20 
}); 



$("#spinner").spinner(); 



$("#menu").menu(); 



$("#tooltip").tooltip(); 



$("#selectmenu").selectmenu(); 


// Hover states on the static widgets 
$("#dialog-link, #icons li").hover(
    function() { 
     $(this).addClass("ui-state-hover"); 
    }, 
    function() { 
     $(this).removeClass("ui-state-hover"); 
    } 
);

Dies um <script> Tags in meiner application.html.erb Datei ohne Probleme eingewickelt wurde. Sobald ich eine Datei namens theme.js erstellt und es in „/ vendor/assets/Javascripts“ und aktualisiert meine application.js Datei:

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require_tree . 
//= require theme

Es funktioniert nicht mehr. Ich habe versucht, die theme.js auch in "app/assets/javascripts" zu schreiben und es hat auch nicht funktioniert.

Dies ist der Kopf der application.html.erb Datei:

<!DOCTYPE html> 
<html class="bootstrap-layout"> 
<head> 
    <title>App</title> 

    <!-- Material Design Icons --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!-- Roboto Web Font --> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 



    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', "data-turbolinks-track" => true %> 
    <%= javascript_include_tag 'https://code.jquery.com/jquery-2.2.3.js' %> 
    <%= javascript_include_tag 'https://code.jquery.com/ui/1.11.4/jquery-ui.js' %> 

    <%= csrf_meta_tags %> 
</head>

Ich bin sicher, dass es etwas von grundlegender Bedeutung ist mir persönlich fehlt, ich weiß nur nicht, was es ist. Ich habe auch Turbolinks entfernt, weil ich dachte, das könnte das Problem sein, aber das Entfernen hat nichts bewirkt.

Quelle

2016-04-25 M.T Davis

M.T., sollten Sie mit diesem beginnen: http://edgeguides.rubyonrails.org/asset_pipeline.html –

@SzilardMagyar, habe ich diese Seite gelesen, aber ich werde es wieder lesen. –

Da es keine Bibliothek ist, sondern eine Reihe von benutzerdefinierten js, sollten Sie es wieder in die App/assets/theme.js, in der Sie es hatten, und nicht in Ihren Lieferanten-js-Ordner. Sie müssen es dann nicht speziell anfordern, da Sie in Ihrer Datei application.js die Anweisung "require tree" haben, die automatisch alle Dateien in Ihrem Ordner "assets/js" enthält.

Außerdem ist es in der Regel eine gute Idee, all das Innere eines

$(document).ready(function() { 
    all your js here... 
});

Es wickeln kann sein, dass Ihre js, bevor die Seite geladen ist jetzt, dass Sie es in die Asset-Pipeline, an dem bewegte sich der Punkt DOM wird noch nicht vom Browser kompiliert und alle Ihre js sind kaputt.

Quelle

2016-04-26 01:47:41 bkunzi01

Das hat mein Problem gelöst. Ich muss tiefer in dieses Thema einsteigen. Ich schätze Ihre Hilfe. –

Jederzeit. Abgesehen von den Rails Docs fand ich diesen Beitrag, der mir vor einiger Zeit sehr geholfen hat, wenn man den Rails-Sass-Edelstein benutzt. Lies zuerst die Dokumentation und dann den Sprung zu @import vs require. http://stackoverflow.com/questions/6074173/should-i-use-import-or- Manifest- files && https://github.com/rails/sass-rails#important-note – bkunzi01

Ruby on Rails 4: Probleme beim Hinzufügen von Javascript-Dateien in Rails Web-Anwendung

Antwort

Verwandte Themen