How to output multiple value? - javascript

I need to output multiple value from my function and access to outside variable, put into input hidden and POST variable to enable access data from php.
The data came from user input value from multiple row table which is the multiple row count and other value gets from database.
Javascript;
function validateForm() {
$('textarea.pc_1').each(function(event){
var thought= $(this).val();
$("input[name='status']").val(thought);
alert(status.value);
})
}
Javascript function above can alert multiple value but when value post into input hidden, only single value POST to pc1_process.php. All I need is output multiple value from this function and pass into input hidden. Access this value from POST on pc1_process.php.
pc1.php
<script type="text/javascript">
function validateForm() {
$('textarea.pc_1').each(function(event){
var thought= $(this).val();
$("input[name='status']").val(thought);
alert(status.value);
})
}
</script>
...
...
<form name="myForm" id="contact" method="post" action="../lpc/pc1_process.php" onsubmit="return validateForm()">
<table id="tftable" class="MyTable" style="font-size:12px; color:#333333; width:100%; border-width: 1px; border-color: #729ea5; border-collapse: collapse;" border="1" >
<thead>
<tr style="background-color:#acc8cc;">
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">Issues</td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">Notes <br></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">Status <br></td>
</tr>
</thead>
<?php
if ($info6['datetime_submit'] != null){
$alert_null = "";
$check11 = mysql_query("select *
from (
select * from page1_table union all
select * from page2_table
) t
where t.submit = 'No' AND t.userid = '".$_SESSION['userid']."'") or die(mysql_error());
while($row = mysql_fetch_array($check11)) {
?>
<tr style="background-color:#d4e3e5;">
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["issues"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["notes"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">
<textarea class="pc_1" style="border: none;border-color: Transparent;overflow: auto;width: 100%;height: 100%;background-color:#d4e3e5;resize: none; "></textarea>
</td>
</tr>
<?php }
}?>
</table>
<br><br>
<input type="hidden" id="status" name="status"/>
<input style="float: right;" type="image" <?php echo $disabled?> src=<?php echo $button_off?> onMouseOver="this.src='../images/submit_button_on.png'" onMouseOut="this.src='../images/submit_button_off.png'">
</form>
pc1_process.php
<?php
$status = isset($_POST['status'])?filter_input(INPUT_POST, 'status', FILTER_SANITIZE_STRING):"";
echo($status);
?>

you can pass it like this:
function validateForm() {
var thought = $('textarea.pc_1').map(function(){
return this.value;
}).get();
$("input[name='status']").val(thought); // <--this holds ',' separated values
}
so in the above code the var thought holds an array of values like ['val1', 'val2', ...n] so now setting those values to the $("input[name='status']").
.map() is having some issues in ie 6, 7, 8 versions so you can do like below:
function validateForm() {
var thought = [];
$('textarea.pc_1').each(function(){
thought.push(this.value);
});
$("input[name='status']").val(thought); // <--this holds ',' separated values
}

Either you have to create multiple hidden variable with unique name or name attribute of input field should be an array(name='status[]') or append the value of textarea in same hidden variable by having some unique identifier so that you can explode them to have value of each.
If you set input name as array then you will have all values in array in php script like $_POST['status']
In above JS function you are assigning value to hidden variable so I think you are getting only last value in PHP script.

Why are you copying your textarea content into a hidden field?
If you add a name attribute to your textareas you can access those names in the PHP. Additionally, if you give each textarea the same name, but with [] at the end of the name, you can access the textarea values as an array:
while($row = mysql_fetch_array($check11)) {
?>
<tr style="background-color:#d4e3e5;">
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["issues"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;"><?php echo $row["notes"];?></td>
<td style="font-size:12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5;">
<textarea name="status[]" class="pc_1" style="border: none;border-color: Transparent;overflow: auto;width: 100%;height: 100%;background-color:#d4e3e5;resize: none; "></textarea>
</td>
</tr>
<?php }
pc1_process.php
<?php
$all_statuses = '';
if (isset($_POST['status'])) {
foreach($_POST['status'] as $status) {
// Add filtering here
$all_statuses .= $status;
}
}
echo($all_statuses);
?>

Related

How to create a lot of custom JavaScript "alert" boxes in the same file?

I tried to google this question, and the answer to custom alert boxes in javascript is usually jquery dialog. And this works great with one query, but I have a huge table where 90% of the cells is supposed to be clickable to open up a small alert window with information.
I tried one Stack question (link under). But the same answer made a fault in the code.
So here is my sample code that "works" right now:
<table>
<tr>
<td>Manufacturer</td>
<td>Product</td>
<td>Price range 1</td>
<td>Price range 1</td>
<td>Price range 1</td>
</tr>
<tr>
<td>Umbrella Company</td>
<td>Vaccine</td>
<td><div onclick="alert('1399')">1399</div></td>
<td><div onclick="alert('4299')">4299</div></td>
<td><div onclick="alert('5999')">5999</div></td>
</tr>
</table>
This option works, and but is not working as custom.
This other option, with custom code with jQuery works with one cell, and all the other cells just cries out the same statement.
Test the jsfiddle source under with both tables, one with alert() and one with jquery box.
Is it not possible to do it this way?
Source one: How to change the style of alert box?
Source two: https://jsfiddle.net/olelasse/e6hk9340/
You could avoid more duplication by using child functions or passing the element reference but this is the general idea. I'm not a huge fan of DOM refs because it's fragile. Move one element and everything goes to Hades in a handbasket.
function functionAlert(msg) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
var myYes = confirmBox.find(".yes");
myYes.on('click', function() {
confirmBox.hide();
});
//myYes.click(myYes);
confirmBox.show();
}
#confirm {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 1px solid #aaa;
position: fixed;
width: 300px;
height: 400px;
left: 40%;
top: 40%;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 4px solid #aaa;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
bottom: 5px;
}
#confirm .message {
padding: 5px;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>JS Alert Box</title>
</head>
<body>
<h2>
Table 1
</h2>
<h3>
Alert()
</h3>
<table border="1">
<tr>
<td>Manufacturer</td>
<td>Product</td>
<td>Price range 1</td>
<td>Price range 2</td>
<td>Price range 3</td>
</tr>
<tr>
<td>Umbrella Company</td>
<td>Vaccine</td>
<td><div onclick="functionAlert('1399')">1399</div></td>
<td><div onclick="functionAlert('4299')">4299</div></td>
<td><div onclick="functionAlert('5999')">5999</div></td>
</tr>
<tr>
<td>Umbrella Company</td>
<td>Vaccine 2</td>
<td><div onclick="functionAlert('1299')">1299</div></td>
<td><div onclick="functionAlert('4199')">4199</div></td>
<td><div onclick="functionAlert('5899')">5899</div></td>
</tr>
<tr>
<td>Microhard</td>
<td>PDA</td>
<td><div onclick="functionAlert('999')">999</div></td>
<td><div onclick="functionAlert('3599')">3599</div></td>
<td><div onclick="functionAlert('6299')">6299</div></td>
</tr>
</table>
<div id="confirm">
<div class="message">
</div>
<button class="yes">Close</button>
</div>
</body>
</html>
Don't write the HTML by hand. Generate it dynamically based on your data. You could use a library like React, or just use the DOM as I've demonstrated below.
This way, no matter how large your table is, you need only write the event handler logic once. There are additional ways you could simplify this code, but which you choose will depend on your experience and goals.
// All your data are belong to this array
const data = [
["Umbrella Company", "Vaccine", 1399, 4299, 5999],
["Soylent Corporation", "Soylent Green", 299, 399, 599],
["Omni Consumer Products", "ED-209", 19990, 39990, 78990],
["Tyrell Corporation", "Nexus-6", 27990, 31990, 59990],
];
const table = document.getElementById("products");
for (const row of data) {
const tr = document.createElement("tr");
const manTD = document.createElement("td");
manTD.innerText = row[0];
tr.appendChild(manTD);
const prodTD = document.createElement("td");
prodTD.innerText = row[1];
tr.appendChild(prodTD);
const range1TD = document.createElement("td");
range1TD.innerText = row[2];
range1TD.addEventListener("click", function() {
alert(row[2]);
});
tr.appendChild(range1TD);
const range2TD = document.createElement("td");
range2TD.innerText = row[3];
range2TD.addEventListener("click", function() {
alert(row[3]);
});
tr.appendChild(range2TD);
const range3TD = document.createElement("td");
range3TD.innerText = row[4];
range3TD.addEventListener("click", function() {
alert(row[4]);
});
tr.appendChild(range3TD);
table.appendChild(tr)
}
<table id="products">
<tr>
<th>Manufacturer</th>
<th>Product</th>
<th>Price range 1</th>
<th>Price range 1</th>
<th>Price range 1</th>
</tr>
</table>
Whenever possible try and keep your code DRY, below I've modified your code to do the following->
Used a delegated event handler on the table. This means you only need one event to handle all the TD's, and better still if a TD was added dynamically later it would work with the added lines.
Used an array to store the data, we can then use this to render the table lines.
Used the .dataset property to store the type of data stored in the TD, I'm only using this to prevent the dialog showing if you don't click a TD with numbers in, but I could have used a class, or even parsed the .innerText
const data = [
["Umbrella Company", "Vaccine", 1399, 4299, 5999],
["Umbrella Company", "Vaccine2", 1299, 4199, 5899],
["Microhard", "PDA", 999, 3599, 6299]
];
const table =
document.querySelector('table');
const confirmBox =
document.querySelector('#confirm');
const confirmBoxMsg =
confirmBox.querySelector('.message');
const confirmBoxYes =
confirmBox.querySelector('.yes');
function fillTable() {
for (const d of data) {
const tr = document.createElement('tr');
for (const v of d) {
const td = document.createElement('td');
td.dataset.type = typeof v;
td.innerText = v;
tr.appendChild(td);
}
table.appendChild(tr);
}
}
table.addEventListener('click', ev => {
const td = ev.target.closest('td');
if (!td) return; //did with click a TD?
if (td.dataset.type !== 'number') return;
confirmBoxMsg.innerText = td.innerText;
confirmBox.style.display = 'block';
});
confirmBoxYes.addEventListener('click', ev => {
confirmBox.style.display = 'none';
});
fillTable();
#confirm {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 1px solid #aaa;
position: fixed;
width: 300px;
height: 400px;
left: 40%;
top: 40%;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 4px solid #aaa;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
bottom: 5px;
}
#confirm .message {
padding: 5px;
text-align: left;
}
<html>
<head>
<title>JS Alert Box</title>
</head>
<body>
<h2>
Table 1
</h2>
<h3>
Alert()
</h3>
<table border="1">
<tr>
<td>Manufacturer</td>
<td>Product</td>
<td>Price range 1</td>
<td>Price range 2</td>
<td>Price range 3</td>
</tr>
</table>
<div id="confirm">
<div class="message">
</div>
<button class="yes">Close</button>
</div>
</body>
</html>

