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
Related
So, I'm currently loading a post list with infinite scroll functionality. I'm loading a small popup that has title and content in dynamic ajax popup. When the article is clicked, the URL changes to website.com/news/newsID. Now, when I press the back button, the ajax post list reloads from the beginning. I want to preserve whatever ajax is loaded already so that when pressing the browser back button, I want it to look like a close button is clicked.
Currently my ajax loading of post is something like this:
:
$.ajax({
cache: true,
type: 'GET',
url: window.location.origin + '/' + newsId ,
dataType: 'html',
beforeSend: function() {
//here the popUp UI is loading
},
success: function(data) {
//here the popUp UI is replaced with data
},
});
And the ajax for infinite scroll is something like this:
function ajaxget_Stories(postappendID, isPaginated) {
$.ajax(
{
cache: true,
type: 'GET',
url: window.location.origin + location.pathname,
dataType: 'html',
success: function(data) {
$('#' + postappendID).empty();
var data = JSON.parse(data);
$('#' + postappendID).append(data.html);
},
async: true,
},
0
);
}
Both of the ajax is working fine. Expect the functionality I need is not.
What I'm looking for is something like this:
Popup close on back button. I've a event/function available for closing popup.
Preserve old ajax infinite scrolled content when pressing back after loading the content.
Revert the URL to previous one when pressing the back button.
Any help is appreciated.
Thank you!
I have a bootstrap form in the bootstrap modal. I have 2 dependent fields. So 2nd field dropdown is based on the first field value.
What I want to do is when I select the value from the first field, ajax request triggers and select the related vales for second field.
It all works at the moment, but on the success of Ajax request, i have to refresh the page and re-open the modal.
How it is possible to refresh the content of modal.
As you can see below, in success, I have to refresh the page and re-trigger the modal.
Here is my jquery ajax.
$("#add-new-group").click(function(e) {
e.preventDefault();
//Create ajax request with the two paramaters
$.ajax({
url: '/',
type: 'POST',
data: $("#new-group").serialize(),
success: function(data, textStatus, jqXHR) {
jQuery('#stock').load('/tasks/stock.php');
$('#add-new-category-modal').modal('hide');
jQuery('#stock').load('/tasks/stock.php', function() {
$("#stock-settings").removeClass("collapse");
$(".add-new-category").trigger("click");
});
},
error: function(jqXHR, textStatus, errorThrown) {
//Display error message to user
alert("An error occured when saving the data");
}
}); // End ajax request
}); // End on click event
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 a menu bar which contains links for web pages. Now I want to add a login form with username and password with submit button in dilaogue box with locked screen on clicking of particular web pages. Its a kind of double login authentication.. As soon as log in submit button is clicked it should go to database to check the entered credentials and if it is correct will lead or show the clicked link..
To check the credentials I have made ajax call to server side code.. but I dont know how to add dialogue box and after success lead to required clicked page...
Here is my ajax call code..
$.ajax({
type: 'GET',
url: 'logincredit',
async:false,
dataType: "text",
success: function(data) {
}
});
Please guys help me ..
Thanks in advance..
You can add dialog script inside the success function.
like this
success: function(data){
if(data.d==true)
//show dialog code
else
//show something else
}