We Keep Coding

How to simulate a button click in AJAX

I am writing a program that should simulate clicking on submit in AJAX, after which the page should asynchronously reload. I wrote a program, that asynchronously reloads the page, but only if I click on the submit button.
Here is my program:
$("#form_id").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "../async_db.php",
data: str,
success: function(html) {
$('#d_id').html(html);
}
});
return false;
});

To reload a page after post data by ajax asynchronously you can use location.reload() at the end of the submit() function.
$("#form_id").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "../async_db.php",
data: str,
success: function(html) {
$('#d_id').html(html);
}
});
return false;
location.reload();
});

my ajax keeps refreshing the whole page instead of the div

I have an ajax form and I want to reload the div instead of the whole page, but it isn't working.
This is my handling.js:
$(document).ready(function(){
$('#guideForm').submit(function(){
$.ajax({
type: 'POST',
url: '../includes/handling.php',
data: $(this).serialize()
})
.done(function(data){
$('#guide').load(document.URL + ' #guide');
})
return false;
});
});
this is my handling.php:
if ($_POST['guide']) {
$settings->addGuide($_POST['guide']);
}
EDIT:
Formcodes:
<div class="col-md-4">
<h2>test title</h2>
<p class="guids">This is a test text.</p>
<form method="post" id="guideForm">
<input name="guide" value="1" style="positon:absolute; display:none;">
<button class="btn btn-primary">Got it!</button>
</form>
</div>
Can someone help me to figure out what I'm doing wrong?

You should try e.preventDefault()
$('#guideForm').submit(function(e){
e.preventDefault(); // added this line and an argument 'e' to the function
$.ajax({
type: 'POST',
url: '../includes/handling.php',
data: $(this).serialize()
})
.done(function(data){
$('#guide').load(document.URL + ' #guide');
})
return false;
});

Use e.preventDefault();
$(document).ready(function(){
$('#guideForm').submit(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '../includes/handling.php',
data: $(this).serialize()
})
.done(function(data){
$('#guide').load(document.URL + ' #guide');
})
return false;
});
});

$('#guideForm').submit()
The above jquery statement would by default submit the fold which would essentially reload the code. If you do not want this to happen,
add the following
event.preventDefault();
This would prevent the submit of the form and execute the code in the function

I think there's an error in your js that's why it doesn't execute as expected, have you checked if you get any error? Maybe it's because you don't have a termination on your $.ajax function.. try adding ";" terminator.
$(document).ready(function(){
$('#guideForm').submit(function(){
$.ajax({
type: 'POST',
url: '../includes/handling.php',
data: $(this).serialize()
})
.done(function(data){
$('#guide').load(document.URL + ' #guide');
});
return false;
});
});

To stop the page from submitting you need to prevent the default behavior of the event i.e. to submit the form.
Your page keeps reloading because after your request DOM submits the form. And, as default behavior, Your form submits itself on the same page as you haven't specified a action param.
So, there are multiple ways of doing this.
i). Stop the JS event from propagating by using the method preventDefault() of event object.
Like this:
$(document).ready(function(){
$('#guideForm').submit(function(e){
e.preventDefault(); //stop default behaviour
$.ajax({
type: 'POST',
url: '../includes/handling.php',
data: $(this).serialize()
})
.done(function(data){
$('#guide').load(document.URL + ' #guide');
})
return false;
});
});
This is the most official way of doing this.
ii). You can change your submit button/input to a simple button and bind the ajax with onClick event.
Like this:
$(document).ready(function(){
$('#fakeSubmitButton').click(function(e){
$.ajax({
type: 'POST',
url: '../includes/handling.php',
data: $(this).serialize()
})
.done(function(data){
$('#guide').load(document.URL + ' #guide');
})
return false;
});
});
iii). You can define javascript:void(0) as your form's action attribute. This will automatically prevent form from submitting.
iv). By returning false from the event handler. Which you are currently doing. It is strange it is not working as jQuery doc itself says:
we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.
Maybe the following post can help you:
jQuery - Form still submits with return false
Also check the answer of Chen-Tsu Lin in the above post. It is given a link for when you should not use return false.
Hope this helps.

Use e.preventDefault(); to stop the default behavior of submit.
$(document).ready(function(){
$('#guideForm').submit(function(e){
e.preventDefault(); //stop default behaviour
$.ajax({
type: 'POST',
url: '../includes/handling.php',
data: $(this).serialize()
})
.done(function(data){
$('#guide').load(document.URL + ' #guide');
})
return false;
});
});

AJAX is not being called

I'm having an issue with AJAX as for some reason it either isn't being called or isn't working
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$("server-results").html(data);
}
});
$('#loadingDiv').hide().ajaxStart(function() {
$(this).show();
});
//.ajaxStop(function() {
// $(this).hide();
//});
});
});
I've debugged as much as I could and there is no issue with the form function being activated in JavaScript or the 3 variables being transported into the JS code block. However ajaxStart doesn't activate which makes me believe that the problem is with just ajax.
I also checked the link to ajax and it seems to be working however I'm not sure if its the right link or if it's not valid for whatever reason.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
FYI the ajax link is at the top of the page above both HTML and JS.

You have passed wrong parameters:
type: post_url,
url: request_method,
You need to pass post_url in url and request_method in type. Just change it to:
type: request_method,
url: post_url,

$("server-results").html(data); here you have not specified if server-results is a class or id and therefore the output of the server will never be printed on the page
jQuery .ajaxStart()
As reported in jQuery's official documentation, the ajaxStart event can not be activated by the #loadingDiv element, but you must use the document.
$( document ).ajaxStart(function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
});
Summing up the code should be something like this.
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$(".server-results").html(data);
}
});
$(document).ajaxStart(function() {
$('#loadingDiv').show();
});
.ajaxStop(function() {
$('#loadingDiv').hide();
});
});
});

Ajax post with on()

$('body').on('click','.removebet i',function(e){
var a = $(this).attr("id");
var data = "a="+a;
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(e){
});
I'll explain the problem. I can post AJAX form with this function and there's no problem except the .removebet i comes from the ajax.
If I append .removebet i with AJAX this function doesn't work because it doesn't call AJAX.
example:
$(".maindiv").html("<span class='removebet'><i>Yes</i></span>");
Then when I clicked to 'i' tag the function at top doesn't work.

I believe this should work.
$('.removebet > i').click(function(event){
var a = $(this).attr("id");
alert(a);
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(retval){
alert(retval);
}
});
});
EDIT
This will work, however each newly added item will not be bound as the binding has already happened. In order to get newly added items to be bound as well you will have to rebind them when they are added.
$.ajax({call to get your new item},
success: function(data){
// add to dom
bindElement(newElement);
}
});
function bindElement(element){
$(element).click(function(event){
var a = $(this).attr("id");
alert(a);
$.ajax({
type: "POST",
url: "yorumcikar.php",
data: data,
success: function(retval){
alert(retval);
}
});
});
}

Is it possible to submit form twice?

I have the situation like updating values to db when form is submitted.Issue here is, Total is calculated only after form is submitted. so i have to update the calculated total again in DB. I need to submit again manually to update it. To achieve this we can use jquery here to form submitted second time with out click it again. Is there quick way to do this ?
Kindly advice ?

You can use ajax to submit form twice, see following code:
function submit() {
var form = $('#your-form');
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
}
});
}
});
}