i am using ul li to display menus, menus fetched from database
$Features = $session->get('Features');
foreach ($Features as $menuItems) {
$order_priority = $menuItems->order_priority;
$name = $menuItems->name;
$path = $menuItems->path;
}
here below the menu listed ,
<li>
<a href="<?php echo Url::to($path);?>">
<?php echo $menuItems->name; ?>
</a>
</li>
my question is i want to display the menu SORT with order_priority [1,2,3,4]?
If your order_priority attribute doesn't repeats. You can try this:
$menu = [];
foreach ($session->get('Features') as $menuItems) {
$menu[$menuItems->order_priority] = Html::a($menuItems->name, $menuItems->path);
}
ksort($menu);
And for generate the list, you can do like this:
echo Html::ul($menu)
But if it does repeat, you could sort the items in your db query like #ustmaestro said in the comments.
Related
This is the div that i am updating
but i want to add a active class to the (li) item
every time the div refreshes the active class goes away
so i don`t want to refresh all the data in the (ul) but
only add (li) if there is a new data in the database,
with out refreshing the previous (li) items
<div id="contacts">
<ul id="rooms" class="rooms">
<!-- This is where the data get inserted -->
<!-- the ajax call and this -->
<li class='contact' data-val='<?php echo $room['id']; ?>'>
<div class='wrap'>
<div class='meta'>
<p class='name'><?php echo $room['sender']; ?></p>
<p class='preview'><?php echo $room['senderemail']; ?></p>
</div>
</div>
</li>
</ul>
</div>
this is my ajax call
$(document).ready(function() {
var interval = setInterval(function(){
$.ajax({
url: 'rooms.php',
success: function(data){
$('#rooms').html(data);
}
});
}, 1000);
});
in the room php
$rooms = get_rooms();
foreach($rooms as $room){
?>
<li class='contact' data-val='<?php echo $room['id']; ?>'>
<div class='wrap'>
<div class='meta'>
<p class='name'><?php echo $room['sender']; ?></p>
<p class='preview'><?php echo $room['senderemail']; ?></p>
</div>
</div>
</li>
<?php
}
the get_rooms() function
function get_rooms() {
$sql = "SELECT id, sender, senderemail FROM chatroom ";
$result = mysqli_query($GLOBALS['dbh'], $sql);
$rooms = array();
while($room = mysqli_fetch_assoc($result)){
$rooms[] = array('id'=>$room['id'], 'sender'=>$room['sender'],
'senderemail'=>$room['senderemail']);
}
return $rooms;
}
You Just need to push new data to the div as below just replace your line with:
$('#rooms').append(data);
this will add new <li> in your existing <div> after the last <li>
jquery append()
To get the id of the last <li>
var lastId = $( "#rooms li" ).last().attr('id');
Once you get the last id then pass it in your ajax call.
If I understand you correctly, your problem is that you lose the active class (which you clicked on the li container) when there is new data.
This has to do with the fact that you exchange all of the content.
There are now three options. Either
You give the rooms.php the id of the currently active li-container
and this script sets the active class for the affected container.
You transfer all the chatrooms (ids) already shown to rooms.php and only
load the new ones (this means effort later with sorting).
You save the active li class and re set it after content changed (this is the fastest)
f.e: in your Ajax succes functions:
let id=0;
let active_li = $('li.active');
if (active_li.length>0) id=active_li.data('val');
$('#rooms').html(data);
if (id!=0) $('li[data-val="'+id+'"]').addClass ('active');
A few other thoughts:
Note the interval of 1000ms. Possible it makes Problems if the request lasts longer than 1000ms. This may still work well in your tests, but maybe not anymore if there are a hundred or 1000 users in your application.
Doesn't it make sense to tell the server when you click the active room and save it in a session so that the server knows which room is active in the client?
You need to simply update your JS code like:
$(document).ready(function() {
var active_list = '';
var interval = setInterval(function(){
$.ajax({
url: 'rooms.php',
beforeSend: function(){
active_list = $('#rooms').find('li.contact.active').attr('data-val');
}
success: function(data){
$('#rooms').html(data);
$(data).find('li[data-val="' + active_list +'"]').addClass('active');
}
});
}, 1000);
});
This should solve your problem and Let me know if you still face any issue.
I have a page which lists files from database every second.
DESIRED RESULTS
I want all the li elements to fadeIn one by one on page load.
Then fadeIn only the new li elements when new files are added to the database otherwise no animation to the already listed elements.
To get the fresh list of files I am using setInterval which in turn is causing the all the list items to fadeIn one by one every second. What should I do to achieve the desired results?
TO SUM UP WHAT I AM ASKING
I am asking for a way to show the elements as if they are fading in on by on on page load. Then if new items are added to the database then show them only one by one with the fading effect but at that time the fading effect should not be applied to the older items.
JS
$(document).ready(function() {
var filelist = $('#file_list');
$('#loading').show();
var checkUpdate = function () {
$.ajax({
type: "GET",
url: "generate_list.php",
success: function (result) {
$('#loading').hide();
var arr = JSON.parse(result);
console.log(arr);
if (arr.length > 0) {
$('#empty_storage').hide();
filelist.html(arr);
$('li').each(function (i) {
$(this).delay(400*i).fadeIn(400);
});
}
else {
filelist.html('');
$('#empty_storage').show();
}
},
error: function (response) {
$('#loading').hide();
$.alert({
theme: 'black',
title: false,
content: response
});
}
});
setTimeout(checkUpdate, 1700);
};
setTimeout(checkUpdate, 1700);
});
CSS
#file_list li
{
overflow: hidden;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 5px;
display: none;
}
PHP SNIPPET
// Fetching only last 10 records LIFO
$query = $dbh->prepare("SELECT * FROM uploads ORDER BY id DESC LIMIT 10");
$query->execute();
$items = array();
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
// Generate respective data to display
$file_id = $row['id'];
$ico_path = $base_icon_src.get_logo($row['file_ext']);
$full_file_name = $row['file_name'].'.'.$row['file_ext'];
$file_ext = $row['file_ext'];
$file_code = $row['file_code'];
$download_file_path = './storage/'.$file_code.'.'.$file_ext;
$file_size = $row['file_size'];
$file_upload_time = $row['timestamps'];
if(file_exists($download_file_path)) {
// Generating markup
$items[] = '<li>
<div class="f_icon"><img src="' . $ico_path . '"></div>
<div class="left_wing">
<div class="progressbar"></div>
<a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
<div class="f_time_size">' . date("M d, Y", $file_upload_time) . ' ' . human_filesize($file_size) . '</div>
</div>
<div class="right_wing">
<div class="f_delete">
<a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'">
<i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
</a>
</div>
</div>
</li>';
}
}
//content in $items must be in UTF-8
echo json_encode($items);
In general - this is the workflow you should follow:
On page load (first time) get the list of the files you want to preview (it can be all of them, or only the last X). Make sure you have the id (from the database) of the last item (the largest id, if your items are orders). We will call this MAX_ID.
Once loaded - animate them one by one.
Using setTimeout, get the "next bulk" of files (you need to pass to the php script the ID that you saved from #1, so you can get only the files where id > max_id).
If you got new files - add them (you can animate them one by one).
Update the MAX_ID to be the new id you got from the "new bulk".
Inside the success function you should call again (using the setTimeout function to the code the gets the "next bulk" (#3).
Here is a simple example:
$(function() {
$('li').hide();
$($("li").get().reverse()).each(function(i) {
$(this).delay(400*i).fadeIn(400);
});
});
items = ['a', 'b', 'c', 'd']
$('#a1').click(function() {
$(items).each(function(i, val) {
li = $('<li>').text(val).hide();
$('#u1').prepend(li);
li.delay(400*i).fadeIn(400);
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="u1">
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
<div id="a1">Click to add more items</div>
I'm trying to manage a dynamic menu based on results from tables in my database.
Code below is so far i have come.. But i can't get it to display as i want to.
i have 3 tables in my database looking like this.
ws_categories
id
maincat (name of main-category)
ws_subcategories
id
subcat (Name of sub-category)
parentcat (id of main-category)
ws_subsubs
id
subsub (Name of 2nd-sub-category)
parentsub (id of sub-category)
What i want to achieve?
Having a simple vertical menu, that outputs main categories, and onclick, submenue alternatives related to that main category will show, if a sub category has a 3rd submenu/submenues, they will show under..
Code below is so far i have come.. But i don't seem to understand why it output main category several times and not just once..
To be clear, i do not understand how i should use join to achieve this. I want to be able to echo all main categories once, and subcategories once, and if there is one or more 2nd sub categories i want them to echo too.. How do i achieve this with join? is it even possible or am i looking the wrong way?
Thanks in advance.
PHP
<?php
echo '<div class="dl_parent">';
$results = mysqli_query($link, "SELECT * FROM `ws_categories` INNER JOIN `ws_subcategories` ON `ws_categories`.`id` = `ws_subcategories`.`parentcat`;") or die (mysqli_error($link));
while($row = mysqli_fetch_array($results)){
echo '
<div class="dl_parent">
<div class="dl_link">'.$row['maincat'].'</div>
<div class="dl_sub_dd">
<ul>
<li>'.$row['subcat'].'</li>
</ul>
</div>
</div>
';
}
?>
Javascript
$(window).on('load',function(){
//CLICK-HANDLERS=============================
$('.dl_link').click(function(){
var submenu = $(this).parent().children('.dl_sub_dd');
if (submenu.css('display') == 'none') {
$('.dl_sub_dd').hide(); //first hide any previously showing submenu's
submenu.show(); //then show the current submenu
} else {
submenu.hide(); //hide the current submenu again
}
});
});
CSS
/*LINK------------------------*/
.dl_link {
cursor:pointer;
}
/*DROPMENU--------------------*/
.dl_sub_dd {
display:none;
}
Your SQL request will give you for each main category as many rows as it has sub categories:
row 1: maincat1 | subcat1
row 2: maincat1 | subcat2
etc...
You could make a request to select all maincats, and for each maincat, make another request to select all its subcats. Something like this:
PHP
<?php
$results = mysqli_query($link, "SELECT * FROM `ws_categories`;") or die (mysqli_error($link));
while($row = mysqli_fetch_array($results)){
echo '
<div class="dl_parent">
<div class="dl_link">'.$row['maincat'].'</div>
<div class="dl_sub_dd">
<ul>';
$query = mysqli_query($link, "SELECT * FROM `ws_categories` INNER JOIN `ws_subcategories` ON `ws_categories`.`id` = `ws_subcategories`.`parentcat` WHERE `ws_categories`.`id` = " . $row['id'] . ";") or die (mysqli_error($link));
while($row2 = mysqli_fetch_array($query)) {
echo '<li>'.$row2['subcat'].'</li>';
}
echo '</ul>
</div>
</div>
';
}
?>
Reading a lot about sessions and how to add and remove items. I see there are a lot of different way's to get this done. I'm having the same problem.
I hope someone here could help me out with this one. I've come along way from nothing to where I am now with the help of this community (thanks!).
This is my problem, I hope I can explain it so you can understand.
Let say I have a shop that sells t-shirts and pants. When I save a t-hirt item to my cart it display's it like it should. But I'm not able to remove the item. If I then filter my page for pans (this triggers an AJAX event) and try to remove the t-shirt, the item is removed. But ALL items are removed not just the one I clicked on to remove.
Here is my HTML to add a product:
<button type="submit"
class="btn btn-primary text-right add-product showtoast"
data-target="post-<?php the_ID(); ?>"
data-attribute="<?php the_title(); ?>"
data-product="<?php the_title(); ?>">
Add to cart
</button>
And this is the HTML to remove an item:
<div class="echo-product">
<?php echo htmlspecialchars($product); ?>
<input type="submit" class="delete-product" value="Remove">
</div>
These are my Javascripts to add and remove items:
$('.add-product').click(function() {
var productName = $(this).data('product');
$.post('http://example.com/reload.php?addparam',
{productName: productName}, function(data) {
$('.txtHint').html(data);
})
});
$('.delete-product').click(function() {
var productName = $(this).data('product');
$.post('http://examples.com/reload.php?delparam',
{productName: productName}, function(data) {
$('.txtHint').html(data);
})
});
And last but not least, my reload.php script:
<?php
session_start();
if (!array_key_exists('products', $_SESSION) || !is_array($_SESSION['products'])) {
$_SESSION['products'] = [];
}
$productName = array_key_exists('productName', $_POST) ? (string) $_POST['productName'] : '';
if(isset($_GET['delparam'])){
unset($_SESSION['products'][$productName]);
}
if(isset($_GET['addparam'])){
$_SESSION['products'][] = $productName;
}
?>
<?php foreach ($_SESSION['products'] as $product): ?>
<div class="echo-product">
<i style="color:#F60;padding-right:20px;" class="fa fa-anchor" aria-hidden="true"></i>
<?php echo htmlspecialchars($product); ?>
<input type="submit" class="delete-product" value="Remove">
</div>
<?php endforeach;?>
Is there anyone that could help me understand why (it looks like) an AJAX event has to take place before I'm able to remove items. And why it removes ALL the items when I just click on one item?
Thanks!
Compare how products are added vs. how they are deleted
if(isset($_GET['delparam'])){
unset($_SESSION['products'][$productName]);
}
if(isset($_GET['addparam'])){
$_SESSION['products'][] = $productName;
}
When adding a product, you just append the productName to an array. The entry receives an numeric index.
When deleting a product you look for the productName as index - but that does not exist!
I'm sure it doesn't answer why all products are removed, but it might help to do things right.
I have a sortable list like the above image, each sortable block has a icon between them.
The current code in jquery UI sortable is like this:
if (count($track_list) > 0) {
echo "<ul class='sortable_panel'>";
foreach ($track_list as $key => $video) {
?>
<li class="video_bar">
.....
</li>
<?php
if ($key != count($track_list) - 1) {
echo "<div style='text-align:center;'><i class='fa fa-link icon-flipped'></i></div>";
}
}
echo "</ul>";
}
Javascript:
$('.sortable_panel').sortable();
The problem is , how to
1) make the icon not sortable
2) if the first item is drag to last item, how to make the second item become the first item and above the icon?
Thanks a lot for helping.