We Keep Coding

Html Ajax button not doing anything

im sure this is something obvious but I cant figure it out
onclick of button retrieveScoreButton my button is simply not doing anything
any help is appreciated, im attempting to append the data to a table but cant even get it to register the clicking of the button so I cant test the function showsccore
<button id="addScoreButton">Add score</button>
<button id="retrieveScoreButton">Retrieve all scores</button>
<br>
<div id="Scores">
<ul id="scoresList">
</ul>
</div>
<script>
$(document).ready(function () {
$("#addScoreButton").click(function () {
$.ajax({
type: 'POST',
data: $('form').serialize(),
url: '/addScore',
success: added,
error: showError
}
);
}
);
});
$(document).ready(function () {
$("#retrieveScoreButton").click(function () {
console.log(id);
$.ajax({
type: 'GET',
dataType: "json",
url: "/allScores",
success: alert("success"),
error: showError
}
);
}
);
});
function showScores(responseData) {
$.each(responseData.matches, function (scores) {
$("#scoresList").append("<li type='square'>" +
"Home Team " + matches.Home_Team +
"Away Team: " + matches.Away_Team +
"Home: " + scores.Home_Score +
"Away: " + scores.Away_Score
);
}
);
}
function showError() {
alert("failure");
}
</script>
</body>
</html>

There are a couple things wrong here:
console.log(id);
$.ajax({
type: 'GET',
dataType: "json",
url: "/allScores",
success: alert("success"),
error: showError
});
First, you never defined id. (After some comments on the question it turns out your browser console is telling you that.) What are you trying to log? You may as well just remove that line entirely.
Second, what are you expecting here?: success: alert("success") What's going to happen here is the alert() is going to execute immediately (before the AJAX call is even sent) and then the result of the alert (which is undefined) is going to be your success handler. You need a handler function to be invoked after the AJAX response, and that function can contain the alert.
Something like this:
$.ajax({
type: 'GET',
dataType: "json",
url: "/allScores",
success: function() { alert("success"); },
error: showError
});
(To illustrate the difference, compare your current success handler with your current error handler. One of them invokes the function with parentheses, the other does not. You don't want to invoke a handler function right away, you want to set it as the handler to be invoked later if/when that event occurs.)

html() not updated before alert() is shown

I've got a problem since I've migrated from jQuery 1.11 to jQuery 3.0. I'm running a jQuery POST request and before the migration it first finished the html(data.responseText) and then moved on with the code that follows. Like this:
$.ajax({
type: "POST",
url: "/files/" + url,
data: $("#entryForm").serialize() + '&journal_id=' + journalId,
complete: function(data) {
$('#saveResults').html(data.responseText);
alert("function done");
}
});
In the data.responseText there is an alert which runs first and after complete the function html() the other alert("function done") was running.
After the migration the alert("function done") is running first so it appears the function html() is not finished at this point because the alert from the responseText is coming after the alert("function done"). So I tried this:
$.ajax({
type: "POST",
url: "/files/" + url,
data: $("#entryForm").serialize() + '&journal_id=' + journalId,
complete: function(data) {
$('#saveResults').html(data.responseText).promise().done(function() {
alert("function done");
});
}
});
Unfortunately this didn't fix my problem. Anyone an idea how to fix it?

Try this.
.html is set when response is back and when success is completed, complete is ran
success: function(data){
$('#saveResults').html(data.responseText);
},
complete: function(data)
{
alert("function done");
}

Form submit Ajax using jQuery sometimes does not works

I am doing form data submit using Ajax with jQuery.
When I submit form on popup window, I refresh the parent page.
My code:
$(document).ready(function() {
$("#frm_addSpeedData").submit(function(event) {
//event.preventDefault();
$.ajax({
type: "POST",
url: "/webapp/addSpeedDataAction.do",
data: $(this).serialize(),
success: function(data) {
//console.log("Data: " + data);
window.opener.location.reload();
}
});
});
});
However page gets refreshed on success of callback but i can not see update on my parent page. Sometimes I can see updates and sometimes not. What is the issue? I also need to know how I can write it in native javascript and submit form using ajax javascript.

Maybe your getting this error due the fact that javascript is async and your code will proceed even when you have yet no response from the request.
Try this:
$(document).ready(function() {
$("#frm_addSpeedData").submit(function(event) {
//event.preventDefault();
$.ajax({
type: "POST",
url: "/webfdms/addSpeedDataAction.do",
data: $(this).serialize(),
async: false, // This will only proceed after getting the response from the ajax request.
success: function(data) {
//console.log("Data: " + data);
window.opener.location.reload();
}
});
});
});

Javascript: function called once, but is executed twice

I'm trying to work on a script, that makes ajax request to pull more feeds from the server. Somewhat like pagination.
The problem here is SiteHelper.loadMoreFeeds() function is called once when a "More" link is clicked. But the function's code executes twice. Can't figure out why this is happening.
There's no loop nor recursive calls.
I've tried "alerting" in some points, to verify that function is called only once; which is true but it's code is executed twice.
Thanks in advance
//SiteHelper = {....} has lots of code already
SiteHelper.loadMoreFeeds = function (loaderUri, limit) {
$(".feeds-loadmore .more").hide();
$('.feeds-loadmore').find('.loading-anim').fadeIn();
alert('loadMoreFeeds called');
$.ajax({
type: "GET",
url: SiteHelper.baseUrl(loaderUri),
data: { 'limit': limit },
cache: false,
success: function(result) {
$('.feeds-loadmore').remove();
$("#content").append('<!-- [data] : ' + JSON.stringify(limit) + ' -->');
$("#content").append(result);
$("#content").append('<!-- //[data] -->');
alert('ajax success');
}
});
};
$(function() {
$('#content').on('click', '.feeds-loadmore a.more', function(e) {
var loaderUri = decodeURIComponent( $(this).attr('data-loader') );
var limitData = $(this).attr('data-limit');
if(!loaderUri)
return;
alert('clicked');
SiteHelper.loadMoreFeeds( loaderUri, JSON.parse(limitData) );
e.preventDefault();
})
});

Why can't I use jQuery to fire an AJAX request from an unload event handler?

I have the following code, intended to log the event when a user closes a chat window:
$(window).unload( function() {
test();
});
function test()
{
alert("Hi");
$.ajax({
type: "POST",
url: baseUrl + 'Index/test',
data: "user_id=" + "Nisanth" + "& chat_id=" + 2,
success: function(msg){
alert(msg);
}
});
alert('Success');
}
Both the "Hi" and "Success" messages alert fine but the alert in the AJAX callback doesn't... The operation I intend to trigger via the AJAX request is also not happening (I'm developing a chat application, and intend to log an entry in the database when the user closes the window).

Because the ajax is asynchronous, the page is unloading before the response is properly sent, effectively terminating the connection. Try setting async:false;, although this will delay unloading the page until after the response is received, which isn't great for user experience if your server is running slow.
$(window).unload( function () {
test();
});
function test()
{
alert("Hi");
$.ajax({
async: false,
type: "POST",
url: baseUrl + 'Index/test',
data: "user_id=" + "Nisanth" + "& chat_id=" + 2,
success: function(msg){
alert(msg);
}
});
alert('Success');
}

the problem is the format of your data. It is converted to a query string, it must be Key/Value pairs something like:
"user_id:value"