Вы сказали:
Скину все функции для создать страницы которые использовать для datatables и вывести в этой таблице Все организации с кнопкой Открыть с открытием модального окна и в нем редактирования для изменения данных сохранением
Сейчас кину frontend и следом вторым сообщением скину backend код
модальное окно
<div class="modal fade" id="profileComp" tabindex="-1" role="dialog" aria-labelledby="profileCompModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-preloader d-none modalPreloader">
<div class="spinner-border text-primary" role="status"></div>
</div>
<div class="modal-header">
<h5 class="modal-title" id="profileCompModalScrollableTitle">Контрагент информация</h5>
<button type="button" class="close btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="myTabComp" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="profile-comp-tab" data-bs-toggle="tab" data-bs-target="#profile-comp" type="button" role="tab" aria-controls="profile-comp" aria-selected="false" data-comor="">Контрагент</button>
</li>
</ul>
<div class="tab-content" id="myTabContentcomp">
<div class="tab-pane fade show active" id="profile-comp" role="tabpanel" aria-labelledby="profile-comp-tab" >
<!--COMPANY-->
<div class="container mt-2" >
<div class="col small col-md">
<form method="post" action="?company" class="js-uajax-form" data-callback="myFunc" data-target="#target">
<input type="hidden" id="id_corpcom" name="id_corpcom" value="0">
<div class="row mb-2">
<div class="col">
<label for="name_corpcom" class="form-label">Организация</label>
<input type="text" name="name_corpcom" id="name_corpcom" class="form-control">
</div>
<div class="col-auto mt-4">
<!-- <input type="hidden" id="id_corpcom" name="id_corpcom" value="0"> -->
<button type="submit" class="btn btn-outline-primary mb-2">Применить
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display:none; width: 1.2rem; height: 1.2rem;"></span>
<span data-toggle="tooltip" data-placement="top" data-html="true" class="tooltip-profile-company" alt="" data-bs-original-title="ВЫПОЛНЕНО"></span>
</button>
</div>
</div>
<div class="row mb-2">
<div class="col">
<label for="client_corpcom" class="form-label">Контактное лицо ФИО </label>
<input type="text" name="client_corpcom" id="client_corpcom" class="form-control">
</div>
<div class="col">
<label for="departm_corpcom" class="form-label"> Должность</label>
<input type="text" class="form-control" name="departm_corpcom" id="departm_corpcom">
</div>
</div>
<div class="row mb-2">
<div class="col">
<label for="email_corpcom" class="form-label">Почта</label>
<!-- <input type="email" name="email_corpcom" id="email_corpcom" class="form-control"> -->
<select class="form-select" aria-label="Почта" name="email_corpcom" id="email_corpcom_all">
<!-- <option value="1@.com">...</option>
<option value="2@.ru">...</option> -->
<!-- <option selected>...</option> -->
</select>
</div>
<div class="col">
<label for="phone_corpcom" class="form-label"> Телефон</label>
<input type="tel" class="form-control" name="phone_corpcom" id="phone_corpcom">
</div>
</div>
<div class="mb-2">
<label for="address_corpcom" class="form-label">Адрес</label>
<textarea name="address_corpcom" class="form-control border" id="address_corpcom" aria-describedby="titleHelp"></textarea>
</div>
<div class="mb-2">
<label for="details_corpcom" class="form-label">Реквизиты</label>
<textarea name="details_corpcom" class="form-control border" id="details_corpcom" aria-describedby="titleHelp"></textarea>
</div>
<div class="mb-2">
<label for="info_corpcom" class="form-label">Доп. информация</label>
<textarea name="info_corpcom" class="form-control border" id="info_corpcom" aria-describedby="titleHelp"></textarea>
</div>
<div class="mb-4">
<label for="files_corpcom" class="form-label">Файлы </label>
<ol class="fileslist_cor list-group" style=" padding-left: 20px;"></ol>
</div>
<div class="mb-2">
<label for="files_corpcom" class="form-label">Прикрепить файлы</label>
<input type="file" name="files_corpcom[]" id="files_corpcom" multiple="multiple" >
</div>
</form>
<p class="mt-3">
<!-- коммент какой то -->
</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Закрыть</span>
</button>
<button type="button" class="btn btn-primary ms-1" data-bs-dismiss="modal" style="display:none">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block">Accept</span>
</button>
</div>
</div>
</div>
</div>
код js вызова модального окна и кнопкой применить сохранение изменений
$('#profile-tab').click(function(e){
console.log($(this).parent().children());
showModalPreloader();
$('#profile form')[0].reset();
$('.fileslist_cor li').remove();
if(sessionStorage.getItem('mail_corpcom'))
if(JSON.parse(sessionStorage.getItem('mail_corpcom')).email_corpcom != $('#email_inbox').val())
sessionStorage.removeItem('mail_corpcom');
const formElement = document.querySelector('#profile form');
const formData = new FormData();
formData.append('id', $(this).data('comor'));
formData.append('email', $('#email_inbox').val());
formData.append('mail_corpcom', 'true');
fetch('ajax/post.php', {
method: 'POST',
body: formData
//}).then(response => response.json())//{response.json();console.log(response);}
}).then(response => response.json())//response //response.text() //response.json()
.then(function(data){//.then(data => console.warn(data)) // then(data => {console.warn(data)})
console.warn(data);
console.log(data);
$('#id_corpcom').val(data.id);
$('#name_corpcom').val(data.name_corpcom);
$('#client_corpcom').val(data.client_corpcom);
$('#departm_corpcom').val(data.departm_corpcom);
$('#phone_corpcom').val(data.phone_corpcom);
$('#email_corpcom').val(data.email_corpcom);
$('#address_corpcom').val(data.address_corpcom);
$('#details_corpcom').val(data.details_corpcom);
$('#info_corpcom').val(data.info_corpcom);
$('.fileslist_cor li').remove();
$.each(data.files_corpcom, function( index, value ) {
//$('.fileslist_cor').append('<li ><a class="linkattah" data-file="'+data.path+'" href="attah.php?file-download='+data.path+'" target="_blank"> '+value+'</a></li>');
$('.fileslist_cor').append('<li><a class="linkattah_corpcom" data-file="'+data.id+'" href="#" >'+value+'</a> <button type="button" data-file="'+value+'" style=" float: right;color: red;" class="linkattah_corpcom_del btn btn-outline-light btn-sm"> удалить <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"></path> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"></path> </svg> </button></li>');
console.log( index + ": " + value );
});
if(data.files_corpcom==''){
$('.fileslist_cor').html('<li><i>Нет файлов</i></li>');
}
const formState = enableFormAutoSave(formElement , 'mail_corpcom');
hideModalPreloader();
})//;
.catch((error) => {
hideModalPreloader();
$('.success.alert.alert-success.alert-warning').remove();
console.error(error);
//console.log(JSON.stringify(error));
$('.fileslist_cor').after(
<div class="success alert alert-success alert-warning mt-4">
<div class="alert-message text-center">
<strong>Ошибка error7amsdj8d</strong><br><small>Обратитесь техническую поддержку</small>
</div>
</div>);
var timeout = setTimeout(function() {
$('.success.alert.alert-success.alert-warning').remove();
// $('.send-post-email').prop('disabled', false);
// $('.spinner-border').hide();
}, 24000);
showAlert('danger', error, 'body', 14500, 'position: fixed;top: 50%; left: 1%; opacity: 0.9;');
});
});
$("#profile form, #profile-comp form").submit(function(e){
e.preventDefault();
$('.spinner-border').show();
$('span.tooltip-profile-company').tooltip('show');
const formData = new FormData(e.target);
formData.append('mail_corpcom', 'true');
fetch('ajax/post.php', {
method: 'POST',
body: formData
//}).then(response => response.json())//{response.json();console.log(response);}
}).then(response => response.json())//response //response.text() //response.json()
.then(function(data){//.then(data => console.warn(data)) // then(data => {console.warn(data)})
console.warn(data);
//console.log(data);
$('#id_corpcom, #profile-comp #id_corpcom').val(data.id);
// $('#name_corpcom').val(data.name_corpcom);
// $('#client_corpcom').val(data.client_corpcom);
// $('#departm_corpcom').val(data.departm_corpcom);
// $('#phone_corpcom').val(data.phone_corpcom);
// $('#email_corpcom').val(data.email_corpcom);
// $('#address_corpcom').val(data.address_corpcom);
// $('#details_corpcom').val(data.details_corpcom);
// $('#info_corpcom').val(data.info_corpcom);
$('.fileslist_cor li, #profileComp .fileslist_cor li').remove();
$.each(data.files_corpcom, function( index, value ) {
//$('.fileslist_cor').append('<li ><a class="linkattah" data-file="'+data.path+'" href="attah.php?file-download='+data.path+'" target="_blank"> '+value+'</a></li>');
$('.fileslist_cor, #profileComp .fileslist_cor').append('<li><a class="linkattah_corpcom" data-file="'+data.id+'" href="#" >'+value+'</a> <button type="button" data-file="'+value+'" style=" float: right;color: red;" class="linkattah_corpcom_del btn btn-outline-light btn-sm"> удалить <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"></path> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"></path> </svg> </button></li>');
console.log( index + ": " + value );
});
if(data.files_corpcom==''){
$('.fileslist_cor, #profileComp .fileslist_cor').html('<li><i>Нет файлов</i></li>');
}
//$('#profile form')[0].reset();
$('#files_corpcom, #profile-comp #files_corpcom').val('');
$('.success.alert.alert-success').remove();
$('#info_corpcom, #profileComp #info_corpcom').after(data.info_text);
var timeout = setTimeout(function() {
$('.success.alert.alert-success').remove();
//$('.send-post-email').prop('disabled', false);
$('.spinner-border').hide();
$('span.tooltip-profile-company').tooltip('hide');
}, 4560);
// Показываем уведомление
showAlert('success', 'Контрагент сохранен', 'body', 5500, 'position: fixed;top: 50%; left: 1%; opacity: 0.9;');
sessionStorage.removeItem('mail_corpcom');
})//;
.catch((error) => {
console.error(error);
//console.log(JSON.stringify(error));
$('.success.alert.alert-success.alert-warning').remove();
$('#info_corpcom, #profileComp #info_corpcom').after(<div class="success alert alert-success alert-warning mt-4">
<div class="alert-message text-center">
<strong>Ошибка errork74unksgFDG</strong><br><small>Обратитесь техническую поддержку</small>
</div>
</div>);
var timeout = setTimeout(function() {
$('.success.alert.alert-success.alert-warning').remove();
$('.send-post-email').prop('disabled', false);
$('.spinner-border').hide();
}, 24000);
showAlert('danger', error, 'body', 14500, 'position: fixed;top: 50%; left: 1%; opacity: 0.9;');
});
//e.stopPropagation();
});
//profile Company corpcom_all
$('#corpcom_all, #email_corpcom_all').on('change click', function(e){
//ТЕСТИТЬ или все убрать corpocom_all конфликт on('change click'
//});
//$('#corpcom_all').on('click', function(e){ corpocom_all(e, this); });
//$('#email_corpcom_all').on('change', function(e){ corpocom_all(e, this); });
//function corpocom_all(e, el){
/*console.log($(this).find("option:selected"));
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
console.log(valueSelected);
*/
//var id_corpcom = $('#profileComp #id_corpcom').val();
// Определяем, какой элемент вызвал событие
if (e.target.id === 'corpcom_all' && e.type === 'click') {
console.log('Клик по corpcom_all:', $(this).val());
console.log($('#id_corpcom').val());
console.log($('#profileComp #id_corpcom').val());
}
else if (e.target.id === 'email_corpcom_all' && e.type === 'change') {
console.log('Изменение email_corpcom_all:', $(this).val());
// Действия для изменения #email_corpcom_all
console.log($('#id_corpcom').val());
console.log($('#profileComp #id_corpcom').val());
}
else if (e.target.id === 'email_corpcom_all' && e.type === 'click') {
console.log('Click email_corpcom_all:', $(this).val());
// Действия для изменения #email_corpcom_all
console.log($('#id_corpcom').val());
console.log($('#profileComp #id_corpcom').val());
return false;// Действия для клика на #corpcom_all
}
/*
const target = $(e.target);
// Если клик был по кнопке
if (target.is('#corpcom_all') && e.type === 'click') {
// Открытие модалки
//$('#yourModal').modal('show');
console.log('Кнопка нажата — модалка открыта');
}
// Если изменён select
if (target.is('#email_corpcom_all') && e.type === 'change') {
$('#email_corpcom_all').click();
const selected = target.val(); // массив выбранных значений
console.log('Выбрано в select:', selected);
}
// Если изменён select
if (target.is('#email_corpcom_all') && e.type === 'click') {
const selected = target.val(); // массив выбранных значений
console.log('клик в select:', selected);
return false;
}
if (e.type === 'click') {
console.log('Произошёл клик по элементу', this.id);
} else if (e.type === 'change') {
console.log('Изменилось значение у элемента', this.id);
}
*/
showModalPreloader();
e.preventDefault();
/*if(sessionStorage.getItem('all_corpcom'))
if(JSON.parse(sessionStorage.getItem('all_corpcom')).email_corpcom != $('#email_corpcom_all').val() )
sessionStorage.removeItem('all_corpcom');
траблы тестить с выбором и сохранением
const formElement = document.querySelector('#profile-comp form');*/
const formData = new FormData();
var kpid = $('.st-order-deal').data('kpid');
var idkp = $('.st-order-deal').data('id-kp');
formData.append('kpid', kpid);
formData.append('idkp', idkp);
formData.append('email_corpcom', $('#email_corpcom_all').val() );
formData.append('id_corpcom', $('#profileComp #id_corpcom').val());//id_corpcom //после не меняется ID
formData.append('corpcom_all', 'true');
fetch('ajax/post.php', {
method: 'POST',
body: formData
//}).then(response => response.json())//{response.json();console.log(response);}
}).then(response => response.json())//response //response.text() //response.json()
.then(function(data){//.then(data => console.warn(data)) // then(data => {console.warn(data)})
//$('#profile-comp form')[0].reset();
$('#profile-comp #files_corpcom').val('');
$("#email_corpcom_all option").remove();
$("#email_corpcom_all").empty();
$.each(data.email, function( index, value ) {
$('#email_corpcom_all').append($('<option>', {value: value, text: value}));
if(value==data.email_corpcom)
$("#email_corpcom_all option[value='" + value + "']").attr('selected', true);
});
/*if(id_corpcom==0)
$("#email_corpcom_all option").click();*///$("#email_corpcom_all option[value='0']").attr('selected', true).change();
$('#profileComp #id_corpcom').val(data.id);
$('#profileComp #name_corpcom').val(data.name_corpcom);
$('#profileComp #client_corpcom').val(data.client_corpcom);
$('#profileComp #departm_corpcom').val(data.departm_corpcom);
$('#profileComp #phone_corpcom').val(data.phone_corpcom);
//$('#email_corpcom').val(data.email_corpcom);
$('#profileComp #address_corpcom').val(data.address_corpcom);
$('#profileComp #details_corpcom').val(data.details_corpcom);
$('#profileComp #info_corpcom').val(data.info_corpcom);
$('#profileComp .fileslist_cor li').remove();
$.each(data.files_corpcom, function( index, value ) {
//$('.fileslist_cor').append('<li ><a class="linkattah" data-file="'+data.path+'" href="attah.php?file-download='+data.path+'" target="_blank"> '+value+'</a></li>');
$('#profileComp .fileslist_cor').append('<li><a class="linkattah_corpcom" data-file="'+data.id+'" href="#" >'+value+'</a> <button type="button" data-file="'+value+'" style=" float: right;color: red;" class="linkattah_corpcom_del btn btn-outline-light btn-sm"> удалить <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"></path> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"></path> </svg> </button></li>');
//console.log( index + ": " + value );
});
if(data.files_corpcom==''){
$('#profileComp .fileslist_cor').html('<li><i>Нет файлов</i></li>');
}
//const formState = enableFormAutoSave(formElement , 'all_corpcom');
hideModalPreloader();
})//;
.catch((error) => {
console.error(error);
//console.log(JSON.stringify(error));
hideModalPreloader();
$('.success.alert.alert-success.alert-warning').remove();
$('#profileComp .fileslist_cor').after(<div class="success alert alert-success alert-warning mt-4">
<div class="alert-message text-center">
<strong>Ошибка errorydiskig4+</strong><br><small>Обратитесь техническую поддержку</small>
</div>
</div>);
var timeout = setTimeout(function() {
$('.success.alert.alert-success.alert-warning').remove();
// $('.send-post-email').prop('disabled', false);
// $('.spinner-border').hide();
}, 24000);
showAlert('danger', error, 'body', 14500, 'position: fixed;top: 50%; left: 1%; opacity: 0.9;');
});
//e.stopPropagation();
});//} //corpocom_all
/*$("#profile-comp form").submit(function(e){
console.log('#profile-comp form');
});*/