We Keep Coding

How to refresh table data ajax form submit?

I'm submitting an ajax request using Bootstrap Modal. When I submit, I want to refresh the modal body. It means that what I have saved from my form I'm showing my modal body I want show that row in table. when I use this, that table got hidden without refreshing. What's wrong?
$('#uploadform').submit(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
formData.append('task_id','{{$task->id}}');
formData.append('title',$('#title').val());
$.ajax({
type:'POST',
url:'{{url('/uploadTask')}}',
data:formData,
success:function(data){
$("#images-table").html(data);
$("#some_form")[0].reset();
},
error:function (data) {
alert('error');
},
async:false,
processData: false,
contentType: false,
});
});

return that row data form controller and create html and append to to existing table. there is no concept of refreshing bootstrap table. only append new data.
$('#tableid').append('<tr><td>name</td><td></td></tr>');
this will append that row to at the last of your table.

AJAX submits form, but it won't stop but it insert data into database

I'm working on a message board and inputs forms have to be validated if javascript is disabled. If javascript is enabled it has to have AJAX to stop refresh and submit form.
I have an html form which is validated by php. And now I'm trying to add jquery and ajax to stop page refresh.
I added a loading gif and inactive inputs field on submit button. But when I add $.ajax gif won't stop spinning and fields won't become active. After I refresh the page I can see that the input data was added to database.
I'm quite new in using ajax and maybe you could help me find a solution to my problem.
here is my code:
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
// getting input values by id
var fullname = $("#fullname").val();
var message = $("#message").val();
// array for input values
var data = { fullname : fullname,
message : message };
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
//dataType : 'json',
data: data,
cache: false,
success: function(data){
alert('success');
}
}).done(function(result) {
if (result == "")
form.submit();
else
alert(result);
}).fail(function() {
alert('ERROR');
});
});
});
I get success and input value alert, when I use dataType : 'json', I get error alert.
I would appreciate any kind of help.

maybe once you display .gif image than you are not going to hide the same .gif image again although your ajax finished or stop or fail (in any case).
So, on success of ajax add below two lines to hide .gif and enable text fields.
//enabled all the text fields
$('.text').prop("disabled", false);
//hide the loading sign
$('.loading').hide();
Whole code seems like this,
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
data: data,
cache: false,
success: function(data){
//enabled all the text fields
$('.text').prop("disabled", false);
//hidethe loading sign
$('.loading').hide();
alert('success');
}
});

How to refresh table that is brought with ajax?

I have a problem refreshing my table after updating some fields. So I click on the link in one table, then I send parameters to .html page where I build the table, then I return entire table with my ajax call. Problem is after I bring the table on my screen and I select radio buttons and hit save my table is not refreshing after that and fields are not updated. What would be the best way to refresh my table after updating my fields? Here is my function where I'm getting table on my page:
$j.ajax({
type: 'POST'
, url: 'myData.html'
, cache: false
, data:{'eventID':eventID,'ptcDate':ptcDate}
, dataType: "html"
, async: false
, success: function(html)
{
$j('#box').html(html);
}
, error: function(jqXHR, textStatus, errorThrown){ gwLogIt(errorThrown) }
});
If anyone can help with this problem please let me know. Thanks

Refresh Div's content after AJAX form submission

I have this Ajax code to submit a PHP form. The code works, however I would like the <div> that the content is supposed to change to refresh without the whole page refreshing.
The div's ID is #container.
Here is the AJAX code:
$('.accept_friend').submit(function(){
var data = $(this).serialize();
$.ajax({
url: "../accept_friend.php",
type: "POST",
data: data,
success: function( data )
{
//here is the code I want to refresh the div(#container)
},
error: function(){
alert('ERROR');
}
});
return false;
});

You will have to change the DIV's innerHTML property.. with jQuery it is done like so:
$('#container').html('... new content goes here...');
so in your case add in the success function:
$('#container').html(data);
or
$('#container').html(data.someAttribute);
depending on the type and structure of your returned data.

Delay page unload after submitting form

Is it possible to delay the moment when the unload method is called on a web page?
I have N pages and each page contains a form. I don't want users to click on a submit button so I simulated a click on the hidden submit button via javascript. This is activated everytime the user change page:
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
}
This doesn't work but if I put an alert after .click ()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
alert("submitting form");
}
everything works like a charm. This because the alert gives the form the time to actually submit its data; without the alert the page unloads before the form has been submitted and therefore the changes are not saved.
I tried to put a dummy setTimeout after .click()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
setTimeout(console.log("dummy"), 200);
}
but it didn't work. Any help or feedback on this would be greatly appreciated.

if you use jquery, you can try to save via ajax. and maybe adding async to false, not recomended but could work in your example if save function is really fast.
http://api.jquery.com/jQuery.ajax/
here is how i save:
var $form = $('#formId');
$.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
error: function (xhr, status, error) {
// error
},
success: function (response) {
// sucess
}
});