Develop Reference

insertBefore(), before() & Closest - inserting data where I need it

I am trying to insert some HTML before a divider class="replydivider" using insertBefore() but I can't get it to work. This is my code:
<div class="col-sm-12 mb-2 replydivider">
<div class="row">
<div class="col-sm-2 offset-1">
<img src="/assets/uploads/user/<?=$_SESSION['userImage'];?>" class="border rounded-circle comment-user-img mr-3">
</div>
<div class="col-sm-8 rounded form-inline">
<form method="POST" class="form-group reply-form">
<input type="text" name="comment" class="form-control mr-2" placeholder="Reply here" required>
<input type="hidden" name="postId" value="<?=$id?>">
<input type ="hidden" name="replyId" value="<?=$row['commentId'];?>">
<input type="submit" class="btn-sm btn-primary" value="Reply">
</form>
</div>
</div>
</div>
The issue I'm having is it has to be inserted before the div relative to the form that is submitted as there will be many replydividers and forms on the page.
I've tried the following and countless variations but can't get it to work:
$(this).closest('.replydivider').before(data);
$(this).closest('div').find(".replydivider").before(data);
$(this).closest('form').find(".replydivider").before(data);
$(data).insertBefore('.replydivider');
Any guidance would be appreciated.
EDIT:
This is my jquery function:
$(function () {
$('.reply-form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/comment/addComment',
data: $(this).serialize(),
success: function (data) {
alert('test');
var test = "<p>Sample data</p>";
$(this).closest('.replydivider').before(test);
}
});
$(this).closest('form').find("input[type=text]").val("");
});
});
Interestingly, if I put the $(this).closest('.replydivider').before(test); line outside the ajax call it works, but not inside it. I put the alert there to test it was returning successful and it is.

.ajax()
The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.
If you want this in the callbacks to be the element that received the event then set the context property of Ajax like:
.......
context:this,
success: function (data) {
.......

keep properties after jquery.load

I'm learning javascript/jquery on the go, I'm trying to reload a form but keeping its js properties (required and masked inputs), code and pictures attached.
First image: Masked inputs works like a charm
Second image: The form its fully filled, still working
Third image: The form it reloaded, but no properties applied
The html form (minmized, just the first field)
<div class="card-body" id="clientsAddFormContainer">
<form method="post" action="main/clients/addController.php">
<div class="form-group row" id="clientRutDiv">
<div class="col-lg-6">
<div class="form-group" id="clientRutInnerDiv">
<label class="col-form-label" for="clientRut">RUT <span class="required">*</span></label>
<input type="text" name="clientRut" id="clientRut" class="form-control" placeholder="Ej. 11.111.111-1" required="" data-plugin-masked-input="" data-input-mask="99.999.999-*" autofocus>
</div>
</div>
</div>
</div>
</form>
<footer class="card-footer">
<div class="switch switch-sm switch-primary">
<input type="checkbox" name="wannaStay" id="wannaStay" data-plugin-ios-switch checked="checked" />
</div> Mantenerme en esta página
<button type="button" style="float: right;" class="btn btn-primary" onclick="realizaProceso();">Enviar</button>
</footer>
The JS for realizaProceso()
function realizaProceso(){
var validator =0;
validator += validateRequiredField('clientRut');
if(validator == 0){
var parametros = {
"clientRut" : document.getElementById('clientRut').value,
"tableName" : 'clients'
};
$.ajax({
data: parametros,
url: 'route/to/addController.php',
type: 'post',
success: function (respText) {
if(respText == 1){
if(document.getElementById('wannaStay').checked){
$("#clientsAddFormContainer").load(location.href + " #clientsAddFormContainer");
}else{
window.location = "linkToOtherLocation";
}
}else{
showNotyErrorMsg();
}
},
error: function () {
showNotyErrorMsg();
}
});
}else{
showNotyValidationErrorMsg();
}
}
So my JS check all fields are validated, then prepare the array, and wait for the php binary response, 1 means the data has been inserted to db, if wannaStay is checked reload the div "clientsAddFormContainer" but as I said, it loose the properties.
Please sorry for my grammar or any other related english trouble, not a native english speaker.
Ps. I've removed some code so it could go different than the images.
Thanks in advance!
EDIT!
The original code is
<div class="card-body" id="clientsAddFormContainer">
<form method="post" action="main/clients/addController.php">
</form>
</div>
one the js exec I got
<div class="card-body" id="clientsAddFormContainer">
<div class="card-body" id="clientsAddFormContainer">
<form method="post" action="main/clients/addController.php">
</form>
</div>
</div>
2nd EDIT
I found the answer in other stackoverflow question

How to get php page to receive ajax post from html page

I have a very simple form that has an input field for first name. I captured the form data and transmitted it via ajax to a PHP page using the standard jQuery posting method. However, I am not able at all get any responses from the PHP page that any data was captured on the server-side. I am not sure what I have done wrong or what is missing.
Here is my code.
Form:
<form action="process.php" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="First name">
<div class="d-none" id="firstName_feedback">
<p>Please enter a first name.</p>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Here is my Jquery Ajax call:
<script>
$(document).ready(function() {
$('form').submit(function(event) {
var formData = $("form").serialize();
console.log(formData);
$.ajax({
type: 'POST',
url: 'form.php',
data: formData,
dataType: 'json',
encode: true
})
.done(function(data) {
console.log(data);
});
event.preventDefault();
});
});
</script>
And here is my PHP page:
if(isset($_POST['formData']))
$ajaxData = ($_POST['formData']);
echo $ajaxData;
{
}

In your Ajax function, you're passing the contents of formData to the server, though not as formData but as their original input name.
In this case, you have:
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="First name">
The input's name is firstName, so you need to call $_POST['firstName'] instead of $_POST['formData'].
if (isset($_POST['firstName'])) {
$ajaxData = $_POST['firstName'];
echo $ajaxData;
}
The same applies for any other field you would have in your form, so for example, having another input with the name lastName means you'd have to call $_POST['lastName'] to access it.
There were also some misplaced brackets and parentheses in the PHP code which I accommodated above.

My ajax code don't send the data to the database

I want to use ajax to add data in the database but nothing happens
i don't know whats wrong is it in the ajax!or in the php
This is part of my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#commentForm").submit(function(){
var U_N = $('input[name="U_N"]').val();
var I_name = $('input[name="I_name"]').val();
var context = $("#inputmessage").val();
$.ajax({
type: "POST",
cache: false,
url : "aAddComm_Menu.php",
data : {U_N:U_N,I_name:I_name,context:context},
});
});
});//end of document ready function
</script>
this the html form:
<form class="form-horizontal" role="form" id="commentForm" method="POST" action="">
<div class="form-group">
<label for="inputmessage" class="col-sm-2 control-label">comment</label>
<div class="col-sm-10">
<textarea name = "context" class="form-control" id="inputmessage" rows="3" placeholder="Enter your comment here . . "></textarea>
</div>
</div> <!-- End of /.form-group -->
<input type="hidden" value = "$Item['Item_Name']" name="I_name"/>
<input type="hidden" value ="$U_N" name="U_N"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button name="SendC" type="submit" class="btn btn-primary" ;>Send</button>
</div>
</div>
</form>
and this is a part of the php page for adding to the database
extract($_POST)
if(isset($context))
{
mysql_query("INSERT INTO menu_commnet VALUES('$I_name','$U_N',NULL,NOW(),'$context')");
}

var U_N = $("input#U_N").val();
var I_name = $("#I_name").val();
var context = $("#context").val();
The jQuery selectors are wrong, you're not selecting anything. The # selector stands for id attribute, but you're trying to select by value of name attribute. You should either add/change id attributes of your input fields, or use
var U_N = $("input[name=U_N]").val();
var I_name = $("input[name=I_name]").val();
var context = $("[name=context]").val();
Tip: next time use developer console inside your browser, you can easily test if selectors are correct. You can type in javascript code as you would inside .js file and test if it's working like you expect.
Also, don't do this in your PHP, use prepared statements.

Did you included you Database conection on your Backend script?
extract($_POST)
'if(isset($context)) {
mysql_query("INSERT INTO menu_commnet VALUES('$I_name','$U_N',NULL,NOW(),'$context')");
}'
i think here you should include you database info, 'include_once("database info.php"); , also make sure you ajax will return a result, and echo php errors, just to be sure its an ajax or php error,

I have few comment regarding your issue :
Replace $("document").ready(function(){ with
$(document).ready(function(){
Before extracting in PHP ,
try var_dump($_POST)
Based on your HTML code use:
var U_N = $('input[name="U_N"]').val();
var I_name = $('input[name="I_name"]').val();
var context = $("#inputmessage").val();

Here is final working example. Just add "ev" argument to submit callback function , then use ev.preventDefault() in it.
$(document).ready(function(){
$("#commentForm").submit(function(ev){
ev.preventDefault();
var U_N = $('input[name="U_N"]').val();
var I_name = $('input[name="I_name"]').val();
var context = $("#inputmessage").val();
$.ajax({
type: "POST",
cache: false,
url : "aAddComm_Menu.php",
data : {U_N:U_N,I_name:I_name,context:context}
});
});
});//end of document ready function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" id="commentForm" method="POST" action="">
<div class="form-group">
<label for="inputmessage" class="col-sm-2 control-label">comment</label>
<div class="col-sm-10">
<textarea name="context" class="form-control" id="inputmessage" rows="3"
placeholder="Enter your comment here . . "></textarea>
</div>
</div>
<input type="text" value="" name="I_name"/>
<input type="text" value="" name="U_N"/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button name="SendC" type="submit" class="btn btn-primary">Send</button>
</div>
</div>
</form>

Trying to perform AJAX with jQuery doesn't work

I'm trying to use AJAX with jquery… this is what I'm trying to do :
<div class="form">
<form name="contact" class="js-form-contact" action="contact.php" method="post">
<div class="clearfix">
<label>Mail</label>
<div class="input">
<input type="text" size="44" name="mail"/>
</div>
<div class="clearfix">
<label>Message</label>
<div class="input">
<textarea rows="6" name="message"></textarea>
</div>
</div>
<!-- recaptcha -->
<br/>
<div class="submit">
<input type="submit" class="btn primary" value="Enviar"/>
</div>
<div id="quote">
<p> :D </p>
</div>
</div>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("btn primary").click(function(){
$.ajax({
type: "post",
url: "contact.php",
data: $('.js-form-contact').serialize(),
success: function(data) {
$('.js-form-contact .btn primary').attr("disabled", true);
$('#quote').html("Rock!!");
// $('.column:first-child .box').after('<p class="msg">' + data + '</p>');
}
});
});
});
</script>
the contact.php is just doing "echo "Hello";" for now. When I click the submit button, the browser goes to contact.php and it echoes "Hello"...
What's the problem here? , I'm quite new with JS and jQuery so please bare with my noobishness :)

Your jQuery selector is wrong. It should be $(".btn.primary"). The . denotes that it's a class of the element you're looking for. No whitespace between classes means the element should have all those classes to match.
Furthermore, you should probably use event.preventDefault() to prevent the click-event bubbling up to the organic submit handler.
To put the money where my mouth is...
// Note the parameter in the click-handler declaration
$(".btn.primary").click(function (event) {
event.preventDefault();
// Do ajax magic here
});