www.91084.com

GVKun编程网logo

带有turbolinks的Rails Javascript仅在页面刷新时正确加载

13

如果您对带有turbolinks的RailsJavascript仅在页面刷新时正确加载感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于带有turbolinks的RailsJa

如果您对带有turbolinks的Rails Javascript仅在页面刷新时正确加载感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于带有turbolinks的Rails Javascript仅在页面刷新时正确加载的详细内容，并且为您提供关于Angular：某些样式/jQuery 插件只能在页面刷新时正确加载、Coffeescript JQuery点击仅在页面刷新时工作、JavaScript Rails 4：如何在Turbo-Links中使用$ {document）.ready（）、javascript – Chrome扩展内容脚本在页面刷新之前不会被加载的有价值信息。

本文目录一览：

带有turbolinks的Rails Javascript仅在页面刷新时正确加载

带有turbolinks的Rails Javascript仅在页面刷新时正确加载

在掌握Michael Hartls Rails教程之后,我现在正在尝试编写我自己的第一个ROR 5 Apllication.现在,我正在尝试在我的应用程序内的页面上实现JavaScript. Javascript在html中显示时间并在表单内显示一个因子(根据时间),该因子在加载时计算给定(吃掉)碳水化合物量的胰岛素.

这是Javascript文件bolus_rechner.js：

//Standard Data for a 3 Year old child
let dFakTni = 0.5; 
let faKtmor = 1.3;
let faKtnoon = 0.8;
let fakTeven = 0.5;

let d = new Date();
let h = d.getHours();
let m = d.getMinutes();

let uhrZeit = function zeit() {
    if (h < 10) { h = '0' + h; }
    if (m < 10) { m = '0' + m; }
    return (h + ":" + m + " Uhr");
}

function time(){
    let uHr = document.getElementById("Uhrzeit");
    uHr.innerHTML = "Es ist " + uhrZeit() + ".";
}
// displaying the Timebased carbohydrate Faktor (BE-Faktor) and the actual time inside the form and htmluhrzeit document.addEventListener("turbolinks:load", 
function timeFakt() {

    time();

    let beFaktor = document.getElementById("faktor");
    if (h > 20 || h < 6) {
     beFaktor.value = dFakTni;

    }
    else if (h >= 6 && h < 11) {
     beFaktor.value = faKtmor;

    }

    else if (h >= 11 && h < 18) {
     beFaktor.value = faKtnoon;

    }
    else if (h >= 18 && h <= 20) {
        beFaktor.value = fakTeven;

 }

};
document.addEventListener("turbolinks:load", timeFakt);

// Possibiltiy to change the carbohydrate factor (BE Faktor)

function faktorAendern() {
    let beFaktor = document.getElementById("faktor");

    if (h > 20 || h < 6) {

     dFakTni = beFaktor.value;
    }
    else if (h >= 6 && h < 11) {

        faKtmor = beFaktor.value;
    }

    else if (h >= 11 && h < 18) {

        faKtnoon = beFaktor.value;
    }
    else if (h >= 18 && h <= 20) {

        fakTeven = beFaktor.value;
    };


};

// Calculation of the needed insulin for the amount of carbohydrates eaten

function insulinBerechnen() {

    let eat = document.getElementById("be").value;
    let uLin = document.getElementById("insulin");
    let prod1 = (eat * dFakTni).toFixed(2);
    let prod2 = (eat * faKtmor).toFixed(2);
    let prod3 = (eat * faKtnoon).toFixed(2);
    let prod4 = (eat * fakTeven).toFixed(2);

    if (h > 20 || h < 6) {

        uLin.innerHTML = prod1.toString();
    }
    else if (h >= 6 && h < 11) {

        uLin.innerHTML = prod2.toString();
    }

    else if (h >= 11 && h < 18) {

        uLin.innerHTML = prod3.toString();
    }
    else if (h >= 18 && h <= 20) {

        uLin.innerHTML = prod4.toString();
    };

};

这是HTML：
application.html.erb：

<html>
  <head>
   <title><%= full_title(yield(:title)) %></title>
    <%= render 'layouts/rails_default' %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
  <%= render 'layouts/header' %>
    <div>
      <%= yield %>
      <%= render 'layouts/footer' %> 
      <%= debug(params) if Rails.env.development? %>     
    </div>
  </body>
</html>

bolus.html.erb：

<% provide(:title, "Bolus Rechner") %>



<body>

            <h1>My Diabetes Diary</h1>



            <h2>Bolus Rechner</h1>
            <h4id="Uhrzeit"></h4>





      <div>
  <form>
    <div>

      <label for="be">gegessene BE</label>
      <div>
        <input type="number"id="be" name="be">
        <!--<small id="be-info">
              (Hier können Sie die gegessenen Kohlenhydrate in broteinheiten eingeben.) 
        </small>-->
      </div>
    </div>
    <div>
      <label for="faktor">BE-Faktor</label>
      <div>
        <input type="number"id="faktor" name="faktor" value="">
        <!--<small id="faktor">
                (Hier können Sie den aktuellen BE-Faktor ändern, wenn nötig.) 
        </small>-->
        </div>
        <div>
              <buttontype="button" onclick="faktorAendern()">ändern</button>

      </div>
    </div>
    <div>
      <div>
        <button type="button"onclick="insulinBerechnen()">Insulin berechnen</button>
      </div>
      </div>
     <div> 
      <div>

              Sie müssen <strong id="insulin"></strong> U (Insulineinheiten) spritzen

      </div>
      </div>
      </div>
  </form>
  </body>
  <head><%= javascript_include_tag "Bolus_Rechner"%></head>

这是标题_header.html.erb：

<header>
      <nav>

      <ahref="#">My Diabetes Diary</a>


        <ul>
          <li>
            <%= link_to "Home",   root_path, :class => "nav-link" %>
          </li>
          <li>
            <%= link_to "Help",   static_pages_help_path, :class => "nav-link"%>
          </li>
          <li>
            <%= link_to "About",  static_pages_about_path, :class => "nav-link"  %>
          </li>
          <li>
            <%= link_to "Bolus Rechner",  static_pages_bolus_path, :class => "nav-link" %>
          </li>
        </ul>

     </nav>
</header>

这是rails_default partial _rails_default.html.erb：

<%= csrf_Meta_tags %>
<%= stylesheet_link_tag    'application', media: 'all',
                                          'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>
<%= render 'layouts/shim' %>

我的问题：

1)
使用turbolinks时：加载为事件触发器,当我刷新页面时一切正常.当我按下标题内的“Bolus”链接时,它第一次正常工作.每次我按下Bolus Link时,由于我的zeit()函数,因此将零(0)添加到“Uhrzeit”的innerhtml中.据我所知,这是因为turbolinks兑换了第一个渲染的bolus.html,每次按下链接时,只会在已计算的时间内增加一个零.有谁知道我怎么能阻止turbolinks这样做.

