Building Filtering sidebar and searching box - javascript

I want to build filtering sidebar and search box . My problem is, I can't make it run searching box and filtering items together at the same time. I hope any of u can help me?
I think,the main problem is in my script "var s" php parameter where I'm getting cities from
Let's see what I've done so for,
Here's my script;
<script>
$(function(){
$('.item_filter').change(function(){
var p = multiple_values('p');
var s ='<?php echo $_POST["search"]; ?>';
var url ="product.php?product=<?php echo
htmlentities($_GET['product']) ?>&s="+s+"&b="+b+"&p="+p;
window.location=url;
});
});
function multiple_values(inputclass){
var val = new Array();
$("."+inputclass+":checked").each(function() {
val.push($(this).val());
});
return val.join('-');
}
</script>
Search Box
<form class="search" name="search" method="POST"
action="product.php?product=<?php echo
''.htmlentities($_GET['product']).''; ?>" >
<a href="javascript:void(0);"><input id="small_search"
name="searchTerm" class="item_filter s" <?php { echo "checked"; } ?>
list="local" /></a>
<?php
while($row = mysqli_fetch_assoc($result)){
$local = ($row['local']); ?>
<a href="javascript:void(0);" target="_blank"><input type="submit"
id="small_search_btn" value="Search"></a >
<datalist id="local">
<option value="<?php echo ''.htmlentities($row['local']).''; ?
>"></option>
<?php } ?>
</form >
**Filtering **
<div class="list-group" style="font-size:14px;">
<h4 style="font-size:16px; font-weight: bold; color:black;">
</h4>
<?php
some sql statement..
?>
<a href="javascript:void(0);" class="list-group-item"
id="left_filtering" >
<label >
<input type="checkbox" class="item_filter b" value="<?php echo
htmlentities($row['brand']); ?>" <?php if(in_array($row['brand'],$b
{echo "checked"; } ?> > <?php echo ucfirst($row['brand']);
?></a>
</label>
<?php } ?>
</div>

Related

How to sent id from one page to another when click on submit?

I have a database which consists of question_id, question, and options. Where I'll display the question and options. When the user clicked on submit I want to store the option they clicked and the question_id.
I am able to store the option they clicked but want to know how to store the question_id.
$user_email = $_SESSION['email'];
$query1="SELECT * FROM votes WHERE user_email='$user_email'";
$query2="SELECT * FROM poll_question WHERE status='1'";
$fetch2 = mysqli_query($con,$query2);
<html>
<head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="row">
<div class="col-md-6">
<?
while( $row2 = mysqli_fetch_array($fetch2))
{
?>
<form method="post" class="poll_form">
<h3><?echo $row2['question']?>?</h3>
<br />
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value=<?echo $row2['option1']?> /><?echo $row2['option1']?></h4></label>
</div>
<div class="radio">
<label><h4><input type="radio" name="poll_option" class="poll_option" value=<?echo $row2['option1']?> /> <?echo $row2['option2']?></h4></label>
</div>
<br />
<?php
if( $count >0)
{ ?>
<button disabled="disabled" alt="<?php echo $row2['question_id']; ?>" rel="<?php echo $user_email; ?>" class="btn btn-primary poll_option" title="<?php echo $ip; ?>">Submit</button>
<h>You selected : <? echo $row1['vote_option']; ?></h>
<br>
<p id="demo"></p>
<?php
}
else
{ ?>
<button alt="<?php echo $row2['question_id']; ?>" rel="<?php echo $user_email; ?>" class="btn btn-primary poll_option" title="<?php echo $ip; ?>">Submit</button>
<?
}
?>
</form>
<? }
} ?>
<br />
</div>
</div>
<br />
<br />
<br />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".poll_form").submit(function(event){
event.preventDefault(); //prevents the form from submitting normally
var poll_option = '';
$('button.poll_option').each(function(){
if($(this).prop("checked"))
{
poll_option = $(this).val();
var option=poll_option;
}
var url = '<?php echo SITE_URL; ?>';
});
$.post("poll_vote.php",$('.poll_form').serialize(),
function(data)
{
if(data=="User Created Success"){
window.setTimeout(function () {
location.href ="<?php echo SITE_URL; ?>poll.php";
}, 100);
}
else{
$("#result").html(data);
}
}
);
//to reset form data
});
});
<? } ?>
</script>
</html>
Using th below function I am sending the poll_option to other where I kept the inset operation. Now I want to send the question_id also
Create a hidden input filed in your form
<input type="hidden" name="question_id" value="<?php echo $row2['question_id']; ?>">
Create a hidden input field in your form.
<input type="hidden" id="question_id" name="question_id" value="<?= $row2['question_id'] ?>">
PHP solution:
In this case your question_id will be included in the POST.
You can then access it by calling $_POST['question_id'].
Jquery solution:
In Jquery you can also access it by:
$("#question_id").val();

