One of the first things to note is that there is a popup div containing a form.
Below is the structure of the div:
<div class="addnewrule" id="add_message_0">
<form method="post" action="" id="frmadd">
<input type="hidden" name="filter" value="1">
<input name="rule_id" type="hidden" value="0">
<table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
<!-- Rest of the code here -->
</table>
</form>
</div>
The jQuery AJAX function provided below performs validation checks and displays error messages in a message div:
function submitRule(frmId, rule_id)
{
var data=$('#'+frmId).serializeArray();
$.ajax({
type: 'POST',
url: 'ajax/rule_update_process.php',
data: data,
dataType: 'json',
success: function(jData)
{
if (jData.status == 1)
{
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
}
else
{
window.location.href = 'settings_rules.php';
}
}
});
}
Since the popup div is scrollable, it is necessary to scroll within the div to display the error message.
If you face issues with scrolling to the top of the popup div to show the error message div, check the following code snippet:
An attempt was made using this code snippet to achieve the scroll effect:
However, it seems like there might be an issue. Troubleshoot and adjust as needed.
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);