使jQuery更改永久刷新页面

背景:

我制作了一个脚本,用于加载产品名称表,当您单击该表行上的按钮时,它会显示一个搜索框。此搜索框使用jquery UI自动完成功能。选择一个选项后,它将从与该主项目数据库不同的数据库中提取该产品信息,并将其放入相应的

表中的标签。然后,它还将此内容提交到另一个数据库(该项目的主要数据库)中的另一个表中。它正确存储了信息,并且当foreach循环使用主项目中的数据库内容运行时,它正在正确加载。用户按下以显示搜索框的按钮显示为“链接产品”,一旦选择该按钮,该按钮会将css和html值更改为“编辑产品”。

问题

我遇到的问题是,从主数据库加载了内容的任何表行都必须具有“编辑按钮”,并且任何空白行都必须显示“链接产品按钮”。但是,当您刷新页面时,它们全部恢复为“链接按钮”。

现在,我将向您展示代码,但由于我是ajax和jquery的新手,因此我将带给您一些混乱的提示。

代码

HTML页面

<div class="container">
    <div class="row">
        <div class="col text-center">
            <h3 id="edit_sheet_title" class="mt-3 mb-3"><?php echo $title; ?></h3>
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-xl-12 col-md-12 col-sm-12 col-12 text-center">
            <a href="<?php echo URLROOT; ?>product/import/<?php echo $sheet_id; ?>" class="btn btn-primary tb">Bulk Import</a>
            <a href="<?php echo URLROOT; ?>container/import/<?php echo $sheet_id; ?>" class="btn btn-info tb">Container Import</a>
            <a href="<?php echo URLROOT; ?>product/add/<?php echo $sheet_id; ?>" class="btn btn-warning tb">Add Product</a>
            <a href="<?php echo URLROOT; ?>sheet/generate" class="btn btn-success tb">Generate Sheet</a>
            <a href="<?php echo URLROOT; ?>" class="btn btn-danger tb">Go Back</a>
        </div>
    </div>
</div>

<div class="table-container">
    <div class="row">
        <div class="col">
            <div class="table-responsive">
                <table class="table" id="sheet_list">
                    <thead>
                        <tr>
                            <th class="align-middle th-id">ID</th>
                            <th class="align-middle th-name">Product Name</th>
                            <th>Ingredients</th>
                            <th id="button_th"></th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php if(!empty($sheet_product_list)) { ?>
                        <?php foreach($sheet_product_list as $product) { ?>

                            <tr>
                                <td><p data-id="entry_id" id="entry_id" class="table-p"><?php echo $product['entry_id']; ?></p></td>

                                <td class="td-name"><?php echo $product['display_name']; ?></td>

                                <td>
                                    <div id="search_div">
                                        <input type="text" class="wholesale_product_search mb-5 block" data-info="search_box" data-entry-id="<?php echo $product['entry_id']; ?>" name="product_search" id="product_search" placeholder="Search for product...">
                                    </div>

                                    <p data-info="product_id" id="product_id" class="<?php echo $product['entry_id']; ?>">
                                        <?php if(isset($product['wholesale_product_id'])){ echo "Product ID: " . $product['wholesale_product_id'];} ?>  
                                    </p>

                                    <p data-info="wholesale_name" id="wholesale_name" class="<?php echo $product['entry_id']; ?>">
                                        <?php if(isset($product['wholesale_name'])){ echo $product['wholesale_name'];} ?>
                                    </p>
                                    <p data-info="is_manual" class="<?php echo $product['entry_id']; ?>">

                                    </p>
                                    <p data-info="ingredients_section" id="ingredients_section" class="<?php echo $product['entry_id']; ?>">
                                        <?php if(isset($product['wholesale_ingredients'])){echo $product['wholesale_ingredients'];} ?>

                                        </p>
                                </td>

                                <td class="pull-right align-middle">
                                    <div class="button_td_div">
                                        <button id="edit_product_button" data-id="<?php echo $product['entry_id']; ?>" class="btn btn-info" role="button">Link Product</button><br>
                                        <a id="column_button" href="<?php echo URLROOT; ?>product/delete/<?php echo $sheet['sheet_id']; ?>/<?php echo $product['entry_id']; ?>" class="btn btn-danger" role="button">Delete Product</a>
                                    </div>
                                </td>
                            </tr>

                        <?php } ?>
                    <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="sheet_id" value="<?php echo $sheet_id; ?>">


jQuery函数

$('button[data-id]').click( function () {
    var display_name = $('.td-name').html();
    var entry_id = $(this).attr("data-id");
    var search_box = $("input[data-info='search_box'][data-entry-id="+entry_id+"]");
    var ingredients_section = $("p[data-info='ingredients_section']."+entry_id);
    var wholesale_name = $("p[data-info='wholesale_name']."+entry_id);
    var wholesale_product_id = $("p[data-info='product_id']."+entry_id);
    var edit_button = $('button[data-id='+entry_id+']');
    const sheet_id = $('#sheet_id').val();

    $(search_box).on( "autocompleteselect", function(e, ui) {
        var result_string = ui.item.value; // this is the string returned from the search
        var product_id = result_string.match( /\d+/ )[0];
        $(search_box).hide();
        edit_button.html('Edit Product');
        edit_button.removeClass("btn btn-warning").addClass("btn btn-success");
        $.ajax({
            type: "GET",
            url: ajax_url,
            data: "product_id="+product_id,  
            success: function(data){
                var obj = JSON.parse(data);
                const ingredients = obj[0].ingredients;
                const product_name = obj[0].name;
                const w_product_id = obj[0].product_id;
                $(wholesale_product_id).html('Product ID: '+w_product_id);
                $('#confirmed').show();
                $(wholesale_name).html('Wholesale Name: '+product_name);
                $(ingredients_section).html(ingredients);
                $.ajax({
                    type: "POST",
                    url: ajax_url,
                    data: {post_sheet_id: sheet_id,post_wholesale_product_id: w_product_id, post_wholesale_ingredients: ingredients, entry_id: entry_id,wholesale_product_name: product_name},
                    success: function(data){
                        var obj = JSON.parse(data);
                        $.ajax({
                            type: "GET",
                            url: ajax_url,
                            data: "sheet_id="+sheet_id+"&content",
                            success: function(data){
                                var obj = JSON.parse(data);
                                const content = obj[0].wholesale_product_id;
                                console.log(content);
                            }
                        });
                    }
                });
            }
        });
    } );
    if($(this).html() == 'Link Product'){
        $(search_box).show();
        $(search_box).focus();
        $(this).html('Cancel');
        $(this).removeClass("btn btn-info");
        $(this).addClass("btn btn-warning");
    } else if($(this).html() == 'Cancel'){
        $(search_box).hide();
        $(this).removeClass("btn btn-warning");
        $(this).addClass("btn btn-info");
        $(this).html('Link Product');
    }

} );


$(function() {
    $(".wholesale_product_search").autocomplete({
        source: ajax_url,
        minLength: 1
    });
});

我没有一个线索可以使“编辑产品”的html值保持刷新,每次刷新该页面时,所有按钮都回到“链接产品”,但我只希望空白成分框中有一个“链接产品”按钮,任何装有配料的按钮都需要说“编辑产品”。

数天以来,我一直为此感到生气,而我却要结束了。

任何帮助,几乎所有的帮助都不会使我失去理智。

**编辑**

我知道这是一个可怕的烂摊子,但是我的截止日期很快就要到了,我已经走了很远,在这一点上它将竭尽所能。它是在室内使用的,外界无法访问。

评论