I have HTML page which contains a Editable table, Where I am fetching the data from database using PHP and inserting into the that table. As my table is Editable, I want to update the values into the database when the user update any row value.
Please suggest me,because I don't know how to make AJAX call when user edits and click anywhere on browser.
You have to catch the moment where the datas are saved in your datatable: Often a click on a button.
So you need a code like that :
$(document).ready(function(){
$('#save-row-4').on('click', function(){
// Your ajax call here
});
});
The ajax have to be like :
$.ajax({
url: '/path/to/php/script.php',
type: 'POST',
data: {
variable1: 'val1',
variable2: 'val2',
variable3: 'val3'
},
error: function(return) {
alert("error");
},
success: function(return) {
console.log("Datas saved");
},
});
Don't forget to replace val1, val2 with the value of your inputs. Then, in your php script, you will be able to get these datas with $_POST['variable1'] .
Related
I am trying to reload data tables that have been inserted into tabs.
Please refer to question: AJAX Update DataTable after On Success
A PHP class userX.php has 3 data tables with client-side implementations. I am able to change a row of the first table using a button, once it is done the record will go to tab 2 -> and the content of it table two. I am changing the status now using AJAX as this:
$(".changeStatus").click(function(event){
if(confirm("Are you sure changing status?")){
event.preventDefault();
var status = "In Production";
var id = $(this).attr('data-id');
$.ajax({
url : 'dbo.php',
method : 'POST',
data : {status : status , id : id},
success : function(data){
$('tr#'+id+'').css('background-color', '#ccc');
$('tr#'+id+'').fadeOut('slow');
}
});
}
else{
return false;
}
});
In the meantime it has to be updated in the tab 2 table as well. I have tried achieving this using div contents; neither of them seems working. What am I missing? I am open to suggestions.
The table can simply be reloaded by reinitializing method of the datatable also reloading it through its built in AJAX. The below code block would help.
$(document).on('click','#ChangeNext',function(event){
if(confirm("Are you sure changing status?")){
event.preventDefault();
var statusid = $(this).attr('data-id');
$.ajax({
url : 'dbo.php',
method : 'POST',
data : {statusid : statusid},
success : function(data)
{
$('#exampleone').DataTable().ajax.reload();
}
});
}
else{
return false;
}
});
the best way for putting data in a DataTables with ajax requests, is DataTables ajax api that you can see it in following link:
DataTables Ajax sourced data
jQuery sample:
jQuery('.changeStatus').click(function(event){
$('#example').DataTable({ ajax: 'data.json' });
});
JSON Sample:
{
"data": [
[
"Roshan Zaid",
"Stackoverflow user",
"New member"
],
[
"AmirAli Esteki",
"Stackoverflow and AskUbuntu user",
"New member"
]
]
}
the response of your ajax requests should be json by default
I have this code to POST value to main.php, with onclick function UserID will be called and value which is user_id should be changed based on selected value and load selected user_id in user_profile.php?ID=user_id
var USER_ID = 0;
function UserID(user_id)
{
USER_ID = user_id;
$.ajax({
type: "POST",
url: "main.php",
data: {ID: USER_ID},
success: function(msg)
{
alert(USER_ID);
$('#user_profile_content').load('user_profile.php?ID=USER_ID #user_profile_content');
},
error: function()
{
alert("error");
}
});
}
After success post, alert is showing with selected value, it means POST was successful but I don't know how to make user_profile.php?ID=USER_ID to be changed based on received value. It's not replace global variable USER_ID.
From what I understand you want to change the url route, try:
...
success: function(msg){
window.location.href = `user_profile.php?${msg.id}`
$('#user_profile_content').load(`user_profile.php?ID=${msg.id}
#user_profile_content`);
...
ES6 template literals allow you to insert the returned value in a string.
Window.location.href allows you to change the route on the browser (Frontend), I recommend you do it from the Backend if possible though.
This answer assumes msg.id is the desired value that you want to pass since the contents of the response are not specified.
How can I do clickable tab that display data?
I want to fetch the data from mysql row to the row in the table dynamically and when i open her i will see the details of all the the row in my database. Like in this picture.
https://ibb.co/m0Zmk7
If I didn't get your question wrong, you want to display some data from database when user will click on a row.
You need to call a function on every row just like this:
<tr onclick="somefunction(id)"></tr> OR <div onclick="somefunction(id)"></div>
Also you have to create a div where your data will be populated.
<div id="display_data"></div>
And then JS function would be just like:
<script>
function somefunction(id){
$('#display_data').remove(); //it will remove all the data before loading new record.
$.ajax({
url: "pathOfYourFile/function/",
type: "post",
data: {
id: id
},
success: function (data) {
if(data.status==1){
alert("success");
$('#display_data').show();
$('#display_data').append(data.message);
}else{
alert(record error);
}
},
error: function (data) {
console.log(data);
}
});
}
<script>
And in the end you have to write a function in php that will get your data from database. Just make sure that you will return data just like this:
$data['json_data'] = array('status' => 1,
'message' => $record
);
I Hope this will work in your case. Please do not hesitate to ask a question if there is any confusion.
I have two dropdown lists and on selecting the data I used ajax to send it to a php file where I retrieved a table and send the whole table contents as per my query fields and I display it via
jQuery("div#tablecontent").html(returnval);
But now i want to edit, delete the table view I displayed and I tried to get the class of the row I returned. But couldn't please guide me in how to get the class of the field I returned as whole table.
EDIT : Adding the code i ve done
jQuery(document).ready(function(){
jQuery("#select1").change(function(){
jQuery.ajax({
type: "POST",
url: "<?php echo $base_url;?>?q=search/won",
error: function(returnval) {
alert("Failure");
},
success: function (returnval) {
// alert(returnval);
jQuery("select#fileds_content").html(returnval)
//alert("Sucess");
}
})
//
jQuery("#fileds_content").change(function(){
if(jQuery(this).val()){
var datawon = jQuery(this).val();
jQuery.ajax({
type: "POST",
url: "<?php echo $base_url;?>?q=getbases/won",
data:{ datawon : datawon},
error: function(returnval) {
// alert(returnval);
// alert("Failure");
},
success: function (returnval) {
// alert(returnval);
jQuery("div#tablecontent").html(returnval);
//alert("Sucess");
}
})
I am not entirely sure what you actually want to do, but from what I understood is that you cannot select a newly created element by its class. In that case, you cannot select a newly created elements because js does not know about it yet, thus, you can use something like .ajaxComplete(), this will make sure to run a function After an ajax call got completed.
am working on a project in which i use ajax, jquery, php and sql to manipulate data.
function fetchComments(commentOnId, commentOn){
if(!isNaN(commentOnId) && commentOnId >=0){
$.ajax({
type: 'POST',
dataType: "json",
url: 'get_comments.php',
data: 'commentOnId='+commentOnId+'&commentOn=blogArticle',
success: function(data){},
error: function(){
}
});
}
}
the above function uses the 'commentOnId & commentOn' passed to it to fetch all comment on that that particular blog id in json format.
the result/rows in my comment table are as follows.
id
commentOnId
commentOn
commentText
authorId
created
what i want to do is get the values of these rows and in this same function run another ajax query which i will pass the authorId to a php file that returns an authors's full name from a table called authorDetails,
and also use the id value to run another ajax query to return all replies on this comment id or null if there is no reply. and finally update a html div '' with the result.
please, i will appreciate your quick comprehensive assistance. thank you.
You can use SQL joins to get all your needed data in one request if you don't want other details on user iterative basis.
If I were you, I would fetch everything in a single Ajax call rather than perform another Ajax call.
If you want multiple Ajax calls, you can do the following.
function fetchComments(commentOnId, commentOn){
if(!isNaN(commentOnId) && commentOnId >=0){
$.ajax({
type: 'POST',
dataType: "json",
url: 'get_comments.php',
data: 'commentOnId='+commentOnId+'&commentOn=blogArticle',
success: function(data){
$.ajax({
type :'post',
url : 'get_auth_details.php',
data : 'authorId=' + data.authorId,
success : function(data) {
Update div logic goes here
}
}
},
error: function(){
}
});
}
}