post jquery array to php page when checking checkboxes

i have dynamic number of checkboxes and a button to post the checked elements to another page .. here is the code:
<div class="overSelect"></div>
<div id="checkboxes<?php echo $aa['id']; ?>">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
$cc = 1;
foreach ($arr2 as $aa2) { ?>
<div style="padding-right: 20px" class="row"><label>
<input type="checkbox" value="<?php echo $aa2['name'] ?>" name="checks<?php echo $aa['id'] ?>[]"id="check<?php echo $aa['id']; ?>"><?php echo $aa2['name'] ?>
</label></div>
<?php } ?>
</div>
<a class="btn btn-primary btn-sm" name="update-all"onclick="update_all('prop_id<?php echo $aa['id']; ?><?php $counter; ?>','checks<?php echo $aa['id'] ?>')"id="btn-all<?php echo $aa['id']; ?><?php $counter; ?><?php echo $p['id']; ?>">save</a>
i tried this code but it is not working
<script type="text/javascript">
function update_all(a, b) {
var aa = document.getElementById(a).value;
var values = new Array();
$("input:checkbox[name=b]").each(function () {
if ($(this).is(":checked")){
values.push($(this).val());
}
});
alert(aa);
alert(values.length);
alert(values);
}
</script>
if the checkboxes checked .. it's value will be added to the array and posted to php page
any help please .. thanks in advance

Magento Product pag - displaying related products that are out of stock

I'm not too experienced in PHP but my goal here is to have related product swatches not display on the page if they are out of stock.(highlighted in screenshot)
Related product swatches are highlighted
Here is the PHP code:
<ol class="mini-products-list" id="block-related">
<?php foreach($this->getItems() as $_item): ?>
<li class="item">
<?php if(!$_item->isComposite() && $_item->isSaleable()): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<input type="checkbox" class="checkbox related-checkbox" id="related-checkbox<?php echo $_item->getId() ?>" name="related_products[]" value="<?php echo $_item->getId() ?>" />
<?php endif; ?>
<?php endif; ?>
<div class="product">
<img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(50) ?>" width="50" height="50" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" />
<div class="product-details">
<p class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></p>
<?php echo $this->getPriceHtml($_item, true, '-related') ?>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<?php echo $this->__('Add to Wishlist') ?>
<?php endif; ?>
</div>
</div>
</li>
<?php endforeach ?>
</ol>
And here is the related jQuery/JS:
<script type="text/javascript">
//<![CDATA[
$$('.related-checkbox').each(function(elem){
Event.observe(elem, 'click', addRelatedToProduct)
});
var relatedProductsCheckFlag = false;
function selectAllRelated(txt){
if (relatedProductsCheckFlag == false) {
$$('.related-checkbox').each(function(elem){
elem.checked = true;
});
relatedProductsCheckFlag = true;
txt.innerHTML="<?php echo $this->__('unselect all') ?>";
} else {
$$('.related-checkbox').each(function(elem){
elem.checked = false;
});
relatedProductsCheckFlag = false;
txt.innerHTML="<?php echo $this->__('select all') ?>";
}
addRelatedToProduct();
}
function addRelatedToProduct(){
var checkboxes = $$('.related-checkbox');
var values = [];
for(var i=0;i<checkboxes.length;i++){
if(checkboxes[i].checked) values.push(checkboxes[i].value);
}
if($('related-products-field')){
$('related-products-field').value = values.join(',');
}
}
//]]>
</script>
Any help would be appreciated, thank you!
Are you sure that you have the option Display out of stock products set to No? (System -> Configuration -> Inventory)
You can also try to add $_item->isAvailable() to if statement.
The Solution I ended up going with: adding $_item->isAvailable() to if statement gives the desired effect of related products that are out of stock will not display as a related product swatch on the product page.

