I want to implement this feature, the card element will turn grey color when the product_stock == 0. I tried to implement this feature using javascript but it does not work. I do not know what is wrong with my codes. Can anyone of you help me with this issue? It would be appreciated if you guys can show me examples of codes on how to solve this issue. Any help will be appreciated. Thanks!
This is my PHP codes
<?php
$sql = "SELECT * FROM (( SELECT * FROM products) as YW1
LEFT JOIN
(SELECT product_id, SUM(quantity) totalquantity FROM ordered_items GROUP BY product_id) AS YW2 ON YW1.id = YW2.product_id) ORDER BY totalquantity DESC ";
$query = $conn->query($sql);
if (!mysqli_num_rows($query)) {
echo '
<div class="col-12">
<div class="badge badge-danger">No Products Found</div>
</div>
';
} else {
while ($row = $query->fetch_assoc()) {
$product_stock = $row['product_stock'];
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
<div class="product-wrapper" id="productlist">
<img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
<div class="card-body" >
<h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
<p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
<p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
<p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
View More
</div>
</div>
</div>
<?php
}
}
?>
This is the javascript that i used to make the card into grey colour when the product_stock = 0
UPDATED JAVASCRIPT CODE
<script>
getfocus();
function getfocus() {
document.getElementById("productlist").focus();
var product_stock = "<?php echo $product_stock; ?>";
if(product_stock == 0) {
$(product_stock).focus();
$(product_stock).css({'border' : '1px solid red'});
$(product_stock).css("background-color", "#d0d0d0");
}
}
</script>
it's because the product_stock variable is undefined when you call it on the script.
instead of using javascript code, just add the style directly to the PHP code.
while ($row = $query->fetch_assoc()) {
$product_stock = $row['product_stock'];
?>
<div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;" >
<div class="product-wrapper" id="productlist" style='<?php echo $product_stock == 0 ? "background-color:#d0d0d0; border:1px solid red;" : ""; ?>'>
<img class="product-img" loading="lazy" src="images/product-main/<?php echo $row['product_photo']; ?>" alt="">
<div class="card-body" >
<h5 class="product-title" style="min-height: 39px; text-decoration: none; width:150px; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-align: left !important;"><?php echo $row['product_title']; ?></h5>
<p class="product-price">RM<?php echo $row['product_price']; ?>/KG</p>
<p style="font-size: 10px; margin-top:-10px; margin-bottom:-2px;" ><span class="text-danger" > <?php echo $sum = $row['totalquantity'] ?? 0;?> SOLD </span></p>
<p style="font-size: 10px;" ><span class="text-success"><?php echo $row['product_stock']; ?> IN STOCK </span></p>
View More
</div>
</div>
</div>
<?php
}
Related
I use a button to fill a div with data that i get from an another php file.
I use the div display with "col-md-12".
When I call my php file, to fill the div, if there is no reservation, it will correctly displayed using the " 12 " wide.
When there is a reservation, I use 4 div of " 3 " each, but they dont display themself side by side to fill the " 12 " length. ( Sorry if it's not thath clear ^^').
Here my html code :
<div class="send-message">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-heading">
<h2 style="text-align: center;">Réservations</h2>
</div>
</div>
<div class="col-sm-2"style="text-align: center;"></div>
<div class="col-sm-8"style="text-align: center;">
<ul class="nav nav-pills nav-fill " style="text-align: center;">
<li class="nav-item active black">
<button id="btnResPas">Réservations passées</button></li>
<li class="nav-item "><button id="btnResAct">Réservations actives</button></li>
</ul>
</div>
<div class="col-sm-2"style="text-align: center;"></div>
<div class="col-md-12" id="divResPas">
</div>
</div>
</div>
The javascript :
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#btnResPas").on("click",function(){
$("#divResPas").load("resPas.php?refClient=<?php echo $refClient?>");
});
});
</script>
And the php file :
<?php
include("connection.php");
$refClient = $_GET['refClient'];
$reservationClient = "SELECT * from tblreservation where idClient ='".$refClient."'";
$result = mysqli_query($con,$reservationClient);
if (mysqli_num_rows($result) == 0)
{
echo '<div class="col-sm-12" style="text-align:center;"> Pas de réservation </div>';
}
else
{
while ($row = mysqli_fetch_array($result))
{
$id = $row['idTblReservation'];
echo '<div class="col-sm-3" style="text-align:center;"><b><u>Date de réservation : </b></u></br>';
echo $row["dateReservation"];
echo '</div>';
echo '<div class="col-sm-3" style="text-align:center;"><b><u>Heure : </b></u></br>';
echo $row["heure"];
echo '</div>';
echo '<div class="col-sm-3" style="text-align:center;"><b><u>Nombre de personnes : </b></u></br>';
echo $row["nombreClient"];
echo '</div>';
echo '<div class="col-sm-3" style="text-align:center;"><a href=';
echo 'modifierResClient.php?id=';
echo $id;
echo '></br>Modifier</a></div>';
echo '<div class="col-sm-12" style="text-align:center; margin-top : 20px;"></div>';
}
}
?>
Here is what it look like :
When I change the class to row :
Thanks guys !
try to change
<div class="col-md-12" id="divResPas"></div>
to
<div class="row" id="divResPas"></div>
I have below code for fetching data using Jquery/ajax from mysql database.
I have load more button in it which is working without any issue.
But i want to add Show less button also how can i add?
( Suppose displaying 12 records on each Load more click. When i click on Load more it will be 24 and it should show Show Less button also.
When a user will click on Show Less remained will be 12 and Show Less button should be hidden. and if user clicked show More button several time and show less button will work accordingly it will be hidden only when only left records are equal to 12.)
Can somebody help to add Show Less button within my code or a better code.
PHP
<div id="alldata">
<?php
$serial = 1;
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE status = 1 limit 12");
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
$filename = $get_info['filename'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $filename; ?>">
</a>
<!--<span class="product-new">NEW</span>-->
</div>
<div class="product-description">
<!--<div class="product-category">Man - <?php echo $art_id; ?></div>-->
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
<!-- end: Sidebar-->
</div>
</div>
</div>
<?php $serial++; } ?>
</div>
<div id="load<?php echo $eid; ?>">
<a class="load btn btn-block" id="<?php echo $eid; ?>" >Load more</a>
</div>
get_moredata.php
<div id="alldata">
<?php
include ("includeme/db.php");
if(isset($_POST['lastid'])) {
$lastid = mysql_real_escape_string($_POST['lastid']);
$serial = 1;
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id > '".$lastid."' limit 12");
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
$filename = $get_info['filename'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $filename; ?>">
</a>
</div>
<div class="product-description">
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
</div>
</div>
</div>
<?php $serial++; } ?>
<?php } ?>
<div id="load<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="load btn btn-block" id="<?php echo $eid; ?>" >Load More</a>
</div>
</div>
JQuery / Ajax
$(document).ready(function(){
$(document).on("click",".load",function(){
//var ids= $('.moreData:last').attr("id");
var ids= $(this).attr("id");
//$(".load").html('<img src="ajax-loader.gif"/>');
$.ajax({
type: 'POST',
url: 'get_moredata.php',
cache:false,
data: {'lastid':ids},
success: function(response){
//appending the result get_moredata page result with div id alldata
$('#alldata').append(response);
//remove old load more button
$('#load'+ids).remove();
if(!response) {
$('.moreData').text('No more record to load');
}
}
});
});
});
Well solved it as below:
What i did is i have made two scripts One for Load More Records and one for Load Less Records, but the get_moredata.php is the same.
And in get_moredata.php i have made 2 queries as follows:
if(isset($_POST['lastids'])) { //this id is for View Less
$lastid_less = mysql_real_escape_string($_POST['lastids']); //this id is for View Less
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '".$lastid_less."'-12");
}else if(isset($_POST['lastid'])) { //this id is for View More
$lastid_more = mysql_real_escape_string($_POST['lastid']); //this id is for View More
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id > '".$lastid_more."' limit 12");
}
So it run the scripts as of the button clicked.
PHP
<div id="alldata">
<?php
$serial = 1;
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE status = 1 limit 12");
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
$filename = $get_info['filename'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $filename; ?>">
</a>
<!--<span class="product-new">NEW</span>-->
</div>
<div class="product-description">
<!--<div class="product-category">Man - <?php echo $art_id; ?></div>-->
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
<!-- end: Sidebar-->
</div>
</div>
</div>
<?php $serial++; } ?>
</div>
<div id="load<?php echo $eid; ?>">
<a class="load btn btn-block" id="<?php echo $eid; ?>" >Load more</a>
</div>
get_moredata.php
<div class="alldata">
<?php
include ("inc/db.php");
include ("inc/functions.php");
if(isset($_POST['lastids'])) {
$lastid_less = mysql_real_escape_string($_POST['lastids']); //this id is for View Less
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '".$lastid_less."'-12");
}else if(isset($_POST['lastid'])) {
$lastid_more = mysql_real_escape_string($_POST['lastid']); //this id is for View More
$query = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id > '".$lastid_more."' limit 12");
}
while ($get_info = mysqli_fetch_array($query)) {
$eid = $get_info['id'];
$ename = $get_info['ename'];
$enames = $get_info['enames'];
$aname = $get_info['aname'];
//remove brackets or whatever from name of current product
$aReplace = array('(', ')', '.');
$ename_replaces = str_replace($aReplace , '', $ename);
//////////////////////////////////////////////////////////
$url_ename6 = url_making($ename_replaces);
?>
<div class="moreData" id="<?php echo $eid;?>">
<div class="sidebar">
<div class="widget widget-shop">
<div class="product">
<div class="product-image" style="width: 112px;">
<a href="author/<?php echo $url_ename6; ?>">
<?php
$exts4 = array('png','jpg','jpeg','gif');
foreach (array_unique($exts4) as $ext4) {
if (file_exists("images/titles/".$get_info['id'].".".$ext4)) {
$path4 = "images/titles/".$get_info['id'].".".$ext4;
?>
<img style="box-shadow: 3px 3px 3px #ccc; border-radius: 3%;" alt="" src="<?php echo $path4; ?>">
<?php }} ?>
</a>
</div>
<div class="product-description">
<div class="product-titlex">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="font-weight: bold; text-shadow: 3px 3px 3px #ccc;">
<?php echo $ename; ?>
</a>
<div style="width: 200%;">
<a href="bookDetails/<?php echo $url_ename6; ?>" style="color: gray;" style="">
<?php echo $enames; ?>
</a>
</div>
<hr style="min-width: 500%;">
<div>
<a href="bookDetails/<?php echo $url_ename6; ?>" class="ur1" style="font-weight: bold; float: right;">
<?php echo $aname; ?></a>
</div>
</div>
</div><hr style="border: 1px solid black; min-width: 300%;">
</div>
<!-- end: Sidebar-->
</div>
</div>
</div>
<?php } ?>
<?php
if (isset($lastid_less)) {
//count if clicked on lastid_less
$queryCount = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '$lastid_less'");
echo $get_Count = mysqli_num_rows($queryCount)-12;
}else{
//count if clicked on lastid_more
$queryCount = mysqli_query($dba, "SELECT * FROM mybooklibrary WHERE id <= '$lastid_more'");
echo $get_Count = mysqli_num_rows($queryCount)+12;
}
if ($get_Count <= 12) {
?>
<!-- show this button only if books are shown are less than equal to 12 -->
<!-- because my default is 12 -->
<div id="load<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="load btn btn-block" id="<?php echo $eid; ?>" >View More</a>
</div>
<?php }else{ ?>
<!-- show both buttons if books are shown greater than 12 -->
<div id="load<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="load btn btn-block" id="<?php echo $eid; ?>" >View More</a>
</div>
<div id="loads<?php echo $eid; ?>" class="sidebar">
<hr>
<a class="loads btn btn-block" id="<?php echo $eid; ?>" >View Less</a>
</div>
<?php } ?>
</div>
JQuery / Ajax for Load More Records
<script>
//this query is for Load More Records
$(document).ready(function(){
$(document).on("click",".load",function(){
var ids= $(this).attr("id");
$.ajax({
type: 'POST',
url: 'get_moredata.php',
cache:false,
data: {'lastid':ids},
success: function(response){
//appending the result get_moredata page result with div id alldata
$('#alldata').append(response);
//remove old load more button
$('#load'+ids).remove();
if(!response) {
$('.moreData').text('No more record to load');
}
}
});
});
});
</script>
JQuery / Ajax for Load Less Records
<script>
//this query is for Load Less Records
$(document).ready(function(){
$(document).on("click",".loads",function(){
var ids= $(this).attr("id");
$.ajax({
type: 'POST',
url: 'get_moredata.php',
cache:false,
data: {'lastids':ids},
success: function(response){
//appending the result get_moredata page result with div id alldata
$('#alldata').append(response);
//remove old load more button
$('#loads'+ids).remove();
if(!response) {
$('.moreData').text('No more record to load');
}
}
});
});
});
</script>
I'm using advanced custom fields to repeat divs. There is a unique ID injected into the wrapper div for a click function that reveals content (i can't use a class because it triggers all the divs at once).
How do I target this ID in my javascript function dynamically? Here is my code;
<?php if( have_rows('team') ): $i = 0; ?>
<?php while( have_rows('team') ): the_row(); $i++;
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" id="wrap-<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
And my function;
<script>
(function($) {
$('#wrap-1').on('click',function(){
$('#show-1').slideToggle('slow');
});
$('#show-1 .close').on('click',function(){
$('#show-1').slideToggle('slow');
});
})( jQuery );
</script>
Edit: the id is dynamically injected here;
id="wrap-<?php echo $i; ?>"
I would add the ID to each element in a data attribute, and use this and that ID to toggle appropriately. To summarize the JS, when you click on the button, you get the stored data attribute, which can be used to find the appropriate target for toggling.
To the HTML, I add the data ID to the #show divs, and removed the id completely from the button. It's not needed.
HTML changes:
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
and
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">`
Javascript
(function($) {
$('.teamInfo').on('click', function() {
var id = $(this).data('toggle-id');
$('#show-' + id).slideToggle();
});
$('.card-reveal .close').on('click',function() {
var id = $(this).closest('.card-reveal').data('toggle-id');
$('#show-' + id).slideToggle('slow');
});
})( jQuery );
And the entire HTML as you posted it:
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
I'd look at using this. You can still use a class for an event selector, and in the handler, have context to know which was selected.
<script>
(function($) {
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
})( jQuery );
</script>
^ i'm not clear if you were adding the .close class for a visual cue or if you wanted to use that to trach shown state. Might just need the one handler to act as a toggle. Or an if statement in the toggle if other things need to happen on the transition.
<?php
require_once("core/config.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=ISO-8859-1">
<meta name="author" content="Slent">
<meta name="msvalidate.01" content="1A6F186BE63EEA129AB7C25BB82391D1">
<title><?php echo $nombre; ?> - Tus pixeles en buenas manos</title>
<link href="<?php echo $url; ?>media/css/origem.css" rel="stylesheet" type="text/css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo $url; ?>media/scripts/general.js"></script>
</head>
<body>
<div id="bar_blue"></div>
<div id="banner_itens">
<div id="alinha">
<div id="space_public">
</div>
<!-- <div id="login">
<form id="form_login" action="<?php echo $url; ?>index.php#" method="post">
<div id="espaco_inputs">
<input id="user_login" type="text" placeholder="Usuario" onclick="if(this.value=='Usuario') this.value=''" onblur="if(this.value=='') this.value='Usuario'">
<input id="pass_login" type="password" placeholder="Usuário">
<div class="forget">¿Olvidó su contraseña?</div>
</div>
<div id="opcoes">
<input id="logar_s" value=" " type="submit">
<div id="cadastro"></div>
</div>
</form>
</div> -->
</div>
</div>
<div id="bar_fine">
<div style="width:1000px; margin:0pt auto;">
<div id="text"><span class="last_tweet"><!-- Carregando último tweet... --></span>
<div class="back_form">
<div id="twitter_div">
<div id="twitter_update_list">
</div>
</div>
</div></div>
</div>
</div>
<div id="menu">
<div style="width:1000px; margin:0pt auto;">
<div id="seta_right" style="cursor: pointer;"></div>
<div id="text">
<div style="width:99999px; height:auto;" id="menu_cell">
<div class="item"> Inicio </div>
<div class="item"><a rel="c_tropihabbo" href="<?php echo $url; ?>index.php#"> <?php echo $nombre; ?> </a></div>
<div class="item"> Catálogo </div>
<div class="item"><a rel="c_pixelart" href="<?php echo $url; ?>equipe"> Equipe</a></div>
<div class="item"><a rel="c_habbohotel" href="<?php echo $url; ?>habbo">Habbo</a></div>
</div>
<div id="m_tropihabbo" class="submenu_item" style="margin-top:40px; margin-left:30px;">
<li>Equipo</li>
<li>Historia</li>
</div>
<div id="m_habbohotel" class="submenu_item" style="margin-top:40px; margin-left:270px;">
<li>Habbo Hotel</li>
</div>
<div id="m_fancenter" class="submenu_item" style="margin-top:40px; margin-left:58px;">
<li>Habbo Imager</li>
<li>Generador de Memes</li>
<li>Generador de Besos</li>
</div>
<div id="m_ajuda" class="submenu_item" style="margin-top:40px; margin-left:128px;">
<li><script language="JavaScript"> function abrir(URL) { var width = 623; var height = 513; var left = 99; var top = 99; window.open(URL,'janela', 'width='+width+', height='+height+', top='+top+', left='+left+', scrollbars=no, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no'); } </script>Contato</li>
</div>
<div id="m_opcoes" class="submenu_item" style="margin-top:40px; margin-left:200px;">
<li>Regístrate!</li>
</div>
<div id="m_pixelart" class="submenu_item" style="margin-top:40px; margin-left:-35px;">
<li>Oficina de pixel arts</li>
</div>
</div>
<div id="seta_left" style="opacity: 0.5; cursor: pointer;"></div>
</div>
</div>
<div id="bar_gray">
<div style="width:1000px; margin:0pt auto; height:121px;">
<div id="content">
<?php $lol = mysql_query("SELECT * FROM noticias LIMIT 3"); while($data = mysql_fetch_assoc($lol)){?><div id="evento">
<div id="imagem" style="background: url(<?php echo $data['imagen']; ?>) center;"></div>
<div id="titulo"><?php echo utf8_decode($data['nombre']); ?></div>
</div><?php } ?>
</div>
</div>
</div>
<div id="content_init">
<?php if($page == 'catalogo' || $page == 'panel'){?>
<style>
#item_cat {
width:222px;
height:26px;
float:left;
margin-top:1px;
background: url(<?php echo $url; ?>media/imagens/item_valores_cat.png);
}
#item_cat .titulo {
width:190px;
height:12px;
margin-top:6px;
float:left;
margin-left:3px;
font-family:Verdana;
font-size:11px;
font-weight:bold;
color:#666;
text-shadow:1px 1px #ECECEC;
text-align:left;
}
#item_cat .titulo a {
color:#666;
}
#espaco_todo {
width:681px;
height:auto;
overflow:hidden;
margin:0px auto;
}
#item_cotacao {
width:224px;
height:43px;
background: url(<?php echo $url; ?>media/imagens/item_valores.png);
float:left;
margin-right:3px; margin-top:3px;
}
#item_cotacao .imagem {
width:34px;
height:40px;
float:left;
margin-left:3px;
background-position: center;
background-repeat: no-repeat;
}
#item_cotacao .dados {
width:160px;
height:40px;
float:left;
margin-left:2px;
overflow:hidden;
}
#item_cotacao .dados .titulo {
width:160px;
height:14px;
float:left;
margin-top:3px;
font-family:Verdana;
font-size:10px;
font-weight:bold;
color:#004A5E;
text-shadow:1px 1px #FFF;
}
#item_cotacao .dados .descricao {
width:160px;
height:14px;
float:left;
font-family:Verdana;
font-size:10px;
font-weight:bold;
color:#999999;
text-shadow:1px 1px #FFF;
}
#item_cotacao .icon_up {
width:11px;
height:14px;
float:left;
margin-left:4px;
margin-top:12px;
background-repeat: no-repeat;
background: url(<?php echo $url; ?>media/imagens/icons_cotacao.png);
}
#item_cotacao .icon_down {
width:11px;
height:14px;
float:left;
margin-left:4px;
margin-top:12px;
background-repeat: no-repeat;
background: url(<?php echo $url; ?>media/imagens/icons_cotacao.png) +22px;
}
#item_cotacao .icon_stop {
width:9px;
height:10px;
float:left;
margin-left:4px;
margin-top:15px;
background-repeat: no-repeat;
background: url(<?php echo $url; ?>media/imagens/icons_cotacao.png) +10px;
}
</style>
<?php } ?>
<div id="left">
<?php if($page == 'normal' || $page == 'reglas' || $page == 'noticias'){?>
<div id="player_left">
<!-- //Cms sin nombre xD. Por MoNiKoS. !-->
<div id="items_avatar">
<div class="avatar" style="background-image: url(https://www.habbo.com.br/habbo-imaging/avatarimage?img_format=gif&user=<?php echo $radio_locutor; ?>&action=std&direction=2&head_direction=3&gesture=sml&size=s); background-position: 0px 0px; background-repeat: initial initial;"></div>
<div id="items">
<div class="locutor">
<div class="texto"><?php echo $radio_locutor; ?></div>
</div>
<div class="programa">
<div class="texto"><?php echo $radio_programa; ?></div>
</div>
</div>
<div id="outros">
<div id="botoes">
<?php if(!isset($_SESSION['radio'])){$_SESSION['radio'] = 'play';} if($_SESSION['radio'] == 'play'){ echo '<iframe src="http://tropihabbo.es/player.php" width="0" height="0" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="margin: 0; padding: 0;" allowtransparency="true"></iframe><br />'; } ?>
<div class="play"></div>
<div class="pause"></div>
</div>
</div>
</div>
</div>
<div id="box">
<div id="content">
<div id="top">Catálogo</div>
<?php
$lolol = mysql_query("SELECT * FROM items_catalogo ORDER BY RAND() LIMIT 3");
while($data = mysql_fetch_assoc($lolol)){?>
<div id="item_valores_left">
<div class="imagem" style="background: url(<?php echo $data['imagen']; ?>) center no-repeat;"></div>
<div class="dados">
<div class="titulo"><?php echo utf8_decode($data['nombre']); ?></div>
<div class="descricao"><?php echo $data['precio']; ?></div>
</div>
<?php if($data['actual'] == '0'){?>
<div class="icon_down"></div>
<?php } elseif($data['actual'] == '1'){?>
<div class="icon_stop"></div>
<?php } elseif($data['actual'] == '2'){?>
<div class="icon_up"></div>
<?php } ?>
</div><?php } ?>
</div>
</div>
<div id="box">
<div id="content">
<div id="top">Habbo destacado</div>
<?php $lol2 = mysql_fetch_assoc(mysql_query("SELECT * FROM habbo_destacado LIMIT 1"));?>
<div id="users_highlights">
<div class="avatar" style="background: url(https://www.habbo.com.br/habbo-imaging/avatarimage?img_format=gif&user=<?php echo $lol2['nombre']; ?>&action=crr=2&direction=2&head_direction=3&gesture=sml) -10px;"></div>
<div class="dados">
<div class="habbo"><?php echo $lol2['nombre']; ?></div>
<div class="descricao"><?php echo utf8_decode($lol2['cuerpo']); ?></div>
</div>
</div>
</div>
</div>
<div id="box">
<div id="content">
<div id="top">Publicidad</div></div></div><?php }elseif($page == 'catalogo'){ ?>
<div id="box">
<div id="content">
<div id="top">Categorías</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/c9bf51af242c7599d6fcedc6f2d95faa.png) center no-repeat;"></div>
<div class="titulo">Ecotron</div>
</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/4e81c31d0917d11c3f92efc91fbff3c7.png) center no-repeat;"></div>
<div class="titulo">Furni Matic</div>
</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/1c20dc66af8c60981d8875c603621d7b.png) center no-repeat;"></div>
<div class="titulo">Galería</div>
</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/3db82150e984d679e97b967ff3464a17.png) center no-repeat;"></div>
<div class="titulo">Habbo Cambio</div>
</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/531dd47769045b3264baea26f9383116.png) center no-repeat;"></div>
<div class="titulo">Mega raros</div>
</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/50d87cd92bd4403f22fb76ec7b2e2ddf.png) center no-repeat;"></div>
<div class="titulo">Raros</div>
</div>
<!-- //Cms sin nombre xD. Por MoNiKoS. !-->
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/b8bb1bccbd823e85b7e50249c0b3609e.png) center no-repeat;"></div>
<div class="titulo">Raros del HC</div>
</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/4782311b2736911fa77adfeddc6020ac.png) center no-repeat;"></div>
<div class="titulo">Raros edición limitada</div>
</div>
<div id="item_cat">
<div style="width:26px; height:26px; float:left; background: url(<?php echo $url; ?>media/upload/valores/76f2cc0821e9260d21b93391c6645468.png) center no-repeat;"></div>
<div class="titulo">Regalos del HC</div>
</div>
</div>
</div>
<?php }elseif($page == 'panel'){ ?>
<div id="box">
<div id="content">
<div id="top">Categorías</div>
<div id="item_cat">
<div class="titulo">Administrar noticias</div>
</div>
<div id="item_cat">
<div class="titulo">Crear noticias</div>
</div>
<div id="item_cat">
<div class="titulo">Administradores</div>
</div>
<div id="item_cat">
<div class="titulo">Administrar catálogo</div>
</div>
<!-- //Cms sin nombre xD. Por MoNiKoS. !-->
<div id="item_cat">
<div class="titulo">Editar Habbo Destacado</div>
</div>
<div id="item_cat">
<div class="titulo">Desconectarse</div>
</div>
</div>
</div>
<?php } ?>
</div>
<?php if($page == 'normal'){?>
<div id="center">
<!-- <div id="fred_inicial"></div> !-->
<?php } else {?>
<div id="center">
<?php } ?>
Hello, I have a problem with my site, it does not load layout and I don't know how to solve this error :
Failed to load resource: net :: ERR_NAME_NOT_RESOLVED
I'll be leaving my site link for you to see how you are and the code
Link:http://www.habbomania.esy.es/menu.php
The error that you are getting in console/network tab is two files not being able to load, due to an incorrect URL. The URL It's trying to goto is
http://xn--link%20do%20seu%20f%20site-6gc/media/css/origem.css
Failed to load resource: net::ERR_NAME_NOT_RESOLVED
And
http://xn--link%20do%20seu%20f%20site-6gc/media/scripts/general.js
Failed to load resource: net::ERR_NAME_NOT_RESOLVED
These are being called from
<link href="<?php echo $url; ?>media/css/origem.css" rel="stylesheet" type="text/css">
And likewise with the JS file,
<script type="text/javascript" src="<?php echo $url; ?>media/scripts/general.js"></script>
Correct the $url variable to point to the correct address for these files and then you will no longer get the error.
So as you can read in my title, I am trying to Clear my Textarea after I submitted my Chat Message to my DB. I tried it several ways, like setting the value to null (""), which just lead to another problem, the Textarea gets cleared before PHP can insert the Value of the Textarea into the DB.
Here's my code:
<?php
include_once("../workspace/dbFunction.php");
//make an array for anime
$last_added = mysqli_query($mysqli,'SELECT * FROM anime ORDER BY `anime`.`created_at` DESC LIMIT 8');
$last_add = array();
while($row = mysqli_fetch_assoc($last_added)){
$last_add[] = $row;
}
//make array for anime
$data_arr = mysqli_query($mysqli,'SELECT * FROM anime');
$latestAnime = array();
while($row = mysqli_fetch_assoc($data_arr)){
$latestAnime[] = $row;
}
// Make lates episodes arr
$lat_ep = mysqli_query($mysqli,'SELECT * FROM episodes ORDER BY `created_at` DESC');
$latestEpisode = array();
while($row = mysqli_fetch_assoc($lat_ep)){
$latestEpisode[] = $row;
}
$random = $mysqli->query('SELECT * FROM anime ORDER BY RAND() LIMIT 1');
$count = 1;
?>
<?php include_once "../includes/header.inc.php"; ?>
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<link rel="stylesheet" href="../css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="includes/utils/chat/css/main.css">
<script >
function ajax(){
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if(req.readyState == 4 && req.status == 200){
document.getElementById('chat').innerHTML = req.responseText;
}
}
req.open('GET','includes/utils/chat/chat.php',true);
req.send();
}
setInterval(function() {ajax()}, 1000);
</script>
<style>
/* Carousel */
.owl-carousel .carousel-item-o {
background: #fff;
border: 1px solid #D9D7DA;
text-align: center;
}
.owl-carousel .carousel-item-text {
padding: 12px;
}
.owl-carousel .carousel-item-o .item-kicker {
color: #9A5053;
display: block;
font-size: .8em;
font-weight: 600;
height: 30px;
margin-bottom: 16px;
overflow: hidden;
text-transform: uppercase;
}
.owl-carousel .carousel-item-o .item-title {
color: #646464;
font-size: 1em;
font-weight: 600;
height: 38px;
margin: 0;
overflow: hidden;
}
.owl-dots {
margin-top: 40px;
text-align: center;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127, 127, 127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127, 127, 127, 1);
}
</style>
<?php include_once "../includes/nav.inc.php"; ?>
<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/includes/parallax.inc.php"); ?>
<body class="elegant-color" onload="ajax();">
<div class="container-fluid" style="width:80%;">
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
<div id="new_releases">
<p class="h2 text-white">Neuste Folgen</p>
<div class="row">
<?php foreach($latestEpisode as $lat_ep){ ?>
<?php foreach($latestAnime as $row) { ?>
<?php if( $lat_ep['anime_id'] == $row['id'] && $row['calender_id'] != 0){ ?>
<?php $count++; ?>
<div class="col-md-3 mb-3">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view" style="height:100%;">
<img src="<?php echo $row['img']; ?>" class="card-img-top" alt="photo">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title"><?= $lat_ep['name'] ?></h4>
<p class="text-muted m-0">Folge <?= $lat_ep['nr'] ?></p>
<span class="h6"><?= $row['name'] ?></span>
</div>
</div>
<!--/.Card-->
</div>
<?php } ?>
<?php if($count == 1){ ?>
<?php break; ?>
<?php } ?>
<?php }?>
<?php } ?>
</div>
</div>
</div>
<div class="col-md-12">
<div id="new_releases">
<p class="h2 text-white">Zuletzt Hinzugefügt</p>
<div class="row">
<?php foreach($last_add as $row) { ?>
<div class="col-md-3 mb-3">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view" style="height:100%;">
<img src="<?php echo $row['img']; ?>" class="card-img-top" alt="photo">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title"><?php if($row['su'] == 'sub'){echo $row['name'] . " Ger Sub";} elseif($row['su'] == 'dub'){ echo $row['name'] . " Ger Dub";} ?></h4>
<!--Text-->
<p class="card-text"><?php if (strlen($row['description']) > 79){ echo $str = substr($row['description'], 0, 80) . '...';}else{echo $row['description'];}; ?></p>
</div>
</div>
<!--/.Card-->
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="ibox-content elegant-color mt-2">
<div class="row elegant-color">
<div style="margin: 0 auto;" class=" col-md-12 elegant-color">
<div class="chat-discussion elegant-color">
<div class="chat-message left">
<div id="chat"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row elegant-color" style="margin: 0 auto;">
<div style="margin: 0 auto;" class="col-md-12">
<iframe name="votar" style="display:none;"></iframe>
<form method="POST" id="form" target="votar">
<?php
if(isset($_SESSION['username']) && !empty($_SESSION['username'])){
echo '<textarea name="message" class="area" id="area" placeholder="Enter your message" required="" value=""></textarea>';
echo '<button type="submit" style="margin: 0 auto;" style="color: white;" class="btn btn-block btn-success w-50" name="submitbtn">Send It</button>';
} else {
echo '<center><h5 class="white-text" style="margin: 0 auto;">Please login to send messages!</h5></center>';
}
?>
</form>
</div>
</div>
<hr>
<?php include_once "../includes/sidebar.inc.php"; ?>
</div>
</div>
</div>
<?php include_once "../includes/footer.inc.php"; ?>
<?php
if(isset($_POST['submitbtn'])){
$typeOfClear = "";
$name = $_SESSION['username'];
$message = $_POST['message'];
$query = "INSERT INTO chat (name, message) VALUES ('$name','$message')";
$run = $mysqli->query($query);
if($run){
echo "<audio src='includes/utils/chat/sounds/notification.mp3' hidden='true' autoplay='true' volume='0.5'/>";
echo "<script>document.getElementById('area').value = '';</script>";
}
}
?>
<?php include_once "../js/general.script.php"; ?>
Everything works, except that the Textarea won't clear itself, and no... I don't want to redirect anywhere nor do I want to refresh the page.
Thanks to everyone that can and will help me! :)
I'm not expert in PHP, but I think setting the textarea to null after passing the value to DB should works.
Or you shouldn't add the required="" inside the textarea tag?