это мой скрипт для загрузки частичной формы для добавления нового адреса:
function handleLocationChange() {
var selectedLocationId = $(this).val();
var subLocationSelect = $(this).closest("form").find("#SubLocation_Id");
subLocationSelect.empty();
// That was fist script for showing for 1 page ( not Dynamic form)
$.ajax({
url: "/UserPanel/Home/GetDistrictGroup/" + selectedLocationId,
type: "GET",
dataType: "json", // Specify JSON dataType
success: function (data) {
$.map(data, function (item) {
subLocationSelect.append('' + item.stateName + '');
});
},
error: function () {
alert('Error occurred while loading districts.');
}
});
}
//** For Show click on AddNewAddress for First Form & reload partial Form again
$(document).ready(function () {
// Handle initial and dynamic forms change event in Location_Id of form
//.on is an order: change event on dynamic element: Here is Location_Id in handleLocationChange:
$("#addNewAddressContainer").on("change", "#Location_Id", handleLocationChange); // First was " $("#btnAddNewAddress").click(function () " But change for changing and LocationId
// Click event for adding new address
$("#btnAddNewAddress").click(function () {
var url = $(this).data("url");
$.ajax({
url: url,
type: 'GET',
success: function (data) {
$("#addNewAddressContainer").empty().append(data);
// Bind change event for Location_Id in dynamically loaded form
$("#addNewAddressContainer").find("form:last #Location_Id").change(handleLocationChange);
},
error: function () {
alert('Error occurred while loading the form.');
}
});
});
после загрузки формы у меня есть некоторые операции, такие как добавление нового адреса в базу данных, возврат на страницу и обновление представления с помощью ajax.
но после завершения отправки. ,кнопка опять не работает,значит если я на нее нажму она не работает . как я могу справиться с тем, что он работает во всех статусах, до щелчка и отправки и после нее?
// Handle form submission AddNewAddress Form
$("#addNewAddressContainer").on("submit", "form", function (e) {
e.preventDefault();
var $form = $(this);
var formData = $form.serialize();
$.ajax({
url: $form.attr("action"),
type: $form.attr("method"),
data: formData,
success: function (response) {
if (response.success) {
ShowMessage(response.message); // From My ShowMessage Method
$form.hide();
$('html, body').animate({ scrollTop: 0 }, 'fast');
// بعد از اضافه شدن آدرس جدید، لیست آدرسها را بهروزرسانی کنید
fetchAndUpdateAddressList();
} else {
ShowMessage(response.message);
}
},
error: function () {
ShowMessage('Error occurred while submitting the form.');
}
});
});
function fetchAndUpdateAddressList() {
$.ajax({
url: '/UserPanel/Home/GetClientContactInfoById', // تغییر دهید به کنترلر و اکشن مناسب
type: 'GET',
success: function (addresses) {
console.log(addresses); // بررسی کنید که آیا دادهها به درستی دریافت میشوند
var $addressListContainer = $("#addressListContainer"); // Select the container where addresses are displayed
$addressListContainer.empty(); // Clear the current list
// Check if there are addresses
if (addresses.length > 0) {
addresses.forEach(function (address) {
// Check for undefined values and set default values if needed
var addressValue = address.address || '';
var stateValue = address.state || '';
var districtValue = address.district || '';
var zipCodeValue = address.zipCode || '';
var locationIdValue = address.locationId || '';
var addressHtml = `
State
${stateValue}
District
${districtValue}
Zip Code
`;
$addressListContainer.append(addressHtml);
});
}
// Add the button to add new addresses
var addNewAddressHtml = `
Add New Address
`;
$addressListContainer.append(addNewAddressHtml);
},
error: function () {
ShowMessage('Error occurred while fetching addresses.');
}
});
}
Подробнее здесь: https://stackoverflow.com/questions/786 ... -in-jquery
