We Keep Coding

Action returns Status Code 204 but, AJAX success function doesn't execute

My controller is correctly returning new HttpStatusCodeResult(204)(checked using debugging), but the success function is not triggered. I just want to reset a text field after I've submitted something.
Ajax:
$(document).ready(function () {
$("#offersubmit").click(function (e) {
$.validator.unobtrusive.parse($('offerForm'));
if ($(this).valid()) {
var valdata = $("#offerForm").serialize();
$.ajax({
url: "/Product/MakeOffer",
type: "POST",
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: valdata,
success: $(document).ready(function () {
alert("AAA");
$('#offerText').val('');
})
})
}
});
});
Also tried with alert() and it didn't show anything. Any help would be appreciated

You need to remove the $(document).ready(.. code
success: $(document).ready(function () {
alert("AAA");
$('#offerText').val('');
})
should be
success: function(data) {
alert("AAA");
$('#offerText').val('');
}

insert html using js

I try using ajax after submitting the form to get another
$(document).ready(function()
{ $("#my_form").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
document.getElementById("my_form").replaceWith(data.form1);
},
error: function(data)
{ console.log(data);
}
});
});
});
but on the page the html code is inserted as a string, how can this be fixed?

Its look like your are replacing your subbmitting form, you can use jQuery .html() function to replace.
$(document).ready(function()
{ $("#my_form").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
//document.getElementById("my_form").replaceWith(data.form1); //remove this.
//add below code
var parent=$("#my_form").parent();
parent.html(data.form1);
},
error: function(data)
{ console.log(data);
}
});
});
});

ajax inside addEventListener not working

This is very simple but I am missing something here and could not figure out. I have a submit button with an addEventListener so when you click, it will call to php file. However, this is what i get
{"readyState":0,"responseText":"","status":0,"statusText":"error"}
but it works if i place ajax outside of addEventListener. I am so confused
index.html
<input type="submit" value="Submit" id="submit"/>
index.js
$(document).ready(function() {
document.getElementById('submit').addEventListener('click', function () {
$.ajax({
type: 'GET',
url: 'index.php',
data: {'user_id': '123213'},
complete: function (response) {
alert(JSON.stringify(response));
}
})
})
});
index.php
echo json_encode("got to php file!!!");

Try this instead:
$('#submit').click(function(){ // Click handler
$.get('index.php',
{'user_id': '123213'}, // Data payload
function(resp) { // Response callback
alert(JSON.stringify(resp));
});
return false; // Prevent default action
});

$(document).ready(function() {
$('#submit').on('click', function () {
$.ajax({
type: 'GET',
url: 'index.php',
data: {'user_id': '123213'},
})
.done(function(data) {
console.log("success");
})
.fail(function(msg){
console.log("error");
});
})
});
Try this it will work

Javascript/Jquery stops working after Ajax call

I have an ajax call that works great the first time the form is submitted after that all javascript on the page seems to break. As well as the form won't submit with ajax again.
Here is my ajax call:
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
},
});
event.preventDefault();
});
I'm getting no errors in my console. Any ideas what might be causing this?

I solved the issue, the main page content was changing. Which was causing the javascript to unload. So I need to use Jquery .on/.live and then it works. For what ever reason this worked fine on one server and not on another.

Use as below: No Need to define event.preventDefault();
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
},
});
return false;
});

Remove disabled after submitting the form. And remove the , mentioned by #JustinRusso.
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
}
});
event.preventDefault();
});

How can I merge two separate javascripts in one?

How can I merge two separate javascripts in one?
I have two separate javascripts. One sends form data to post.php page without page refresh AND refreshes DIV content with (div.php) , but second disables corresponding form submit button. How can I merge this code in one? (not that I have many forms with different id’s in one page).
Problem is on IE9, where this script double submits data!!!
$(function() {
$('form').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#sidebar').load('div.php');
}
});
e.preventDefault();
});
});
$(document).ready(function() {
$('input[type=submit]').click(function() {
$(this).prop("disabled", true);
$(this).val("Selected");
$(this).closest('form').trigger('submit');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Remove
</script>
<script>
And you're done ;-)
I would go a bit further though:
$(document).ready(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function (returnedData) {
$('#sidebar').load('div.php');
}
});
return false;
});
$('input[type=submit]').click(function () {
$(this).prop("disabled", true);
$(this).val("Selected");
$(this).closest('form').trigger('submit');
});
});

To combine the two code just remove the code
});</script><script>$(document).ready(function () {
to prevent double form submission in ie9, use return false:
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function (returnedData) {
$('#sidebar').load('div.php');
}
});
return false;});