After receiving valuable guidance from Lorin, I was able to reach the solution that allowed jQuery to run .toggleClass() and perform CRUD operations asynchronously on the server-side seamlessly.
I discovered that the missing element in my page was a SriptManager control, which I promptly added:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"/>
It's important to note that EnablePageMethods is set to "true", granting access to the server-side web method for executing the required code.
Subsequently, I eliminated the .click() function on the #saveButtonFull and opted to include the "onclick" attribute directly within the tag itself:
<div id="saveButtonFull" class="buttonFull btnBorderGreyOut" onclick="saveButtonProgress()"></div>
Upon further exploration, I learned about the limitations of including non-static members like TextBoxes inside a Public Static String YouNameIt() web method. To counter this, I arranged an array on the client-side and integrated it into the "data" attribute of the .ajax() event as shown below:
function saveButtonProgress() {
if (flag === true) {
var vargu = [];
$(".textBox").each(function () {
var currentTxtBoxValue = $(this).val();
vargu.push(currentTxtBoxValue);
});
$.ajax({
url: "http://localhost:49795/UserProfile.aspx/UpdateProfile",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{'profileArray': '" + vargu + "'}",
async: true,
success: onSuccess,
error: onFailure
});
function onSuccess(msg) {
var success = msg.d;
console.log(success);
$(".inner").toggleClass("progressBar");
$(".save").toggleClass("textColorize");
}
function onFailure(msg) {
var failure = "Error: " + msg.d;
console.log(failure);
}
}
}