Following this previous link, I tried a new AJAX code, but still getting the same result (Data is inserted correctly, but can't stay in the same page).
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
});
e.preventDefault();
});
});
The form has an id="form1" and submit button inside this form is id="insert".
Any help is appreciated, need to fix this today.
The success function should be closed before closing AJAX function. You forgot to add a closing }:
$(function(){
$("#form1").on("submit", function(e){
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
alert($('#form1').serialize() + "&insert=yes"); // add this
} //<--------------------------------------- You missed this
});
e.preventDefault();
});
});
You are sending the insert key as a parameter to post, but it doesn't work because you are not adding it while sending to AJAX. So add that and it works.
Related
I am trying to perform an ajax call inside a form (a Drupal node edit form) , but it seems when performing the call, it submits the form for some reason. Here is a sample code:
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: {"text": jQuery("#edit-body").html()
},
success: function(result){
console.log(result);
}
});
I can replicate this just by executing it in the console, but I attach this to a button click function inside the form. Any tips on preventing the form from submitting, on a POST ajax call?
Here is the full code as requested
jQuery("#edit-body").before('<div id="proofread_bot-button-holder"><button type="button" id="proofread_bot-submit" onclick="return false;">Check with Proofread Bot</button></div>');
jQuery("#proofread_bot-submit").click(function(event){
event.preventDefault();
jQuery("#proofread_bot-button-holder").append("<img id=\"proofread_bot_throbber\" src=\"sites/all/modules/proofread_bot/images/throbber.gif\" />");
jQuery.ajax({
type: "POST",
url: "proofread_bot/check",
dataType: "html",
data: {"text": jQuery("#edit-' . variable_get('proofread_bot_field') . '").html()
},
success: function(proofread_result){
jQuery("#proofread_bot-submit").after(proofread_result);
jQuery("#proofread_bot_throbber").remove();
}
});
});
You need to override form's onsubmit event to prevent submitting:
$("formSelector").bind('submit', function (e) {
var isValid = someYourFunctionToCheckIfFormIsValid();
if (isValid) {
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: { "text": jQuery("#edit-body").html()
},
success: function (result) {
console.log(result);
}
});
}
e.preventDefault();
return false;
});
By calling
e.preventDefault();
return false;
You prevent synchronous postback from occurring.
UPDATE:
If you don't want to override form submit, maybe you could place your button outside of form tag (you can adjust position with css if necessary)?
If you are using a input type="submit" button, then you need to do a return false; at the end of the function to prevent it from submitting.
Another solution is to e.preventDefault() on the button click
$(".button").click(function(e){
e.preventDefault();
return false;
});
you can change submit button type to just a button type and add "onclick" event to that button.
input type="button" value="savebutton" onclick="return doThisOnClick();"
function doThisOnClick(){
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: { "text": jQuery("#edit-body").html()
},
success: function (result) {
console.log(result);
}
});
}
I think this is most straightforward.
I am now in javascript, I am trying to display a indictor icon when ajax starts and hide it when it finishes, below is my code:
CSS:
div.ajax-progress {
//some setting and url
}
<body>
<div class="ajax-progress"></div>
</body>
Javascript:
$('#fileToUpload').on('change', function(e) {
var file = e.target.files[0];
var formData = new FormData($('form')[0]);
imageId = cornerstoneWADOImageLoader.fileManager.add(file);
$.ajax({
url: 'loadfile.php',
type: 'POST',
data: formData,
async: false,
dataType: 'json',
timeout : 60000,
beforeSend :function(){
$(".ajax-progress").show();
}，
success: function (html) {}
$(".ajax-progress").hide();
//doing something}
});
});
but nothing happens, any idea? appreciated.
Maybe if you put $(".ajax-progress").show(); before the call of ajax $.ajax({}); and them hide it in the succes.
I don't know if that's the same to what you have in your code but you commented out the success closing bracket }
you can also use console.log() or alert() to see what's going on in your code.
Try rewriting your ajax as below:
$.ajax({
url: 'loadfile.php',
type: 'POST',
data: formData,
async: false,
dataType: 'json',
timeout : 60000,
beforeSend :function(){
//do something
}，
success: function (html) {
//doing something
}
});
$(document).ajaxStart(function() {
$(".ajax-progress").show();
});
$(document).ajaxStop(function() {
$(".ajax-progress").hide();
});
This will show and hide $(".ajax-progress") in all your ajax requests within the application.
I am newbie to jQuery... I intend to load html from another location. When I try to load something bigger, I don't get any error (except 'error') or anything, nothing happens instead. Here is my code:
$(function () {
var text;
$("a").on('click', function (e) {
$.ajax({
url: $(this).attr('href'),
type: 'GET',
dataType: 'html'
}).done(function (loadedData) {
text = $(loadedData).match(/\d{3}/g);
$.ajax({
url: '#Url.Action("MvcMethod", "Home")',
type: 'POST',
dataType: 'html',
data: {
fulltext: text,
filter: ''
}
})
.done(function (tagData) {
$("#target").html(tagData);
});
});
e.preventDefault();
});
});
I have a link, full path for a file. The file is exists of course. When I click on it, I would like to pass its content to an MVC action method.
What's wrong, help me pls.
Thanks.
UPDATE: the link maybe points OUT OF domain!
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();
});
I am trying to submit a form without reloading the page. I have tried using this script with no success:
$('#formId').submit(function(e){
$.ajax({
type: "POST",
url: 'serverSide.php',
data: $('#formId').serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
});
Does anyone know what I am doing wrong?
Using return false will usually do the trick
$('#formId').submit(function(e){
$.ajax({
type: "POST",
url: 'serverSide.php',
data: $('#formId').serialize(),
success: function(data){
alert(data);
}
});
e.preventDefault();
return false;
});
Try putting preventDefault before the AJAX. This way the default actions are prevented before the ajax-request is triggered
$('#formId').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: 'serverSide.php',
data: $('#formId').serialize(),
success: function(data){
alert(data);
}
});
});