Confirm Deletion Dialog Box - javascript

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';
}

Related

$(this).attr('id') gives blank values in jQuery

I have a link as follows:
<a href="#" id="<?php $res['id'];?>" class='bid_accept'>Accept</a>
I need to pass the value of id to another page using Framework7 as follows:
$$('.bid_accept').on('click', function (e) {
e.preventDefault();
var value = $(this).attr('id');
var jsonstring = JSON.stringify(value);
myApp.confirm('Are you sure?', 'Custom Title',
function (jsonstring) {
myApp.alert('Your name is "' + value + '". You clicked Ok button');
},
function () {
myApp.alert('You clicked Cancel button');
}
);
});
I receive alerts as:
Your name is "". You clicked Ok button
I also tried:
var value = this.id;
Why am I not getting the id value?
If you use JSON.stringfy(value) it means you are setting that ID out of a JSON value, i do not know if i am write but the ID attribute takes a 1 word name and JSON.stringfy() produces multiple words separated by spaces. Let alone i think IDs have a specific number of characters so you might be intializing a very long name.
Not really sure what you want to achieve but HTML allows you to add attributes of your own and read them in JQuery like:
<a href="#" myAttr="<?php $res['id'];?>" class='bid_accept'>Accept</a>
such that when you click your code will be like:
$$('.bid_accept').on('click', function (e) {
var value = $(this).attr('myAttr');
....
}
This line has error
<a href="#" id="<?php $res['id'];?>" class='bid_accept'>Accept</a>
change it to
<a href="#" id="<?php echo $res['id'];?>" class='bid_accept'>Accept</a>
And in jquery part instead of $ you have to use $$.
var value = $$(this).attr('id'); // check $$ sign

jQuery popover buttons (php)

I have a a button to generate presentations. I generate 8 presentation with one click, and then I can edit each one by clicking on its name. There I have another, smaller form. I want to have also some button there, that will let me choose which fields I want to edit. This applies to "place" part - you can specify the place, if you want to. I have a button to show/hide fields connected to place edition.
<div>
<?=
Html::button(Yii::t('app', 'Add new place'), [
'id' => "add-different-place-btn",
'class' => 'btn btn-success',
])
?>
<?=
Html::button(Yii::t('app', 'Delete new place'), [
'id' => "delete-different-place-btn",
'class' => 'btn btn-success',
])
?>
</div>
<br />
<div id="place-hidden-different">
<div id="place-name-hidden">
<?= $form->field($place, "[{$index}]name")->textInput()->label(Yii::t('app', 'New place')) ?>
</div>
<div id="place-city-hidden">
<?= $form->field($place, "[{$index}]city")->textInput() ?>
</div>
<div id="place-street-hidden">
<?= $form->field($place, "[{$index}]street")->textInput() ?>
</div>
<div id="place-postcode-hidden">
<?= $form->field($place, "[{$index}]post_code")->textInput() ?>
</div>
</div>
Then, in my jQuery part I figured out something like this. Notice that I'm really new to jQuery, so it can be something really obvious :)
$('.btn-popover-link').on('click', function () {
$(document).ready(function () {
$('#place-hidden-different').hide();
$('#delete-different-place-btn').hide();
$('#add-different-place-btn').on('click', function () {
$('#place-hidden-different').show();
$('#add-different-place-btn').hide();
$('#delete-different-place-btn').show();
});
$('#delete-different-place-btn').on('click', function () {
$('#place-hidden-different').hide();
$('#add-different-place-btn').show();
$('#delete-different-place-btn').hide();
});
});
});
But, instead of getting what I want to, I get things like that:
It looks ok. But it doesn't work. Nothing happens on clicking "Dodaj nowe miejsce" (Add new place). Morover, in other presentation I get full variety of that form - example below. None of the buttons is working at all, in some popovers there are no buttons at all, in some just not working.
What can cause this situation?
If I get it well, you are using the same ID #add-different-place-btn for each of the 8 presentations button.
If this is right, the code is working as expected: IDs must be unique !
You should move to a class selector like you did with .btn-popover-link.
Also you should move $('.btn-popover-link').on('click', function () {}); inside the $(document).on("ready", function() { ... here ... });.
Even better with $(window).on("load", function() {}); but it depends on the kind of code you are running.

jQuery, Ajax, SQL Pagination, problems with SESSION

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();
?>

How To Fade Out Function With No Unique ID/Class

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();
})
});