2)每次从我的应用程序加载不同的页面/动作时,时间显示都会添加零(0).如何防止rails / turbolinks这样做,并确保仅在我按下推注路径的链接时才加载bolus_rechner.js.

提前谢谢你的帮助

解决方法:

我找到了解决方案. JavaScript(bolus_rechner.js)是问题,特别是指定函数以在全局变量中显示时间.
当使用turbolinks时,JS被缓存在网站/应用程序的全局命名空间中,并且每次应用程序的另一个站点加载脚本时都会执行,因为事件监听器带有turbolinks：load.函数zeit()及其返回值分配给uhrZeit. uhrZeit()由time()执行,time由timefakt()执行.

let uhrZeit = function zeit() {
    if (h < 10) { h = '0' + h; }
    if (m < 10) { m = '0' + m; }
    return (h + ":" + m + " Uhr");
}

这意味着,当脚本第一次执行,实际时间为8h 7m时,时间显示为08:07.下次调用应用程序的站点时,将8和7分别与10进行比较,它仍然小于10.然后将另一个零添加到返回的字符串,依此类推.还有很多错误,因为在bolus.html.erb以外的网站上,html元素与各自的id不存在,导致大量的引用和类型错误.

解决方案是消除全局变量并使用辅助函数创建时间并在其他函数中使用它们
新脚本如下所示：

function currentMinutes(){
    let date = new Date();
    return date.getMinutes();
}
function currentHours(){
    let date = new Date();
    return date.getHours();
}
function time() {
    let hours = currentHours()
    let minutes = currentMinutes()
    if (hours < 10) { hours = '0' + hours; }
    if (minutes < 10) { minutes = '0' + minutes; }
    return (hours + ":" + minutes + "Uhr");
}