How to make a partially un-editable table cell compatible with inline JavaScript functions?

So, a few days ago, I posted this question (nearly identical) and received a very helpful response.
However, in order to make a table calculator, I already have a id set to every table row of a certain column to turn the table into a calculator, which kind of messes up the answer for the original question when I try to apply it for myself (the JavaScript parses the unit "kg" in with the number and displays a sum as "NaN").
As well, there is a visible text box displayed inside of every cell with the answer above, which looks kind of ugly. My current code has cells that don't appear as text boxes but are still editable, which makes for a much sleeker experience in my opinion (I know it makes no functional difference, but the appearance is something that bugs me a lot!)
Below is a mock-up of what I'd like the code to look like. I'm trying to make the numbers/input appear on the right side of the text box, but still on the left side of the unit ("kg").
Below is a mock-up of what I am trying to create (except the numbers would be on the right).
Here is the code I have:
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>entry1</td>
<td id="entry1" oninput="myFunction()">4000</td>
</tr>
<tr>
<td>entry2</td>
<td id="entry2" oninput="myFunction()">200</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("entry1").contentEditable = true;
document.getElementById("entry2").contentEditable = true;
function myFunction() {
var entry1 = document.getElementById("entry1").innerText;
var entry2 = document.getElementById("entry2").innerText;
var total2 = parseInt(entry1) + parseInt(entry2);
document.getElementById("total").innerHTML = total2;
}
myFunction();
</script>
</body>
As you can see, it adds up the numbers in the right column and displays a sum in the final row. However, I would like units to display here (e.g. "kg") on the side, that aren't editable and, more importantly, don't get parsed as a number in the JavaScript function. Would be great if the ugly textbox outline doesn't appear inside the cell, too.
Is this possible? Any answers appreciated!
You get NaN when you call parseInt on an empty string. To fix this, change following statement from
var total = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
to
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt (joe2) || 0);
and to display the unit alongside the number in the right column, add 2 span elements inside the td element and use flexbox to align them properly.
To make the number editable, add contentEditable attribute on the span element containing the number. span element containing the unit will be non-editable by default.
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);
document.getElementById("total").innerHTML = total;
}
myFunction();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
}
th,
td {
padding: 5px;
}
td:last-child {
display: flex;
justify-content: space-between;
border: none;
}
td:last-child span:first-child {
flex-grow: 1;
margin-right: 10px;
outline: none;
text-align: right;
}
#total {
display: flex;
justify-content: flex-end;
}
<table>
<thead>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td id="jack" oninput="myFunction()">
<span contentEditable="true">4</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="myFunction()">
<span contentEditable="true">2</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Joe</td>
<td id="joe" oninput="myFunction()">
<span contentEditable="true">3</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
To avoid the result being "NAN", an if is added and we check the one of the seals is empty '' and replace it with a 0.
In the edit cell two divs are added one to edit the value and the other to add the text "kg".
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
.input_{
width: 90%;
float: left;
}
.peso{
width: 10%;
float: right;
}
</style>
<table>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
<tr>
<td>Jack</td>
<td>
<div class="input_" id="jack" oninput="myFunction()">1</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>John</td>
<td>
<div class="input_" id="john" oninput="myFunction()">2</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Joe</td>
<td>
<div class="input_" id="joe" oninput="myFunction()">3</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
if(jack2==""){
jack2=0;
}
if(john2==""){
john2=0;
}
if(joe2==""){
joe2=0;
}
var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
document.getElementById("total").innerHTML = total2+" kg";
}
myFunction();
</script>

