When a value change in the back-end(in my case Mysql,Patient details) With any other user(other console) ,i want to update that values on another page at same time(Without refreshing the page) .how it is possible. my code is given below.
myscript.js
var ajaxApp=angular.module('ajaxApp',[]);
ajaxApp.controller('ajaxController',function ajaxController($scope,$http){
$http.get('core/getdata.php').success(function(data){
$scope.patient=data;
});
});
my php page
<tr ng-animate="'animate'" ng-repeat="p in patient|filter:pnametext|limitTo:10">
<td><div class="btn btn-info">{{p.opNo}}</div></td>
<td><b>{{p.pName | uppercase}}</b></td>
<td>
<div ng-switch on="p.pCatId">
<div ng-switch-when="1">
ONE
</div>
<div ng-switch-when="2">
TWO
</div>
<div ng-switch-when="3">
THREE
</div>
</div>
</td>
<td>{{p.pAge}}</td>
<td>{{p.pHusFather}}</td>
<td>{{p.phNumber}}</td>
<td><button class="btn btn-danger">Add to Queue</button></td>
</tr>
suggest use socket.io(web socket) group people editing the same content in same chanel, broadcast modification to others, and notify other people and apply change. ajax is not real time and costs more
http://socket.io/
socket.connect(xx);
socket.on('change', function(data) {
alert('change happen!');
$scope.data = data;
$scope.$apply();
})
$scope.$watch('data', function() {
if (change) {
socket.emit('change', $scope.data);
}
})
Related
I have a table that is populate using AJAX. Each table row is give an id based on a record id in my database. Under the table are 3 buttons: NEW, EDIT and DELETE.
When I select a row I set the data-id of the DELETE button to the clicked row's ID. When I click DELETE my AJAX call proceeds to delete all records from my database that have the data-id of the DELETE button.
This all works perfectly. After everything is done i get an alert the the data was deleted. Which is great.
My Question is: in the If (data ==1) section of my AJAX call, how do i remove the row, fade out, from the table without refreshing the page like i have to do now.
Here is my index.html code
<div class="container-fluid inputwrapper">
<table id="workRequests" style="width: 100%;">
//table is filled by ajax call to db below is an example of the format
<tr class="table__row" id="124108" onclick="highlight_row()">
<td class="table__content" data-heading="Number">124108</td>
....
</tr>
</table>
</div>
<div class="container-fluid">
<div class="row center-block">
<div class="text-center col-sm-2 col-sm-offset-0" style="float: left;"> </div>
<div class="text-center col-sm-8" style="float: left;">
<button style="margin-right: 10px;" type="button" class="btn btn-default" id="wopnew" onClick="createNew()">New</button>
<button style="margin-right: 10px;" type="button" class="btn btn-default" disabled id="wopedit" onClick="editFile()">Edit</button>
<button type="button" class="btn btn-default" data-id="0" id="wopdelete">Delete</button>
</div>
<div class="text-center col-sm-2 col-sm-offset-0" style="float: left;"> </div>
</div>
Here is my AJAX call.
I am a novice at coding and from what I can see as i Step thought the function in my browser - the var element is set to the DELETE button data-id so when we get to the success part and data == 1 nothing happens as it is focused on the DELETE button not the Table Row.
I have tried to change element to the id of my table but that does not work either.
<script>
$(document).on("click","#wopdelete",function(){
if (confirm("Are you sure you want to delete this Record? It can NOT be recoverd!!")) {
var id = $(this).data('id');
var element = this;
$.ajax({
url :"./scripts/delRecord.php",
type:"POST",
cache:false,
data:{deleteId:id},
success:function(data){
if (data == 1) {
$(element).closest('tr').fadeOut(400, function(){
$(this).remove();
});
alert("User record deleted successfully");
}else{
alert("Record did not delete properly!");
}
}
});
}
});
</script>
I am fetching the details of a user according to Id on button click in a popup in laravel but It is showing some error.
This is viewuser.blade.php
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<table class="table table-bordered">
<tr>
<td>{{$usersview->id}}</td>
<td>{{$usersview->firstname}}</td>
<td>{{$usersview->filename}}</td>
</tr>
</table>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
This is viewparticipant.blade.php in which I have a button View. When the user will click on this button a popup will open and show the details according to Id.
<td>
View
</td>
My Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Session;
use App\Imageupload;
class ParticipantController extends Controller
{
public function show($id)
{
$usersview = Imageupload::find($id);
return View::make('viewuser', compact('usersview'));
}
}
My Web.php
Route::get('/participant/show/{id}','ParticipantController#show');
The error is showing that unknown variables in modal.
well you only have $usersview in your blade file and you're calling $row->id in viewparticipant.blade.php , which should be the $usersview->id instead
after Edit -->
so you need to make an ajax call to the function you want to get the results. the ajax must contain the id of the user so you should get the id some how. I usually define an on click function and get the id. then on the same click trigger an ajax call, something like this:
$('#user').on('click', function (event) {
$.ajax({
url: '/users?user_id=' + $(this).val(),
success: function (data) {
// parse the data
},
fail: function () {
// do something in case of failure
}
});
});
$(this).val(); is the id here, I assumed you would store that in an input
Try this:
<td>
View
</td>
Because laravel is figuring out where you want to place your $row->id variable, and to my guessing it's not passing the variable correctly in your route.
try
#foreach($usersview as $usersview)
<tr>
<td>{{$usersview->id}}</td>
<td>{{$usersview->firstname}}</td>
<td>{{$usersview->filename}}</td>
</tr>
#endforeach
My situation is as follows:
PHP script retrieves data from a database. This information is shown in the first tab. This tab will always stand and can not be closed. This is fine, see me code.
try {
print '
<div class="clientTabs">
<ul class="nav nav-tabs" id="navTabs">
<li class="active" id="li0">Alle clienten</li>
</ul>
</div>';
$selectTabbladen = $gebruiker_data->runQuery("SELECT * FROM clients ORDER BY clients_id");
if (!$selectTabbladen->execute()) return false;
if ($selectTabbladen->rowCount() > 0) {
print '
<div class="tab-content" id="tabContent">
<div id="client0" class="tab-pane active">
<div class="bootstrap-table">
<div class="fixed-table-toolbar">
<div class="bars pull-left">
<button id="btnTabdel" class="btn btn-danger btn-labeled" disabled="disabled">Vervijderen</button>
</div>
</div>
</div>
<table class="table table-bordered" id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="false"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-pagination="true"
data-id-field="id"
data-minimum-count-columns="2"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false">
<thead>
<tr>
<th class="text-center" width="1">#</th>
<th>Name</th>
<th>Address</th>
<th>Zip</th>
<th>City</th>
<th>Tel.</th>
</tr>
</thead>
<tbody>';
while($aRow = $selectTabbladen->fetch(PDO::FETCH_ASSOC)) {
$id = $aRow['clients_id'];
$name= $aRow['name'];
$adress= $aRow['address'];
$zip= $aRow['zip'];
$city= $aRow['city'];
$tel= $aRow['tel'];
print '<tr class="tabData" id="'.$id.'">
<td>
<label class="cr-styled">
<input type="checkbox" ng-model="todo" class="tabID" value="'.$id.'"/>
<i class="fa"></i>
</label>
</td>
<td>'.$name.'</td>
<td>'.$address.'</td>
<td>'.$zip.'</td>
<td>'.$city.'</td>
<td>'.$tel.'</td>
</tr>';
}
Double-click creates a dynamic tab that retrieve other data from the database associated with this ID. This is also good, a new TAB is created and the data retrieved.
//Tabs
$('body').on('dblclick', '.tabData', function () {
var tab_id = $(this).attr("id");
addTab(tab_id);
});
function addTab(tab_id) {
// If tab already exist in the list, return
if ($("#li"+tab_id).length != 0) {
$("#navTabs li").removeClass("active");
$("#client0").removeClass("active");
$("#li"+tab_id).addClass("active");
$("#client"+tab_id).addClass('active').show();
//return;
} else {
$("#navTabs li").removeClass("active");
$("#client0").removeClass("active");
// add new tab and related content
$('ul#navTabs li:last-child').after('<li class="active" id="li' + (tab_id) + '">Client ' + (tab_id) + ' <button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (tab_id) + ');"><i class="fa fa-remove"></i></button>');
loadClientData(tab_id);
//$('div#tabContent div:last-child').after('<div class="tab-pane" id="client' + (tab_id) + '"><p>Content tab ' + (tab_id) + '</p></div>');
// set the newly added tab as current
$("#client"+tab_id).addClass('active').show();
}
}
function loadClientData(tab_id) {
$("#tabContent").empty();
$.ajax({
type: "GET",
url: "clienten_data_load.php?id='+tab_id",
success: function(data) {
//empty(data);
$("#tabContent").text(data);
}
});
}
});
From here it goes wrong and I do not know how to solve this.
If I go back to the first TAB after first created dynamic tab, then this contains same data as the dynamically created tab.
What am I trying to do:
First tab: Provides an overview of all clients with a number of client data.
Dynamic tabs: There will be a maximum of 10 tabs. Each double click creates a dynamic tab to maximum of 10. The contents of the tab have to be all other client data associated with the corresponding ID.
How can I make sure that an additional tab is created with each double click without replacing the contents of other tabs?
Hope I explained it clearly.
Your PHP should be returning an array (JSON) of rows with sub-arrays as the row content, NOT HTML. So build your return as an array then return using json_encode. Next you'd need to run through the array in your AJAX success method and simply fill in the content. I am on my phone, so I cannot provide an example as of right now, I will update this later if it is still needed. For now, concept should work.
this is what it shows on clicking tab one time 2nd time I click it loads last two file .15 and .17 again alltogetherthis is shown in console when I inspect even if I have not clicked on tab.And displays this data in browser when I click tab. This should not be shown whn console is clicked while inspectin page. Data only to be loaded only when I click tab.
Object {type: "FeatureCollection", metadata: Object, features:Array[11], bbox: Array[6]}bbox: Array[6]features: Array[11]metadata: Objecttype: "FeatureCollection"proto: Object
here is my code..
<body ng-controller="CountryCtrl">
<div ng-app ng-init="tab=1">
<div class="cb" ng-click="tab = 1">tab 1</div>
<div class="cb" ng-click="tab = 2">tab 2</div>
<div ng-show="tab == 1">
<p>hellloollllllllllllo</p>
</div>
<div ng-show="tab == 2">
<h2>Angular.js JSON Fetching Example</h2>
<table border=1>
<tr>
<th>type</th>
<th>properties_mag</th>
<th>properties_place</th>
<th>properties_time</th>
<th>properties_upated</th>
<th>properties_tz</th>
</tr>
<tr ng-repeat="type in country ">
<td>{{type.type}}</td>
<td>{{type.properties.mag}} </td>
<td> {{type.properties.place}} </td>
<td> {{type.properties.time}} </td>
<td> {{type.properties.updated}} </td>
<td> {{type.properties.tz}} </td>
<tr ng-repeat="cor in features.geometry.coordinates ">
<td> {{cor}} </td>
</tr>
</table>
</div>
this is controller function.....
var countryApp = angular.module('countryApp',[]);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('http:/4.5_day.geojson').success(function(data) {
console.log(data);
$scope.country = data.features;
$scope.coor=data.features.geometry.coordinates;
console.log($scope.country);
});
});
I would suggest that you simply call the function that loads the JSON data when clicking the second tab using ng-click. This way you will not get it loaded unless the tab is clicked.
You could change:
<div class="cb" ng-click="tab = 2">tab 2</div>
To:
<div class="cb" ng-click="switchTabAndLoadData()">tab 2</div>
And defined the function in your controller to update the tab variable and load the JSON.
You are calling the $http service directly in your controller that's why the data is loaded up front. Try this:
var countryApp = angular.module('countryApp',[]);
countryApp.controller('CountryCtrl', function ($scope, $http){
var loadData = function(){
$http.get('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson').success(function(data) {
console.log(data);
$scope.country = data.features;
$scope.coor=data.features.geometry.coordinates;
console.log($scope.country);
});
}
$scope.switchTabAndLoadData = function(){
$scope.tab=2;
if(angular.isUndefined($scope.country) || angular.isUndefined($scope.coor)){
loadData();
}
}
});
Make sure to also apply the HTML change I previously suggested and it should be fine.
You problem lies elsewhere, had you checked the console you would have seen that angular gives an error on your assignment of variables for $scope.coor since you are trying to assign properies of an object in an array of object.
Check this pen for a solution: http://codepen.io/anon/pen/BjXGGJ
You can then adjust the HTML do your needs.
I have table in which data comes from the database.and I have the form on the same page which insert the data in the table.but when I insert data using $.ajax , it inserts record in database , but after reloading table in same function is not working, means it doesn't reload the table.
below is my code.
HTML
<div class="col-lg-8" id="value_table">
<div class="panel-body">
<div class="table-responsive">
<?php
$q=$db->query('select attr_val_id,attr_val,sortorder,status from db_attribute_value where attr_id="'.$attr_id.'"' );
?>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Edit/Delete</th>
</tr>
</thead>
<tbody>
<?php $c=1; while($r=$q->fetch_assoc()){?>
<tr class=" gradeX">
<td><?php echo $c; ?></td>
<td><?php echo $r['attr_val']; ?></td>
<td><a href="add_attribute_val.php?id=<?php echo $r['attr_val_id']; ?>&attr_id=<?php echo #$r['attr_id']; ?>">
<button type="button" class="btn btn-default btn-circle"><i class="fa fa-pencil-square-o"></i></button>
</a>
<button type="button" class="btn btn-danger btn-default btn-circle" id="<?php echo $r['attr_val_id']; ?>" name="deleteRecord"><i class="fa fa-times"></i></button></td>
</tr>
<?php $c++;}?>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
JQuery
$('#attr_val_form').submit(function(event) {
//$('.form-group').removeClass('has-error'); // remove the error class
//$('.help-block').remove(); // remove the error text
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'attr_val' : $('input[name=attr_val]').val(),
'attr_id' : $('input[name=attr_id]').val(),
'sortorder' : $('input[name=sortorder]').val(),
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'admin_operation.php?mode=add_attr_value', // the url where we want to POST
data : formData, // our data object
cache: false,
success: function(data)
{
if($.trim(data)== 'yes')
{
$("#value_table").html($("#value_table").html());
$("#notice")
.show()
.html('<div class="alert alert-success"<strong>Successfully !</strong> record added.</div>')
.fadeOut(3000);
}
else
{
$("#notice")
.show()
.html('<div class="alert alert-danger"<strong>Error !</strong>Record already exist.</div>')
.fadeOut(10000);
}
}
})
// using the done promise callback
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
I guess what you think this line should do is get the data from the response and substitute the same tag in your DOM:
$("#value_table").html($("#value_table").html());
You should use something like that instead:
$("#value_table").html($.parseHTML(data).find("#value_table").html());
This code has not been tested, but the main idea is to parse the data parameter and the find the #value_table element.
More info here: http://api.jquery.com/jquery.parsehtml/
As you say it seems like 'admin_operation.php?mode=add_attr_value' not success, try to call to always function instead success (for debugging it).
if the always function called successfully you have to return true from admin_operation.php
if not you have a problem on admin_operation.php after the insertion.