Back Ground:
Я создал скрипт, который загружает таблицу названий продуктов, когда вы нажимаете кнопку в этой строке таблицы, она отображает окно поиска. В этом окне поиска используется функция автозаполнения jquery UI. Когда опция выбрана, она извлекает информацию о продуктах из другой базы данных из этой основной базы данных проекта и помещает их в соответствующие теги
в таблице. Затем он также передает этот контент в другую таблицу в другой базе данных, которая является основной базой данных для проекта. Он правильно хранит информацию, и когда foreach l oop работает с содержимым базы данных из основного проекта, он загружается правильно. Кнопка, которую пользователь нажимает, чтобы открыть окно поиска, говорит «Link Product», после того как он выбрал его, кнопка меняет значение css и html на Edit Product.
Проблема
Проблема, с которой я сталкиваюсь, заключается в том, что любая строка таблицы, в которой содержимое загружено из основной базы данных, должна иметь «кнопку редактирования», и все пустые строки должны отображать кнопку «Связать продукт». Но когда вы обновляете sh страницу, все они возвращаются к «Кнопке ссылки».
Теперь я собираюсь показать вам код, но я дам вам понять, что он очень грязный, поскольку я новичок к 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
});
});
У меня нет единственная подсказка, как сделать так, чтобы значение Edit Product html оставалось на странице refre sh, каждый раз, когда я повторяю sh на этой странице, все кнопки go возвращаются к сообщению Link Product, но мне нужны только пустые поля для ингредиентов чтобы иметь кнопку «Связать продукт», любой, с загруженными ингредиентами, должен сказать «Редактировать продукт».
Я уже несколько дней схожу с ума от этого, и я нахожусь в тупике.
Любая помощь, буквально что-нибудь, избавит меня от здравомыслия.
** РЕДАКТИРОВАТЬ **
Я знаю, что это ужасный беспорядок, но мой срок быстро приближается, я далеко, и в этот момент сделаю все возможное, чтобы заставить его работать. Он используется в доме и не доступен для внешнего мира.