Hello I am new to javascript and jquery. I am trying to show the form when I choose "edit", however I cannot make it work. Any help/advise is appreciated.
php code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Manage Categories</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>Manage Categories</h1>
<h3>List of current categories: </h3>
<ul>
<table>
<?php
$counter = 0;
while($category = $categories->fetch_assoc()){
if($category['name'] === "+ New Category"){
continue;
}
?>
<tr>
<td>
<li>
<?php echo $category['name']?>
<a id="link<?php echo $counter ?>" href="manage_categories.php?type=edit&id=<?php echo $category['id'];?>">Edit</a>
Delete
</li>
</td>
</tr>
<div id="edit_form<?php echo $counter ?>">
<form action="manage_categories.php?type=edit&id=<?php echo $category['id'];?>" method="POST">
<tr id="abc">
<td>New category name:</td>
<td><input type="text" name="new_cat" /></td>
<td><input type="submit" name="submit" value="Change" /></td>
</tr>
</form>
</div>
<?php
$counter++;
}
?>
<form action="manage_categories.php?type=add" method="POST">
<tr>
<td>Add New Category</td>
</tr>
<tr>
<td>New category name: </td>
<td><input type="text" name="new_cat" /></td>
<td><input type="submit" name="submit" value="Add" /></td>
</tr>
</form>
</table>
</ul>
Return to journal homepage
</body>
</html>
js file:
$(document).ready(function () {
$("#edit_form1").hide();
$("#link1").on("click", function(){
alert("hello");
if($("#edit_form1").is(":visible")){
$("#edit_form1").hide();
} else {
$("#edit_form1").show();
}
});
$("#link2").on("click", function(){
alert("hello");
$("#edit_form2").hide();
});
});
The alert() function works but I just cannot hide/show the form (it is shown by default). The php script just returns a list of categories that I have in the database.
There is a error in your PHP code. At first fix that bug .
you have used while($category = $categories->fetch_assoc());
Here $categories is undefinded. Because you have not kept object of mysqli in $categories variable. Fix this
Related
I wanted to share with you my little attempt at code .. I basically have to make sure that once you press the button is created a folder (via mkdir and php) I do not want to be redirected to other php pages .. he simply has to create this folder, launch the alert and then he has to reappear as before ...
it's possible ?
<!DOCTYPE html>
<?php
function createDirectory()
{
$addettoSicurezza = $_POST["addettoSicurezza"];
date_default_timezone_set('Europe/Rome');
$date = date('Y-m-d');
chdir("../../../../../Archivio/Cantieri");
opendir(".");
mkdir("../../../../Archivio/Cantieri/".$date."_".$nomeCantiere);
echo "<script type='text/javascript'>alert('Done!');</script>";
}
?>
<html>
<head>
<title>Test</title>
</head>
<body>
<?php
if (!isset($_POST['submit'])) {
?>
<form action="" method="post">
<p>
<table>
<tr>
<td style=" border-style: none;"></td>
<td bgcolor="#CDECFD" style="font-weight: bold">2</td>
<td bgcolor="#CDECFD" style="font-weight: bold">Addetto sicurezza</td>
<td bgcolor="#CDECFD"><input type="text" style="width: 220px;" class="form-control" name="addettoSicurezza" id="addettoSicurezza" /></td>
<td colspan="2" bgcolor="#CDECFD">Mail</td>
<td bgcolor="#CDECFD"><input type="text" style="align:center;" class="form-control" style="width: 100%;" name="mailAffidataria" id="mailAffidataria" /></td>
<td bgcolor="#CDECFD"colspan="2"><input type="submit" name="submit" value="Crea directory" /> </td>
</tr>
</table>
</p>
</form>
<?php
}
else{
createDirectory();
}
?>
</body>
</html>
Change your 'createDirectory' function as follows
function createDirectory()
{
$addettoSicurezza = $_POST["addettoSicurezza"];
date_default_timezone_set('Europe/Rome');
$date = date('Y-m-d');
chdir("../../../../../Archivio/Cantieri"); mkdir($date."_".$addettoSicurezza);
echo "<script type='text/javascript'>alert('Done!');</script>";
}
I already fetched all values from database into table
foreach ( $result as $print ) {
?>
<form method="post">
<tr>
<td>Edit</td>
</tr>
<tr>
<div class="edit-box1">
<input id="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
}
And this is the jQuery code:
jQuery(document).ready(
function() {
jQuery("#edit-btn").click(function() {
jQuery("#idd").prop("readonly", false);
});
});
The problem is that I got 20 rows and my edit button just run on my first row.
How can I make my jQuery run on all rows ?
This will be your HTML
$cnt=0;
foreach ( $result as $print ) {
?>
<form method="post">
<tr>
<td><a href="#" class="edit-button" id='<?php echo $cnt;?>'>Edit</a></td>
</tr>
<tr>
<div class="edit-box1">
<input id="idd<?php echo $cnt;?>" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
<?php $cnt++; ?>
</div>
</tr>
</form>
}
This will be your jquery code
<script>
jQuery(document).ready(
function() {
jQuery(".edit-button").click(function() {
jQuery("#idd"+$(this).attr("id")).prop("readonly", false);
});
});
</script>
Hope this will work surely.
Id cannot be used more than once, use class instead, try this code:
<?php foreach($result as $print): ?>
<form method="post" class="form">
<tr>
<td>Edit</td>
</tr>
<tr>
<div class="edit-box1">
<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
<input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
<?php endforeach; ?>
<script>
jQuery(document).on('click','.edit-btn',function(){
jQuery(this).closest('.form').find('.idd').prop('readonly',false);
});
</script>
1 ) all id convert class
2) Use method removeAttr("readonly")
<tr>
<td>Edit</td>
</tr>
<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
And you can use $(".idd").removeAttr("readonly")
$(document).ready(function(){
$(".edit-btn").click(function(){
$(".idd").removeAttr("readonly");
$(".idd:first").focus();
})
})
Example :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<tr>
<td>Edit</td>
</tr>
<input type="text" class="idd" readonly>
<input type="text" class="idd" readonly>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".edit-btn").click(function(){
$(".idd").removeAttr("readonly");
$(".idd:first").focus();
})
})
</script>
</body>
</html>
I have a set of check boxes on one page and submit button with value="compare" is out of the form. I have written a jQuery for the button compare outside of the form. I am comparing a set of tables side by side. My code works fine in the same Page. I don't know how to display the result in another page. Anyone please help me.
<?php
require('db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comparision</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#compare_id").click( function(){
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
});
});
$(document).ready(function(){
$("#compare_id").click( function(){
$("input:checkbox:(:checked)").each(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
});
});
</script>
</head>
<body>
<input name="compare" id="compare_id" type="button" value="Compare" />
<form action="test.php" method="post" name="printers_comparision">
<p>
<label>
<input type="checkbox" name="p1" value="Printer1" id="CheckboxGroup1_0" />
Printer1</label>
<label>
<input type="checkbox" name="p2" value="Printer2" id="CheckboxGroup1_1" />
Printer2</label>
<label>
<input type="checkbox" name="p3" value="Printer3" id="CheckboxGroup1_2" />
Printer3</label>
<label>
<input type="checkbox" name="p4" value="Pritner4" id="CheckboxGroup1_3" />
Printer4</label>
<label>
</form>
<table width="1023" border="1">
<tr>
<td width="193"></td>
<td class="p1" width="113"><img src="images/im.png"/></td>
<td class="p2" width="67"><img src="images/im.png"/></td>
<td class="p3" width="67"><img src="images/im.png"/></td>
<td class="p4" width="67"><img src="images/im.png"/></td>
</tr>
<tr>
<td>Title</td>
<td class="p1" >Printer1</td>
<td class="p2" >Printer2</td>
<td class="p3" >Printer3</td>
<td class="p4" >Printer4</td>
</tr>
<tr>
<td>Manufacturer</td>
<td class="p1" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="1";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
<td class="p2" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="2";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
<td class="p3" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="3";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
<td class="p4" ><?php $query=mysql_query('select Manufacturer from printers where printers_id="4";');
while($row=mysql_fetch_array($query)) echo $row['Manufacturer'] ?></td>
</tr>
</body>
</table>
</table>
You can try out using SESSION variables or setting COOKIE in case you need to show data across pages
<html>
<head>
<script type="text/javascript">
function removeLink(i)
{
document.getElementById("tab2").deleteRow(i);
}
</script>
</head>
<body>
<form action="forth.php" method="post">
<table width="600" border="1" id="tab2">
<?php
foreach($_POST as $key => $post2)
{
?>
<tr>
<td>
<?php
echo $post2.'<br />';
?>
<input type="hidden" name="<?php echo $key;?>" value="<?php echo $post2;?>" />
</td>
<td>Remove</td>
</tr>
<?php
}
?>
<tr>
<td><input type="submit" value="Next" /></td>
<td> </td>
</tr>
</table>
</form>
</body>
guys you can see my anchor tag having onclick function of removeLink() but it does not delete the entire tr as expected. when im clicking the anchor generated link it does not perform any action. is there any issue like anchor not supporting inner objects define in removeLink(this.parentNode.parentNode.rowIndex) ? guys help how it can be done
Use Jquery. Include <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.deleteMe').click(function(){
$(this).parent().parent().remove();
//or u can hide that like $(this).parent().parent().hide.();
})
});
</script>
</head>
<body>
<form action="forth.php" method="post">
<table width="600" border="1" id="tab2">
<?php
foreach($_POST as $key => $post2)
{
?>
<tr>
<td>
<?php
echo $post2.'<br />';
?>
<input type="hidden" name="<?php echo $key;?>" value="<?php echo $post2;?>" />
</td>
<td>Remove</td>
</tr>
<?php
}
?>
<tr>
<td><input type="submit" value="Next" /></td>
<td> </td>
</tr>
</table>
</form>
</body>
first of change below code in your anchor onclick line.
onClick="removeLink(this);">
then try this.
<script type="text/javascript">
function removeLink(obj){
var par=obj.parentNode;
while(par.nodeName.toLowerCase()!='tr'){
par=par.parentNode;
}
i = par.rowIndex;
document.getElementById("tab2").deleteRow(i);
}
</script>
I'm new to Jquery or at least the more advanced features of Jquery. I've been trying to figure this out on and off for a few days now and I'm started to get myself flustered.
What I have is page we are using HTML readonly text boxes to display results. The text boxes are being populated by php through an sql search. However, for this example I've preset PHP Variables to get right to the issue.
I'm trying to populate the form fields in the dialog box based on the php variables. I've stripped down my testing code so hopefully its self-explantory. Here's the code for the main page:
<?php
$Test1 = 'Test';
$Test2 = 'TestTest';
$Test3 = 'TestTestTest';
$Test4 = 'TestTestTestTest';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$('#popout1 a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + '#formTest' )
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 400,
modal: true,
});
$link.click(function() {
$dialog.dialog('open');
$dialog.parent().appendTo($("#formTest"));
return false;
});
});
});
</script>
</head>
<body>
<div id="formTest">
<form name="formTest" id="formTest">
<table>
<th>Test</th>
<tr>
<td><label for="Test1">Test1:</label></td>
<td><input type="text" readonly="readonly" name="Test1" value="<?php echo $Test1?>" /></td>
</tr>
<tr>
<td><label for="Test2">Test2:</label></td>
<td><input type="text" readonly="readonly" name="Test2" value="<?php echo $Test2?>" /></td>
</tr>
<tr>
<td id="popout1">Click here for more data</td>
</tr>
</table>
</form>
</div>
</body>
</html>
And here's the code for the popout page:
<table>
<th>More Tests</th>
<tr>
<td><label for="Test3">Test3:</label></td>
<td><input type="text" readonly name="Test3" value="<?php echo $Test3 ?>" /></td>
</tr>
<tr>
<td><label for="Test4">Test4:</td>
<td><input type="text" readonly name="Test4" value="<?php echo $Test4 ?>" /></td>
</tr>
</table>
My question is how do I populate test3 and test4 text boxes on the popout page withe php variables declared on the main page.
Change the name attribute of your inputs to id.
<table>
<th>More Tests</th>
<tr>
<td><label for="Test3">Test3:</label></td>
<td><input type="text" readonly id="Test3" value="<?php echo $Test3 ?>" /></td>
</tr>
<tr>
<td><label for="Test4">Test4:</td>
<td><input type="text" readonly id="Test4" value="<?php echo $Test4 ?>" /></td>
</tr>
</table>
Then you can find them with jQuery.
$('#Test3').val('the new value');
$('#Test4').val('the other new value');
Edit: You'll need to persist the php values somewhere in the main page so they're available when the popout is displayed.