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
Related
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'] .
I'm learning Laravel and I have a view with a contact list and inside of this table I have a button to display more details about the clicked item. I want to return a view inside the actual view, I don't want to go to another page.
Someone can explain me how can I do that and show me examples of that if it is possible?
I already try do that using ajax but I don't now how can I return a view without go to other page.
$("#detailsItemSize").click(function()
{
var itemId = $(this).attr('data-id');
alert("details");
alert(url);
$.ajax
({
method: 'GET',
url: url + "/" + itemId,
data: {'itemId': itemId, _token: token }
});
.done(function (msg)
{
console.log(msg['message']);
});
});
Best regards
The basic premise is to have a route that renders your partial view:
Route::get('item/{item}', function($itemId){
$someitem = Item::findOrFail($itemId);
return view('partial', compact('someitem'));
});
//partial.blade.php
<h1>Items id is {{$someitem->id}}</h1>
//main view
<div id="details></div>
//js
$.get('/item/27', function(response){
$('#details').html(response);
});
the #details div in the page will contain <h1>the items id is 27</h1> when the ajax call returns
I'm trying to use Autocomplete Widget for my autocomplete function,I receive a response with this form:
[
{"_id":{"mes":"measure1","name":"hold2"},"number":1},
{"_id":{"mes":"measure2","name":"hold3"},"number":1}
]
I'm trying to find a way to display the suggestion when typing in an input using this javascript:jquery code :
$('#q').autocomplete({
source : function(requete, reponse){
$.ajax({
url : '/app/test/testsearch/',
dataType : 'json',
data : {
queryvar : $('#q').val()
},
success : function(donnee){
//alert('success');
reponse($.map(donnee._id, function(objet){
return objet.mes + ', ' + objet.name;
}));
}
});
}
});
With this code I'm getting when I'm typing some suggestions in the input field(with id q)a success Ajax response but I cant display it,any suggestions?
Thanks a lot!!!
I have this jQuery code to show retrieved value into the "result" div. My question is, how to target the result into specified page ?
my code is
$(function(){
// SHOW RECORD
$('#headmark').change(function(){
$.post('update_fabrication_data.php',
{
action: "show",
hm:$('#headmark').val()
},
function(res){
$('#result').html(res);
});
});
});
so, my target is to send the result into inside the updateFabrication.php
I am newbie to AngularJs. I am using AngularJS as front end and Laravel As backend.
I have a situation where I want page to be refreshed on ajax success (when user post data).
I have template index.blade.php like this :
#extends(layout)
#section
header page
post page
main page
footer page
#endsection
Now thing is that User is posting update from post page and
on that success i want data to be refreshed which is on main page
function addpost ($scope, $http){
$scope.loadData = function(){
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$http.post( baseurl+"alldata").success(function(data)
{
$scope.posts = data;
});
}
$scope.addComment = function(post){
if("undefined" != post.hoot){
// Angular AJAX call
$http({
method : "POST",
url :baseurl+ "url",
data : "post="+post
}).success(function(data){
$scope.posts = data;//json response
// here i want page to be refreshed or div refresh of sub-main page
});`
$scope.post = ' ';`
}
}
$scope.loadData();
}`
Now thing is that if i am posting data from other sub page and then showing it on other sub page. Iam calling addcomment to add posted data in model and then loaddata() to get all data from model for ng-repeat in a view.
if i am going to fire watch event . it will keep on refreshing model thus view data. Suppose i am working on comment section where we can like , dislike and comment on post. and i want to use ng-click event inside ng-repeat(which is refreshing view).
Test.controller('Testing',['$scope', '$http', function($scope,$http){
$scope.products = {};
$http.post( baseurl+"ajax/getall").success(function(data)
{
$scope.products = data;
});
$scope.$watch("products", function(newValue, oldValue) {
if (newValue === oldValue) { return; } // AKA first run
$scope.products= newValue;
});
});
$scope.Hello= function(){
alert("hello");
}
}]);
It will keep on refreshing page and thus don't click event inside ng-repeat which is ng-click.
I have fired ng-click="Hello()" event but it doesn't fire.
You can register a listener to $scope.data in any part of the application that had a reference to scope. This way, everything will keep up to date when data is updated.
Like so:
$scope.$watch('data', callback)
You are thinking the jQuery way. You have to put that away and think data-binding and angularjs.
To do what you are asking is pretty easy if you think the angularjs way.
First of all, you need the php page of yours to print out a html page with a {{updateMe}}
then in your code
.success(function(data){
$scope.updateMe = data
......