I am having a bit of trouble getting a search function working using ajax to bring up results as the user types in a name.
This is the site in question (you can click view all to see what is searchable)
http://ra-yon.com/beta/Test_sites/HFE/admin/contact.php
The query in action
http://ra-yon.com/beta/Test_sites/HFE/include/queryc.php?query=ra-yon&clause=email
The code in question
<html>
<head>
<style type="text/css">
body
{
background:black;
color:black;
width:100%;
}
#center
{
width:90%;
height:110%;
background:white;
margin:0 auto;
text-align:center;
color:black;
}
#insert{
background:navy; color:white; font-family:impact; font-size:18px;width:170px; height:170px; border-radius:50%;
margin:0 auto;
float: left; margin-left: 100px;
top:200px;
position: relative;
}
#insert:hover
{
background:white;
color:navy;
}
label
{width:150px;}
td
{
border:solid 2px black;
max-width: 250px;
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function sendPHP(){
$('#table,#table2').css('display','none');
var query = $('#searchname').attr('value');
var clause = $('#searchclause').attr('value');
$.ajax({
url: '../include/queryc.php?,
type: 'POST',
data: "query="+query+"&clause="+clause,
dataType: 'html',
success:
function(data) {
$(data).appendTo('#table');
}
});
return false;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head>
<body>
<h4 style="float:right; color:blue; position: relative; left:-100px;" id="goback"> Go back? </h4>
<div id="center">
<div id="queryform1" >
View All?
<span style="color:black;">search</span> <input type='text' onKeyUp="sendPHP();" name='searchname' id="searchname" />
<span style="color:black;">search by</span> <select name="searchclause" id="searchclause">
<option value="name">Name</option>
<option value="email">Email Address</option>
<option value="subject">Subject</option>
<option value="date">Date</option>
</select>
Download file?
<div id="table2" style="display: none; margin: 0 auto; position: relative; top:40px; max-width:700px;">
<div id="viewall">
<?php
include '../include/include.php';
$sql = 'select * from contactus' ;
//print_r($sql);
$result=mysql_query($sql);
?>
<table>
<tbody>
<th>Name</th><th>Email</th><th>Subject</th><th style="width:200px;">Message</th><th>Date</th>
<tr>
<?php
while ($client = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "
<tr>
<td >".$client[name]."</td>
<td >".$client[email]."</td>
<td >".$client[subject]."</td>
<td >".$client[message]."</td>
<td >".$client[date]."</td>
</tr>";
} ?>
</tbody></table>
</div></div><div id="table">TestTestTest</div>
</div></div>
</body>
</html>
Its a bit messy right now, I am planning on cleaning it up after I get it working.
Thank you all so much!
Checked your code in Console. Your function is failing. You are missing a single quote here:
url: '../include/queryc.php?',
I use Google Chrome's Console as well as the Console found in the Firbug extension for Mozilla Firefox. They both are invaluable in helping sort out the minor issues
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm new for the PHP & I begin the project which was involving the PHP. my firm has a dynamic drop down. I can't insert the dynamic drop down data to the database.
Here's my index.php form.
<?php
//index.php
include('database_connection.php');
$query = " SELECT * FROM first_level_category ORDER BY first_level_category_name ASC ";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?> <!DOCTYPE html> <style>
* { box-sizing: border-box; }
input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
label { padding: 12px 12px 12px 0; display: inline-block; }
/* Set a style for the submit button */ .registerbtn { background-color: #4CAF50; color: white; padding: 10px 10px; margin: 2px 0; border: none; cursor: pointer; width: 50%; opacity: 0.9; }
.registerbtn:hover { opacity: 1; }
.container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }
.col-25 { float: left; width: 30%; margin-top: 6px; }
.col-35 { float: left; width: 25%; margin-top: 6px; }
.col-75 { float: left; width: 30%; margin-top: 6px; }
div.ui-datepicker{ font-size:20px; float: left; width: 30%; margin-top: 6px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ #media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0; } </style>
<html> <head> <title>Bootstrap Multi Select Dynamic Dependent
Select box using PHP Ajax </title> <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> </head> <body> <br /> <div class="container"> <form action="action.php" method="post"> <h2 align="center">Multi Select Dynamic Dependent Select box using PHP Ajax</h2> <br /><br /> <div style="width: 500px; margin:0 auto">
<div class="form-group"> <div class="container"> <form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="policynumber">Policy Number</label>
</div>
<div class="col-75">
<input type="text" id="policynumber" name="pid" placeholder="Policy number...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="date">Date</label>
</div>
<div class="ui-datepicker">
<input type="date" id="date" name="date" placeholder="date">
</div>
</div>
<div class="row">
<div class="col-25">
<label>Department</label> </div> <div class="col-75">
<select id="first_level" name="first_level" multiple class="form-control">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["first_level_category_id"].'">'.$row["first_level_category_name"].'</option>';
}
?>
</select>
</div> </div>
<div class="row">
<div class="col-25">
<label>Supporting Documents</label> </div> <div class="col-75">
<select id="second_level" name="second_level" multiple class="form-control">
</select>
</div> </div>
<!--<div class="row">
<div class="col-25">
<label>First Level Category</label> </div> <div class="col-75">
<select id="third_level" name="third_level[]" multiple class="form-control">
</select> </div> </div>-->
<button type="submit" class="registerbtn">Submit</button> </div>
</form> </body> </html> <script> $(document).ready(function(){
$('#first_level').multiselect({ nonSelectedText:'Select First Level Category', buttonWidth:'400px', onChange:function(option, checked){ $('#second_level').html(''); $('#second_level').multiselect('rebuild'); $('#third_level').html(''); $('#third_level').multiselect('rebuild'); var selected = this.$select.val(); if(selected.length > 0) {
$.ajax({
url:"fetch_second_level_category.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#second_level').html(data);
$('#second_level').multiselect('rebuild');
}
}) } } });
$('#second_level').multiselect({ nonSelectedText: 'Select Second Level Category', buttonWidth:'400px', onChange:function(option, checked) { $('#third_level').html(''); $('#third_level').multiselect('rebuild'); var selected = this.$select.val(); if(selected.length > 0) {
$.ajax({
url:"fetch_third_level_category.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#third_level').html(data);
$('#third_level').multiselect('rebuild');
}
}); } } });
$('#third_level').multiselect({ nonSelectedText: 'Select Third Level Category', buttonWidth:'400px' });
}); </script>
Here's my Action.php code
//here's my action.php form
// Check connection if($connect === false){
die("ERROR: Could not connect. " . mysqli_connect_error()); }
if(isset($_POST["submit"]));
// Escape user inputs for security
$pid = $_POST['pid']; $date = $_POST['date']; $record1 = is_array('first_level'); $record2 = is_array('second_level');
// Attempt insert query execution $sql = "INSERT INTO saveditem (pid, date, department,supdoc) VALUES ('$pid', '$date','$record1','$record2')";
if(mysqli_query($connect, $sql)){
echo "Records inserted successfully."; } else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($connect); } // Close connection mysqli_close($connect); ?>
Can someone help me out?
try to var_dump($result) before you looping them to make sure your data is ready to use
<?php
var_dump($result);
foreach($result as $row)
{?>
<option value="<?php echo $row['first_level_category_id']; ?>"><?php echo $row['first_level_category_name']; ?></option>
<?php
}
?>
You can json_encode and json_decode. Encode the array and then insert into the database. if you need to fetch the array from the database, json_decode it.
More info:
https://www.php.net/manual/en/function.json-encode.php
https://www.php.net/manual/en/function.json-decode.php
This works good with out a loop but with a loop the first one works but the second one can't set a PHP session value like the first one so how can I get the loop copy to work like the first one meaning being able to set a PHP session value.
*NOTE: THIS IS NOT A HTML FORM THIS IS COSTUME CODE THAT me and my friend MADE FROM a tutorial THAT ACTS LIKE A FORM TO SET A SESSION VALUE.*
tutorial source: https://www.formget.com/submit-form-using-ajax-php-and-jquery/#
I don't want to use a form don't ask me why it's personal so how can I fix this where the loop copy can also set a session value of a session variable i'm saying this because only the first one is able to do that and the second one can't set a session value like the first one.
.gif Screenshot
code
submit_session.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Simulated Form</title>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//This section converts the HTML id's in the form div into form values
$(document).ready(function(){
$("#execute").click(function(){
var execute= $("#execute").val();
var name= $("#name").val();
var age= $("#age").val();
var dataString = 'execute='+ execute + '&name='+ name + '&age='+ age;
//AJAX code to submit the simulated form.
$.ajax({
type: "POST",
url: "submit_session.php",
data: dataString
});
});
});
</script>
<style>
.form {
background-color: gold;
width: 200px;
margin: auto;
border-radius: 5px;
padding-top: 5px;
}
.set-value{
background: blue;
padding: 1px 4px;
text-decoration: none;
border: 1px solid gray;
color: white;
margin: auto;
display: block;
width: 100px;
text-align: center;
border-radius: 5px;
}
.name-input {
margin: auto;
display: block;
}
.age-input {
margin: auto;
display: block;
}
</style>
</head>
<body>
<?php
//Generate more than one copy of the simulated form
for ($loop = 0; $loop <= 1; $loop++) {
?>
<br>
<!--The simulated form-->
<div class="form">
<p style='text-align: center;'>Simulated form</p>
<input type="text" id="name" class='name-input' required="required" placeholder='Name' autocomplete="off">
<br>
<input type="text" id="age" class='age-input' required="required" placeholder='Age' autocomplete="off">
<br>
<!-- Simulated form submit button -->
<a class="set-value" id="execute" href="view-session-values.php">Set value</a>
<br>
</div>
<?php
echo $loop;
}
//Set session values from a simulated form
if(isset($_POST['execute'])){
$name = $_POST['name'];
$age = $_POST['age'];
if($check=1){
$_SESSION['name']=$name;
$_SESSION['age']=$age;
echo "<script>window.open('_self')</script>";
}
}
?>
</body>
</html>
view-session-values.php
<?php
session_start();
$name = $_SESSION['name'];
$age = $_SESSION['age'];
?>
<!DOCTYPE html>
<html>
<head>
<style>
#set-new-session-value {
background-color: black;
color: white;
padding: 5px 5px;
text-decoration: none;
border-radius: 5px;
}
#destroy-session-value{
background-color: black;
color: white;
padding: 5px 5px;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<!--This section is based on choosing session options -->
<br>
<a id='set-new-session-value' href="submit_session">Set new session value</a>
<a id='destroy-session-value' href="destroy_session.php">Destroy session value</a>
<br>
<!--This section is where the set session values are shown-->
<p><?php echo $name; ?></p
<p><?php echo $age; ?></p>
</body>
</html>
Hi I am trying to make a autocomplete function where I use a search field and write the first letters of the name of a company. the code vill search an online database for the company and there will be a list of suggestions. for example
company1 street1 zipcode etc.
company2 astreet2 zipcode etc.
company3 street1 zipcode etc.
I will click on one of the listed companies and it vill populate field1 with company1 field2 street field3 zipcode etc. but I cant make it. I dont reallt know how to do this and Im trying to learn and understand but this is too complex for me so I hope any of you guys can hekp me - thanks in advance.
This is how my code looks like so far.
main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<style>
.kundsok {
border: 1px solid #a8d4b1;
background-color: #c6f7d0;
margin: 2px 0px;
padding: 40px;
border-radius: 4px;
}
#ftg-list {
float: center;
list-style: none;
margin- top: -3px;
padding: 0;
width: 190px;
}
#ftg-list li {
padding: 10px;
background: #f0f0f0;
border-bottom: #bbb9b9 1px solid;
}
#ftg-list li:hover {
background: #ece3d2;
cursor: pointer;
}
#search-box {
padding: 10px;
border: #a8d4b1 1px solid;
border-radius: 4px;
}
</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#search-box").keyup(function() {
$.ajax({
type: "POST",
url: "readkund_eniro.php",
data: 'keyword=' + $(this).val(),
beforeSend: function() {
$("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165 px ");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
}
});
});
});
function selkund(val, val2) {
$("#search-box").val(val);
$("#foretag_name").val(val);
$("#stad").val(val2);
$("#suggesstion-box").hide();
}
</script>
<body>
<div id="sidlayout">
<div id="content">
<?php include "menukunder.php"; ?>
<div class="kundsok">
<center>
<input type="text" id="search-box" name ="search-box" placeholder="kund" >
<div id="suggesstion-box"></div>
</form>
<h1></h1>
<H3></H3>
<center>
<form action="sida3ka.php" method="post">
<fieldset>
<label title="Skriv in företagets namn" for="foretag_name">Företag:</label>
<input type="text" name="foretag_name" id="foretag_name">
<label title="Skriv in stad" for="stad">Stad:</label>
<input type="text" name="stad" id="stad">
</fieldset>
</form>
</div>
</div>
</body>
</html>
on the other page called readkund_eniro.php the code looks like this
$url = 'https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word
=' . $_POST["keyword"] . '&geo_area=stockholm';
$response = file_get_contents($url);
$json = json_decode($response, true);
if(!empty($json)) {
?>
<ul id="ftg-list">
<?php
foreach($json['adverts'] as $ftg) {
?>
<li onClick="selkund('<?php
echo $ftg["companyInfo"]['companyName'];
echo $ftg["address"]['streetName'];
?>');"><?php
echo $ftg["companyInfo"]['companyName'];
?>
</li>
<?php
}
?>
</ul>
<?php
}
I the database respons will be
$ftg["companyInfo"]['companyName']
$ftg["address"]['streetName']
$ftg["address"]['postCode']
and so on. thanks again
Best regards Johan
i think there is problem in API url at readkund_eniro.php file. can you please try with as below.
$url = "https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word=".$_POST['keyword']."&geo_area=stockholm";
another thing i found with your response text inside
<li onClick="selkund('<?php echo $ftg["companyInfo"]['companyName'];?>', '<?php echo $ftg["address"]['streetName'];?>');"><?php
echo $ftg["companyInfo"]['companyName']. ', '. $ftg["address"]['streetName'].', '. $ftg["address"]['postCode'] ;
?>
</li>
I am loading a PHP page with a table using DataTables fixed header functionality. I can not seem to get the table to be at 100% of page load while page renders. It starts off as compressed (while loading) then expanded (once page renders).
I tried to resolve this by output buffering in php but can not get the effect of compression then expansion to go away.
Initialization Code (At Bottom of Script)
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
EDIT:
(Table is compressed during load but then goes to 100%.)
PHP
<html>
<head>
<title>Action Item Summary</title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<style>
thead th {
background-color:#0038a8;
font-weight: bold;
font-style: italic;
color: white;
text-align: left;
}
table:not(#header):not(#menu):not(#find) {
background-color: white;
width: 100%;
}
td {
width: auto;
min-width: auto;
white-space: nowrap;
}
input[type='text'] {
width: 50%;
min-width: 100%;
}
span {
white-space: nowrap;
}
span.late{
color: red;
}
thead tr td a{
color: white;
}
th a:hover
{
cursor: pointer;
text-decoration: underline;
}
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
div.dataTables_scrollBody table#summary_table {
width: 100% !important;
}
table.dataTable tr.odd { background-color: #dae1e9; }
table.dataTable tr.even { background-color: white; }
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/table.js"></script>
</head>
<body>
<? $pageTitle="All Action Items (".count($resAll).")"; include_once('../shared/pageheader.php'); ?>
<?if (isset($_SESSION['filteron']) && $_SESSION['filteron'] == true):?><div style="position:relative; float:right; display: inline; font-weight: bold; color:red; font-size: 12pt; background-color: lightgray; margin-right: 10"> Filter On </div><br /><?endif;?>
<form method="POST" action="/actionitems/viewactionitem.php">
<table id="find" border="1">
<tr>
<td class="label">Find Action Item</td>
<td style="width:100 !important"><input type="text" id="id" name="id" value=""></input></td>
<td><input type="submit" value="View" /></td>
<td><input type="button" value="Find" onclick="jumpTo($('#id').val())"+/></td>
</tr>
</table>
</form>
<table style="background-color: transparent">
<tr>
<td id="left" align="left">
<? if($_SESSION['userrole'] == 'Admin'): ?>[<a style="text-decoration: underline; color: black" href="newactionitem.php"><b>Add New Action Item</b></a>] <? endif;?>
</td>
<td id="middle" align="middle">
[<a style="text-decoration: underline; color: black" href="allactionitems.php"><b>All Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="openactionitems.php"><b>Open Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="completedactionitems.php"><b>Completed Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="closedactionitems.php"><b>Closed Action Items</b></a>]
</td>
<td id="right">
</td>
</tr>
</table>
<form style="display:inline" id="summaryform" method="POST" action="allactionitems.php">
<div class="summary_table" style="<? if(count($resAll)> 23): ?>height:500;<?endif;?> overflow-y:auto">
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
<thead class="header">
<tr>
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<th>
<?if (in_array($col, $categoryNames)):?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$manageActionItems->getCategoryName($col)?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=$manageActionItems->getCategoryName($col)?></a><? if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>";?></td>
<? else:?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=($col=="ActionItemID")?"ID": $col?></a><? if ($orderBy == $col && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $col && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>"; ?>
<?endif;?>
</th>
<? endif; ?>
<? endforeach; ?>
<th>
View
</th>
<th>
Edit
</th>
</tr>
</thead>
<tbody>
<? foreach($resAll as $idx=>$row): ?>
<? //echo"<pre>"; var_dump($row); echo"</pre>"; ?>
<tr id="row<?=$row['ActionItemID']?>">
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<td <? if($orderBy == $col) echo "class='sort'"; ?>>
</td>
<? endif; ?>
<? endforeach; ?>
<td>
View
<!--input type="submit" value="View" style="width:60;height:20;border:none; font-weight: bold"/-->
</form>
</td>
<td>
<? if(($_SESSION['userrole'] == 'Admin' && $_SESSION['userrole'] == 'Admin') || isset($_SESSION['userid']) &&($row['OwnerID'] == $_SESSION['userid'] || $row['AltOwnerID'] == $_SESSION['userid'])):?>
Edit
<? endif; ?>
<!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /-->
</form>
</td>
</tr>
<? endforeach; ?>
</tbody>
</table>
</div>
</form>
<script>
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
</script>
</body>
</html>
CSS
div#splash
{
background-color:#d8d8d8;
}
body
{
font-family: arial;
}
textarea
{
width: 100%;
max-width: auto;
height: 100px;
max-height: 85px;
overflow-y:scroll;
resize: none;
font-family: inherit;
}
html * :not(h1):not(h2)
{
font-size: 10pt;
}
body
{
margin: 0px;
background-image: url('/img/custom_back.gif');
}
h1, h2
{
font-family: arial;
text-align: center;
}
h3
{
font-size: 75%;
}
table.data tr td:not(.label)
{
background-color:white;
}
td#left
{
width: 25%;
}
td#right
{
width: 25%;
}
td#middle
{
width: 50%;
}
td.label
{
font-weight: bold;
font-style: italic;
}
table#find tr td.label,
table.data tr td.label
{
background-color:#0038a8;
color: white;
}
table.data tr td.label,
table.data:not(#details) tr td
{
width: 25%;
}
table.data
{
margin: 0 auto;
}
table#header
{
width: 100% !important;
}
table#header tr td
{
vertical-align: middle;
background-color: transparent;
}
input[type=submit]
{
margin: 0 auto;
}
td
{
vertical-align: middle;
}
div#header div
{
display:inline-block;
}
div#title
{
font-style: italic;
}
img#logo
{
width: 95px;
height: 95px;
}
table#toolname td
{
font-weight: bold;
font-size: 15px;
}
table#menu
{
background-color: #0038a8;
}
.required
{
border-style:solid;
border-width:2px;
border-color:red;
}
td > div:not(.filterinput):not(.cell)
{
height: 85px;
max-height: 85px;
overflow-y:scroll;
overflow-x:hidden;
}
td.sort
{
background-color: lightgray;
}
How do I resolve this issue?
for Bootstrap 4 Users
If you are using Bootstrap classes to the table, you might ran into this width issue. To fix this, use the datatable default option "autoWidth": false
Enable or disable automatic column width calculation. This can be
disabled as an optimisation (it takes a finite amount of time to
calculate the widths) if the tables widths are passed in using
$('#example').dataTable( {
"autoWidth": false
});
https://datatables.net/reference/option/autoWidth
I believe I have resolved the issue. I was using an older build.
After upgrading to 10.1 and following the table width instruction below, I resolved my issue.
I added (width="100%") to my table tag and it now stays at 100%
So instead of
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
I replaced the style width: 1000 which just sets the absolute width to 1000 pixels (I forgot to add the px unit suffix), to a percentage value of 100% `width='100%' and the resolving table tag would read.
<table id="summary_table" class="display nowrap" width="100%" border=1>
I used the answer from this question to form my response
https://stackoverflow.com/a/23842795/1691103
Example
http://www.datatables.net/examples/basic_init/flexible_width.html
I was facing the same problem and tried all the above solutions but no luck.
After hours of search, I found that the bootstrap class "table-responsive" has a problem with the DataTable.
So the solution is -
Just remove the "table-responsive" class from the table.
So the HTML of the table should look like this -
<table class="table table-striped table-hover table-sm" id="followup-table">
<thead>
<tr class="text-white">
<th>#</th>
<th>Follow Up On</th>
<th>Name</th>
<th>Phone No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4 Jun 2021</td>
<td>Mrityunjay Mishra</td>
<td>87838734</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#followup-table').DataTable();
} );
</script>
I read all the answers. none of them mentioned this simple way:
just add style="width:100%" to the table tag
<table style="width:100%" class="table table-striped- table-bordered table-hover table-checkable" id="firstmile-tbl" >
For me in Bootstrap 4.4.1 unfortunately Dexters solution didn't work. The solution is to add a class of w-100 to the table.
If you're using Bootstrap don't forget to add the table class to your table.
<table id="my_table" class="table">
...
</table>
For me adding css selector to the parent div of the table worked like a charm!
div.dataTables_wrapper {
width:100% !important;
}
I want to pass selected value on invoice.php file using jQuery. After sending value on invoice.php file. I want to show invoice.php file echo result on index.php page selected input box. Like an example: If anyone select Item then rate show on rate input box. Here is my code and image
index.php file code:
<html>
<head>
<title>Invoice</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".item").change(function(){
calculate();
});
});
function calculate() {
var item = [];
$(".item").each(function() {
var num=(this.value);
item.push(num);
});
$('input[name=rate]').each(function(i){
$.get(
'/invoice_final_2.php',
{'product':item[i]},
function(data) {
$(this).html(data);
});
});
}
</script>
<style type="text/css">
table
{
border: 1px solid black;
border-bottom: none;
width: 300px;
}
td
{
border-left: 1px solid black;
border-bottom: 1px solid black;
padding:5px 5px 5px 5px;
}
#first
{
border-left: none;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<form method='post' name='form1' action='welcome.php'>
<table cellpadding="0" cellspacing="0">
<tr>
<td id="first">Item</td>
<td>Rate</td>
</tr>
<?php
$num=4;
for ($i=0; $i<$num; $i++)
{
echo "
<tr>
<td id='first'>
<select class='item' name='item'>
<option>Select one</option>
<option>Deluxe Plan</option>
<option>Premium Plan</option>
<option>Standard Plan</option>
<option>Economy Plan</option>
</select>
</td>
<td><input class='rate' type='text' name='rate'/></td>
</tr>";
}
?>
</table>
</form>
</body>
</html>
invoice.php file code:
<?php
include "dbconnect.php";
$product=$_GET['product'];
$query="select * from item where item_name='$product'";
$result=mysql_query or die (mysql_error());
$row=mysql_fetch_assoc($result);
$rate=$row['rate'];
echo "$rate";
?>
I'm not sure what you are trying to achieve, but you don't need to use each and send values one by one using indexes, you can send the array once.
function calculate() {
var items = $(".item").map(function() {
return this.value;
}).get();
$.get('/invoice_final_2.php',
{'product': items },
function(data) {
//
}
);
}