Question

我的《采购令》有一份表格,在表格中,这些物品使用django的线式格式。在网上“格式”的形式中,在产品选择格式旁边放置了一台检索仪表,这样当用户点击时,便会出现一种能够让用户检索产品的功能。当用户在搜索网页上点击一个产品时,将更新/修改主要PO表的相应产品选择格式。还有一个“更多项目”纽芬兰语,它将在网上版面上添加新的形式,从而向用户提供功能,以动态方式增加更多的PO项目(使用javascript)。

除新增加的外,上述所有特征都属于工作罚款,但搜查icon没有执行装在icon的猎物。

In pod_form.html,

td>
    <div class="input-group">
        {{ field }}{% if field.name ==  product  %}
        <i class="fa-solid fa-magnifying-glass ms-1 d-flex align-items-center fa-icon" 
            hx-get="{% url  product_search_popup  %}" hx-target="#dialog"></i>
        {% endif %}
    </div>
    <!-- dispaly field errors if there s any -->
    {% for error in field.errors %}
    <span style="color: red">{{ error }}</span>
    {% endfor %}
</td>

html的碎块载于类型文本/html的文字中,如:

script type="text/html" id="pod-template">
    <tr id="pod-__prefix__">
        {% for fields in po_inlines.empty_form.hidden_fields %}
            {{ fields }}
        {% endfor %}
    
        {% for field in po_inlines.empty_form.visible_fields %}
            {% include  purchases/partials/pod_form.html  %}
        {% endfor %}
    </tr>
</script>

a. 符合《公约》第3条(a)项的规定。

script>
    // PO Detail Inline
    var btnAddMorePOitems = document.querySelector( #pod-add-more )
    // on click of pod-add-more button, add new form
    btnAddMorePOitems.addEventListener( click , (ev) => {
        ev.preventDefault();
        // get document objects
        let tbodyPOitems = document.querySelector( #po-items )
        let podTemplate = document.querySelector( #pod-template )
        let podTotalForms = document.querySelector( #id_pod-TOTAL_FORMS )

        // build-up the content
        let count = tbodyPOitems.children.length
        let tmplMarkup = podTemplate.innerHTML
        let compiledTmpl = tmplMarkup.replace(/__prefix__/g, count)

        // insert a new row of the table representing the PO detail inline
        let newRow = tbodyPOitems.insertRow(count)
        newRow.outerHTML = compiledTmpl
        // update the form count
        podTotalForms.setAttribute( value , count + 1)

        // TODO: product search icon on_click event of newly added form
        searchIcon = document.querySelector(`#pod-${count}`).querySelector( .fa-magnifying-glass );
        searchIcon.addEventListener( click , (ev) => {
            ev.preventDefault()
            toggleActiveSearchIcon(ev.currentTarget)
        })
    })

    // event handler for search icon on-click
    var searchIcons = document.querySelector( #po-items ).querySelectorAll( .fa-magnifying-glass );
    searchIcons.forEach(el => {
        el.addEventListener( click , (ev) => {
            ev.preventDefault()
            toggleActiveSearchIcon(el)
        })
    })

    // FUNCTION Definition
    function toggleActiveSearchIcon(el) {
        // mark the search icon as active
        document.querySelector( i.fa-icon.active )?.classList.remove( active )
        el.classList.add( active )
        // mark the select-form as active, which will be used as the hx-target
        // in the product_search modal page
        document.querySelector( select.active )?.classList.remove( active )
        el.previousElementSibling.classList.add( active )
    }
</script>

在浏览器检查器工具中,我可以核实,特性属地植被和猎物目标存在于新添加的表格的搜索线内。我还可以核实,点击事件是按预期进行的。但是,我发现,与牛群中具体规定的尿液相对应的观点并未得到执行。这方面的任何想法?

如果你遇到类似问题,请分享你的解决办法。

友情链接