I'm doing Inventory tracking system, and I want there is an alert say "Are you sure?" when the delete button is pressed. It work when you press delete, but the alert not showing up.
This is my code:
<html>
<head>
<title>View Records</title>
</head>
<body>
<p><a href="Search_Vendor.php"><img src="img/SEARCH2.jpg" width="25"
height="27" align='left'></a></p>
<div class="dropdown"><img class="dropbtn" img src="img/dropdown.png"
width="44" height="47"></img>
<div class="dropdown-content">
HOMEPAGE
ADD NEW RECORD
PRINT
</div>
</div>
<center> <h2> VENDOR RECORD </h2> </center>
<?php
// connect to the database
include('connection.php');
// get results from database
$result = mysql_query("SELECT * FROM vendor")
or die(mysql_error());
// display data in table
echo "<table border='1' cellpadding='20' cellspacing='0' align ='center'";
echo "<tr> <th>Vendor ID</th> <th>Vendor Name</th> <th>Contact No </th>
<th>Address</th> <th></th> <th></th></tr>";
// loop through results of database query, displaying them in the table
while($row = mysql_fetch_array( $result )) {
// echo out the contents of each row into a table
echo "<tr>
<td align = center>".$row['Vendor_ID']."</th>
<td align = center>".$row['Vendor_Name']."</th>
<td align = center>".$row['Contact_No']."</th>
<td align = center>".$row['Address']."</th>
<td><a href='Update_Vendor.php?ID=$row[ID]
&Vendor_ID=$row[Vendor_ID]
&Vendor_Name=$row[Vendor_Name]
&Contact_No=$row[Contact_No]
&Address=$row[Address]'>Update</a></td>
<td>
<a onclick="return confirm('Are you sure?')"
href="Delete_Vendor.php?ID=<?= $row[ID] ?>">Delete</a>
</td>
</tr>";
}
//close the table
echo "</table>";
?>
</p>
</body>
</html>
Thanks for your help.
Regards
Since you're using a link for you clicked element, it's likely that it is trying to actually open the link address before your code can run. Use e.preventDefault(); with and event handler like below to avoid that behaviour:
See this jsFiddle
<a class="delete" href="Delete_Vendor.php?ID=123">Delete</a>
$(function() {
$('.delete').click(function(e) {
var $this=$(this);
e.preventDefault();
if (confirm('Are you sure?')) {
// code to delete stuff
window.location=$this.attr('href');
}
});
});
I found this example on the net... http://www.w3schools.com/jsref/met_win_confirm.asp
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Related
I have added a button at the end of the row of my datatable intended to update the information in the database for the specific row chosen.
When I click the update button, a form pops us with the relevant fields to update.
Ideally, I would like the form to be autopopulated with the information from the table row which I have chosen to update
Code...
Table:
<div class="viewalljob tab-pane show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h2>Edit Job Table</h2>
<table id="edit-job-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th class="job_id">ID</th>
<th class="job_date">Date</th>
<th class="job_company">Company Name</th>
<th class="job_contact">Contact</th>
<th class="job_from">From</th>
<th class="job_to">To</th>
<th class="job_driver nowrap">Driver</th>
<th class="job_income">Income (£)</th>
<th class="job_payment">Payment (£)</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<!--Fetch from Database-->
<!--Connect To Database-->
<?php
$host_name = 'xxx';
$database = 'xxx';
$user_name = 'xxx';
$password = 'xxx';
$conn = mysqli_connect($host_name, $user_name, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT *,AS markup
FROM `table`
GROUP BY id";
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
// output data of each row
while($result = mysqli_fetch_assoc($query)) {
echo "<tr>
<td class='job_id'>".$result['id']."</td>
<td class='job_date'>".$result['adddate']."</td>
<td class='job_company'>".$result['customer']."</td>
<td class='job_contact'>".$result['addcontact']."</td>
<td class='nowrap job_from'>".$result['addfrom']."</td>
<td class='nowrap job_to'>".$result['addto']."</td>
<td class='nowrap job_driver'>".$result['adddriver']."</td>
<td class='currency job_income'>".$result['addincome']."</td>
<td class='currency job_payment'>".$result['addpayment']."</td>
<td><button type='button' name='update' id=".$result['id']." class='btn btn-warning btn-xs update updatebtn'>Update</button></td>
<td><button type='button' name='delete' id=".$result['id']." class='btn btn-danger btn-xs delete deletebtn'>Delete</button></td>
</tr>";
}
} else {
echo "0 results";
}
mysqli_close($conn);
?>
</tbody>
</table>
</div>
<div id="contactForm3">
<h1>Edit Job</h1>
<form id="dataForm" name="dataform" method="POST" action="/">
/**** FORM DATA ****/
</form>
</div>
JS to open form:
$(function() {
// contact form animations
$('.update').click(function() {
$('#contactForm3').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#contactForm3");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
});
I have added the update button using <td><button type='button' name='update' id=".$result['id']." class='btn btn-warning btn-xs update updatebtn'>Update</button></td> I have given the id=".$result['id']." hoping that I can use this to populate the form from the ID
I am assuming that I will need to connect to the database table, something like:
<form>
<?php
//Connect to Database ... //
$sql = SELECT * FROM `table`
WHERE ID = ???
$query = mysqli_query($conn, $sql);
if (mysqli_num_rows($query) > 0) {
// output data of each row
while($result = mysqli_fetch_assoc($query)) {
echo "<span>
<label> label1 </label>
<input value = ".$result['column'].">
</span>";
}
} else {
echo "0 results";
}
mysqli_close($conn);
?>
Im hoping that this is correct and someone can help me do this?
Actually you can acheive this using javascript/jquery, get row element from table displayed, from which you can get every columns/inputs value like as below:
$('.updatebtn').on('click', function(e) {
e.preventDefault();
var row = $(this).closest('tr'); //get table row from displayed table.
var form = $('#contactForm3').fimd('form'); //form to be populate.
//make sure your form input field with same name as the column name.
//now create form_data object with key as same name as column/input name .
var form_data = { 'id' : row.find('.job_id').value(),
'adddate' : row.find('.job_date').value(),
.....
'addpayment' : row.find('.job_payment').value()
}
//Apply loop to populate values in form.
$.each(form_data, function(key, value){
form.find('input[name="'+ key +'"]').val(value);
});
});
Then on form submit update database record/row using PHP (hope you know that well, if not let me know I will update my code).
I have radio button in a PHP while-loop.
I am storing the first row value in the value of radio button.
I need to pass the value of radio button in HTML a href.
How to pass that value with both PHP and HTML in same page??
My code:
index.php
<html>
<body>
<img src="images/print_label.png" name="Image3" width="152" height="110" border="0" align="top" style="margin-top:10px">
<?php
include "db.php";
require_once "purna_insert_orders_to_ship.php";
if(isset($_POST['submit']))
{
if($_POST['value'] == 'readytoship') {
// query to get all Fitzgerald records
$query = "SELECT * FROM orders WHERE status='readytoship'";
}
elseif($_POST['value'] == 'readytodispatch') {
// query to get all Herring records
$query = "SELECT * FROM orders WHERE status='readytodispatch'";
} else {
// query to get all records
$query = "SELECT * FROM orders";
}
$sql = mysql_query($query);
$num_rows = mysql_num_rows($sql);
if($num_rows >= 1)
{
echo "<div id='showmenu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400' height='30'>
<tr class='tr_class' bgcolor='white'>
<td align='center' style='font-weight:bold'> Select </td>
<td align='center' style='font-weight:bold'> Po Id </td>
<td align='center' style='font-weight:bold'> Customer Name </td>
<td align='center' style='font-weight:bold'> quantity </td>
<td align='center' style='font-weight:bold'> price </td>
<td align='center' style='font-weight:bold'> status </td>
</tr>";
while($row = mysql_fetch_array($sql))
{
echo "<tr height='20' data-order_id='".$row['po_id']."'>
<td align='center'><input type='radio' class='case' name='radio' value='".$row['po_id']."'></td>
<td align='center'>".$row['po_id']."</td>
<td align='center'>".$row['customer_name']."</td>
<td align='center'>".$row['quantity']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['status']."</td>
";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
}
?>
</body>
</html>
Can anyone please help me out??
To use the value in an anchor tag, you would need to invoke the GET method as follows:
Click here
But, since it is in a radio button, you might want to consider using an HTML form with submit button rather than an anchor tag.
If you want to call that value in html ahref then you should need some jquery too
First you should echo some value in your radio button
<input type="radio" name="buttonval" id="smallBtn" value="yourvalue"/>
Then in the change even of the radio button, You shall fire the event
<script type="text/javascript">
$(document).ready(function()
{
$("input[name=buttonval]").on('change', function(){
var $postID = $('input:radio[name=buttonval]:checked').val();
$postID = "="+$postID;
});
$.ajax ({
type: "GET",
url: "localhost/ajax/buttonvaluereceiver.php",
data: {"postID" : $postID }
});
});
</script>
and in the success event of the ajax call you will get the result of what buttonvaluereceiver.php file does
Update :
As you need to do instantly in radio button change I am updating my answer for you
Here is the html and script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name='frm' id='frm'>
<input type='radio' id='test' value='rad' name='rad'>
</form>
Your link :
<div id='link'></div>
<script>
$("input").change(function(){
var data = $("#frm").serialize();
Call();
});
function Call()
{
$.ajax({
type: "POST",
url : "result.php",
data : $("#frm").serialize(),
success : function(data)
{
console.log(data);
$("#link").html(data);
}
},"json");
}
</script>
Here is the php that creates your link
<?php
echo "<a href='url.php?id".$_POST['rad']."'>Click here</a>";
?>
You can change the url and values according to your need.
first I want to say that this question is related to jquery replacewith to get data with Ajax after click on a cell and if this against the rule I am sorry and delete this post.
I tried to get the value of a cell in a MySQL-generated table (with fetch_array). I want to click on a cell in the same and receive the value of the first cell in the row in a div-container.
Thanks to several entries here I found an example for "static" tables. Like this:
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td class="use-address">
Use
</td>
</tr>
<tr>
<td id="chip" class="nr">49</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address">Use</button>
</td>
</tr>
</tbody>
</table>
<br><br>
<div id="glasgow">Hello</div>
and
$("#chip").click(function () {
var scotland = $(this).closest("tr").find(".nr").text();
$("#glasgow").html(scotland);
});
http://jsfiddle.net/FnDvL/231/
Works fine. I insert this to my file, php, and get table data from mysql.
This is my code:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?
$con = mysqli_connect('localhost','root','','boerse');
$sql="SELECT short, name FROM markets";
$result = mysqli_query($con,$sql);
?>
<div class="markets">
<?
echo "<table>
<thead border='0'>
<tr>
<th>Index</th>
<th>Name</th>
</tr>
</thead>
<tbody border='1'>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td class='nr'>" . $row['short'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td class='information'>Use</td>";
echo "</tr>";
}
echo "</tbody></table>";
?>
<div class="clicked_info">Hello</div>
</div>
<br><br>
</body>
</html>
Now my problem is that I can click on the td with class information, but div class 'clicked_info' doesn't change. But I did like in the fiddle. So what went wrong? Or where is the problem? It must have to do with the MySQL-matter. But why?
This way I want to check if I got the content from the cell and I can continue working with it (as seen in my post before).
Maybe anyone can help. And again I am sorry if I break rules here.
Thank you to everyone.
You need to wrap your code in document-ready handler
$(document).ready(function () {
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
});
Currently when your script executes there is no $(".information") thus event is not binded properly.
OR
Move your script at the bottom of your page. like
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
</body>
OR
You can use event-delegation
$(document).on("click", ".information",function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
Am just trying to show all the list in the pagination. am using datatable plugin's pagination on my file, pagination is working fine, in the list i have an image that have a function delete on click. in my pagination 1'st five records is shown . and the other five records shown on click next, delete function working properly on 1'st five record when i click on next than delete function stop it's working .
my code:-
<script>
var conf = jQuery.noConflict();
conf(document).ready(function(){
conf(".delete").on( "click", function() {
alert('adfasdfasd');
//alert(conf(this).attr("id"));
custid = conf(this).attr("id");
var r=confirm("Are you sure");
if (r==true)
{
var url = "<?php echo Mage::getBaseUrl();?>turnkey/index/deleteuser/";
conf.ajax({
type:"POST",
url:url,
data: { 'custid':custid},
success: function(msz){
alert(msz);
if(msz=="deleted") {
conf("#hidepro"+custid).hide("slow");
}
else {
//conf("#hidepro"+proid).hide();
alert("product cant be deleted");
}
//console.log("chal hun");
}
});
}
else
{
return false ;
}
});
});
</script>
and the pagination code is :-
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
<div id="container">
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Factory</th>
<th></th>
<th>Contact</th>
<th>URL</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<?php
foreach( $custemail as $custemail1 ) {
$customer = Mage::getModel("customer/customer");
$customer->setWebsiteId(Mage::app()->getWebsite()->getId());
$customer->loadByEmail($custemail1); //load customer by email id ?>
<tr class="odd gradeX" style=" border-bottom: 1px solid #FF0000;" id = "hidepro<?php echo $customer['entity_id'] ?>">
<td class="bodyText style4" ><a style=" color: #CC3300;float: left;margin-top: 42px !important;text-decoration: underline;" href="<?php echo Mage::getBaseUrl();?>turnkey/index/listuser?id=<?php echo $customer->getEntity_id();?>"><?php echo $customer->getFactory();?></a> </td>
<td class="bodyText style4">
<a href="<?php echo Mage::getBaseUrl();?>turnkey/index/listuser?id=<?php echo $customer->getEntity_id();?>">
<img style=" width:100px;height:100px;margin-bottom:5px ;" src = "http://lab.ghrix.com/turn-key-mart/media/<?php echo $customer->getUserImage();?>"></a>
</td>
<td class="bodyText style4" style="padding-top: 10px;">
<?php echo $customer->getFirstname();?><?php //echo $customer->getUser_address();?><br><?php echo $customer->getmobile();?><br><?php echo $customer->getEmail();?></td>
<td class="bodyText style4" style="float: left;margin-top: 42px !important;" >
<a target="_blank" style="color:#005580;" href="<?php echo $customer->getWebsite();?>"><?php echo $customer->getWebsite();?></a></td>
<td class="bodyText style4"><div style= "cursor:pointer;" class = "delete" id = "<?php echo $customer['entity_id'] ?>"><img width="60px" src="<?php echo $this->getSkinUrl('images/trash.jpg'); ?>"</div></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
please suggest where mistake is happen.
Without a live example, I can't be sure, but try this:
replace
conf(".delete").on("click", function() ...
with:
conf(document).on("click", ".delete", function() ...
The reason is that conf(".delete") only attaches to elements available at the time the function is run. It might be that your dataTable plugin runs first, removes the extra elements, then the delete binder is run and only works on the first 5. The second method binds to the document, and checks each click to see if it matches the .delete selector. This used to be known as jQuery.live()
I want the user to be able to add a question from a table row into a textarea. The textarea the question goes into depends on the ".plus" button the user selected to choose their question.
E.g. If the user clicked on the plus button on the top of the page, then the question when the user clicks on the "Add" button goes into the textarea on top of the page.
Another E.g. If the user clicked on the plus button in the 5th table row, the question when the user clicks on the "Add" button goes into the textarea within that row (5th row).
The problem I am having though is that when the user clicks on the "Add" button, nothing happens. It is suppose to close the modal window and insert the question into the correct textarea but nothing is happening. It is not closing the modal window and it is not inserting a question into a textarea.
What am I doing wrong?
Below is the code for the application:
<head>
<script type="text/javascript">
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");
$('.questionTextArea').each(function () {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name', $this.attr('name') + "[]").attr('value', $this.val());
$question.append($questionText);
});
$('.plusimage').each(function () {
var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name', $this.attr('name') + "[]").attr('value', $this.val());
$plusrow.append($plusimagerow);
});
$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr);
form.questionText.value = "";
$('.questionTextArea').val('');
}
function plusbutton() {
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
function closewindow() {
$.modal.close();
return false;
}
$(document).on('click', '.add', function () {
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if ($('.activePlusRow').length > 0) {
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
$.modal.close();
return true;
});
$(document).on('click', '.plusrow', function () {
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
</script>
</head>
<body>
<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<div id="detailsBlock">
<table id="question">
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea class="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
</td>
</tr>
</table>
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look
<br/>up Previous Questions)</span>
</th>
</tr>
</table>
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question"
onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="plusrow"></th>
<th class="question">Question</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</body>
The details stored in the modal window comes from a seperate script known as "previousquestions.php", Below is the code where it shows the result of the "QuestionContent" field only displayed and it's "Add" button after the user has compiled a search:
<?php
$output = "";
$output .= "
<table border='1' id='resulttbl'>
<tr>
<th id='questionth'>Question</th>
</tr>
";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<tr>
<td id='questiontd'>{$questionrow['QuestionContent']}</td>
<td id='addtd'><button type='button' class='add'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
}
}
?>
Thank you
var $questionText = $("<textarea class='textAreaQuestion'></textarea>")
.attr('name',$this.attr('name')+"[]")
.val($this.val()); // .val() for set value to textarea