I don't normally post my server side code but I guess I can post abit to solve this issue,I have a staff page that loops through in a database as I am going to use the database to do other things like deleting/demoting the staff if they did anything wrong and to make the site neater. (don't like demoting staff but in a case I need to)
Anyway I am looping it through with a box what I want now is when one of the boxes are clicked I want it to go to a php page (via a ajax request to delete the user from the database) then hide or fade way by using the hide or fade function.
But the only issue is how can I do this when it's looping through? because the div does not have it's own class or id and I don't think jquery can connect to a database to get a unique id (since it's client side)
Here's some of my code to help
while($staff_info = mysqli_fetch_array($select_staff)) {
$account_name = $staff_info['account_name'];
$position = $staff_info['position'];
$description = $staff_info['description'];
echo "
<div id='staff_boxes'> <text style='float:right;'> <a href='#' class='delete_button'> X </a> </text>";
echo"
<h2>$account_name</h2>
$position
<p>$description</p>
</div> ";
}
Hoping to get some help and this I search Google but can't find nothing I might be doing it wrong for this type of system
Thanks!
You can give each box a unique id like this with your code:
while($staff_info = mysqli_fetch_array($select_staff)) {
$id = $staff_info['id']; // assuming you have an id field in your DB
$account_name = $staff_info['account_name'];
$position = $staff_info['position'];
$description = $staff_info['description'];
echo "
<div id='staff_boxes_$id'> <text style='float:right;'> <a href='#' class='delete_button'> X </a> </text>";
echo"
<h2>$account_name</h2>
$position
<p>$description</p>
</div> ";
}
Alternatively, you can give all the divs the same class (e.g. <div class="staff_box"> ... </div> then use jQuery like this:
$('.staff_box').each(function(index) {
var box = $(this);
box.children('.delete_button').click(function(event) {
event.stopPropagation();
box.hide();
})
});
Related
I currently have an html button which right below has a div where I want to post certain data.
Both of those elements are inside a php for loop.
<?php for($i = 0 ; $i < 10; $i++){ ?>
<div class="form-group">
<label class="col-md-4 control-label" for="ver"></label>
<div class="col-md-4">
<button data-dnipass="<?= $dni?>" class="ver" name="ver" class="btn btn-primary">
Ver líneas
</button>
</div>
</div>
<div id ="<?= $i?>" class="table userInfo" data-formpost="<?= $dni?>"></div>
<? } ?>
$dni is a value I take from my databae and is unique for each iteration.
Then I have an ajax script doing the following
$(document).ready(function(){
$(".ver").click(function(event){
var pulsado = $(this).data("dnipass"); //this is properly asigning the data
alert(pulsado); //this properly launches an alert with my desired value
$(this).data("formpost").append(pulsado); //im trying to append my variable to my ".userinfo" div but im unable to do so, since I dont know how to identify so
});
})
How can I append the var pulsado to my div with the class ."userinfo"? The content of the var pulsado is a simple string, like "x1234" or "x4321"....
Try the following code
$(".ver").click(function(event){
var pulsado = $(this).data("dnipass"); //this is properly asigning the data
$(this).closest('.form-group').next('.userInfo').append(pulsado);
});
The closest finds the div under which your button is wrapped. next then finds the immediate div with userInfo class.
Just make use of append() like this :
$(document).ready(function()
{
$(".ver").on('click',function(event)
{
var pulsado = $(this).data("dnipass");
$(".userinfo").append(pulsado);
});
});
To give some Background information: I've got a php-function "showSystems" which extracts data from our CMDB and shows it in a Dropdown generated by the Codeigniter form helper "form_dropdown". So the dropdown contains the names of all our servers and when clicking on one, some other unrelevant functions show different kinds of information about that particular system.
What I want to achieve now is, when hovering over a system listed in the dropdown, that the description of that system is shown in a label under the list. When nothing is hovered, the label is hidden.
Something like:
Dropdown:
Server1
Server2 <-- hover over this
Server3
Label --> shows Description of Server2
How can I handle the mosehover-event in this generated dropdown using php/javascript?
Edit: So I give some more background-information, as it seems to have something to do with my technical setup.
The function, which produces the dropdown with the received data is written in a model of Codeigniter:
<?php
echo '<select class="minipanel" id="selectminipanel" size="25" style="width: 100%" onchange="window.location = \''.site_url(CONTROLLER.'/showItem').'/\' + this.value;">';
foreach($tmp as $key => $value):
if ($active == $key){
echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'" selected>'.$value[0].'</option>';
} else {
echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'">'.$value[0].'</option>';
}
endforeach;
echo '</select>';
?>
The modul is loaded in a template via a view(which loads the model). The label is defined right after the codeigniter call:
<?php $this->load->view("V".$this->name."/vMinipanel"); ?>
<label id="description"></label>
The script is also written in this template's head section:
<script language="JavaScript">
function displayDescription($ele) {
var server_data = ele.server-description;
document.getElementById('description').innerHTML = server_data;
}
function hideLabel() {
document.getElementById('description').innerHTML ='';
}
</script>
So, why are the functions displayDescription and hideLabel not called?
Please check and run below code:
server 1<br>
server 2<br>
server 3
If you are using bootstrap
server 1
server 2
server 3
just these lines of codes will work fine for you .
trigger an event on mouse over, and use the element's data-description to show the details:
<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" data-server-description="your_description" id='1'>
Server1
</option>
<script>
function displayDescription(ele)
{
// You can use the data-server-description attribute to catch the description
var server_data = ele.data-server-description;
// you can also use the ID to fetch the description if not embadded in as an html attribute
var server_id = ele.id;
document.getElementById('your_label_id').innerHTML = server_data;
}
function hideLabel()
{
document.getElementById('your_label_id').innerHTML ='';
}
</script>
This is my first time doing pagination with jQuery ajax.
I do it like this:
I include file 'GetAllMessages.php' into a div, only if i'm logged in.[works]
I include file 'GetMessages.php' again only if im logged in which tells me how many messages are in database.[works]
When I click on my 'messages' link I open a popup and I get my first four messages from 'GetAllMessages.php'.[works]
At the end of this div i have pages like [1,2,3...] and then with jquery $.ajax function (post method) i go again into 'GetAllMessages.php' but this time I tell the file which page I clicked so it gives me the messages I want next.[doesnt work]
It's like SESSION does not exsist, but if I add 'SESSION_START' at start in 'GetAllMesasages.php' it says its already started on my initial 'GetAllMessages.php' load, but when I click on page link[1,2,3...] the error goes away and it all works.
GetAllMessages.php
<?php
if(isset($_SESSION["uname"])){
include ('config.php');
include ('getMessages.php');
$pages=$messageCount/$messagesPerPage;
if(isset($_POST["page"])){
$page=$_POST["page"];
}else{
$page=1;
}
$startQuery=($page-1)*$messagesPerPage;
$getMessagesQuery = "SELECT * from messages ORDER BY id DESC LIMIT ".$startQuery.",".$messagesPerPage."";
$result = $conn->query($getMessagesQuery);
if($result->num_rows>0){
while($row=$result->fetch_assoc()){
$mId=$row["id"];
$mName=$row["name"];
$mEmail=$row["email"];
$mMessage=$row["message"];
$mDate=$row["messageDate"];
$mIsRead=$row["seen"];
$mIsAnswered=$row["answered"];
if($mIsRead==0){
$messageStatus="unread";
$markReadButton="<button class='button1'>Mark as read</button>";
}else if($mIsAnswered==1){
$markReadButton="";
$messageStatus="answered";
}else{
$markReadButton="";
$messageStatus="";
}
echo "
<div class='message ".$messageStatus."' data-messageid='".$mId."'>
<p class='date'>".$mDate."</p>
<p class='sender'>".$mName." - ".$mEmail."</p>
<p class='messageContent'>".$mMessage."</p>
<span class='buttons'>
<button class='reply'>Reply</button>
".$markReadButton."
</span>
</div>";
}
}
}else die();
?>
This ain't something not working but just I'm confusing about how to do it, I want to fetch the values from my DB based on users' preferences that been chosen earlier.
These are the steps will be taken for my process:
User will select from images (will add HTML images then will whip it upon another selection)
Will continue till reaching last stage
Last stage will have 3 Select (dropdown menus) and 2 of them will change the content according to what user's chooses (like country and state dd)
My PHP:
else if ($_POST["data_key"]=="last")
{
$final_arr;
$fetcher_theme = $_POST["themeid"];
$fetcher_category= $_POST["themecategory"];
$fetcher_product= $_POST["themeproduct"];
$fetcher_cover = $_POST["ctitle"];
$myquery="SELECT DISTINCT Layout.* FROM Layout,Products,Occasion, Cover, Theme
WHERE Layout.product=$fetcher_product
AND Layout.occasion=$fetcher_category
AND Layout.theme=$fetcher_theme
AND Layout.cover=$fetcher_cover;";
$results=$DB->fetchAll($myquery);
foreach ($results as $row) {
$row["current"]="size";
unset($row["pixfizzId"]);
$final_arr[]=$row;
}
echo json_encode($final_arr);
}
else if ($_POST["data_key"]=="size")
{
$final_arr;
$fetcher = $_POST["selected_id"];
$fetcher_theme = $_POST["themeid"];
$fetcher_category= $_POST["themecategory"];
$fetcher_product= $_POST["themeproduct"];
$fetcher_cover = $_POST["ctitle"];
$fetcher_size = $_POST["stitle"];
$myquery="SELECT DISTINCT Size.stitle FROM Layout,Products,Occasion, Size, Theme
WHERE Layout.product=$fetcher_product
AND Layout.occasion=$fetcher_category
AND Layout.theme=$fetcher_theme
AND Layout.size=$fetcher_size
AND Layout.size=Size.id";
$results=$DB->fetchAll($myquery);
foreach ($results as $row) {
$row["current"]="finishing";
unset($row["pixfizzId"]);
$final_arr[]=$row;
}
echo json_encode($final_arr);
}
else if ($_POST["data_key"]=="finishing")
{
$final_arr;
$fetcher = $_POST["selected_id"];
$fetcher_theme = $_POST["themeid"];
$fetcher_category= $_POST["themecategory"];
$fetcher_product= $_POST["themeproduct"];
$fetcher_cover = $_POST["ctitle"];
$fetcher_size = $_POST["stitle"];
$fetcher_finishing = $_POST["ftitle"];
$myquery="SELECT DISTINCT Finishing.ftitle FROM Layout,Products,Occasion, Size, Cover, finishing, Theme
WHERE Layout.product=$fetcher_product
AND Layout.occasion=$fetcher_category
AND Layout.theme=$fetcher_theme
AND Layout.size=$fetcher_size
AND Layout.cover=$fetcher_cover
AND Layout.finishing=$fetcher_finishing";
$results=$DB->fetchAll($myquery);
foreach ($results as $row) {
$row["current"]="finishing";
unset($row["pixfizzId"]);
$final_arr[]=$row;
}
echo json_encode($final_arr);
}}
My Engine JS (what I assign):
myItem.setId(jsonData[i].id);
myItem.setImg(jsonData[i].image);
myItem.setTitle(jsonData[i].title);
My Selects in JS (printing HTML):
myString +="<a>Sizes: </a><br><select id='sizesSelect' style=' width:200px'></select><br><br>";
myString +="<a>Cover: </a><br><select id='coverSelect' style=' width:200px'><br></select><br><br>";
myString +="<a>Finishing: </a><br><select id='finishingSelect' style=' width:200px'></select><br><br><br>";
Appending to Select in JS:
myString +="<script>$('#sizesSelect').append('<option val="+i+">"+this.getSize()+"</option>')</script>";
Now I need to know how can I post again to my PHP server to fetch the the values to other selects (refer for the img).
Select Size -> Update Covers -> Select Covers -> Update Finishing -> Select Finishing
Instead of using SQL to store and present previous user choices, you could keep the previous choices as $_POST data by re-adding the choises to the HTML Form as hidden input fields. Example: <input type="hidden" text="foo" name="<?=htmlspecialchars($_POST['foo'])?>">
I have the following line of code
$product_list="$product_list $id - $product_name - $date_added <a href='inventory_edit.php?pid=$id'>edit</a> • <a href='inventory_list.php?deleteid=$id'>delete</a><br/>"
and
if(isset($_GET['deleteid']))
{
echo 'Do you really want to delete this item with ID of '.$_GET['deleteid']. '? Yes | No';
exit();
}
How can I make it appear as a dialog box and do you think using a dialog box instead of going to the confirmation page will be a good option?
UPDATE
I tried the following but when ever deleteid gets set it creates another new delete link how can I make the existing delete link show the confirm box?
if(isset($_GET['deleteid']))
{
echo 'Delete';
}
UPDATED try
$product_list="$product_list $id - $product_name - $date_added <a href='inventory_edit.php?pid=$id'>edit</a> • <a href='inventory_list.php?deleteid=$_GET[deleteid]' onClick='return confirm(\'Do you want to delete?\');'>Delete</a><br/>"
Doesn't seem to be working.
<script>
var el = document.getElementById('deleteLink');
el.onclick = reallyDelete();
function reallyDelete(){
var verifyDelete = confirm("Really wanna delete?");
if (verifyDelete == false) {
e.preventDefault();
}
}
</script>
Then you'd of course have to add the ID (deleteLink) to the A link, and this will also only work if there is one link to "delete" otherwise you might need to use onClick, but I would recommend googling around for a tutorial on how to achieve the best solution for you.
(There is also still Bootstrap)
UPDATE
Replace
<a href='inventory_list.php?deleteid=$id'>delete</a>
with
Delete
And delete this:
if(isset($_GET['deleteid']))
{
echo 'Delete';
}