Move child div into a parent div

Im trying to output posts and comments reddit style. This is the expected result (mockup HMTL) but currently I look like this.
This is the code I'm using right now to output posts and comment:
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php
$i=0; //initialize flag
foreach (getMessage() as $value){ ?>
<div class="comment" id="<?= $value->id; ?>">
//you don't need level class
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
<?php
$i++; //sum flag
}
for($x=0; $x<=$i; $x++) { //paint div closers
echo '</div>' ;
}
?>
<? endif; ?>
</div>
What if I change the foreach statement to
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php foreach (getMessage() as $value){ ?>
<div class="level_<?= $value->level; ?> comment" id="<?= $value->id; ?>">
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
</div>
<?php } endif; ?>
</div>
And output everything "flat". And depending on class, move it to the "right" div with jQuery.
So if <div class="level_0 comment" id="1"> is the parent div (level_0), div with level 1 <div class="level_1 comment" id="3"> should be inside the parent div. And <div class="level_2 comment" id="14"> level 2 should be inside the child div, level 1. This fiddle hopefully gives a better understanding: And this tree of comments can contain numerous of the same level class, so how do we know it is moves inside right div? Due to SELECT * FROM tree ORDER BY reply_to ASC, sort_order ASC, every comment is fetch already sorted. So it won't be a problem, the child should be moved "one" div up.
Here is some sample data.
This is the function I am using to retrieve data:
function getMessage(){
$app = new Connection();
$sql = 'SELECT *
FROM tree ORDER BY reply_to ASC, sort_order ASC';
$query = $app->getConnection()->prepare($sql);
$query->execute();
return $query->fetchAll();
}
How can I output data reddit style with jQuery.
Surely this is a CSS fix?
Output all comments in a list and pad each one according to the level class.
.level_0 { margin-left: 0px; }
.level_1 { margin-left: 10px; }
.level_2 { margin-left: 20px; }
etc..

Auto calculation of div values on blur

I am generating a table of divs from mysql database with code as below :
<?php
$sql = "SELECT * FROM menuitem";
$result = mysql_query($sql); $i =1;
while ($row = mysql_fetch_array($result)) {?>
<div class="orderblock">
<div class="orderlist">
<div class="pimage">
<p></p>
</div>
<div class="pdesc">
<p><?php echo $row['prodname']; ?></p>
<p><?php echo substr($row['proddesc'], 0, 20); ?></p>
</div>
<div class="portion">
<input type="text" onblur="document.getElementById('tot<?php echo $i;?>').value=document.getElementById('por<?php echo $i;?>').value * document.getElementById('pri<?php echo $i;?>').value;" id="por<?php echo $i;?>" name="<?php echo $row['prodname']; ?>" >
</div>
<div class="price">
<p id="pri<?php echo $i;?>"><?php echo $row['price']; ?></p>
</div>
<div class="total">
<p><input style="border: none;" type="text" id="tot<?php echo $i;?>" disabled="disabled" value=""> </p>
</div>
</div>
</div>
<?php $i++; }
?>
this is my final code, finally I got it working but I am getting NaN as result could any please sort it for me.
thanks
Try this now. Before try this remove your blur event from html.I hope this will help you.
$(document).ready(function () {
$("input[type=text]").blur(function () {
var portion = $(this).val();
var price = $(this).parent().parent().find(".price p").text();
if(isNaN(portion)==false)
{
var tot = portion * price;
$(this).parent().parent().find(".total p input").val(tot);
}
else
{
$(this).parent().parent().find(".total p input").val(0);
}
});
});
Demo here

Categories