I have a website with navigation bar (which is in main.blade.php). I have created a jQuery table but not in the blade view but as a simple .php. How can I set the content section to it and add it to the blade? Thanks!
Routes:
web.php
old(a simple page from the blade):
Route::get('/manageclasses', ['as' => 'manageclasses', 'uses' => 'UserView\AdminController#manageclasses']);
the new one(a simple page with table):
Route::get('/manageclasses',['as' => 'manageclasses',function(){
$manageclasa = App\Elevi::all();
return View::make('table')->with('manageclasa', $manageclasa);
}]);
My blade layout where I would like to add the table
#extends('layouts.master')
#extends('layouts.navbar')
#extends('layouts.sidebar')
#section('content')
<h3 class="white-text">Manage Page</h3>
#endsection
My new layout with the table
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Manage Clasa</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<h1>Elevi clasa</h1>
<table>
<thead>
<tr>
<th>Nume</th>
<th>Prenume</th>
</tr>
</thead>
<tbody>
<?php foreach ($manageclasa as $elev): ?>
<tr>
<td><?php echo $elev['nume'] ?></td>
<td><?php echo $elev['prenume'] ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
$(function(){
$("table").dataTable();
});
</script>
</body>
</html>
You are returning an Eloquent Object. Try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Manage Clasa</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<h1>Elevi clasa</h1>
<table id="elevi-clasa">
<thead>
<tr>
<th>Nume</th>
<th>Prenume</th>
</tr>
</thead>
<tbody>
#foreach($manageclasa as $elev)
<tr>
<td>{{ $elev->nume }}</td>
<td>{{ $elev->prenume }}</td>
</tr>
#endforeach
</tbody>
</table>
<script>
$(function(){
$("#elevi-clasa").dataTable();
});
</script>
</body>
</html>
Related
I have a table that contains certain data. This data is dynamic and fetched from the database.
I want to prevent the button from working if there is no relevant data (long straight line — ) in a column of this table. That is, the post(submit) operation should not occur.
Why do I want this? If there is no long straight line ( — ), then there is data here. Therefore, the relevant submit button should not work again.
I wrote the following code to accomplish this. However, this is not working. Actually, I'm accessing the data but not deactivating the button.
<?php
//$args = array(1,2,3,4...);
$args = array(1,2,3); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>Column 1</tr>
<tr>Column 2</tr>
<tr>Column 3</tr>
</thead>
<tbody>
<?php foreach ($args as $key => $value) { ?>
<tr>
<td>A</td>
<td><span class="related"> <?php echo !empty($value) ? $value:' — '; ?></span></td>
<form action="" method="post">
<td>
<input type="hidden" name="id">
<button type="submit" class="create-1"></button>
<button type="submit" class="create-2"></button>
<button type="submit" class="create-3"></button>
</td>
</form>
<script type="text/javascript">
jQuery(".create-1").submit(function(e){
jQuery(function() {
jQuery("span.related").each(function(index, element) {
if(jQuery(this).text() !== ' — '){
e.preventDefault();
}
});
});
});
</script>
</tr>
<?php }?>
</tbody>
</table>
</body>
</html>
Try this, I've moved the form to inside the TD as it's invalid inside the TR as mentioned by brombeer. Also I've changed the code to find the closest TR then locate .related text.
<?php
$args = array(1, 2, 3);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>Column 1</tr>
<tr>Column 2</tr>
<tr>Column 3</tr>
</thead>
<tbody>
<?php foreach ($args as $key => $value) { ?>
<tr>
<td>A</td>
<td>
<span class="related">
<?php
echo !empty($value) ? $value : ' — ';
?>
</span>
</td>
<td>
<form action="" method="post" class="create">
<input type="hidden" name="id">
<button type="submit" class="create-1"></button>
<button type="submit" class="create-2"></button>
<button type="submit" class="create-3"></button>
</form>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
jQuery(".create button").click(function(e) {
var form = jQuery(this);
e.preventDefault();
if (form.closest("tr").find("span.related").text() !== ' — ') {
return false;
}else{
$(this).closest("form").submit();
}
});
</script>
</body>
</html>
I'm trying to use DataTables but for some reason, it doesn't seem to be working. I'm using Bootstrap 4 and I need buttons from DataTables so that I can export the table later. I think I've added everything I need but it's not showing up. anyone know why it hasn't worked? The table is being posted from a database, it works just fine in bootstrap and all the information shows up but as soon as I try to add DataTables to it nothing seems to change.
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include_once('connection.php');
if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['someAction']))
{
func();
}
function func()
{
$conn = mysqli_connect("localhost", "root", "", "SportsDB");
}
session_start();
if( !isset($_SESSION['username']) ){ /* Change into role = teacher or admin*/
header('Location:login.php');
}
print_r($_SESSION);
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Register exporting</title>
<!--- Link to Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Link to Data Tables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.js"></script>
<!-- Link to jquery -->
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class='container-fluid' style='margin-top: 20px'>
<div class="row">
<div class="col-md-8 mx-auto">
<table class="table table-bordered table-hover" id='example'>
<thead>
<tr>
<td>ID</td>
<td>Username</td>
<td>T1_choice</td>
<td>T2_choice</td>
<td>T3_choice</td>
</tr>
</thead>
<tfoot>
<tr>
<td>ID</td>
<td>Username</td>
<td>T1_choice</td>
<td>T2_choice</td>
<td>T3_choice</td>
</tr>
</tfoot>
<tbody>
<?php
ini_set("display_errors", 1);
$stmt = $conn->query('SELECT * FROM Student_Choices');
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo '<tr>
<td>'.$row['Unique_ID'].'</td>
<td>'.$row['Username'].'</td>
<td>'.$row['T1_Choice'].'</td>
<td>'.$row['T2_Choice'].'</td>
<td>'.$row['T3_Choice'].'</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Thanks for the help. I needed to call the jquery before DataTables.
I have a simple app that reads data from a JSON file and displays it in a webpage. That part works fine (the displaying). I now want to be able to sort through the table by toggling on the table headers using the orderBy filter in AngularJS ... however, that's where I have issues.
What may I be overlooking? I feel like it has to do with the HTTP Function ... could that be messing with it? I don't know why that may be an issue though?
Please find my code attached.
leads.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<textarea name="name" ng-model = "test"></textarea>
<h1>{{ count }}</h1>
<table class="table">
<thead>
<tr>
<th ng-click = "sortBy('first_name')">First Name</th>
<th ng-click = "sortBy('last_name')">Last Name</th>
<th ng-click = "sortBy('email')">Email Address</th>
<th ng-click = "sortBy('accountCreation')">Account Creation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "user in myData | orderBy : orderByThis">
<td> {{user.first_name}} </td>
<td> {{user.last_name}} </td>
<td> {{user.email}} </td>
<td> {{user.accountCreation}}</td>
</tr>
</tbody>
</table>
</div>
<script src="./leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
$scope.sortBy = function(x){
$scope.orderByThis = x;
};
});
You can do this inside the controller itself
$scope.sortBy = function(x){
$scope.myData = $filter('orderBy')($scope.myData, x);
}
and make sure to inject $filter
I have a question regarding dynamic tables in html and php. My goal is to create a dynamic table that displays the queried data from mysql and displays them in a table with checkboxes so the user can select questions from a question bank and then do something with them. My problem however is getting the data to be displayed. Using a certain type of mvc architecture, I need to keep the sql out of the front end html and php portions. I was wondering if anyone had any suggestions as how to post the variables from the back end(mysql query) and send them to the front end(html and php section) via curl where I can dynamically create a table with checkboxes. I have attempted the solution using bootstrap and combining sql with html and php as well. Any help would be greatly appreciated.
<?php
include('ProfessorWelcome.php');
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<title>Registration form</title><!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
<?php
//select all records form tblmember table
$query = 'SELECT Question, Difficulty FROM QuestionBank';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($result)) {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>".$row['Question']."</td><td>".$row['Difficulty']."</td>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
This is how I would do it.
I added the ob_start() and ob_flush() so the Top of the page is being transmitted as you create the table.
Moved <title> to immediately follow <head>
Very Important: Moved CSS above JS in the <head>
I used heredoc syntax: PHP Manual Heredoc Syntax
Added MYSQL_NUM to:
mysql_fetch_array($results, MYSQL_NUM))
$row[0] and $row[1] can be used in a double quoted string without concatenation dots. Can also be used in here doc. $row['Question'] and $row['Difficulty'] can not.
Do you realize the overhead associated with jQuery? You do not need any JS in this page. But you created a lot more work for the Browser and are making the visitor wait while the Browser does all that unnecessary work.
I would 86 the JS and jQuery. And NO Bootstrap. Learn CSS.
<?php ob_start("ob_gzhandler");
include('ProfessorWelcome.php');
echo <<<EOT
<html lang="en">
<head><title>Registration form</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<!-- Bootstrap core CSS -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
EOT;
ob_flush();
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
//select all records form tblmember table
$query = 'SELECT `Question`, `Difficulty` FROM `QuestionBank` ';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($results, MYSQL_NUM)); {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>$row[0]</td><td>$row[1]</td>\n";
}
echo <<<EOT
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
EOT;
ob_end_flush();
?>
In master.php
<?php
//echo "session check: ".$_SESSION['session_array'];
//exit;
session_start(); // Session Starts
if( !isset($_SESSION['session_array']) )
{
header("Location: index.php");
exit;
}
include("conn.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LMS</title>
<link rel="stylesheet" type="text/css" href="jui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="jui/general.css">
<link rel="stylesheet" type="text/css" href="jui/themes/icon.css">
<script type="text/javascript" src="jui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/core.js"></script>
</head>
<body class="easyui-layout">
<div region="north" class="north_master" border="false" split="false" >
<div style="float:left;">
<img src="images/usr_logo.jpg" alt="Lead Management System" width="168" height="66" title="Lead Management System" >
</div>
<div style="float:right;">
<br/><br/>
<a id="logout" name="logout" href="logout.php?logout=1" class="easyui-linkbutton" iconCls="icon-cancel" onClick="javascript: return confirm('Are you sure you want to log out?');">Logout</a>
</div>
</div>
<div region="south" class="south" border="false">
<?php include('footer.php'); ?>
</div>
<div region="center" class="center" style="background-image:url(img/product-display.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:right bottom; ">
<?php
include('dashboard.php');
?>
</div>
</body>
</html>
In dashboard.php
<script language="javascript">
jQuery(document).ready(function($){
alert("check");
});
</script>
<div class="content">
<h1>Slot Dashboard</h1>
<div>
Add Slot
</div>
<table border='1' bordercolor='#B4B4B4' cellpadding='1' cellspacing='0' width='80%' align="center">
<tr align="left">
<th>Week</th>
<th>Dates</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>09/04/2011 - 09/10/2011</td>
<td>Revised</td>
<td>09/04/2011</td>
<td>View</td>
</tr>
<tr>
<td>2</td>
<td>09/11/2011 - 09/17/2011</td>
<td>Revised</td>
<td>09/11/2011</td>
<td>View</td>
</tr>
<tr>
<td>3</td>
<td>09/18/2011 - 09/24/2011</td>
<td>Not Submitted</td>
<td>09/18/2011</td>
<td>View</td>
</tr>
</table>
</div>
Question: While master.php runs "check" alerts twice.
I need to know why "check" alerts twice. How to solve this
<div region=center>
The scripts within the div runs twice. there is some bug with jeasy-ui. Help me how to solve that.
Technically included page alert shouldn't fire twice. it is only possible in case of you add sample.php file in php.ini as auto_append_file
i found same problem in easyui every version, when script is included in to panel/layout, the script will be run twice, the reason I think:
the page be loaded in browser ,the browser run the script of page once, when dom is loaded ,the easyui render style for the node in dom, the script in the node will be called second by easyui.
this problem isn't only in layout , but in panel, Maybe even for the every thing inherit from panel.
this problem may be in the easyui's root render method, so I can't find solved for this without src.
now i have to change easyui to another ui framework.
example for theis problem, the alert be called twice in browser:
</div>
<div region="south" class="south" border="false">
</div>
<div region="center" class="center" >
<script>
alert("here");
</script>
</div>