Develop Reference

How do I get my JQuery form submit to work along a page update function?

I have two functions on my Thymeleaf page, the first one handles a form submission with an ajax POST request:
$(".[form-class-name]").submit(function (e) {
e.preventDefault();
...
$.ajax({
type: "post",
url: [post-url]
});
});
The second one updates the page's body at a regular interval:
function update() {
$.ajax({
type: "get",
url: [updateUrl],
success: function (data) {
/*<![CDATA[*/
$("body").html(data);
/*]]>*/
}
});
setTimeout(update, 3000);
}
Both of these functions work separately, but once I include both of them in my script, only the update is working. The form submission script never executes, and since preventDefault() is never called, form submission causes the page to reload.
Is there a way that I can get these functions to cooperate?
EDIT: Including the entire script combined -
$(function () {
$(".[form-class-name]").submit(function (e) {
e.preventDefault();
$.ajax({
type: "post",
url: [post-url]
});
});
function update() {
$.ajax({
type: "get",
url: [updateUrl],
success: function (data) {
/*<![CDATA[*/
$("body").html(data);
/*]]>*/
}
});
setTimeout(update, 3000);
}
update();
});

Jquery event firing order

Why does the function call that contains an ajax request fire off before the append?
$("#range").on("click", function(){
$("#control").empty().append(.....); //why does this get executed after?
var data = 'something';
some_function_with_ajax(data);
}
function some_function_with_ajax(data){
$.ajax({
url: '/url',
type: 'POST',
data: {data: data},
success: function(resp){
// seems the append actually happens here
}
});
}

Ajax not working, won't do what I want

Ajax will not submit no matter what.
I've been trying for hours...
script:
<script>
$(document).ready(
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
</script>

Try this:
$(document).ready(function({
$("#submit").on('click', function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
I also changed the event method, but you should choose the one corresponding your jQuery version!!
P.S re-check the ({})

You've not written document ready properly. Please check below code :
<script>
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
$.ajax({
url: "https://maps.googleapis.com/maps/api/geocode/json?address=birmingham&key=AIzaSyCczrRP8E0BYmt9uGie0J3SgCn9ahdOhxc",
type: "GET",
dataType: "html",
success: function (data) {
alert(data);
}
});
});
});
</script>
I hope this resolves your issue.
PS:
FYI check the alternative ways to write document ready : Documentation
Happy Coding

How to pass javascript variable into php function on an Ajax url?

I am trying to insert the value of parent into the "getFaculties()" function when i call the function using Ajax.
function ajaxfunction(parent)
{
$.ajax({
type: 'GET',
url: 'Connection.php?getFaculties('+parent')',
success: function(data) {
$("#selFaculty").html(data);
}
});
}

please use a proper way to pass data from ajax to php
function ajaxfunction(parent)
{
$.ajax({
type: 'GET',
url: 'Connection.php',
data: {method:'getFaculties', value:parent}
success: function(data) {
$("#selFaculty").html(data);
}
});
}

The correct syntax is
url: 'Connection.php?faculties='+getFaculties(parent),
Since that is query parameter, given a name to it.

use like this function Declaration was wrong
function ajaxfunction(parent)
{
$.ajax({
type: 'GET',
url: 'Connection.php?getFaculties='+getFaculties(parent),
success: function(data) {
$("#selFaculty").html(data);
}
});
}

Call your function first and get return value in variable and then send your ajax request.
function ajaxfunction(parent)
{
var data_in = getFaculties(parent);
$.ajax({
type: 'GET',
url: 'Connection.php?getFaculties='+data_in,
success: function(data) {
$("#selFaculty").html(data);
}
});
}

problems executing a jquery ajax call within a function

I would like to put an ajax call within a function since I use it repeatedly in multiple locations. I want a manipulated version of the response returned. Here's what I'm trying to do (greatly simplified).
a = getAjax();
$('body').append('<div>'+a+'</div>');
function getAjax() {
$.ajax({
type: "GET",
url: 'someURL',
success: function(response) {
return response;
});
}
What's happening, however, is that the append function is running before "a" has been defined in the getAjax function. Any thoughts?

AJAX is asynchronous. This means that the code in the success handler is delayed until the request is successful, while the rest of the code continues as normal. You need to put the relevant code in the AJAX success handler:
getAjax();
function getAjax() {
$.ajax({
type: "GET",
url: 'someURL',
success: function(response) {
$(document.body).append('<div>'+response+'</div>');
});
}
Note that I have also optimised your body selector by using the native Javascript document.body rather than using the standard tag selector.
Edit Callback version
function getAjax(callback) {
$.ajax({
type: 'GET',
url: 'someURL',
success: callback
});
}
You can now do the code inline using a callback function:
getAjax(function(response) {
$(document.body).append('<div>'+response+'</div>');
});
or
getAjax(function(response) {
alert(response);
});
or whatever.
The code inside the anonymous function call will be processed when the AJAX request is complete.

There are two ways to taggle this. one is to use the success callback:
$.ajax({
type: "GET",
url: 'someURL',
success: function(response) {
AppendResponse(response);
});
the other is to set async to false http://api.jquery.com/jQuery.ajax/:
var a;
getAjax();
$('body').append('<div>'+a+'</div>');
function getAjax() {
$.ajax({
type: "GET",
url: 'someURL',
async: false,
success: function(response) {
a = response;
});
}
Important note on non async:
Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.

Why don't you return the response to another function in the success callback. This should handle your need for different responses:
getAjax();
function getAjax() {
$.ajax({
type: "GET",
url: 'someURL',
success: function(response) {
AppendResponse(response);
});
}
function AppendResponse(response) {
$('body').append('<div>'+response+'</div>');
}

One suggestion I have is to pass a trigger to the command you want to run into the AJAX function so that it will run after AJAX has received a response-
a = getAjax();
function getAjax() {
$.ajax({
type: "GET",
url: 'someURL',
success: function(response) {
inputText(response);
});
}
inputText(someText) {
$(document.body).append('<div>'+ someText +'</div>');
}
That way you can create if statements / other alternatives to continue to use the same AJAX command for different results

You can give a handler to the function getAjax(), but if the user needs the information for the next decision then why not wait using async: false?
function getAjax(handler) {
$.ajax({
type: "GET",
url: 'someURL',
success: function(response) {
handler(response);
});
};
function callGetAjax(response) {
if(response === undefined) {
getAjax(callGetAjax);
} else {
$('body').append('<div>'+response+'</div>');
}
}