Encountering an issue with form data submission to the server through AJAX. After passing the data, the account view-component reloads, but without the responsive UI controls. See the problem demonstrated https://i.sstatic.net/ciRhh.gif.
While the responsive controls still function when resizing the page past mobile view-width and back, the plus/minus icons disappear upon form submission, affecting the dropdown functionality on mobile devices. Here's how it appears on desktop: https://i.sstatic.net/SUgpT.png
Check out the jQuery code below for the AJAX Post and responsive layout:
AJAX Post
$('#AccountListContainer').on('submit', 'form' ,function (e) {
e.preventDefault()
var container = $("#AccountListContainer")
var dataToSend = $(this).serialize()
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: dataToSend,
context: AccountListContainer,
success: function (data) {
displayMessage(data.result, data.message)
//$.get("/Bank/UpdateAccountList", function (data) { container.html(data) })
$(container).load("/Bank/UpdateAccountList")
console.log('Ajax post success')
},
error: function () {
console.log('Throw Error')
//throw Error page?
}
})
});
Responsive layout
$(document).ready(responsiveTransactionTable)
//Function for responsive table
function responsiveTransactionTable() {
var isMobile = false
var collapsibleHeadings = $('thead > tr').children().filter('.collapsible')
//Toggle between desktop and mobile layout
function toggleTableLayout() {
var wWidth = $(window).width();
if (wWidth >= 992) {
console.log('You\'re in Desktop view')
if (isMobile == true) {
$('tr').unbind();
$('.toggle-button').remove()
$('.subData').remove()
$('tr.data').removeClass('opened')
isMobile = false
}
} else {
console.log('You\'re in mobile view')
if (isMobile == false) {
$('tr.data > td:first-child').prepend('<span style="padding:5px" class="fas fa-plus toggle-button "></span>')
isMobile = true
}
//Add click event for displaying hidden records in dropdown
$('tbody > tr').unbind('click').bind('click.', function (e) {
var selectedRow = $(this)
var toggleIcon = selectedRow.find('.fas')
if (selectedRow.hasClass('opened')) {
toggleIcon.removeClass('fa-minus').addClass('fa-plus');
selectedRow.next('tr').remove()
selectedRow.toggleClass('opened')
} else {
toggleIcon.removeClass('fa-plus').addClass('fa-minus');
var newRow = $('<tr>').addClass('subData')
var cols = "";
cols += "<td colspan='100%'>"
cols += "<div style='dispaly:block'>"
cols += "<table class='table'>"
selectedRow.children().filter('.collapsible').each(function (index) {
cols += "<tr>"
cols += "<th>" + collapsibleHeadings.eq(index).text() + "</th>"
cols += "<td>" + $(this).text() + "</td>"
cols += "</tr>"
})
cols += "</table>"
newRow.append(cols)
newRow.insertAfter(selectedRow)
selectedRow.toggleClass('opened')
}
})
}
}
toggleTableLayout()
$(window).resize(toggleTableLayout)
$('#AccountListContainer').on('show.bs.collapse', '.collapse', function () {
$(this).prev().find('.fas').removeClass('fa-chevron-down').addClass('fa-chevron-up')
}).on('hide.bs.collapse', '.collapse', function () {
$(this).prev().find('.fas').removeClass('fa-chevron-up').addClass('fa-chevron-down')
})
}
Seeking insight on resolving this issue encountered during AJAX post, where the plus/minus icons and dropdown functionality remain intact in mobile view. Any help or suggestions would be appreciated. Thank you.
Note: The error depicted in the demo GIF occurs when input == null and the records are dummy data.