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.
Related
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.
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');
}
});
I have following script with html data in ajax response.
Here is my ajax response data
<script>
$(document.body).on('change','.account_name_change',,function() {
$.ajax({
type: 'POST',
url: 'locations/get_account_location/',
data: {'id':id,'model_name':model_name},
success: function(data) {
$('.new_account_name_div').html(data);
common_ajax_script();
}
});
});
</script>
<div>
some html tags
</div>
This response will be updated in some div in current page. In current page I have one link to get above response. See, How many times I am calling ajax call to get this ajax response, previous response is removed and new response automatically updated.
But script in ajax response called that much time I called ajax when I intiating
<script>
$(document.body).on('change','.account_name_change',function() this event
</script>
Why did I miss anything?
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
}
});
i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>
Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
Presuming that you're using Ajax to change your page states, why not look at something like History.js?