How to get the quantity of the product chosen by the user?

I am working on an e-commerce website. Now I am on single product description page and I have quantity and add to cart button. Initial quantity I set one.
I am able to increase and decreased the quantity on click on plus and minus button.
Now the issue is, I choose quantity four and I clicked on add to cart button and it redirects to checkout page where I am checking the output
checkout.php
Just for testing
if (isset($_POST['submit'])) {
echo $action=$conn->real_escape_string($_POST['action']);
echo $decrypted_p_id=$conn->real_escape_string($_POST['p_id']);
}
I got an output
addcart
1 //instated of one It should display four. right?
I know I will get one because I set the value="1" but is there any other option
to get the quantity whatever user choose?
Or do you have any other code to do this?
Thanks you!
/*increase the product qty*/
/*increase the product qty*/
$(".ddd").on("click", function () {
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = $input.val(),
newVal;
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$input.val(newVal);
var price = $('.total_amount').data('price');
$('.total_amount').html(price * newVal);
});
.sp-quantity {
width:150px;
float: left;
height:42px;
margin-right: 10px;
}
.sp-minus {
width:40px;
height:40px;
float:left;
text-align:center;
}
.sp-input {
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width: 41px;
height: 40px;
border: 1px solid #f44336;
float: left;
margin-left: -1px;
text-align: center;
}
.sp-input input {
width:40px;
height:39px;
text-align:center;
border: none;
}
.sp-input input:focus {
border:1px solid #f44336;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding: 2px;
font-size: 22px;
color: #fff;
background: #f44336;
}
.product-details .cart button {
width: 100%;
background-color: #f44336;
border: 0;
padding: 10px 0;
vertical-align: bottom;
color: #fff;
max-width: 150px;
}
<main class="product-details">
<section class="pro-detail-sec">
<!-- counter and cart div -->
<div class="counter-cart clearfix">
<div class="sp-quantity">
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="1" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
<!-- add to car -->
<div class="cart">
<form action="test15.php" method="POST">
<button type="submit" name="submit">Add to cart</button>
<input type="hidden" name="action" value="addcart"/>
<input type="hidden" name="p_id" value="1"/>
</form>
</div>
</div>
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
You should place the
<input type="text" class="quntity-input" value="1" />
element inside your form in order to submit the selected quantity when clicking the "Add to cart" button. An alternative would be setting the value of the "p_id" input element to the desired quantity in your javscript code when incrementing or decrementing the value.
Seems like you're not updating p_id value when increasing/decreasing it.
var qty = $("#p_id");
$(".ddd").on("click", function() {
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = $input.val(),
newVal;
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$input.val(newVal);
var price = $('.total_amount').data('price');
$('.total_amount').html(price * newVal);
qty.val(newVal);
});
Now, when you'll increase or decrease user quantity, it will update p_id input value, which is the one you are retrieving from PHP
Your JS is updating the value of the input with class .quntity-input, but you are looking at your hidden field with the name p_id.
You can't submit input that are not inside the form tag which is why .quntity-input is not being submitted. You need to also update the value of the input with name p_id if you want that to reflect the new value.