function showTime(){
    let uHr = document.getElementById("Uhrzeit");
    //checking if the id exists on the page
    if (uHr === null){return}
    uHr.innerHTML = "Es ist " + time() + ".";
}
// displaying the Timebased carbohydrate Faktor (BE-Faktor) and the actual time inside the form and html
function timeFakt() {
    showTime();
    let hours = currentHours()
    let beFactorNight = 0.5; 
    let beFactorMorning = 1.3;
    let beFactorNoon = 0.8;
    let beFactorEvening = 0.5;

    let beFactor = document.getElementById("faktor");
    //checking if the id exists on the page
    if (beFactor === null){return}
    if (hours > 20 || hours < 6) {
     beFactor.value = beFactorNight;

    }
    else if (hours >= 6 && hours < 11) {
     beFactor.value = beFactorMorning;

    }

    else if (hours >= 11 && hours < 18) {
     beFactor.value = beFactorNoon;

    }
    else if (hours >= 18 && hours <= 20) {
        beFactor.value = beFactorEvening;

 }

};
document.addEventListener("turbolinks:load", timeFakt);

// Calculation of the needed insulin for the amount of carbohydrates eaten

function insulinBerechnen() {
    //Form validation and checking if the ids exist on the page
    let eat = document.getElementById("be").value;
    if( eat <= 0){
        alert("If the carbs you ate are zero or below you don't need any insulin"); 
        return};
    let beFaktor = document.getElementById("faktor");
    if (beFaktor === null){return};
    if( beFaktor.value <= 0){
        alert("Enter a Valid factor bigger than 0"); 
        return};

    let uLin = document.getElementById("insulin");

    //calculating the Insulin according to the time of day
    let hours = currentHours()
    if (hours > 20 || hours < 6) {
        if (beFaktor.value === ""){beFactorNight = 0.5}
        else {beFactorNight = beFaktor.value};
        uLin.innerHTML = (eat * beFactorNight).toFixed(2).toString();
    }
    else if (hours >= 6 && hours < 11) {
        if (beFaktor.value === ""){beFactorMorning = 1.3}
        else {beFactorMorning = beFaktor.value};
        uLin.innerHTML = (eat * beFactorMorning).toFixed(2).toString();
    }

    else if (hours >= 11 && hours < 18) {
        if (beFaktor.value === ""){beFactorNoon = 0.8}
        else {beFactorNoon = beFaktor.value};
        uLin.innerHTML = (eat * beFactorNoon).toFixed(2).toString();
    }
    else if (hours >= 18 && hours <= 20) {
        if (beFaktor.value === ""){beFactorEvening = 0.8}
        else {beFactorEvening = beFaktor.value};
        uLin.innerHTML = (eat * beFactorEvening).toFixed(2).toString();
    };

};

我还添加了一种表单验证来检查0和更低的值.
这是一些艰苦的工作,但我从中学到了一个重要的教训.
也许这篇文章可以帮助其他新手程序员用turbolink解决他们的Javascript问题,并更好地理解JavaScript在RoR5应用程序环境中的工作原理.
 干杯塞巴斯蒂安

Angular：某些样式/jQuery 插件只能在页面刷新时正确加载

Angular：某些样式/jQuery 插件只能在页面刷新时正确加载

如何解决Angular：某些样式/jQuery 插件只能在页面刷新时正确加载？

