2023年1月9日 00:27:17go评论82阅读模式

英文:

Javascript doesn't run on back button or menu item click in my rails application

问题

在我的Rails 7中，我有以下Javascript代码，它包含在`profile.js`文件中：

window.addEventListener('load', function () {
  updateProfile();
})

window.onpageshow = function(event) {
  if (event.persisted) {
    window.location.reload();
  }
};

window.addEventListener('popstate', function() {
  updateProfile();
});

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // 处理页面恢复
    window.location.reload();
  }
});


function fileSelected() {
  // 获取选择的文件
  const file = document.querySelector('#fileInput').files[0];
  if (file == null){
    return 
  }

  // 创建一个新的FileReader对象
  const reader = new FileReader();

  // 为FileReader对象设置onload事件处理程序
  reader.onload = function(event) {
    // 更新头像的src属性
    document.querySelector('#profile-image').src = event.target.result;
  };

  // 以DataURL形式读取所选文件
  reader.readAsDataURL(file);
}

function updateProfile(){
  var toggle_switch = document.getElementById('toggle');
  var save_button = document.getElementById('save-button');

  let nameInput = document.getElementById('name');

  nameInput.addEventListener('input', function(event) {
    let error_element = document.getElementById('error-message-name');
    let regex = /^.{3,}$/; // 要求至少3个字符的正则表达式
  
    if (regex.test(value)) {
      // 值有效
      error_element.classList.remove("visible-error")
      error_element.classList.add("invisible-error")
    } else {
      // 值无效
      error_element.classList.remove("invisible-error")
      error_element.classList.add('visible-error');
    }
  });

  toggle_switch.addEventListener('click', function() {
    if (this.getAttribute('data-type') == "influencer"){
      this.setAttribute('data-type', "vender");
      document.getElementById('profile_type').value = "vender";
    }else{
      this.setAttribute('data-type', "influencer");
      document.getElementById('profile_type').value = "influencer";
    }
  });

  save_button.addEventListener('click', function() {
    let new_name = document.getElementById('name').value;
    let new_headline = document.getElementById('headline').value;
    let new_country = document.getElementById('country').value;
    let new_city = document.getElementById('city').value;
    let new_about = document.getElementById("about").value;
    let new_profile_type = document.getElementById('toggle').getAttribute('data-type');
    let div = document.getElementById('user_id');
    let user_id = div.getAttribute('data');
    var fileInput = document.getElementById("fileInput");
    var file = fileInput.files[0];
    
    if (file == null) {
      $.ajax({ // 没有上传新图像来更改
        type: "PATCH",
        url: encodeURI('/users/' + user_id),
        beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
        data: { user: { profile_type: new_profile_type, name: new_name, headline: new_headline, country: new_country, city: new_city, about: new_about} },
        success: function(response) {
          console.log("更新成功。")
        }
      });
    } else {
        const formData = new FormData();
        formData.append("avatar", file);

        $.ajax({
          url: encodeURI('/users/' + user_id),
          type: "PUT",
          beforeSend(xhr, options) {
            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
            xhr.setRequestHeader('image-change', true);
            options.data = formData;
          },
          success: function(response) {
            console.log("图像更新成功。")
          },
          error: () => {
            alert("出现问题，请重试。");
          }
        });

    }
  });

}

英文:

I have the following Javascript code contained in my profile.js file in Rails 7:

