So, I've set up a plugin that allows my client to be able to add metaboxes with a button and therefore add new content that is more dynamic, with additional titles/headings etc. This is how it's set up right now...
function Print_price_fileds($cnt, $p = null) {
if ($p === null){
$a = $b = $c = '';
}else{
$a = $p['n'];
$b = $p['d'];
$c = $p['p'];
}
return <<<HTML
<li>
<input type="text" name="additional_content[$cnt][d]" size="50" value="$b" placeholder="Title"/>
<textarea name="additional_content[$cnt][p]" class="wp-editor-area" style="height: 320px; width: 100%; margin-top: 37px;" autocomplete="off" placeholder="Content">$c</textarea>
<span class="remove submitdelete deletion">Remove</span>
</li>
HTML
;
}
function additional_content_boxes(){
global $post;
$data = get_post_meta($post->ID,"additional_content",true);
echo '<div>';
echo '<ul id="additional_content_items">';
$c = 0;
if (count($data) > 0){
foreach((array)$data as $p ){
if (isset($p['p']) || isset($p['d'])|| isset($p['n'])){
echo Print_price_fileds($c,$p);
$c = $c +1;
}
}
}
echo '</ul>';
?>
<span id="here"></span>
<span class="add button button-primary button-large"><?php echo __('Add Additional Content'); ?></span>
<script>
var $ =jQuery.noConflict();
$(document).ready(function() {
var count = <?php echo $c - 1; ?>; // substract 1 from $c
$(".add").click(function() {
count = count + 1;
$('#additional_content_items').append('<? echo implode('',explode("\n",Print_price_fileds('count'))); ?>'.replace(/count/g, count));
return false;
});
$(".remove").live('click', function() {
$(this).parent().remove();
});
});
</script>
<style>#additional_content_items {list-style: none; padding-bottom: 20px; border-bottom: 1px solid #ddd; margin-top: 30px; display: block;}</style>
<?php
echo '</div>';
}
This works just fine right now, but I'd like to be able to add the wp_editor to the additional metaboxes, thereby replacing the <textarea>. How can I make this happen?
Thanks guys.
J
So, I took Noman's advice and I'm using the Advanced Custom Fields plugin. Don't know why I hadn't heard of it before, because it's perfect. Thanks everyone!
https://wordpress.org/plugins/advanced-custom-fields/
Related
I m trying to replicate code found online for Infinite scroll using PHP and JQuery.
But unfortunately, there is a flaw in the code which makes it only to return 7 posts only and stops fetching other posts upon scrolling down leaving a loader gif at the bottom.
Generally, I wouldn't have asked this question, but the code seems
pretty nice (in laymans terms) which I presume will be very helpful
for rookies like me in the community.
Meanwhile will search other resources and try to answer it by myself.
My code Goes as :
Index.php
<div class="post-wall">
<div id="post-list">
<?php
require_once ('db.php');
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
$sqlQuery = "SELECT * FROM tbl_posts ORDER BY id DESC LIMIT 7";
$result = mysqli_query($conn, $sqlQuery);
?>
<input type="hidden" name="total_count" id="total_count"
value="<?php echo $total_count; ?>" />
<?php
while ($row = mysqli_fetch_assoc($result)) {
$content = substr($row['content'], 0, 100);
?>
<div class="post-item" id="<?php echo $row['id']; ?>">
<p class="post-title"><?php echo $row['title']; ?></p>
<p><?php echo $content; ?></p>
</div>
<?php
}
?>
</div>
<div class="ajax-loader text-center">
<img src="LoaderIcon.gif"> Loading more posts...
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
windowOnScroll();
});
function windowOnScroll() {
$(window).on("scroll", function(e){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
if($(".post-item").length < $("#total_count").val()) {
var lastId = $(".post-item:last").attr("id");
getMoreData(lastId);
}
}
});
}
function getMoreData(lastId) {
$(window).off("scroll");
$.ajax({
url: 'getMoreData.php?lastId=' + lastId,
type: "get",
beforeSend: function ()
{
$('.ajax-loader').show();
},
success: function (data) {
setTimeout(function() {
$('.ajax-loader').hide();
$("#post-list").append(data);
windowOnScroll();
}, 1000);
}
});
}
</script>
getMoreData.php
<?php
require_once('db.php');
$lastId = $_GET['lastId'];
$sqlQuery = "SELECT * FROM tbl_posts WHERE id < '" .$lastId . "' ORDER BY id DESC LIMIT 7";
$result = mysqli_query($conn, $sqlQuery);
while ($row = mysqli_fetch_assoc($result))
{
$content = substr($row['content'],0,100);
?>
<div class="post-item" id="<?php echo $row['id']; ?>">
<p class="post-title"> <?php echo $row['title']; ?></p>
<p><?php echo $content; ?></p>
</div>
<?php
}
?>
Any help is greatly appreciated.
I would set this up differently using classes and controllers etc, but as simple scripts, I might set it up something like:
Create a file called getData.php with this content:
<?php
require_once('db.php');
if (! function_exists('getData')) {
/**
* #param int $offset
* #param int $limit
* #return array|null
*/
function getData($offset, $limit, $conn) {
$offset = (int)$offset;
$limit = (int)$limit;
$sqlQuery = "SELECT * FROM tbl_posts ORDER BY id DESC LIMIT $limit OFFSET $offset";
$result = mysqli_query($conn, $sqlQuery);
$rows = [];
while ($row = mysqli_fetch_assoc($result)) {
$rows[]= $row;
}
return $rows;
}
}
Create another file called index.php with this content:
<?php
require_once ('getData.php');
$offset = (int)($_GET['offset'] ?? 0);
$dataOnly = (int)($_GET['dataOnly'] ?? 0);
$limit = 7;
$rows = getData($offset, $limit, $conn);
$offset+= $limit;
$data = [
'rows' => $rows,
'offset' => $offset,
];
$data = json_encode($data);
// if this is an ajax call, stop here and just spit out our json
if ($dataOnly) {
echo $data;
exit;
}
// otherwise, render the page
$sqlQuery = "SELECT * FROM tbl_posts";
$result = mysqli_query($conn, $sqlQuery);
$total_count = mysqli_num_rows($result);
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
font-family: Arial;
background: #e9ebee;
font-size: 0.9em;
}
.post-wall {
background: #FFF;
border: #e0dfdf 1px solid;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
width: 500px;
}
.post-item {
padding: 10px;
border: #f3f3f3 1px solid;
border-radius: 5px;
margin-bottom: 30px;
}
.post-title {
color: #4faae6;
}
.ajax-loader {
display: block;
text-align: center;
}
.ajax-loader img {
width: 50px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="post-wall">
<div id="post-list">
<input type="hidden" name="total_count" id="total_count" value="<?= $total_count ?>" />
<input type="hidden" name="offset" id="offset" value="<?= $offset ?>" />
</div>
<div class="ajax-loader text-center">
<img src="LoaderIcon.gif"> Loading more posts...
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// load the initial rows on page load
let initialData = <?= $data ?? '' ?>;
if (initialData) {
if (initialData.rows) {
addrows(initialData.rows);
$('.ajax-loader').hide();
}
}
windowOnScroll();
});
function windowOnScroll() {
$(window).on("scroll", function(e){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
console.log('test');
if($(".post-item").length < $("#total_count").val()) {
let offset = $('#offset').val();
getMoreData(offset)
}
}
});
}
function getMoreData(offset) {
$('.ajax-loader').show();
$(window).off("scroll");
let pageUrl = window.location.href.split('?')[0];
$.ajax({
url: pageUrl + '?dataOnly=1&offset=' + offset,
type: "get",
success: function (response) {
response = JSON.parse(response);
if (response.rows) {
addrows(response.rows);
if (response.offset) {
$('#offset').val(response.offset);
}
$('.ajax-loader').hide();
}
windowOnScroll();
}
});
}
function addrows(rows) {
let postList = $("#post-list");
$.each(rows, function (i, row) {
let rowHtml = '<div class="post-item" id="'+row.id+'"><p class="post-title">'+row.title+'</p><p>'+row.content+'</p></div>';
postList.append(rowHtml);
});
}
</script>
</body>
</html>
Now, I cant test this locally so there might be an error or two in there, but that should give you the general idea.
One thing im not 100% sure of is that if ($(window).scrollTop() == $(document).height() - $(window).height()){ condition.
XSS warning
You dont show how these "posts" get added to the database, presumably they come from user submissions on some other form. If that is the case, make sure that you understand what XSS vulnerabilities are and how to prevent them
I am creating a shopping cart using session which is working, Now I am making the quantity part I mean User can increase the product quantity and decrease the quantity and according to that the total amount will display on screen without refresh the page.
I just need when the user clicked on Plus sign then the amount will change as per quantity.
<?php echo $product['qty'];?> I am getting this value from my session
Any idea how can I do this?
I also added same code in https://jsfiddle.net/Narendra2015/uLx0912t/
/*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);
});
Second code after suggested Mr.A. Iglesias
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var $pro_list = $(this).closest('tr.pro-list');
var productPrice = parseInt($pro_list.find('span.price_cal').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));
if (newQuantity>= 0) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var currentChange = productPrice*parseInt($(this).data('multi'));
var total = parseInt($('div#total').text());
$('div#total').text(total + currentChange);
}
});
Css
.sp-quantity {
width:124px;
height:42px;
float: left;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
HTMl
<?php if(!empty($_SESSION['products'])):
foreach($_SESSION['products'] as $key=>$product):?>
<tbody>
<tr class="pro-list">
<td>
<div class="ordered-product cf">
<div class="pro-img">
<img src="admin/images/products/<?php echo $product['p_images'];?>" alt=" prodcut image">
</div>
<div class="pro-detail-name">
<h3><?php echo $product['p_name'];?></h3>
</div>
<?php
$p_delete=$product['p_id'];
//$decrypted_delete_id = decryptIt($p_delete);
$encrypted_user_id = encryptIt($p_delete);
$delete_product_id=urlencode($encrypted_user_id);
?>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
<td>£<span id="price_cal"><?php echo $product['p_currentprice'];?></span></td>
<td>
<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="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
</td>
<?php $single_total = $product['qty']*$product['p_currentprice'];?>
<td class='total_amount' data-price='£<?php echo $single_total;?>'>£<?php echo $single_total;?></td>
</tr>
<?php $total = $total+$single_total;
$_SESSION['total_cost']=$total;
endforeach;?>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Subtotal</span></td>
<td>£<?php $_SESSION['total_cost']=$total;echo $total;?></td>
<!-- <td><span>Shiping Cost</span></td>
<td><i class="fa fa-fighter-jet" aria-hidden="true"></i>£<?php echo $total;?></td> -->
</tr>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Total Cost</span></td>
<td>£<?php echo $total;?></td>
</tr>
</tbody>
<?php endif;?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
for total amount, I added this in the script.
// Refresh total div.
var subtotal_amount = subtotal_amount+lineTotal;
$pro_list.find('td.subtotal_amount').data('price','£'+subtotal_amount).html('£'+subtotal_amount);
HTML inside <tr class="pro-list">
<td class='subtotal_amount' data-price='£<?php echo $total;?>'>£<?php echo $total;?></td>
First you can put your product price and the total amount inside of div with a class or id, to make them easy to select, something like...
<?php $product=10;?>
<div class="sp-quantity">
<div class="product-price"><?=$product?></div>
<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="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
<?php
$single_total = $product['qty']*$product;
echo $total = $total + $single_total;
?>
<div id="total"><?=$total?></div>
Then, refresh its values anytime you change the quantity of a product...
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var productPrice = parseInt($productContainer.find('div.product-price').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));
if (newQuantity>= 0) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var currentChange = productPrice*parseInt($(this).data('multi'));
var total = parseInt($('div#total').text());
$('div#total').text(total + currentChange);
}
});
I hope it helps
I'm not sure to really understand, but the total amount corresponds to total price (depended on product's quantity), isn't it ?
If I'm right, I think the better way is to display the total amount in a 'div' tag (for example) containing an attribute 'data-total' with the product's price.
Then, in JS, you can access to attribute's data and update the total with the price and the quantity.
Something like that:
<div class='total_amount' data-price='<?php echo $product['price']?>' >
0
</div>
And then update your JS file as:
$(".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);
});
Hope it will help you :)
PS: Sorry for my English, I'm French :P
I've downloaded this tutorial http://megarush.net/5-star-rating-system-with-php-mysql-jquery-and-ajax/ but I'm getting these errors:
Notice: Undefined variable: rat in C:\xampp\htdocs\rating\rating.php on line 37
Notice: Undefined variable: v in C:\xampp\htdocs\rating\rating.php on line 41
<?php
include("settings.php");
connect();
$ids=array(1,2,3);
?>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="rating.css" />
<script type="text/javascript" src="rating.js"></script>
</head>
<body>
<?php
for($i=0;$i<count($ids);$i++)
{
$rating_tableName = 'ratings';
$id=$ids[$i];
$q="SELECT total_votes, total_value FROM $rating_tableName WHERE id=$id";
$r=mysql_query($q);
if(!$r) echo mysql_error();
while($row=mysql_fetch_array($r))
{
$v=$row['total_votes'];
$tv=$row['total_value'];
$rat=$tv/$v;
}
$j=$i+1;
$id=$ids[$i];
echo'<div class="product">
Rate Item '.$j.'
<div id="rating_'.$id.'" class="ratings">';
for($k=1;$k<6;$k++){
if($rat+0.5>$k)$class="star_".$k." ratings_stars ratings_vote";
else $class="star_".$k." ratings_stars ratings_blank";
echo '<div class="'.$class.'"></div>';
}
echo' <div class="total_votes"><p class="voted"> Rating: <strong>'.#number_format($rat).'</strong>/5 ('.$v. ' vote(s) cast)
</div>
</div></div>';}
?>
</body></html>
$rat and $v are being defined within the scope of your while loop.
If you declare them globally (outside the loop), the rest of your code will recognize them.
$rat = 0;
$v = 1;
while($row=mysql_fetch_array($r))
{
$v=$row['total_votes'];
$tv=$row['total_value'];
$rat=$tv/$v;
}
See here:
http://bgallz.org/988/javascript-php-star-rating-script/
This combines a Javascript code that generated the URL for the different ratings given as well as the change in display for the stars before and after a rating is given.
An overlay DIV is displayed after the rating is given so that no immediate ratings can be given by the same. It also stores the user's IP address with the rating submission to prevent multiple ratings from one user.
This is a simple and easy to use script with just Javascript and PHP for star rating.
The problem is because of scoping of those variables. When you are trying to echo those variables outside the while loop; PHP can not find the varables as they were created (and assigned) inside the loop. To solve this, just assign a blank value to both variables outside too:
if(!$r) echo mysql_error();
$rat = 0;
$v = 1; // In case there are no records.
while($row=mysql_fetch_array($r))
{
$v = $row['total_votes'];
$tv = $row['total_value'];
$rat = $tv/$v;
}
Add this at line at beginning to nide notice error in your code .
error_reporting(E_ALL ^ E_NOTICE);
Most of time notice error do not affect the program.
In case if your votes are not recording then delete your cookies and try to vote from different IP address .This script has a feature to not accept votes from same ip or vistitor to avoid multiple votes by same users on same product.
var cname=document.getElementById(id).className;
var ab=document.getElementById(id+"_hidden").value;
document.getElementById(cname+"rating").innerHTML=ab;
for(var i=ab;i>=1;i--)
{
document.getElementById(cname+i).src="star2.png";
}
var id=parseInt(ab)+1;
for(var j=id;j<=5;j++)
{
document.getElementById(cname+j).src="star1.png";
}
Code from http://talkerscode.com/webtricks/star-rating-system-using-php-and-javascript.php
<style>
.star {
font-size: x-large;
width: 50px;
display: inline-block;
color: gray;
}
.star:last-child {
margin-right: 0;
}
.star:before {
content:'\2605';
}
.star.on {
color: red;
}
.star.half:after {
content:'\2605';
color: red;
position: absolute;
margin-left: -20px;
width: 10px;
overflow: hidden;
}
</style>
<div class="stars">
<?php
$enable = 5.5; //enter how many stars to enable
$max_stars = 6; //enter maximum no.of stars
$star_rate = is_int($enable) ? 1 : 0;
for ($i = 1; $i <= $max_stars; $i++){ ?>
<?php if(round($enable) == $i && !$star_rate) { ?>
<span class="<?php echo 'star half'; ?>"></span>
<?php } elseif(round($enable) >= $i) { ?>
<span class="<?php echo 'star on'; ?>"></span>
<?php } else { ?>
<span class="<?php echo 'star'; ?>"></span>
<?php }
}?>
</div>
my site which is a search engine returns many many results with a foreach loop as such:
foreach ($xml->channel->item as $result) {
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60)
{
$title = substr($ltitle,0,60).'...' ;
}
else
{
$title = $ltitle;
}
if (strlen($ldesc) > 195)
{
$desc = substr($ldesc,0,195).'...' ;
}
else
{
$desc = $ldesc;
}
echo "
<br>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='$link'>$title</a><br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>$desc<br></font></div>
<a style='text-decoration:none;' href='$link'><font style='text-decoration:none;font-size:small;color:green;font-weight:bold;'>$url<br></font></a>
</div>
";
}
And the resultbox class above styles all of the results with this
.resultbox
{
height:auto;
width:600px;
background-color:transparent;
font-size:19px;
padding:10px;
padding-left: 30px;
padding-right: 30px;
border-left: 6px solid #333;
}
.resultbox:hover
{
border-left: 8px solid #555;
}
The border-left color is what i want changed, i would like it to generate or to style randomly off of a list of colour codes so the results, insead of being all #333 can be #333 #555 #999 and so on..... any ideas?
If u have no problems using JS , You can certainly do this :
$(document).ready(function () {
$('.resultbox').mouseenter(function() {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
$('.resultbox').css("border-left", " 8px solid #"+randomColor);
});
});
change <div class='resultbox'> to <div class='resultbox random-color-".rand(1,YOUR_COLOR_LIMIT)."'> AND define colors like
.random-color-1 {
border-left: 8px solid #555;
}
.random-color-2 {
border-left: 8px solid #555;
}
.....
.random-color-YOUR_COLOR_LIMIT {
border-left: 8px solid #555;
}
change
<div class='resultbox'>
to
<div class='resultbox' style='border-left-color:$yourColorInCssFormat;'>
the style attribute overrides the css from class.
set $yourColorInCssFormat to the color you wish to have for the div. for example: $yourColorInCssFormat = '#999';
You can use inline style for that. Or alternatively you can user nth-child selector of css to repeat the border-color scheme something like this:
.resultbox:nth-child(n+1):hover {
}
.resultbox:nth-child(2n+1):hover {
}
.resultbox:nth-child(3n+1):hover {
}
First off, try this out for your foreachloop:
<?php foreach ($xml->channel->item as $result): ?>
<?php
$ltitle = $result->title;
$ldesc = $result->description;
$url = $result->displayUrl;
$link = $result->link;
if (strlen($ltitle) > 60){
$title = substr($ltitle,0,60).'...' ;
}else{$title = $ltitle;}
if (strlen($ldesc) > 195){
$desc = substr($ldesc,0,195).'...' ;
}else{$desc = $ldesc;}
?>
<div class='resultbox'>
<a class='normal' style='text-decoration:none;font-size:huge;font-weight:bold' href='<?php echo $link ?>'><?php echo $title; ?></a>
<br>
<div style='padding-top:3px;padding-bottom:4px;width:580px;'>
<font style='text-decoration:none;font-size:small;font-family:Arial;'>
<?php echo $desc; ?><br>
</font>
</div>
<a style='text-decoration:none;' href='<?php echo $link; ?>'><font style='text- decoration:none;font-size:small;color:green;font-weight:bold;'><?php echo $url; ?><br></font> </a>
<?php endforeach; ?>
That way you're not playing with big echos.
Now for generating random colors your could use php rand();
For example:
//Generate a random number between the two parameters
$randomNumber = rand(1, 3);
//Use this number to dictate what the variable color should be
if($randomNumber == 1){$color = "#333"}
elseif($randomNumber == 2){$color = "#555"}
elseif($randomNumber == 3){$color = "#999"}
You can then use the variable $color in your code to randomly assign one of the colors to elements.
Hope this helps!
-Gui
JAVASCRIPT
function ShowContent(id) {
if(id.length < 1) { return; }
document.getElementById(id).style.display = "block";
}
PHP
$test = mysql_query('SELECT userid,testid,testname FROM test_table WHERE userid = 9 ORDER BY name');
TestName : <select>
while($row=mysql_fetch_array($test))
{
$testname = $row['testname'];
$testid = $row['testid'];
echo '<option value='.$testid.'>'.$testname.'</option>
}
</select>
echo '<div id="testid" style="display:none;">
echo '<table>
<tr><th>USERID</th</tr>
<tr><th>TESTNAME</th></tr>
<tr><th>MARKS</th></tr>
publishtest = mysql_query('SELECT id,userid,publishtest,marks FROM publish_table WHERE userid= 9 GROUP BY id');
while($row=mysql_fetch_array($publishtest))
{
$userid = $row['userid'];
$testid = $row['id']; /*This is test id*/
$testname = $row['publishtest']; /* This is test name*/
$marks = $row['marks'];
echo '<tr><td>'.$userid.'</td>
<td>'.testid.'</td>
<td>'.testname.'</td>
<td>'.$marks.'</td>
</tr>
}
echo '</table>';
echo '</div>';
I need when I select test from select tag, then div should be displayed of that testid. I want either in javascript, jquery
You can try this:
JavaScript
$('#showDivSelect').change(function (e) {
var divId = $(this).children('option:selected').val();
$('#' + divId).css('display', 'block');
});
HTML
<select id="showDivSelect">
<option id="o1">Div1</option>
<option id="o2">Div2</option>
</select>
<div id="Div1"></div>
<div id="Div2"></div>
CSS
#Div1 {
width: 30px;
height: 30px;
background-color: red;
display: none;
}
#Div2 {
width: 30px;
height: 30px;
background-color: blue;
display: none;
}
Here is working example: http://jsfiddle.net/ePSDu/