I am trying to implement a simple food tracker for my restaurant website which updates food status. What I want to do is that whenever I update the food status for an order, the icon becomes green for that stage. I need to perform a query from my website and get the food status value and update it without page refresh. How do I do that? Please help me, it is very important
<div class="progressbar">
<ul >
<li>
<img style="width:130px;height:130px;margin-left:100px"src="foodStatusImages/waiting.png">
<i style="margin-left:150px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:80px;display: inline-block;white-space: nowrap;">Waiting for
confirmation</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:200px;"src="foodStatusImages/confirmed.png">
<i style="margin-left:250px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:190px;display: inline-block;white-space: nowrap;">Order Confirmed</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:350px"src="foodStatusImages/preparing.png">
<i style="margin-left:400px"class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:350px;display: inline-block;white-space: nowrap;">In preparation...
</h5>
</li>
<li>
<img style="width:130px;height:130px;margin-left:530px;"src="foodStatusImages/Ready.png">
<i style="margin-left:590px" class="fa fa-check" id="iconstatus"></i>
<h5 style="margin-left:520px;display: inline-block;white-space: nowrap;">Your order is
ready</h5>
</li>-->
<ul>
</div>
<script>
$(document).ready(function()
{
$(function()
{
$("ul li:nth-child(1) i.fa").css("background","#148e14");
var icons = $('#iconstatus'); //does not work
console.log(icons);
$.ajax({
url:"action.php",
data:{icons:icons},
cache:false,
method:"POST",
sucess:function(result)
{
}
});
}
);
});
</script>
Related
I am building a chat application and when I click the available users list (which is generated from a php while loop) the chat area is supposed to carry the information of that user and previous chat history (if any). However, for some reason ajax onclick keeps returning just the first user on the list into the chat area.
I have tried different methods of getting each user's id from the users-list (a separate php file) and passing it to the active-chat area (another php file) using ajax. I believe I'm missing something or doing something wrong. Every suggestion or different approach will be very much appreciated.
User's List PHP Code:
<?php
// this php is an include in another php file if certain conditions are met.
while($users = mysqli_fetch_assoc($sql)){
// the list of users generated into the home page
$output .= '<li id="contact" class="get-user-chats">
<input type="hidden" id="getUserId" value="'.$users['user_id'].'"/>
<span class="avatar"><img src="'.$users['display_pic'].'" height="42" width="42" alt="Generic placeholder image" />
<span class="'.$users['online_status'].'"></span>
</span>
<div class="chat-info flex-grow-1">
<h5 class="mb-0">'.$users['full_name'].'</h5>
<p class="card-text text-truncate">
This is just a test message to see if the truncate feature works
</p>
</div>
<div class="chat-meta text-nowrap">
<small class="float-end mb-25 chat-time">4:14 PM</small>
<span class="badge bg-danger rounded-pill float-end">3</span>
</div>
</li>';
}
?>
Ajax Code:
$(document).ready(function(){
$('.users-list').click(function(){
//users-list is a class from the home page where the users list displays in a div
var $container = $(this).find(".get-user-chats");
var chatid = $container.find("#getUserId").val();
$.ajax({
url: './code/active-chat.php',
type: 'POST',
data: {
chatuserid: chatid
},
success: function(response){
//alert(chatid)
$('.get-active-chat-user').html(response);
},
dataType: 'text'
});
});
});
active-chat.php
<?php
// active-chat.php
session_start();
define('BASEPATH', true);
require "../../../../private/engine.php";
$chatid = $_POST['chatuserid'];
$sql = "SELECT * FROM users WHERE user_id = '{$chatid}'";
$fetchdata = mysqli_query($connection, $sql);
while($sub = mysqli_fetch_array($fetchdata)){
?>
<header class="chat-header">
<div class="d-flex align-items-center">
<div class="sidebar-toggle d-block d-lg-none me-1">
<i data-feather="menu" class="font-medium-5"></i>
</div>
<div class="avatar avatar-border user-profile-toggle m-0 me-1">
<img src="<?php echo $sub['display_pic']; ?>" alt="avatar" height="36" width="36" />
<span class="<?php echo $sub['online_status']; ?>"></span>
</div>
<h6 class="mb-0"><?php echo $sub['full_name'] ?></h6>
</div>
<div class="d-flex align-items-center">
<i data-feather="phone-call" class="cursor-pointer d-sm-block d-none font-medium-2 me-1"></i>
<i data-feather="video" class="cursor-pointer d-sm-block d-none font-medium-2 me-1"></i>
<!-- <i data-feather="search" class="cursor-pointer d-sm-block d-none font-medium-2"></i> -->
<div class="dropdown">
<button class="btn-icon btn btn-transparent hide-arrow btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="more-vertical" id="chat-header-actions" class="font-medium-2"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="chat-header-actions">
<a class="dropdown-item" href="#">View Contact</a>
<a class="dropdown-item" href="#">Mute Notifications</a>
<a class="dropdown-item" href="#">Block Contact</a>
<a class="dropdown-item" href="#">Clear Chat</a>
<a class="dropdown-item" href="#">Report</a>
</div>
</div>
</div>
</header>
<?php } ?>
Screenshot of the Chat Screen:
Chat Screen
I have researched on related topics but none of them seems to address my specific issue.
PHP Code:
<td>
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item " id="achieve" value="<?php echo $value['user_login_id'] ?>">Achivements</a>
<a class="dropdown-item" id="skill" value="<?php echo $value['user_login_id'] ?>">Skills</a>
<!--
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
-->
</div>
</div>
</td>
Here I have a dropdown button in each row where each dropdown has a list of achievements / skills. When clicking an achievement or skill I want to pass that row's id to ajax.
How should I send with ajax?
Using this method you can easily get the dropdown value:
Pass the id or class by using the .value method.
var submitForm = function() {
var name = document.querySelector('.name').value;
console.log(name);
}
document.querySelector('.btn').addEventListener('click', submitForm);
<input type="text" placeholder="name" class="name"><button class="btn" value="submit">Submit</button>
I have solution like this code i think you enough smart to understand it but let me know if you cant get it.
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="demolist">
<a class="dropdown-item achivementClass" id="achieve" value="value1">Achivements</a>
<a class="dropdown-item" id="skill" >Skills</a>
<a class="dropdown-item">Remove</a>
<a class="dropdown-item">View Applicant</a>
</div>
This your script code
<script>
$(function() {
$('.achivementClass').click(function(){
id =$(this).attr('value');
console.log(id);
});
});
</script>
As a beginning coder, I could use some help understanding what's involved in building a listview populated from a database with rows that can expand and collapse, providing more information, with embedded buttons for controls? I'd like to use mostly bootstrap and python or PHP and replicate this: http://preview.iatistandard.org/index.php?url=http%3A//iati.oxfam.org.uk/xml/oxfamgb-lb.xml
Answers to similar questions are too high-level. Can someone please map out the example's basic components and functions at least and where the database scripts go and what they do? Thanks!
Here is the DEMO that you required
$('.collapse').on('shown.bs.collapse', function (e) {
//Get the id of the collapsible which is opened
var id = $(this).attr("id");
//Set the minus icon as this collapsible is now opened
$('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
//You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
var collapsibleDataId = $(this).data("collapisbleId");
//Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section
}).on('hide.bs.collapse', function (e) {
var id = $(this).attr("id");
$('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
var collapsibleDataId = $(this).data("collapisbleId");
$.ajax({
//Make hit to get the detials using ajax and on success of that insert the data in the dic with id = $(this).attr("id"); whihc is current div
});
});
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these
for example. You got here the list of the collapisable heading and then you are making loop to make the collapisble
I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop
#(for var i= 0; i> Model.Count(); i++){
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link#(i+1)" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link#(i+1)" data-collapisbleId="#Model.Id">
//Detials section
</div>
</div>
} -->
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link1" data-collapisbleId="1">
<!--Detials section-->
Link 1
</div>
</div>
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 2
</a>
<div class="collapse" id="link2" data-collapisbleId="2">
<!--Detials section-->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
**Complete DEMO**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.collapse').on('shown.bs.collapse', function (e) {
//Get the id of the collapsible which is opened
var id = $(this).attr("id");
//Set the minus icon as this collapsible is now opened
$('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
//You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
var collapsibleDataId = $(this).data("collapisbleId");
//Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section
}).on('hide.bs.collapse', function (e) {
var id = $(this).attr("id");
$('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
var collapsibleDataId = $(this).data("collapisbleId");
$.ajax({
//Make hit to get the detials using ajax and on success of that insert the data in the dic with id = $(this).attr("id"); whihc is current div
});
});
});
</script>
</head>
<body>
<!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these
for example. You got here the list of the collapisable heading and then you are making loop to make the collapisble
I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop
#(for var i= 0; i> Model.Count(); i++){
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link#(i+1)" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link#(i+1)" data-collapisbleId="#Model.Id">
//Detials section
</div>
</div>
} -->
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 1
</a>
<div class="collapse" id="link1" data-collapisbleId="1">
<!--Detials section-->
Link 1
</div>
</div>
<div>
<a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-plus"></span> Link 2
</a>
<div class="collapse" id="link2" data-collapisbleId="2">
<!--Detials section-->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</body>
</html>
I have built a mobile application for Android using Phonegap, the data is stored within a MySQL table and the data is fetched via ajax request, this works fine however, when trying to create a search query to filter the data literally after typing 2 letters my application is crashing? - Any idea?
<!-- Remote call to Server -->
<script type="text/javascript">
// Call the server for content
$.ajax({
url: 'https://www.ppl-support.co.uk/ratchetserver/getdata', // URL -> load the data
crossDomain: true,
success: function(data){
$(".list").html(data).show();
}
});
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='') {
$.ajax({
type: "POST",
url: "https://www.ppl-support.co.uk/ratchetserver/newgetdata.php",
data: dataString,
cache: false,
success: function(data) {
$(".list").html(data);
}
});
}else{
$.ajax({
url: 'https://www.ppl-support.co.uk/ratchetserver/getdata.php', //load data
success: function(data){
$(".list").html(data);
}
});
}
return true;
});
});
function Reload(){
location.reload(); // Reload the page onclick
}
// Send user to Home Screen
function Home(){
location.assign('index.html');
}
</script>
</head>
<body class="is-ump"><br><br>
<div id="users">
<!-- Load abbreviations markup -->
<ul class="table-view" style="padding-left:0px;" id="theList">
<ul class="list" style="padding-left:0px;">
<li class="table-view-cell media" >
<a class="navigate-right">
<img class="media-object pull-left" src="img/P1.png" style="width:50px;" alt="" >
<div class="media-body">
<h4 align="center">
Downloading contents, please wait...
</h4>
</div>
</a>
</li>
</ul>
</ul>
<!-- Search functionality --->
<div class="ump">
<div class="ump-widget-container">
<div class="ump-widget ump-search-widget ump-hidden" id="ump-search-widget">
<form action="#" method="POST">
<input class="search" style="font-family:exo;" value="" placeholder="Search Abbreviations.." /><!--
<button class="ump-button" style="color:white;background:#ffda00;font-family:exo;font-shadow:white;">Search</button> -->
</form>
</div>
<div class="ump-clear"></div>
</div>
<!-- navigational panel -->
<div class="ump-bar">
<div class="ump-clear">
Pocket Pilot
<div class="ump-icons">
<i class="fa fa-envelope"></i>
<i class="fa fa-search"></i>
<div class="ump-clear"></div>
</div>
</div>
<div class="ump-overlay"></div>
</div>
<nav>
<div class="ump-nav-container">
<div class="ump-header">
<img src="img/1.png" alt="" class="ump-header-background-image">
<a href="#" title="UMP - Ultra Menu Pro">
<img src="img/logo.png" alt="">
</a>
</div>
<div class="ump-nav">
<ul class="ump-default">
<li>
<a><h4 onclick="Home()">Home</h4></a>
</li>
<li>
<a><h4>About</h4></a>
</li>
</ul>
<ul class="ump-social">
<li>
<i class="fa fa-facebook"></i>
</li>
<li>
<i class="fa fa-google-plus"></i>
</li>
<li>
<i class="fa fa-twitter"></i>
</li>
<li>
<i class="fa fa-instagram"></i>
</li>
<li>
<i class="fa fa-youtube-play"></i>
</li>
</ul>
</div>
</div>
<a class="ump-toggle">
<i class="fa fa-times ump-close"></i>
<i class="fa fa-bars ump-open"></i>
</a>
</nav>
</div>
</div>
</body>
And this is my PHP file (Search)
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
$str = '';
if($_POST['search'] && $_POST['search'] != "") {
$q = $_POST['search'];
include_once('dbconnection.php');
$sql = "SELECT * FROM `co_abbreviation` WHERE `acronym` LIKE = '%$q%'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
$str .= "<div class='card' style='border-radius:0px;'>
<ul class='table-view'>
<ul class='list' style='padding-left:0px;'>
<li class='table-view-cell media'>
<a class='navigate-right'>
<div class='media-body'>
<h3 class='name'>
<b>
".$row['acronym']."
</b>
</h3>
<h4 class='born' style='color:#1e404e;'>
<i>
".$row['meaning']."
</i>
</h4>
<p class='mean' align='left'>
CAA Source: ".$row['source']."
</p>
</div>
</a>
</li>
</ul>
</ul>
</div>";
}
}
echo $str;
?>
App screen
You may just return the array in a formatted form(ex. in json format) and return it. When you create the HTML code in server and send it to client, then create the HTML code in JS function in client. Sending HTML code takes a lot bigger time than sending the result array( as you said there is approximately 1k data) .Moreover it will creates more data traffic also.
I have a page with a list of Bootstrap collapsion panels. I create these panels dynamically by first querying the database for content, see the code below:
<div class="panel-group" id="accordion">
<?php
$all_emails = "SELECT * FROM sent_emails";
if($result = mysqli_query($link, $all_emails)) {
while($rows = $result->fetch_object()) {
$db = $rows->timestamp;
$timestamp = strtotime($db);
echo '
<div class="panel panel-default m'.date("m", $timestamp).'">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$rows->ai.'">
#'.$rows->ai.' | Sent to: '.$rows->mail_to.' | Subject: '.$rows->mail_subject.' <span class="pull-right">| '.$rows->timestamp.' </span>
</a>
</h4>
</div>
<div id="collapse'.$rows->ai.'" class="panel-collapse collapse">
<div class="panel-body">
'.$rows->mail_message.'
</div>
</div>
</div>
';
}
mysqli_free_result($result);
}
?>
</div>
This works fine and all, but what I want to accomplish next is adding a filter that only show the panels with a certain class in it. As you can see in the code above I create divs with the classes "panel panel-default m('month') which all have a parent div called "panel-group".
WHen I choose a month from the dropdown button as shown below, I take the value/id of the month into jQuery as input for the filter.
<div class="dropdown1">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select month
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="select1">
<li value="january" id="m1" role="presentation">January</li>
<li value="february" id="m2" role="presentation">February</li>
<li value="march" id="m3" role="presentation">March</li>
<li value="april" id="m4" role="presentation">April</li>
<li value="may" id="m5" role="presentation">May</li>
<li value="june" id="m6" role="presentation">June</li>
<li value="july" id="m7" role="presentation">July</li>
<li value="august" id="m8" role="presentation">August</li>
<li value="september" id="m9" role="presentation">September</li>
<li value="october" id="m10" role="presentation">October</li>
<li value="november" id="m11" role="presentation">November</li>
<li value="december" id="m12" role="presentation">December</li>
</ul>
</div><!--/.dropdown1 -->
So far I have the following jQuery code. Every child div of "panel-group" that doesn't have the class let's say m10 (=October) must be hidden.
<script>
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group").show();
$(".panel-group .panel.panel-default :not(."+this.id+")").hide();
});
});
I have been trying a lot and have searched all over the internet for an answer that satisfies what I need, but no luck so far :(
Hide all, then show the correct one:
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group .panel").hide();
$(".panel-group .panel.panel-default."+this.id).show();
});
});