Table: WebNotes
User: dreamable
Created at: 2022-02-09 22:45:22 UTC
Updated at: 2022-02-09 23:02:45 UTC
Reference:(Table ID 25, Record ID 7)

标题 :
bootstrap5 updates
笔记 :
    <ul class="navbar-nav me-auto">
      <li class="nav-item">
        <%= link_to t('cloud'), home_index_path, class:"nav-link" %>
      </li>
    </ul>

    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <%= link_to t('cloud'), home_index_path, class:"nav-link" %>
      </li>
    </ul>
Tag:
Table: WebNotes
User: dreamable
Created at: 2021-05-02 22:03:59 UTC
Updated at: 2021-05-02 22:06:07 UTC
Reference:(Table ID 25, Record ID 6)

标题 :
bootstrap making dropdown scrollable
笔记 :

guide

  • inline style
style="overflow-y:auto; max-height:80vh"
  • CSS for all
.dropdown-menu {
 overflow-y:auto; 
 max-height:80vh
}
Tag:
Table: WebNotes
User: dreamable
Created at: 2021-03-05 11:45:34 UTC
Updated at: 2021-03-05 11:45:34 UTC
Reference:(Table ID 25, Record ID 5)

标题 :
JS import vs require
笔记 :

guide

  1. require is for CommonJS (node.js way to load modules)
  2. import is for ES6. But not supported via CommonJS by browsers
Tag:
Table: WebNotes
User: dreamable
Created at: 2021-03-02 11:56:58 UTC
Updated at: 2021-03-02 11:56:58 UTC
Reference:(Table ID 25, Record ID 4)

标题 :
Clear form fields with jQuery
笔记 :

guide

$('yourdiv').find('form')[0].reset();
Tag:
Table: WebNotes
User: dreamable
Created at: 2021-02-25 07:44:00 UTC
Updated at: 2021-02-25 07:44:14 UTC
Reference:(Table ID 25, Record ID 3)

标题 :
Find element that has either class 1 or class 2
笔记 :

$(".a, .b")
this will match all elements with class a OR class b

Tag:
Table: WebNotes
User: dreamable
Created at: 2021-01-29 12:16:11 UTC
Updated at: 2021-01-29 12:16:11 UTC
Reference:(Table ID 25, Record ID 2)

标题 :
onblur infinite loop issue in Safari
笔记 :

问题: onblur触发alter,然后在safari下死循环

根源:Root Cause: Each time clicking on 'Ok' button of the alert, onblur happens and we are trapped in an infinite loop.

解决

        alert('wrong !!!');
        setTimeout(function(){
            field.focus();
        },0);

注意必须使用setTimeout,直接focus不能work。设置field.value为空不是必须的。

遗留问题:如果用tab转到下一个form field,也有onblur事件,还是死循环。

解决方法:如果value是空,则忽略,不触发alter

更多讨论:1, 2

Tag:
Table: WebNotes
User: dreamable
Created at: 2021-01-19 12:35:01 UTC
Updated at: 2021-01-19 12:35:01 UTC
Reference:(Table ID 25, Record ID 1)

标题 :
How to update all IDs by Javascript
笔记 :

guide

var data = "<div id='1'></div><input type='text' id='2'/>";
var output = $("<div></div>").html(data); // Convert string to jQuery object
output.find("[id]").each(function() { // Select all elements with an ID
   var target = $(this);
   var id = target.attr("id"); // Get the ID
   target.attr("id", id + "_" + numCompare); // Set the id
});
console.log(output.html());

I use it for add an similar item for array in ShujuQiu project. However, when it's cloned, all ID the same with the original one. I need to update all IDs to make them unique. Otherwise, Javascript will be confused.

  $('form').on('click', '.add_record_array_element', function(event) {
    console.log("DEBUG:: add record array element!")
    // Find the first parent with class "record_array_element"
    item = $(this).parents('.record_array_element').first()
    // Record cell
    cell = item.parent();
    // Clone
    new_item = item.clone()
    // Add prefix to all IDs to make them uniq. https://stackoverflow.com/questions/16465694
    var time = new Date().getTime();
    new_item.find("[id]").each(function() { // Select all elements with an ID
       var target = $(this);
       var id = target.attr("id");         // Get the ID
       target.attr("id", time+"_"+id);     // Set the id
    });
    // Append
    cell.append(new_item)
    return event.preventDefault();
  });
Tag: