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

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) {
.......

Related

form.serialize() not working

HTML Code
<div id="address" class="col s12">
<div class="row">
<form method="post" action="" id="addressDetails">
<div class="input-field col s6">
<textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
<label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label>
</div>
<div class="input-field col s6">
<textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
<label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label>
</div>
</form>
</div>
<div class="row center-align">
<button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button>
</div>
</div>
JS Code
function updateProfile(event) {
console.log(this);
event.preventDefault();
form = $(this).closest('.col s12').find('form');
console.log($(form));
$.ajax('profile/updateProfile.php', {
type: "POST",
dataType: "json",
data: form.serialize(),
success: function(result) {
//console.log(result);
}
});
}
$(document).ready(function() {
$("button.updateProfile").on('click', updateProfile);
});
I check network AJAX calls using Chrome Debugger. None of the key value pairs are being passed.
There is no errors in Console Logs.
Your selector in closest() is incorrect. There should be no spaces and both values should be preceded by a . to signify a class selector. Try this:
var form = $(this).closest('.col.s12').find('form');
Working example
Instead of
form = $(this).closest('.col s12').find('form');
use
form = $(this).parent().closest('.col,.s12').find('form');
which matches all the classes and then find the form element
on 4th line of JS code..
Reference the form id
form = $('#addressDetails');
also you could place an alert on form.Serialize() to see exactly the output it may not match the object your method is expecting.
you could also build the data up by using
data:'{lAddress: form.lAddress.val(), pAddress: form.pAddress.val()}'

show confirmation modal dialog after form submission

I have a form and I need it to do 2 things once the submit button is clicked:
I need the form data to be processed in the acknowledge.php that I have created.
I need the modal dialog to display confirmation.
My form:
<form class="quote-form" method="post" action="acknowledge.php">
<div class="form-row">
<label>
<span>Full Name</span>
<input type="text" name="name">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="email">
</label>
</div>
<div class="form-row">
<label>
<span>Phone</span>
<input type="number" name="phone">
</label>
</div>
<div class="form-row">
<label>
<span>Nature of Enquiry</span>
<select name="enquiry">
<option selected>General Enquiry</option>
<option>Logo Design</option>
<option>Web Design</option>
<option>Branding</option>
<option>Social Media</option>
<option>Email/Web Hosting</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
</div>
<div class="form-row">
<button type="button" name="send">Get A Quote</button>
</div>
</form>
I'm new to Javascript and AJAX but I have copied some code from some similar threads and tried to customize it to my site
<script type="text/javascript">
$(".quote-form").submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: $(".quote-form").serialize(),
url: 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
<!--Modal container-->
<div id="myModal" class="modal">
<!-- Modal content-->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
When the submit button is clicked nothing happens. Even the acknowledge.php does not execute. What am I doing wrong?
you need to wrap your code in a document.ready() function:
<script type="text/javascript">
$(function(){
$(".quote-form").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $(".quote-form").serialize(),
url : 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
UPDATE
you need to change the type of your button to submit like this
<button type="submit" name="send">Get A Quote</button>
A number of things that have been holding you up:
In your javascript, you have a trailing }); right at the end.
Your button is doing nothing to trigger the submit event in the javascript. You should alter the button or use a proper submit input. Or use type="submit".
You're not doing anything with data in your success callback. So when the modal opens, nothing else happens.
Your URL in the AJAX request is not set. You could use this.action to use the form's action URL here.
I've made some changes that you can preview in my fiddle.
There are some parts of the fiddle that you should ignore, such as the ajax url and data options. Those should be something like:
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
//...
});
What we obviously do not know now is whether you have included your dependency scripts like jQuery and bootstrap into your page.
For example: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> is the bootstrap javascript.
Make sure that jQuery is above bootstrap, or bootstrap will fail to load as it depends on jQuery. You may need to use the bootstrap CSS as well.
Lastly, you need to check that your action in the form is the correct URL, and that the data in your form that is sent is processed and echoed back as HTML.
You will also want to go to the bootstrap documentation, get a better example of the modal, and check out the forms area to spruce up this form.
You could use developer tools in your browser and note any errors thrown by javascript in the console if you still have problems. (Ctrl+Shift+I).
You didn't need to wrap anything in a document ready.
You doing two things wrong
First you need to wrap your code with document.ready
$(function(){
});
Then you need to fix your url
var form = $(".quote-form");
$.ajax({
type : 'POST',
data: form .serialize(),
url : form.attr('action'),
success: function(data) {
$("#myModal").modal("show");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});

jquery call back not responding?

I made a script but the big problem I found even I did it many times is the call back of jquery not respond:
Here the HTML CODE
<h2 class="form_new_project-heading">Please Add Your Information</h2>
<label for="project_URL" class="sr-only">project url</label>
<input type="text" id="project_URL" class="form-control" placeholder="url- http://www.host.com/folder/" data-validation="url" required="" autofocus="">
<label for="callback" class="sr-only">callback</label>
<input type="text" id="callback" class="form-control" placeholder="callback url- http://www.host.com/folder/callpack.html" required="">
<button class="btn btn-lg btn-primary btn-block" id="registernewapp" type="submit">add new project</button>
and here the jquery script code in the end of the page
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$('#registernewapp').click(function(){
var a_data=$('#project_URL').val();
var b_data=$('#callback').val();
$.ajax({
type:"POST",
data:{server:a_data,back:b_data}
url:"http://localhost/",
success: function(msg) {
alert(Data);
}
});
});
<script src="http://localhost/ajax/jquery-1.9.0.min.js"></script>
There are multiple things wrong with the code:
This is likely not going to refer to a valid resource:
url:"http://localhost/",
So, change it to reference a page or php file or something.
Change the success function like this:
success: function(msg) {
alert(msg);
}
But eventually you'll want to do more with the success function, especially since you're letting the user specify a callback function by name (which is not usually a good idea, btw).

Getting the value of the child of sibling jquery/ajax?

I'm currently trying to make a ajax comment function work once a user clicks "open comments".
Currently I'm getting data back from my php script and the status of the ajax call is "200 OK" so it definetely works but I'm just unable to get the correct value for the current comment which has been clicked on in order to post it to the php script.
What I'm asking is how do I get the value of the ".posted_comment_id" class and then how do I load the data which is returned into the ".commentView" class?
jQuery/AJAX:
$(".closedComment").click(function(){
var $this = $(this);
$this.hide().siblings('.openComment').show();
$this.siblings().next(".commentBox").slideToggle();
$.ajax({
type: "POST",
url: "http://example.dev/comments/get_timeline_comments",
data: {post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").val()},
dataType: "text",
cache:false,
success:
function(data){
$this.closest(".commentView").load(data);
}
});
return false;
});
HTML:
<div class="interactContainer">
<div class="closedComment" style="display: none;">
open comments
</div>
<div class="openComment" style="display: block;">
close comments
</div>
<div class="commentBox floatLeft" style="display: block;">
<form action="http://example.com/comments/post_comment" method="post" accept-charset="utf-8">
<textarea name="comment" class="inputField"></textarea>
<input type="hidden" name="post" value="13">
<input type="hidden" name="from" value="5">
<input type="hidden" name="to" value="3">
<input type="submit" name="submit" class="submitButton">
</form>
<div class="commentView"></div>
<div class="posted_comment_id" style="display:none;">13</div>
</div>
</div>
Replace .val by .html or .text. This will return the innerHTML of the element.
data: {
post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").text()
}
You might need to convert the string to an integer to make it work.
If the query selector fails, this selector might do the job instead:
$this.parent().find(".posted_comment_id")
To add the returned data on your webpage, use the success handler. Here's an example of how it's done:
success: function(json) {
// Parse your data here. I don't know what you get back, I assume JSON
var data = JSON.parse(json),
content = data.whatever_you_want_to_print;
// Assuming your selector works, you put in in the element using .html
$this.closest(".commentView").html(content);
}
});
You probably want to do something like:
$(this).parents('.interactContainer').find(".posted_comment_id").text()

Ajax Form Submitting

I know this has been asked a million times here and I've looked at several examples, but I can't figure out why this form is submitting. The Ajax appears to not being called so I assume it's something simple like a div id issue. I've been frustrating over this 30 minutes now.
JS:
$('#genform').submit(function (e) {
alert('hi');
e.preventDefault();
$.ajax({
url: "month.php",
type: "post",
data: $('#form').serialize(),
success: function (msg) {
$("#info").html(msg);
}
});
});
HTML:
<!-- trigger button -->
<div class="col-md-4">
Bulk PDF Export <span class="caret"></span>
</div>
<!--- popup form div -->
<div id="gendiv" style="display:none;">
<form id="genform">
<div class="form-input">
<select name="month">
<option value="2013-09-01">September 2013</option>
<option value="2013-08-01">August 2013</option>
<option value="2013-07-01">July 2013</option>
</select>
</div>
<div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-1 <span class="pull-right"><input type="checkbox" id="pgy1" checked name="pgy[1]"></span>
</div>
<div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-2 <span class="pull-right"><input type="checkbox" id="pgy2" checked name="pgy[2]"></span>
</div>
<div class="form-input"><i class="icon-ellipsis-horizontal"></i> PGY-3 <span class="pull-right"><input type="checkbox" id="pgy3" checked name="pgy[3]"></span>
</div>
<div class="form-input" style="text-align:center">
<button type="submit" class="btn btn-primary btn-xs">Generate</button>
</div>
<div id="info"></div>
</form>
</div>
Fiddle: http://jsfiddle.net/KQ2nM/2/
The reason it's not working is because the popover clones the form and then places the html inside a div with the class .popover-content.
This means that the event you bound is only attached to the original #genform which is inside the hidden #gendiv.
Use this instead:
$(document).on('submit', '#genform', function(e) {
e.preventDefault();
$.ajax({
url: "month.php",
type: "post",
data: $(this).serialize(),
success: function (msg) {
$("#info").html(msg);
}
});
});
This uses jQuery's .on() function and attaches an event handler to the document which basically watches for a submit event triggered on a form with the id #genform. By attaching the event handler to the document instead of directly to the target element it gets triggered by a submit event regardless of whether a form with the id #genform exists when the event is bound.
Here it is working: http://jsfiddle.net/KQ2nM/4/
You are missing some closing tags:
<div class="form-input">
<i class="icon-ellipsis-horizontal"></i> PGY-1 <span class="pull-right">
<input type="checkbox" id="pgy1" checked name="pgy[1]"> </input> <--- here
</span>
</div>
And the form method (otherwise it spits up an error):
<form id="genform" method="POST">
Now django complains about the CSRF token, but that's your stuff ;)
Here's the new Fiddle.
EDIT: It seems like I got it wrong since now it submits without calling your custom handler and Joe fixed it. But you still need to close those inputs :)

Categories

Resources