I want the external CSS to be applied on ajax response.
I am trying to create a page where after user selects options in a form and submits it then another form is loaded via ajax. But CSS is not applying on the ajax response.
I could not figure out the mistake. Please correct me if the approach is not correct.
$('#getStudents').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'feature1/getStudents.php',
type: 'POST',
data: $('#getStudents').serialize(),
cache: false,
success: function(returndata) {
//alert(returndata);
$("#listStudents").html(returndata);
}
});
});
Here is the problem. On the 4th column css is not applying. The check box should appear as ios switch (http://abpetkov.github.io/switchery/)
<?php
$output='';
$output = $output. '
<div class="panel panel-white">
<div class="panel-heading clearfix">
<h3 class="panel-title"> Students </h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="students" class="display table" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</thead>
<tfoot>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</tfoot>
<tbody>';
$i=1;
while($data = mysqli_fetch_assoc($results)) {
$output = $output. '<tr>
<td>'.$i++.'</td>
<td>'.$data["id"].'</td>
<td>'.$data["id"].'</td>
<td>
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</td>
</tr>';
}
$output = $output. '
</tbody>
</table>
</div>
</div>
</div>';
echo $output;
mysqli_close($con);
?>
this is because your html page where you include all the css are loaded as the document is ready..it reads all classes and according to the style sheet it applies on that.. but in ajax we load the other page on the same html page and this time browser not map the html classes to the style sheet that is why your css is not applying on that
As I Can Understand , you are using an external JQuery Table Plugin and all the data (rows) are being fetched by AJAX Call.
You can use this setup[Backup your Previous File]:
What I am trying to do is: fetching only the required rows in AJAX call(not complete table). All the table structures and CSS are already loaded and on form Submission trying to fetch required rows. In your case the browser doesn't able to dynamically render the Table and CSS.
1. dashboard.php
<html>
<head>
<!-- Link to Plugin CSS-->
<!--Link to Your Custom CSS -->
<head>
<body>
//HTML and PHP code Here
<!-- Link to Plugin Script-->
<script>
// AJAX CALL
$('#getStudents').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'feature1/getStudents.php',
type: 'POST',
data: $('#getStudents').serialize(),
cache: false,
success: function(returndata) {
//alert(returndata);
$("#students").html(returndata); //Fetch rows Only Not table(See the Next home.php page)
}
});
});
</script>
</body>
</html>
2. home.php
<div class="row">
<div class="panel panel-white">
<div class="panel-heading clearfix">
<h3 class="panel-title"> Students </h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="students" class="display table" style="width: 100%; cellspacing: 0;">
</table>
</div>
</div>
</div>
</div>
3. getStudents.php
In this page Modify $output variable.
Like
$output='';
$output = $output. '
<thead>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</thead>
<tfoot>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</tfoot>
<tbody>';
$i=1;
while($data = mysqli_fetch_assoc($results)) {
$output = $output. '<tr>
<td>'.$i++.'</td>
<td>'.$data["id"].'</td>
<td>'.$data["id"].'</td>
<td>
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</td>
</tr>';
}
$output = $output. '
</tbody></div>';
OOps..It isn't the css problem. It's javascript that caused the problem.
Actually, the switchery.min.js appends a div with class switchery to . Because the script isn't initialised the rendering has failed.
Now adding the following javascript at the end of getStudents.php solved the issue.
echo '<script language="javascript">
if (Array.prototype.forEach) {
var elems = Array.prototype.slice.call(document.querySelectorAll(".js-switch"));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
} else {
var elems = document.querySelectorAll(".js-switch");
for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]);
}
}
</script>';
Related
I'm building a web database application in PHP PDO using the AdminLTE template and Booststrap 3.
I need to add pagination to my application (as I have a large amount of records) and have a limit of 25 records per page. I am fairly new at programming and have no idea where to start. Any help would be appreciated.
<?php
$content = '<div class="row">
<div class="col-xs-12">
<div class="box box-danger">
<div class="box-header">
<h3 class="box-title">Members List</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="members" class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Residential Address</th>
<th>Mailing Address</th>
<th>Precinct</th>
<th>Age</th>
<th>Ethnicity</th>
<th>Gender</th>
<th>Party</th>
<th>Race</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Residential Address</th>
<th>Mailing Address</th>
<th>Precinct</th>
<th>Age</th>
<th>Ethnicity</th>
<th>Gender</th>
<th>Party</th>
<th>Race</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>';
include('../master.php');
?>
<!-- page script -->
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../api/member/read.php",
dataType: 'json',
success: function(data) {
var response="";
for(var user in data){
response += "<tr>"+
"<td>"+data[user].name+"</td>"+
"<td>"+data[user].residential_address+"</td>"+
"<td>"+data[user].mailing_address+"</td>"+
"<td>"+data[user].precinct+"</td>"+
"<td>"+data[user].age+"</td>"+
"<td>"+data[user].ethnicity+"</td>"+
"<td>"+data[user].gender+"</td>"+
"<td>"+data[user].party+"</td>"+
"<td>"+data[user].race+"</td>"+
"<td>"+data[user].phone+"</td>"+
"<td><a href='update.php?id="+data[user].id+"'>Edit</a> | <a href='#' onClick=Remove('"+data[user].id+"')>Remove</a></td>"+
"</tr>";
}
$(response).appendTo($("#members"));
}
});
});
function Remove(id){
var result = confirm("Are you sure you want to delete the selected member from the database?");
if (result == true) {
$.ajax(
{
type: "POST",
url: '../api/member/delete.php',
dataType: 'json',
data: {
id: id
},
error: function (result) {
alert(result.responseText);
},
success: function (result) {
if (result['status'] == true) {
alert("The member was successfully removed from the database.");
window.location.href = '/ccrp/members';
}
else {
alert(result['message']);
}
}
});
}
}
</script>
I'm new to Angularjs. I'm trying to call function onclick of the buttons. I used ng-click but it's not working. These buttons are dynamically created.
I'm implementing this application in CodeIgniter framework. Here is my code;
//view
<section class="content" ng-app="manageApp">
<div growl></div>
<div class="row" ng-controller="customerManageController">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Customers Information</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="customer_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
//js file
var manageApp = angular.module('manageApp', ['ngRoute', 'angular-growl', 'ngAnimate']);
manageApp.controller('customerManageController', function ($scope, $http, growl) {
$http({
method: 'POST',
url: 'list_customers',
headers: {
"Content-Type": "application/json"
},
}).success(function (data) {
for(var i=0; i<data.length; i++) {
var tableBody = tableBody+('<tr id="'+data[i].id+'"><td>'+data[i].id+'</td><td>'+data[i].name+'</td><td>'+data[i].mobile+'</td><td>'+data[i].city+'</td><td>'+data[i].email+'</td><td>'+data[i].address1+'</td><td>'+data[i].address2+'</td><td><button ng-click="deleteFunc()" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>');
}
$('#tableBody').html(tableBody);
$('#customer_table').DataTable();
});
$scope.deleteFunc = function () {
alert('here');
}
});
The problem is you're inserting new HTML that won't be bound to the controller. Anytime you insert new HTML code with Angular directives that isn't compiled, like you did with JQuery, it won't be bound to the controller unless you use the $compile function to bind it.
There is a way you can do this with your code but instead this should be refactored. You're waiting for data from a POST request before you render it. Instead of binding the HTML after you get the data (this is where $compile would be required) you can instead make use of a $scope which will contain an array of the data and render the HTML based on what is in that array.
The code would look like this:
<section class="content" ng-app="manageApp">
<div growl></div>
<div class="row" ng-controller="customerManageController">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Customers Information</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="customer_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</thead>
<!-- Table now populates with data after it's received -->
<tbody id="tableBody">
<div ng-repeat="for data in receivedData">
<tr id="{{ data.id }}>
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.mobile}}</td>
<td>{{data.city}}</td>
<td>{{data.email}}</td>
<td>{{data.address1}}</td>
<td>{{data.address2}}</td>
<td>
<button ng-click="deleteFunc()" class="btn btn-danger">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
JavaScript:
var manageApp = angular.module('manageApp', ['ngRoute', 'angular-growl', 'ngAnimate']);
manageApp.controller('customerManageController', function ($scope, $http, growl) {
// This will hold the data
$scope.receivedData = [];
$http({
method: 'POST',
url: 'list_customers',
headers: {
"Content-Type": "application/json"
},
}).success(function (data) {
// If here there is data, show it.
if (data.length > 0) {
$scope.receivedData = data;
}
}
});
$scope.deleteFunc = function () {
alert('here');
}
});
the data from kontakte_data.php will not be loaded to div id="results", but i can see the database results outside the table, has someone an idea ?
html-code:
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>K-ID</th>
<th>Name</th>
<th>Ort</th>
<th></th>
</tr>
</thead>
<tbody>
<div id="results"></div>
</tbody>
</table>
<div class="pagination"></div>
</div>
ajax-code:
$(document).ready(function() {
$("#results").load("kontakte_data.php");
$(".pagination").bootpag({
total: <?php echo $pages; ?>,
page: 1,
maxVisible: 5,
}).on("page", function(e, num){
e.preventDefault();
$("#results").load("kontakte_data.php", {'page':num});
});
});
Based on the question asked here: https://www.quora.com/How-do-I-display-a-div-table-when-a-link-is-clicked
I used the code given by the top answer.
Now, my code is modified to use variables:
echo ''.$row['Name'] .'';
It's in a while loop.
<div id="data-table" style="visibility: hidden;">
<table>
<?php
if $Name ==
?>
</table>
</div>
My div is supposed to show the data for the item whose Name is selected. eg: if "Robin" is selected, Robin's data will be shown. so how do I get the div to check which Name/link was clicked and then show the data for that Name/link?
Your question is a little hard to follow. Hopefully this can clear up some of your front-end issues.
HTML:
<div class="container">
<h3>Triggers</h3>
<p class='table-reference' data-record-ref='1'>Highlight Row #1</p>
<p class='table-reference' data-record-ref='2'>Highlight Row #2</p>
<p class='table-reference' data-record-ref='3'>Highlight Row #3</p>
<hr>
<h3>Table</h3>
<table id="record-table">
<thead>
<tr>
<th>ID</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr data-record='1'>
<td>#1</td>
<td>Record</td>
</tr>
<tr data-record='2'>
<td>#2</td>
<td>Record</td>
</tr>
<tr data-record='3'>
<td>#3</td>
<td>Record</td>
</tr>
</tbody>
</table>
</div>
Javascript/jQuery:
(function($) {
$(function() {
$("*[data-record-ref]").click(function() {
var id = $(this).data("record-ref");
var element = $("*[data-record='"+id+"']");
if(!!element) {
$(this).toggleClass("highlight");
element.toggleClass("highlight");
} else {
console.error("Record Not Find.");
}
});
});
}) ($);
Demo
How can i pass data from my table to a pop-up.
This is how i did it in my table:
I populate the table from my database using controllers and models
<table class="table table-striped table-checkable" id="demo-dtable-02" aria-describedby="DataTables_Table_0_info">
<thead>
<tr>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Subject: activate to sort column ascending" style="width: 220px;">??</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 79px;">??</th>
</tr>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
<?php
foreach ($my_page_data['text_list']as $text_list_key => $text_list_data){
?>
<tr class="odd">
<td class=" "><a href="#" onclick="viewText(<?php echo $text_list_data['id'] ?>)" data-toggle="modal" data-target="#view-text" ><?php $msg = $text_list_data['msg']; ?></a></td>
<div id="<?php echo $inbox_list_data['id'] ?>" data-content="<?php $msg = $inbox_list_data['message']?>"></div> <!-- i used this as a hidden div for the data to be passed because i dont know other ways -->
<td class=" "><?php $date = $text_list_data['date_updated'];?></td>
</tr>
<?php } ?>
</tbody>
</table>
Then i used a script to pass the data...
<script>
function viewInbox(id){
$('#inbox-message-body').text($('#'+id).attr('data-content'));
}
</script>
And then the the clicked data will be displayed here:
<div class="modal-body">
<div class=" . . .">
<div class="..">
<span class="view-label">From:</span> MY OTHER DATA <!--TODO: -->
<br>
<span class="view-label">To:</span> MY DATA<!--TODO: -->
<br>
</div>
</div>
<!--TODO: Message body--> I
<span id="message-body" class="span8"></span>
</div>
This code are just in one file.
The page im creating is like. I have a table of messages. Then to view message is to click it and a pop-up will appear.
Any insights?
Your help is greatly appreaciated.
The way i do it is i assign modal template to a different controller, and then call it via ajax request like this.
$(".modalCaller").click(function(){
$.ajax({
type: POST,
url: "/insert/modal/controller/here",
data: {id: $(this).data("id")},
success: function(data){
data.appendTo("body").modal("show");
}
})
});
And just drop your modal into another view.