Move child div into a parent div - javascript

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..

Related

Building Filtering sidebar and searching box

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>

JQuery checkbox when value is assigned

I've been trying to get JQuery to check a radio for me when I assign a value 'Z' to it.
My current code:
<?php if ($option['type'] == 'radio') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label"><?php echo $option['name']; ?></label>
<div id="input-option<?php echo $option['product_option_id']; ?>">
<?php if (isset($option_values)) foreach ($option_values as $option_value) { ?>
<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
<?php if ($option_value['price_prefix'] == 'z') {?>
<script>
$(".radio").prop("checked", true)
</script>
<?php echo 'Im Active!!'; ?><?php }
else { ?> <?php echo ' ';?> (<?php echo $option_value['price_prefix'];?>
<?php echo $option_value['price']; ?>) <?PHP }?>
<?php } ?>
</label>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php } ?>
As for now, my option 'Z' only shows 'I'm Active!!' in the list. The radio is still unchecked though.
What am I doing wrong?
I'm planning on releasing a free OpenCart module where people can activate an option by standard by assigning the value Z in product properties.
Thanks!

multiple JS form submit on change inside a PHP while

I have a while in PHP that is building a table. Inside my while, I have a dropdown menu that I want to execute code on change.... The form submit on change doesn'T work...
This is my code:
<?
while ($data2 = mysql_fetch_array( $data))
{ ?>
<form name="FormSize" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<td>
<select name="size[]" class="form-field3" OnChange="document.FormSize.submit();" >
<? foreach ($sizearray as $value) { ?>
<option value="$value" <? if($data2['size'] == $value) { echo "selected";} ?> ><? echo $value; ?></option>
<? } ?>
</select>
<input type="hidden" name="product_id[]" value="<? echo $data2['product_id']; ?>">
</td>
</form>
<? } ?>
and on top of my page, I have this to execute the code..
<?
//submit size form
if (isset($_POST['size']))
{
foreach($_POST['product_id'] as $key => $id)
{
$product_id = $id;
$newsize = $_POST['size'][$key];
$sql3 = mysql_query("update cart SET size = '".$newsize."' where product_id = '".$product_id."' ");
}
?>
any idea why it's not executing ?
You have multiple forms with the same name="FormSize". So document.FormSize will be an array-like object, and you need to access the appropriate one. You can do this by using this.form to refer to the <form> that contains the <select>.
You also need to fix the element nesting -- the <form> has to be inside the <td>, not the other way around.
<?
while ($data2 = mysql_fetch_array( $data))
{ ?>
<td>
<form name="FormSize" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<select name="size[]" class="form-field3" OnChange="this.form.submit();" >
<? foreach ($sizearray as $value) { ?>
<option value="$value" <? if($data2['size'] == $value) { echo "selected";} ?> ><? echo $value; ?></option>
<? } ?>
</select>
<input type="hidden" name="product_id[]" value="<? echo $data2['product_id']; ?>">
</form>
/td>
<? } ?>
Could be because the html is not valid, you cannot put your form tag as a direct child of a tr.
Apart from that, naming all your forms the same will make it pretty hard to submit a specific one by its name.
As you are using arrays for your input names, I assume that you mean all of them to be in the same form, so you should just have your form wrap the table and take it out of the while loop.

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

handling multiple buttons with same name and value in one form

I have multiple submit buttons on a site. They used to move elements up and down and I want to be them in one whole form in case of the user changes meanwhile some other values so everything is saved. The Problem now is I need the element ID of the button which was clicked.
So here is the code in the loop :
div class="form-order"><?php echo $elements[$z]['element_order']; ?> </div>
<input type="submit" name="edit_form_operation" value="▲" class="button-primary"
<?php if($elements[$z]['element_order'] == 1) echo 'disabled="disabled"'; ?> /><br />
<input type="submit" name="edit_form_operation" value="▼" class="button-primary"
<?php
$highest_element = $fdb->get_element_highest_order($form[$i]['form_id']);
if($elements[$z]['element_order'] == $highest_element) echo 'disabled="disabled"'; ?> />
And onclick of that specific button in the for loop he should write this code first so I know which element has to be moved
echo '<input type="hidden" name="change_element_id" value="'.$elements[$z]['element_id'].'" >';
I'm also open for another solution of this problem.
Ok I solved it like that now
Here you process the input:
// Select Operation
if(isset($_POST['edit_form_operation_up'])) {
echo "move up id ";
$operation = array_keys($_POST['edit_form_operation_up']);
echo $operation['0'];
}
else if(isset($_POST['edit_form_operation_down'])) {
echo "move down id ";
$operation = array_keys($_POST['edit_form_operation_down']);
echo $operation['0'];
}
And this is in the for loop for infinite Elements the input with same value and name.
<?php $elements = $fdb->get_elements($form[$i]['form_id']);
for($z = 0; $z < sizeof($elements); $z++) {
?>
<tr>
<td><div class="form-order"><?php echo $elements[$z]['element_order']; ?> </div>
<input type="submit" name="edit_form_operation_up[<?php echo $elements[$z]['element_id']; ?>]" value="▲" class="button-primary"
<?php if($elements[$z]['element_order'] == 1) echo 'disabled="disabled"'; ?> /><br />
<input type="submit" name="edit_form_operation_down[<?php echo $elements[$z]['element_id']; ?>]" value="▼" class="button-primary"
<?php
$highest_element = $fdb->get_element_highest_order($form[$i]['form_id']);
if($elements[$z]['element_order'] == $highest_element) echo 'disabled="disabled"'; ?> />
</td>
<td><?php echo $elements[$z]['element_id']; ?> </td>
<td></td>
<td></td>
</tr>
<?php } ?>
In case of somebody finds this topic and want to find a good solution.
Greetings

Categories