window.addEventListener(&#39;load&#39;, function () {
updateProfile();
})
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
window.addEventListener(&#39;popstate&#39;, function() {
updateProfile();
});
window.addEventListener( &quot;pageshow&quot;, function ( event ) {
var historyTraversal = event.persisted || 
( typeof window.performance != &quot;undefined&quot; &amp;&amp; 
window.performance.navigation.type === 2 );
if ( historyTraversal ) {
// Handle page restore.
window.location.reload();
}
});
function fileSelected() {
// Get the selected file
const file = document.querySelector(&#39;#fileInput&#39;).files[0];
if (file == null){
return 
}
// Create a new FileReader object
const reader = new FileReader();
// Set the onload event handler for the FileReader object
reader.onload = function(event) {
// Update the src attribute of the profile image
document.querySelector(&#39;#profile-image&#39;).src = event.target.result;
};
// Read the selected file as a DataURL
reader.readAsDataURL(file);
}
function updateProfile(){
var toggle_switch = document.getElementById(&#39;toggle&#39;);
var save_button = document.getElementById(&#39;save-button&#39;);
let nameInput = document.getElementById(&#39;name&#39;);
nameInput.addEventListener(&#39;input&#39;, function(event) {
let error_element = document.getElementById(&#39;error-message-name&#39;);
let regex = /^.{3,}$/; // Regex that requires at least 3 characters
if (regex.test(value)) {
// Value is valid
error_element.classList.remove(&quot;visible-error&quot;)
error_element.classList.add(&quot;invisible-error&quot;)
} else {
// Value is invalid
error_element.classList.remove(&quot;invisible-error&quot;)
error_element.classList.add(&#39;visible-error&#39;);
}
});
toggle_switch.addEventListener(&#39;click&#39;, function() {
if (this.getAttribute(&#39;data-type&#39;) == &quot;influencer&quot;){
this.setAttribute(&#39;data-type&#39;, &quot;vender&quot;);
document.getElementById(&#39;profile_type&#39;).value = &quot;vender&quot;;
}else{
this.setAttribute(&#39;data-type&#39;, &quot;influencer&quot;);
document.getElementById(&#39;profile_type&#39;).value = &quot;influencer&quot;;
}
});
save_button.addEventListener(&#39;click&#39;, function() {
let new_name = document.getElementById(&#39;name&#39;).value;
let new_headline = document.getElementById(&#39;headline&#39;).value;
let new_country = document.getElementById(&#39;country&#39;).value;
let new_city = document.getElementById(&#39;city&#39;).value;
let new_about = document.getElementById(&quot;about&quot;).value;
let new_profile_type = document.getElementById(&#39;toggle&#39;).getAttribute(&#39;data-type&#39;);
let div = document.getElementById(&#39;user_id&#39;);
let user_id = div.getAttribute(&#39;data&#39;);
var fileInput = document.getElementById(&quot;fileInput&quot;);
var file = fileInput.files[0];
if (file == null) {
$.ajax({ //A new image was not uploaded for change
type: &quot;PATCH&quot;,
url: encodeURI(&#39;/users/&#39; + user_id),
beforeSend: function(xhr) {xhr.setRequestHeader(&#39;X-CSRF-Token&#39;, $(&#39;meta[name=&quot;csrf-token&quot;]&#39;).attr(&#39;content&#39;))},
data: { user: { profile_type: new_profile_type, name: new_name, headline: new_headline, country: new_country, city: new_city, about: new_about} },
success: function(response) {
console.log(&quot;Update success.&quot;)
}
});
} else {
const formData = new FormData();
formData.append(&quot;avatar&quot;, file);
$.ajax({
url: encodeURI(&#39;/users/&#39; + user_id),
type: &quot;PUT&quot;,
beforeSend(xhr, options) {
xhr.setRequestHeader(&#39;X-CSRF-Token&#39;, $(&#39;meta[name=&quot;csrf-token&quot;]&#39;).attr(&#39;content&#39;));
xhr.setRequestHeader(&#39;image-change&#39;, true);
options.data = formData;
},
success: function(response) {
console.log(&quot;Image Update success.&quot;)
},
error: () =&gt; {
alert(&quot;An issue occured. Please try again.&quot;);
}
});
}
});
}

This code should be run when a user navigates to my profile page with the following html.erb:

&lt;head&gt;
&lt;%= stylesheet_link_tag &#39;linked_card&#39;, media: &#39;all&#39;, &#39;data-turbolinks-track&#39;: &#39;reload&#39; %&gt;
&lt;%= stylesheet_link_tag &#39;profile_card&#39;, media: &#39;all&#39;, &#39;data-turbolinks-track&#39;: &#39;reload&#39; %&gt;
&lt;%= stylesheet_link_tag &#39;alert&#39;, media: &#39;all&#39;, &#39;data-turbolinks-track&#39;: &#39;reload&#39; %&gt;
&lt;%= javascript_include_tag &quot;profile&quot;, &quot;data&quot;: { &quot;turbolinks-track&quot;: &quot;reload&quot; } %&gt;
&lt;/head&gt;
&lt;header&gt;
&lt;%= render partial: &quot;layouts/header&quot; %&gt; 
&lt;/header&gt;
&lt;body class = &quot;profile_main_body&quot;&gt;
&lt;%= render partial: &quot;layouts/profile_card&quot;, locals: { user: @user } %&gt; 
&lt;br&gt;
&lt;br&gt;
&lt;div class=&quot;col-md-6 mx-auto text-center&quot;&gt;
&lt;h3 class=&quot;heading-black&quot;&gt;Link Accounts&lt;/h3&gt;
&lt;p class=&quot;text-muted lead&quot;&gt;Click the button below to link an account to your profile. You will be redirected to the chosen service.&lt;/p&gt;
&lt;a href=&quot;&lt;%= user_profile_path(@user.username)%&gt;&quot; class=&quot;border px-3 p-1 add-experience&quot;&gt;&lt;i class=&quot;fa fa-link&quot;&gt;&lt;/i&gt;&amp;nbsp;Link Account&lt;/a&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;%= render partial: &quot;layouts/linked_card&quot; %&gt;
&lt;%= render partial: &quot;layouts/linked_card&quot; %&gt; 
&lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;/body&gt;
&lt;footer&gt;
&lt;%= render partial: &quot;layouts/footer&quot; %&gt; 
&lt;/footer&gt;

I added the following line:

&lt;%= javascript_include_tag &quot;profile&quot;, &quot;data&quot;: { &quot;turbolinks-track&quot;: &quot;reload&quot; } %&gt;

Because I was thinking this is a turbolinks issue. Nothing has changed though with the line above. Is there anyway I can re-run the my javascript when the user clicks a turbo link? The javascript runs fine on a full page reload. Any help would be great thanks!

答案1

得分: 1

Turbolinks在Rails 7中被Turbo取代。但是在处理JavaScript时，有很多重叠之处。

Turbolinks/Turbo（或几乎任何SPA框架）会在页面之间创建持久的浏览器会话。以“当页面加载时，我想要附加一个事件处理程序到X，执行Y”的方式思考，可能在十年前的基本JS教程中还可以，但实际上是适得其反的：

当元素被动态插入到DOM中时，它不起作用。就像Turbo Drive或Turbolinks替换页面内容时一样。或者每当人们尝试首次插入通过AJAX加载的内容时。
直接向一堆元素添加事件处理程序会增加很多开销。
如果你钩入一个事件像turbolinks:change，你可能会多次向同一个元素添加事件处理程序。仅仅切换加载/就绪事件以适应Turbo/Turbolinks等效并不一定会修复糟糕的代码，而可能只会引入新问题。
这是一个有缺陷的心理模型，因为你构建JS只是为了“在页面Y上frobnob X”，而不是考虑可重用的UI组件或以可重用的方式增强元素的行为。

那么应该怎么办？

不要直接为所有东西分配ID和事件处理程序。你最终只会得到重复的ID和混乱的JS。

相反，使用委托来捕获事件，当事件冒泡到DOM的顶部时：

// 当用户单击class="foo"的按钮时执行一些令人惊叹的操作
document.addEventListener('click', function(event){
let el = event.target;
if (!el.matches('.foo')) return;
// ...
});

使用类和属性来定位元素，而不是ID。现在不是2010年了，查询DOM要快得多。

使用DOM遍历和表单API来获取与点击/更改等事件相关的元素。记住，在JS中函数实际上可以接受参数。如果需要从后端传递附加信息到你的JS，使用数据属性。

这基本上就是Stimulus所做的：

<div data-controller="hello">
<input type="text">
<button>Greet</button>
</div>

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
console.log("Hello, Stimulus!", this.element)
}
}

英文:

Turbolinks is replaced by Turbo in Rails 7. However there is a lot of overlap in how you should think about JS.

Turbolinks/Turbo (or almost any SPA framework for that matter) creates a persistent browser session across pages. Thinking in terms of "when the page is loaded I want to attach an event handler to X that does Y" might have been OK in a basic JS tutorial ten years ago but is actually counter-productive:

It doesn't work when elements are inserted dynamically into the DOM. Like when Turbo Drive or Turbolinks replaces the page contents. Or whenever people try to insert content loaded with AJAX for the first time.
Adding event handlers directly to a bunch of elements adds a lot of overhead.
If you hook into an event like turbolinks:change you might be adding the event handler multiple times to the same element. Just switching out the load/ready event for the Turbo/Turbolinks equivilent won't necissarily fix stinky code and may just introduce new issues.
It's a broken mental model as you build your JS to just "frobnob X on page Y" instead of thinking in terms of reusable UI components or augmenting the behavior of elements in a reusable way.

So what then?

Stop assigning IDs and event handlers directly to everything. You're just going to end up with duplicate IDs and garbage JS.

Instead use delegation to catch the event as it bubbles to the top of the DOM:

// Do something awesome when the user clicks buttons with class=&quot;foo&quot;
document.addEventHandler(&#39;click&#39;, function(event){
let el = event.target;
if (!el.matches(&#39;.foo&#39;)) return;
// ...
});

Use classes and attributes to target elements. Not ID's. Its not 2010 and querying the DOM is much faster.

Use DOM traversal and the form API to get elements relative to the element that was clicked/changed/etc. Remember that in JS functions can actually take arguments. Use data attributes if you need to pass additional information from the backend to your JS.

This is basically what Stimulus does:

&lt;div data-controller=&quot;hello&quot;&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;button&gt;Greet&lt;/button&gt;
&lt;/div&gt;

// src/controllers/hello_controller.js
import { Controller } from &quot;@hotwired/stimulus&quot;
export default class extends Controller {
connect() {
console.log(&quot;Hello, Stimulus!&quot;, this.element)
}
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

JavaScript 在我的 Rails 应用程序中不会在后退按钮或菜单项点击时运行。

问题

答案1

那么应该怎么办？

So what then?

Ruby on Rails – 在模型中将邮件发送作为回调测试

如何将HTML页面上的所有文本转换为单个字符串，同时保留CSS？

Ruby中的gsub使用`"\'"`。

如何确保 Bootstrap 5 验证中至少有一个输入字段不为空

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论