ShuJuQiu: WebNotes

dreamable/WebNotes
ID	标题	笔记
7	bootstrap5 updates	Replace `text-right` by `text-end` Bootstrap 5 navbar align items right Spacing `<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>` The data-* attributes used in Bootstrap 4 have been replaced with data-bs-* in Bootstrap 5
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 }`
5	JS import vs require	guide require is for CommonJS (node.js way to load modules) import is for ES6. But not supported via CommonJS by browsers
4	Clear form fields with jQuery	guide `$('yourdiv').find('form')[0].reset();`
3	Find element that has either class 1 or class 2	`$(".a, .b")` this will match all elements with class a OR class b
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
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(); });