How to use javascript to change content value?

I am currently developing a system which user can only view the name with the start character.
Below is the example :
When I click on the "A" link, the below table will show the name which start from "A" and will not shows the rest of the records.
I am trying to use href to pass operation to my php but it is not flexible to do so. Therefore, I looking for javascript to help me go through this. What I want to do is the page will not refresh and will direct change the content when I click on the A~Z link.
This is my HTML code :
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
This is my php page which execute data from table :
$rsa = array();
$sqladded = false;
$appliedfilter = array();
if($_REQUEST['op'] = ''){
$record = 'A';
}
else{
$record = $_REQUEST['op'];
}
$stmt = $getuser->getuser($record);
if ($rs = $db->Execute($stmt))
{
$arrResult = array();
while($rsa = $rs->FetchRow())
{
array_push($arrResult, array(
"name" => $rsa['name'],
"mobile_no" => $rsa['mobile_no'],
"email" => $rsa['email'],
"address" => $rsa['address'],
"current_professional" => $rsa['current_professional'],
"others" => $rsa['others']
));
}
$tpl->display("alumni-listing.html");
}
And this is my SQL statement :
function getuser($record)
{
global $db;
$arrResult = array();
$stmt = "SELECT * FROM "._CONST_TBL_ALUMNI." WHERE name LIKE ".$record."%";
if($rs = $db->Execute($stmt))
{
$arrResult = $rs->GetArray();
}
return $arrResult;
}
Hope someone can help me.
Thanks in advanced.
Anyhow you have to use the calls to the PHP page.
If not then you can make a the 1st call load all data (A-Z) and then display the connects with just a click. But then your 1st call would be big and it will take time to load if data is greater.
You can use Ajax calls.
Structure your HTML as this way.
<li><a href="#" class='ajaxCaller>A</a></li>
<li><a href="#" class='ajaxCaller>B</a></li>
<li><a href="#" class='ajaxCaller>C</a></li>
<li><a href="#" class='ajaxCaller>D</a></li>
<li><a href="#" class='ajaxCaller>E</a></li>
<li><a href="#" class='ajaxCaller>F</a></li>
The Ajax calls should be
$('a.ajaxCaller').click(function(event){
event.preventDefault();
var x=$(this).text();
$.ajax({
url: "alumni-listing.php",
data: {op:x}
}).done(function() {
// You can have your code to set the returned page, to the specific div.
});
});
I have made lots of project like the one you ask. Learning to use jQuery a javascript framework would be the best solution to solve the task. jQuery made ajax process very simple using jQuery.post().
So the way I see it, your problem boils down to dynamically querying the database on a Dom-event (i.e, through javascript) and not navigating to a different page. Which is lucky, because AJAX was developed pretty much for this - smaller 'refreshes'.
Use JS to trigger a php request, and parse the return
Check out jQuery's Post. I am sure it can be accomplished without, so please edit the question if jQuery is a no-no. If you change your php page to just echo a JSON of the result, and call if from JS, you can parse the JSON and display it in the html page.
HTML
<li><a class="listing-filter" href="alumni-listing.php?op=a">A</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=b">B</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=c">C</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=d">D</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=e">E</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=f">F</a></li>
Javascript
$('.listing-filter').click(function (e) {
var $filter = $(e.currenttarget),
filterValue = $filter.html();
RefreshPageWithData(filterValue);
});
function RefreshPageWithData( filterBy ) {
var data = {
op: filterBy,
};
$.post(pathname-on-server.php, data, function (response) {
//Parse the response
var results = JSON.parse(response);
//Construct the DOM
var newHtml;
//Append it to existing element
$('#container').html(newHtml);
});
Please note that anything you echo in the php page is the response passed back to the JS callback. So, a simple idea might be to echo json_encode($arrResult). I suggest having one index.php that serves the file as you do above, and another that does similar tasks but echoes the retrieved data. This avoids a double-server request for the homepage.

Categories