我下载了一个 HTML 模板并按照以下步骤将其转换为 Angular 项目 (https://www.freelancingdesign.com/step-by-step-to-convert-html-template-to-angular-7-template/)

当我重新加载任何页面时一切正常，但是当我在组件之间导航时，一些插件（例如：owl-carousel）不起作用。

angular.json 文件：

"styles": [
          "src/assets/css/bootstrap-reboot.min.css","src/assets/css/bootstrap-grid.min.css","src/assets/css/owl.carousel.min.css","src/assets/css/magnific-popup.css","src/assets/css/select2.min.css","src/assets/css/paymentfont.min.css","src/assets/css/slider-radio.css","src/assets/css/plyr.css","src/assets/css/main.css","src/styles.css"
        ],"scripts": [
          "src/assets/js/jquery-3.5.1.min.js","src/assets/js/bootstrap.bundle.min.js","src/assets/js/owl.carousel.min.js","src/assets/js/jquery.magnific-popup.min.js","src/assets/js/smooth-scrollbar.js","src/assets/js/select2.min.js","src/assets/js/slider-radio.js","src/assets/js/jquery.inputmask.min.js","src/assets/js/plyr.min.js","src/assets/js/main.js"
        ]

开发工具中没有错误。 有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

Coffeescript JQuery点击仅在页面刷新时工作

Coffeescript JQuery点击仅在页面刷新时工作

我有一个使用coffeescript的rails应用程序.当我刷新页面或使用URL直接转到页面时,以下代码可以正常工作.当我点击链接进入此页面并尝试它时,它根本不起作用.为什么会这样？ 

jQuery ->
  console.log "Ready."
  $('form').on 'click','.add_fields',(event) ->
    console.log "Click."
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'),'g')
    $(this).before($(this).data('fields').replace(regexp,time))
    event.preventDefault()

重新加载后,我会在适当的时候准备好并点击它,它可以工作.从另一页面点击后,我什么都没得到.我也从chrome获得了这个弃用警告,我不确定如何解决,因为它来自JQuery本身：

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
jquery.js?body=1:5375

只有当上面的代码不起作用时才会显示错误.镀铬会阻挡它吗？我正在使用jquery-rails(3.0.4)

解决方法

事实证明,导致问题的是turbolinks.感谢davidburber指出这一点.这是我做的修复它(从 Rails 4: how to use $(document).ready() with turbo-links) 

ready = ->
  $('form').on 'click','.remove_fields',(event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()


$(document).ready(ready)
$(document).on('page:load',ready)

JavaScript Rails 4：如何在Turbo-Links中使用$ {document）.ready（）

JavaScript Rails 4：如何在Turbo-Links中使用$ {document）.ready（）

尝试以“ rails方式”组织JS文件时，我在Rails
4应用程序中遇到了一个问题。它们以前分散在不同的视图中。我将它们组织到单独的文件中，并通过资产管道进行编译。但是，我刚刚了解到，在打开Turbo链接时，jQuery的“就绪”事件不会在随后的点击中触发。首次加载页面时，它可以工作。但是，当您单击链接时，其中的任何内容ready( function($){都不会执行（因为该页面实际上不会再次加载）

所以我的问题是：在涡轮链接打开时，确保jQuery事件正常工作的正确方法是什么？您是否将脚本包装在特定于Rails的侦听器中？或者，也许rails具有某种使它不必要的魔力？该文档对如何工作有点含糊不清，尤其是在通过清单（如application.js）加载多个文件方面。

javascript – Chrome扩展内容脚本在页面刷新之前不会被加载

javascript – Chrome扩展内容脚本在页面刷新之前不会被加载

我有一个Chrome扩展内容脚本,我想在Trello板上运行.现在,它只包含： 
console.log("Hello,world!");

当您通过内部链接打开Trello板页面时,像My Boards页面那样,内容脚本不会运行.它在运行后刷新页面虽然.

我的清单文件包含：

{
  "manifest_version": 2,"name": "Temp Ext","version": "1.0","content_scripts": [
    {
      "matches": ["*://trello.com/b/*"],"js":["contentscript.js"]
    }
  ]
}

任何人都可以帮助我找出为什么脚本在页面初始加载时不运行？

编辑：更正的问题.问题只发生在以下内部链接之后,而不是任何链接.

解决方法

问题是 Trello uses HTML5’s pushState用于页面转换,因此在打开单板后,内容脚本并不总是运行.

解

清单变更：

{
  "manifest_version": 2,"version": "1.1","content_scripts": [{
    "matches": ["*://trello.com/*"],"js":["contentscript.js"]
  }],"background": {
    "scripts": ["background.js"]
  },"permissions": [
    "*://trello.com/*","tabs","webNavigation"
  ]
}

添加背景脚本：

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
    chrome.tabs.executeScript(null,{file:"contentscript.js"});
});

关于带有turbolinks的Rails Javascript仅在页面刷新时正确加载的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于Angular：某些样式/jQuery 插件只能在页面刷新时正确加载、Coffeescript JQuery点击仅在页面刷新时工作、JavaScript Rails 4：如何在Turbo-Links中使用$ {document）.ready（）、javascript – Chrome扩展内容脚本在页面刷新之前不会被加载等相关内容，可以在本站寻找。

本文标签：

上一篇除了动态类型,是什么让Ruby“比Java更灵活”？

下一篇带有Mysql Master / Slave的Datamapper（mysql daul）

相关文章