为什么我的 hx-trigger 没有使用 from: <css selector> 触发？
我有一个按钮，我想在单击时向服务器发送两个请求。设置是这样的： 我有一个按钮，我想在单击时向服务器发送两个请求。设置是这样的： <button id="add-item" hx-get="some-url" hx-trigger="click" hx-target="#item-form" hx-swap="beforeend" type="button">Add item</button> <br> <div hx-get="some-other-url" hx-trigger="from: #add-item" hx-swap="beforeend"> </div> 我尝试过使用hx-trigger="click from: #add-item，但这也不起作用。 add-item 发送的第一个请求是从服务器正确获取的，但来自 div 的第二个请求根本没有发送。当将 div 的触发器更改为 hx-trigger="click" 之类的内容时，它可以工作（还需要其中的一些内容才能单击）。 语法有问题吗？或者为什么这不起作用？ 我已经像这样导入了 HTMX： <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script> 如有任何帮助，我们将不胜感激。 您面临的问题可能与您使用 hx-trigger 属性的方式有关。 HTMX 的 hx-trigger 属性决定什么操作触发对服务器的请求。当您使用 hx-trigger="click from: #add-item" 时，它会尝试侦听来自 ID 为 add-item 的元素的单击事件。然而，似乎是 ID 为 add-item 的按钮触发了请求，而不是 div。 要在单击 ID 为 add-item 的按钮时发送两个请求，您可以按如下方式设置 HTMX 属性： <button id="add-item" hx-get="some-url" hx-trigger="click" hx-target="#item-form" hx-swap="beforeend" hx-trigger-boost="true" type="button">Add item</button> <br> <div hx-get="some-other-url" hx-trigger="click: #add-item" hx-swap="beforeend" hx-trigger-boost="true"> </div> 以下是更改内容： 向两个元素添加了 hx-trigger-boost="true"。这确保了 当触发事件传播到父元素（div）时 单击按钮。 将 hx-trigger 上的 div 更改为 hx-trigger="click: #add-item"。这 意味着 div 将监听来自元素的点击事件 ID add-item. 完成这些更改后，当您单击“添加项目”按钮时，它将 按预期触发两个请求。 这解决了问题： hx-trigger="from: #add-item" 替换为 hx-trigger="click from:#add-item" 通过编写 click 来指定事件是必要的，并删除 from: 和 #add-item 之间的空格。
我正在使用下表 DDL 构建 Spring boot 应用程序 如果不存在问题则创建表( Question_id bigint auto_increment, Question_text varchar(256), 回答布尔值，
如何在 HTMX 中停止轮询？ 286并不能阻止htmx继续轮询
根据 HTMX 文档，轮询应在收到响应代码 286 后停止。 鉴于此代码： 根据 HTMX 文档，轮询应在收到响应代码 286 后停止。 给出这段代码： <form id="board" hx-post="/xxx/start" hx-select="#board" hx-trigger="every 1ms" hx-swap="outerHTML" > 我的服务器响应 286 代码： 为什么它继续 ping 我的服务器？ 在旧的 reddit 线程中找到答案 顺便说一下，我使用 hx-swap:outerHTML 遇到了一个问题，其中 286 状态代码没有停止轮询，因为 hx 元素是刷新的一部分。我想我可以在里面嵌套另一个 div 并选择该元素来修复这个问题。 回想起来，这很有意义。 解决方案： <form id="board" hx-post="/xxx/start" hx-trigger="every 500ms" hx-select="#board-content" hx-target="#board-content" hx-swap="outerHTML" > <div id="gameoflife-board-content"> // rest of form </div> </form>
如何使用 vitest 和 vue-test-utils 测试 Vuetify 3 select？
我在表单中有一个 v-select，我想用 vitest 和 vue-test-utils 进行测试。 我在表单中有一个 v-select，我想用 vitest 和 vue-test-utils 进行测试。 <v-select clearable :items="models" item-value="id" item-text="name" ref="model-select" required="true" v-model="selectedModel" ></v-select> 我尝试用我在here找到的两种方法来测试它。带注释的代码是一种方法，未注释的代码是第二种方法。 test('it fills the form', async () => { models = [ { id: '1', name: 'foo', }, { id: '2', name: 'bar', }, ]; await nextTick(); // const select = wrapper?.findComponent({ref: 'model-select'}); // expect(select?.exists()).toBeTruthy(); // select?.vm.selectItem('foo'); // await nextTick(); wrapper?.find('[data-testid="model-select"]').trigger('click'); await nextTick(); wrapper?.find('.menuable__content__active')?.findAll('.v-list-item')?.at(0)?.trigger('click'); await nextTick(); }); 我似乎找不到正确的解决方案，DOM 包装器要么不知道选择项目的方法（第一种方法），要么是空的，因为它找不到 vuetify 选择菜单（第二种方法） 有人遇到同样的问题并找到适合我使用的软件包的解决方案吗？ 我找到了答案。您无法访问底层 html 的值，而是访问组件实例并获取值 import { mount } from '@vue/test-utils' describe('my test', () => { wrapper = mount(MySelect) test('it fills the form', async () => { models = [ { id: '1', name: 'foo' },{ id: '2', name: 'bar',}, ]; const component = wrapper.findComponent('[data-testid="model-select"]') await component.setValue(models[0]) console.log('new value', component.vm.modelValue) }) 我花了几天时间尝试解决同样的错误。我希望我有所帮助。 问候！
<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功 将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。
希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...） 尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });
我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象： </sc...</desc> <question vote="0"> <p>我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <head> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <title>Gauge Chart</title> </head> <button id='btn1'> Let's </button> <input id='slider1' type='range' value='34' min='0' max='100' step='.01'> <input id='slider2' type='range' value='89' min='0' max='100' step='.01'> <div id='chartid1' style='width:390px; height: 410px;'></div> <script> const chart1 = echarts.init(document.getElementById('chartid1')); function update1(value1, value2) { option = { series: [{ type: 'gauge', min: 0, max: 100, splitNumber: 10, detail: { fontFamily: 'Lato', fontSize: 14, borderWidth: 1, borderColor: '#020202', borderRadius: 5, width: 32, height: 20 }, data: [{ value: value1, name: 'False', itemStyle: { color: '#dd4b50' }, title: { offsetCenter: ['-20%', '20%'] }, detail: { offsetCenter: ['-20%', '36%'], backgroundColor: '#dd4b50', color: '#f2f2f2' } }, { value: value2, name: 'True', itemStyle: { color: '#3a9e4b' }, title: { offsetCenter: ['20%', '20%'] }, detail: { offsetCenter: ['20%', '36%'], color: '#f2f2f2', backgroundColor: '#3a9e4b' } } ] }] }; chart1.setOption(option); } function update2() { let value1 = Number($('#slider1').val()); let value2 = Number($("#slider2").val()); update1(value1, value2); } update2(); document.getElementById('btn1').addEventListener('click', function() { update2(); }) /// clickable chart1.on('mouseenter', {dataIndex:0}, function(params) { $(this).popover({ html: true, sanitize: false, title: 'Title ', content: 'This a text', trigger: 'hover', placement: 'top', container: 'body' }) }) </script></code></pre> </div> </div> <p></p> <p>我需要悬停并获得 .popover。我知道我可以使用 <pre><code>tooltip:{...}</code></pre>，但对于特定情况，我需要配置 .popover。我尝试用 <pre><code>mychart1.on(...</code></pre> 调整上面的代码，但没有成功。我添加了所有代码需求的CDN。</p> </question> <answer tick="false" vote="0"> <p>如果您查看 <a href="https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover" rel="nofollow noreferrer">文档</a>，该事件称为 <pre><code>mouseover</code></pre>，而不是 <pre><code>mouseenter</code></pre>。 <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUAthGjEADP2rpBbAB7EAjGIkD0GEABsIYAHIdBAI1yKVU2ABMsYNhA3FUZ9ADMYYAGJthG2swAybMGA-VQoXaDAAZQgAL0ZYBQAWSUcDYBxLHAB1CHMwAAtFZLNU9NwAYWANNOYAYjEAJgaG4MdYEoyAJTZzCA4iWABWIqkAdxz84gBmeuHqPKwIFjywYkaQgF9ZiwC2YjJWh1bYADc2DQ44yaSQ6mhPOKYPDWwWo-0sQQi6DTjDo9gAMaVaqwJg1czmBIGAZiJg3CibeHoSBgH72JEUYBOJzYMBlLDhYykJgAWkaAFI-KCKUwALoYxH_SzWWzo_7oLE4qz4wk4Pakmm8UGTABslNpW2KbABAGsWDhgBxoOYKlU-aDwZDobDJVIgWrak56kajXD_ut4YzHH9HKdznEABwATl16DuggeABUcBdXq13p9vr8Meh9SCwZM2E6sFCzUcra0UWjKOzYJzcTywESSExBdSxOKGa6LFYbHYU-z09yCVn1Tm80xReLi6HgeqwSbjfU_UcDNK5QqlSq27VI9HYwzLSF6dQLeh6esANwoFeCWhlPJsHBgAB0MAAFExBIrsMBjrgqUhzDsAJLKrDyWBiTawJxKgGQA8gLeeDAASgrIFoAwSosB3KoWH3b8cF_P9l3WOCgA" rel="nofollow noreferrer">这里</a>是你的例子：</p> <pre><code>option = { series: [ { type: 'gauge', min: 0, max: 100, splitNumber: 10, detail: { fontFamily: 'Lato', fontSize: 14, borderWidth: 1, borderColor: '#020202', borderRadius: 5, width: 32, height: 20 }, data: [ { value: 34, name: 'False', itemStyle: { color: '#dd4b50' }, title: { offsetCenter: ['-20%', '20%'] }, detail: { offsetCenter: ['-20%', '36%'], backgroundColor: '#dd4b50', color: '#f2f2f2' } }, { value: 89, name: 'True', itemStyle: { color: '#3a9e4b' }, title: { offsetCenter: ['20%', '20%'] }, detail: { offsetCenter: ['20%', '36%'], color: '#f2f2f2', backgroundColor: '#3a9e4b' } } ] } ] }; myChart.on('mouseover', {dataIndex: 0}, function(params) { console.log(params); }); </code></pre> </answer> </body></html>
我正在尝试降级 NServiceBus 依赖项，因此不要使用 4.0.0.0 而是使用 2.5.0.0 我正在尝试以下方法，但似乎都不起作用。 我正在尝试降级 NServiceBus 依赖项，因此不要使用 4.0.0.0 而是使用 2.5.0.0 我正在尝试以下方法，但似乎都不起作用。 <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="NServiceBus" publicKeyToken="9fc386479f8a226c" culture="neutral"/> <bindingRedirect oldVersion="4.0.0.0" newVersion="2.5.0.0"/> </dependentAssembly> </assemblyBinding> </runtime> 我也尝试过使用代码库： <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="NServiceBus" publicKeyToken="9fc386479f8a226c" culture="neutral"/> <codeBase version="2.5.0.0" href="NServiceBus.dll"/> </dependentAssembly> </assemblyBinding> </runtime> 不过，没什么。我浏览了 msdn 文档，没有提到以“向后”的方式使用此功能。这可能吗？ 实际上，我正在将您的第一个语句用于某些互操作 DLL，因为我们公司的客户在 Office 更新方面有不同的状态。这是我使用的代码： <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="office" publicKeyToken="71E9BCE111E9429C" culture="neutral"/> <bindingRedirect oldVersion="0.0.0.0-14.0.0.0" newVersion="11.0.0.0"/> </dependentAssembly> </assemblyBinding> 这提供了从 DLL 版本 14 到版本 11 的向后兼容性。您能提供您正在使用的 DLL 的链接吗？ 我已经下载了 NServiceBus 框架（版本 3.3.8）并使用 ILSpy 检查了 DLL。我建议你对你的 DLL 做同样的事情。对于我的 DLL，它显示了与您相同的公钥令牌。您确定使用版本 4.0.0.0 而不是版本 3.3.0.0。或者您可能与公钥令牌不匹配。 根据 MSDN：https://msdn.microsoft.com/en-us/library/eftw1fys(v=vs.110).aspx 该值可以指定比oldVersion更早的版本。 指的是newVersion的bindingRedirect属性。同样在“备注”部分： 您还可以从程序集的较新版本重定向到旧版本。 他们的例子是： <configuration> <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="myAssembly" publicKeyToken="32ab4ba45e0a69a1" culture="neutral" /> <bindingRedirect oldVersion="1.0.0.0" newVersion="2.0.0.0"/> </dependentAssembly> </assemblyBinding> </runtime> </configuration> 我确实注意到它还提到了一些有关应用程序配置文件中的显式程序集绑定重定向需要安全权限，也许这也会影响您？ 上面的答案是很好的答案，但缺少重要的部分。如果你阅读评论，一些开发人员不再相信这是有效的。事实上，这是双向的，向上版本或向下版本 重要：文化 在我的实验中，只有当我将文化设置为中性时它才开始起作用。 （上面的例子有“en-us”） <assemblyIdentity name="..... culture="neutral"/> 在我的设置中，我有 WinApp 引用了 Lib1 和 Lib3。 Lib1参考Lib2和Lib3。 Lib2参考文献Lib3。当我按下按钮时，一个调用从 WinApp 一路传播到 Lib3（直接传播和通过库链传播），并且文本返回显示在屏幕上。 Lib3的名字很强大。 运行 1 - 未设置区域性 [assembly: AssemblyCulture("")]，未设置绑定重定向 - 有效！ 运行 2 - Lib3 中的较低版本，将绑定重定向设置为“en-us” - 失败！ 运行 3 - Lib3 中的较低版本，将绑定重定向设置为“中性” - 有效！适用于向上版本和向下版本。 在其他运行中 - 使用设置 [assembly: AssemblyCulture("en-us")] - 当 AssemblyCulture 不为空时，所有尝试都会失败。事实上，当在WinApp中设置这个属性时，它甚至无法编译 错误CS7059：可执行文件不能是附属程序集；文化应该永远是空的 所以，我们开始吧。由于我不明白 AssemblyCulture 的所有复杂作用，我只声称我的实验仅证明在特定条件下版本重定向工作正常。 如果我没有理解错的话，我对 stimulsoft 报告 DDL 做了同样的事情，我安装了最新版本，但我想在我的应用程序中使用 2010.3。但不是通过配置文件和重定向： 我只是从解决方案资源管理器中删除了引用并添加了旧的 DLL 引用，然后设置了副本 Local 属性并重新编译，以便 DLL 与应用程序一起位于同一目录中，一切正常。也用其他一些 dll 完成了它。