Dynamically added html do not get styled

I want to display a list of offers as styled radio buttons and I want them listed in a table with 3 offers in every row.
I style them in a css file like this:
input[type=radio].offer + label {
display:inline-block;
margin:-2px;
padding: 15px 12px;
margin-bottom: 0;
line-height: 20px;
width: 175px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
}
input[type=radio].offer:hover + label {
background-color: #f8ad51;
}
My asp page is like this:
sql1 = "SELECT * FROM company,prices WHERE companyId = company_id"
Set rs1 = Connect.Execute(sql1)
if NOT rs1.eof then
count = 1%>
<table border="0" cellpadding="2" cellspacing="10" width="600">
<tr>
<%
do until rs1.eof
price = a lot of calculations.......%>
<td><input type="radio" id="offer<%=count%>" name="offer" value="<%=rs1("companyId")%>" class="offer" onClick="this.form.submit1.disabled = !this.checked;">
<label for="offer<%=count%>"><%=rs1("navn")%><br><font size="1"><%=rs1("city")%></font><br><font size="4"><%=price%></font></label>
</td>
<%
if count MOD 3 = 0 then%>
</tr><tr>
<%end if
count = count + 1
rs1.MoveNext
loop%>
</tr>
</table>
<%end if%>
Everything is working fine and my list is looking ok, but now I want the list to be created in $(document).ready
So I now have this table:
<table id="tbl_result" border="0" cellpadding="0" cellspacing="0" width="380"></table>
I do a lot of javascript stuff and end up with this for every offer I find:
final_list+='<td>';
final_list+='<input type="radio" id="offer'+data.id+'" name="offer" value="'+data.id+' class="offer" onClick="this.form.submit1.disabled = !this.checked;">';
final_list+='<label for="offer'+data.id+'">'+data.cmp+'<br><font size="1">'+besked+'</font><br><font size="4">'+data.price+' kr.'+'</font></label>';
final_list+='</td>';
if ((finalList_count % 3) == 0) {
final_list+='</tr><tr>';
}
finalList_count = finalList_count + 1
And finally I add it to the page like this:
$("#tbl_result").html(final_list);
$("#tbl_result").show();
My problem is that my new offers dont get styled by my css file and I dont know how I can do that. Anybody that can help me out here?
You are missing a double quote " before you class attribute while creating final_list. So instead of value="'+data.id+' class="offer" you need to use value="'+data.id+'" class="offer" (note a " before class).
So the first line of final_list becomes:
final_list += '<input type="radio" id="offer' + data.id + '" name="offer" value="' + data.id + '" class="offer" onClick="this.form.submit1.disabled = !this.checked;">';
See this jsFiddle for a working example.

Sort rows being inserted into a table by a foreach from database

I have a table that is being fed its content from a database. The table has a with your standard table header row, and then I have a foreach() that grabs information from an include and spits it out into the table body. (inserting a new each entry.)
I need the table to be initially sorted by the date closed column, and not the symbol column. I am using the Tablesorter plugin, and I tried doing this:
$(document).ready(function() {
// call the tablesorter plugin
$("#bin").tablesorter({
// sort on the first column and third column, order asc
sortList: [[6,1],[0,0]]
});
});
This works, but the issue is I have a background that is being applied to every other row from the foreach, and when table sorter sorts the rows when the page loads, the background color is not every other, but in sporadic places from table sorter moving those rows.
Here's my code:
<table cellspacing="0" cellpadding="0" id="bin" width="100%">
<thead>
<tr>
<th style="text-align:left; padding-top: 20px;" width="10%">Symbol <img src="/images/sort-arrow.jpg" alt="Sort by Symbol" class="sort-right move-left bottom-image"/></th>
<th style="text-align:left;" width="20%">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow.jpg" alt="Sort by Company Name" class="sort-right move-left"/></th>
<th style="text-align:left; padding-top: 20px;" width="23%">Industry <img src="/images/sort-arrow.jpg" alt="Sort by Industry" class="sort-right move-left bottom-image"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Buy</span><br>Date <img src="/images/sort-arrow.jpg" alt="Sort by Buy Date"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Buy</span><br>Price <img src="/images/sort-arrow.jpg" alt="Sort by Buy Price"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Closed</span><br>Price <img src="/images/sort-arrow.jpg" alt="Sort by Closed Price"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Closed</span><br>Date <img src="/images/sort-arrow.jpg" alt="Sort by Closed Date"/></th>
<th style="text-align:center;" width="10%"><span class="center-text">Total</span><br>Return <img src="/images/sort-arrow.jpg" alt="Sort by Current Return"/></th>
</tr>
</thead>
<tbody>
<?php
foreach($buylist as $a) {
$bg = ($c % 2) ? ' class="even"' : '';
//$direction = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? 'up_green' : 'down_red';
//$tick = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';
//$tick2 = (is_numeric($a['cchange']) && $a['cchange'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';
//$tick3 = (is_numeric($a['final_return_pct']) && $a['final_return_pct'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';
$type = '';
$entry_price = (is_numeric($a['buyprice'])) ? '$'.$a['buyprice'] : '–';
$sold_price = (is_numeric($a['sold_price'])) ? '$'.$a['sold_price'] : '–';
$total_return= sprintf("%.02f", (($a['sold_price'] - $a['buyprice'])/$a['buyprice']) * 100);
?>
<tr<?=$bg;?>>
<td ><b><?=$a['symbol'];?></b><?=$type;?></td>
<td><?=$a['name'];?></td>
<td valign="top"><?=$a['industry'];?></td>
<td align="center"><?=$a['buydate'];?></td>
<td align="center"><?=$entry_price;?></td>
<td align="center"><?php echo $sold_price; ?></td>
<td align="center"><?=$a['sold_date'];?></td>
<td align="center"><?php echo $total_return; ?>%</td>
</tr>
<?php
$c++;
}
?>
</tbody>
</table>
CSS for the table:
table#bin, table#fallen, table#growth, table#turn { margin:10px 0; border:1px solid #ccc; }
th, td { padding:10px 7px; }
tr th { background:#ededed; color:#545454; font-weight:bold; cursor:pointer;}
#bin tr.even td { background:#e1eff1; }
#turn tr.even td { background:#f7f2d8; }
#fallen tr.even td { background:#f2dcbd; }
#growth tr.even td { background:#deefdc; }
td.title a { text-decoration:none; display:block; text-transform:uppercase; font-weight:bold;}
#bin td.title { background:#5198a0; }
#fallen td.title { background:#e6a850; }
#turn td.title { background:#ebd870; }
#growth td.title { background:#6ab065; }
#bin td.title a { color:#182c2e; font-size:13px;}
#fallen td.title a { color:#352713; font-size:13px;}
#turn td.title a { color:#37321a; font-size:13px; }
#growth td.title a { color:#233d21; font-size:13px;}
hr { border:2px dotted #ccc; border-bottom:none; }
#tooltip { position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:5px; }
#tooltip h3, #tooltip div, #tooltip p { margin:0; }
.right_para_inside {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding-bottom: 7px;
padding-top: 7px;
margin-bottom: 5px;
}
.right_para {
font-size: 16px;
color: #999;
}
.right_para .right_para_inside a:hover {
color: #000;
text-decoration: none;
}
So my question is, how can I have PHP automatically sort the table BY the close date?
Wanted to add another detail. The user can resort the table by clicking on the header column (thats what the table sorter plugin is used for.)
When I use the sortList function, it does sort the table by closed date as it is suppose to, but the coloring of the table (odd, even, odd) is than messed up entirely.
Instead of adding the row class via PHP, use CSS:
tr:nth-of-type(even) {
background-color:#ccc;
}
Using CSS instead of adding classes via PHP should fix your issue.
You may use widgets for tablesorter plugin to color your rows.
And there is already a default widget zebra, which applies the classes odd and even to rows.
$("#bin").tablesorter({
widgets: ['zebra']
});
More in plugin documentation.

Categories

Resources