remain the value of input after hide - javascript

I have an edit function where their is a function that has hide/show if i click edit. My problem is how can i remain the value of row if im going to hide it?
for example i have this dialog
and decided to edit sample 1(first row)
and then i decided i realize that i dont want to edit sample 1 then close it (by clicking edit again) then i want to edit sample 5 but i got this error
here is my script
//show and hide update button checker
function update_contain(){
var row = jQuery(".beneficiaries_rows input[type='text']:visible").length;
if(row > 0){
jQuery('.ui-dialog-buttonpane button:contains("Update")').button().show();
}else{
jQuery('.ui-dialog-buttonpane button:contains("Update")').button().hide();
}
}
//beneficiaries edit
jQuery(".edit_beneficiaries").click(function(){
var row = jQuery(this).closest(".beneficiaries_rows");
var show = row.find(".hide");
var hide = row.find(".show");
if(jQuery(show).is(":visible")){
jQuery(show).css({"display":"none"});
jQuery(hide).css({"display":"inline-block"});
}else{
jQuery(hide).css({"display":"none"});
jQuery(show).css({"display":"inline-block"});
}
update_contain();
});
HTML
<table style="border: 2px solid black;margin:auto;">
<tr>
<th style="width:145px;"><center>Name<center></th>
<th><center>Action</center></th>
</tr>
<?php
while($row1 = mysql_fetch_array($result1)){
echo "<tr class='beneficiaries_rows' id='".$row1['id']."' data-id='".$row1['ben_id']."'>";
echo "<td><input class='hide' type='text' name='bename_update' value='".$row1['name']."'></div>";
echo "<div class='show'>".$row1['name']."</td>";
echo "<td>";
echo "<center><button class='del_beneficiaries'>X</button><button class='edit_beneficiaries'>Edit</button></center>";
echo "</td>";
echo "</tr>";
}
?>
</table>
P.S im not good in english thats why im posting a picture to elaborate
my question

You'll want to set the text inside your label with something like this
jQuery("[selector for your label]").html(jQuery("[selector for input]").val());
I suggest doing this on click, just before you hide the input.
edit; since you're not really following:
jQuery(".edit_beneficiaries").click(function(){
var row_display = jQuery(this).parents("tr").find(".show");
var row_edit = jQuery(this).parents("tr").find(".hide");
jQuery(row_display).html(jQuery(row_edit).val());
});

Related

HTML form select to drive PHP/SQLSRV results

I'm working on a very basic web page to facilitate data entry. I have it working with PHP talking to SQL Server to both enter and display data. At the simplest level, they'll select a store from a dropdown and enter some data, then hit submit.
I'm trying to dynamically display the last 7 days worth of data when their store is chosen from the form select input. How do I get the Select value to drive the SQL query? I found how to use onchange to fire a javascript function, which I can alert the value. Do I really need to then use jquery or AJAX to link that back to the PHP select query or is there a simpler way to approach this?
I'm trying to learn this all from scratch and am quite admittedly out of my element. Here are some snippets of what I've got:
...
<script>
function OnSelectChange(obj)
{
alert(obj.options[obj.selectedIndex].value);
}
</script>
...
<td align="right">Store</td><td width="125"><select style="width:100%" name="store" onchange="OnSelectChange(this)">
...
<?php
$tsql = "select * from test where DateStamp >= getdate()-7";
$stmt = sqlsrv_query($conn, $tsql);
//generate table view of data
echo "<table>";
echo "<tr><td>Store ID</td><td>Date</td><td>Data</td></tr>";
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC))
{
$StoreID = $row['StoreID'];
$DateStamp = $row['DateStamp'];
$Donations = $row['Data'];
echo "<tr><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
}
echo "</table>";
?>
I've found a lot of helpful information to get me this far, but am stuck now.
Thank you in advance.
Got it! For anyone else looking, here are relevant snippets of code:
<style>
.hideable {
visibility: collapse;
}
</style>
...
<script language="JavaScript">
function OnSelectChange(cl)
{
var els = document.getElementsByClassName('hideable');
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'collapse';
};
var els = document.getElementsByClassName(cl);
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'visible';
};
}
</script>
...
<select style="width:100%" name="store" onchange="OnSelectChange(this.value)">
...
echo "<tr class='hideable ".$StoreID."'><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
Leveraging dual classes upon the table (tr) creation and the collapse CSS style property was key.

Error JavaScrit code trying to live search a paginated table

I am trying to find one particular name and position, for someone listed in a paginated table with a webpage search bar. The code below is very simple league system. The data is ordered by profit desc. The position is calculated using row number and is then paginated.
So for example Page 1 will have the first 31 records, numbered 1-31, with the highest profit at position 1 next 2 and so on. Page 1 is labelled league 1. The next 31 records become league 2 again with the top profit in league 2 becoming position 1 ect.
Everything works fine apart from my search bar. What I am trying to do is enter a name in the search bar to find what league that person is in and what their position is. Ideally, the search result should show the page which the person is listed and somehow highlight that person. At the moment I am stuck on finding the name. The JavaScript at the bottom of the code, I thought should find the name and hide the rest but it does not. It works fine when using it on a basic hand coded html table. I would be grateful for any thoughts in pointing me in the right direction.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Sales League</title>
</head>
<body>
<?php
$con = mysqli_connect("localhost", "root","","salesleague");
$rpp = 31;
isset($_GET['page']) ? $page = $_GET['page'] : $page = 1;
if($page > 1){
$start = ($page * $rpp) - $rpp;
}else{
$start = 0;
}
$resultSet = $con->query("SELECT id from salesleague_march");
$numRows = $resultSet->num_rows;
if($resultSet->num_rows > 0){
$rowNumber=0;}
$totalPages = $numRows / $rpp;
$resultSet = $con->query("SELECT * FROM salesleague_march ORDER by Profit desc LIMIT $start, $rpp");
echo "<h1>Sales League $page </h1>" ;
echo "<table id='tabl1' border 1px >
<tr>
<th>Position</th>
<th>Name</th>
<th>Branch</th>
<th>Units</th>
<th>Profit</th>
</tr>";
while($rows = $resultSet->fetch_assoc()){
$rowNumber++;
$name = $rows['Name'];
$branch = $rows['Branch'];
$units = $rows['Units'];
$profit = number_format($rows['Profit']);
echo "<tr><td>$rowNumber</td><td>$name</td><td>$branch</td><td>$units</td><td>£ $profit</td></tr>";
}
echo "</table><p />";
for($x = 1; $x <= $totalPages + 1; $x++){
echo "<a href='?page=$x'>$x</a> ";
}
?>
<input type="text" id="Namesearch" placeholder="Salesperson Search"></input>
<script>
$("#Namesearch") .on("keyup", function()
{
var value=$(this) .val();
$ ("table tr") .each(function(records)
{
if(records !==0)
{
var id=$ (this) .find ("td:first") .text();
if(id.indexOf(value)!==0 && id.toLocaleLowerCase().indexOf(value.toLocaleLowerCase())<0)
{
$ (this) .hide();
}
else
{
$(this) .show ();
}
}
});
});
</script>
</body>
</html>

Duplication of rows in Javascript Table

I am quite new to javascript and for some time now i cant figure a solution to a problem that i have on my own. The web application i am building is using javavascript and Firebase. I am creating a table that pulls some data from mysql and display them as a table in my website. The table consists of three columns ID,NAME, AND SURNAME.Along with that i am also creating a new column called Recipient that consists of buttons. The table looks like this:
I give a different value to each of the buttons, the value of each button is the number of the ID that is in the same row as the current button. For example the first button has a value = 2, the 3rd a value = 123. Al the buttons have an id = contact
The source code of the table is
$con = mysql_connect("localhost","root",'');
if(!$con){
die("Cannot Connect" . mysql_error());
}
mysql_select_db("client_app",$con);
$get_user_clients = "SELECT `ID`,`Name`,`SurName`,`storagefolder` FROM `clients` ";
$clients = mysql_query($get_user_clients,$con);
echo "<table class=table table-condensed>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>SurName</th>
<th>Recipient</th>
</tr>
</thead>";
while($record = mysql_fetch_array($clients)){
echo "<action=usersfiles.php method=post>";
echo "<tr>";
echo "<td>".$record['ID']." </td>";
echo "<td>".$record['Name']." </td>";
echo "<td>".$record['SurName']." </td>";
echo "<td>"."<button value=".$record['ID']." id=contact>Folder Data</button>"." </td>";
echo "</tr>";
echo "</form>";
}
echo "</table>";
When i click on a button from the table the application get the value of the corresponding button and store it in a variable, then it sends the variable to a function that will drug all the files from firebase database that are store in the folder with the same name as the variable, And then it will display them.
My firebase Database
So for example when I click on the button of the first column I will get the files that are stored in the folder with name 2 form firebase.database. The result of after I click the first button will be this:
My source code works fines as it gets the files from the corresponding folders from firebase.database. The problem that i have is when i dont refresh the page and i click a button again then the outpout will be the result of the previous button click plus the new one. For example if i dont refresh my page and i click the second button to get the files from the file from database with the name = 3 the outpout will be :
The outpout is a merging of all the results that i have oupouted so far. If i refresh my page and click on the second button now i will get the result i want which it is:
How can i edit my source code so the tables wont merge?
My source code is the follwing:
Source code of saving the value after button is clicked and passsing it to function:
var contactName; //prepare var to save contact name/ PLACE outside document ready
$(function() {
// contact form animations
$('button[id="contact"]').click(function() {
contactName = $(this).val(); //set var contactName to value of the pressed button
store(contactName);
$('#contactForm').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#contactForm");
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();
}
});
});
Source code of function receiving the value and displays the corresponding file from firebase database:
function store(value){
var tblUsers = document.getElementById('tbl_users_list');
var databaseRef = firebase.database().ref().child(`files/${value}/`);
var rowIndex = 1;
databaseRef.once('value',function(snapshot){
snapshot.forEach(function(childsnapshot) {
var childKey = childsnapshot.key;
var childData = childsnapshot.val();
//var urls = childData.url;
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var button = row.insertCell(2);
var itd = document.createElement('input');
itd.setAttribute("type","button");
itd.setAttribute("value","View");
itd.onclick=function () {
window.open(childData.url);
};
cellId.appendChild(document.createTextNode(childData.filename));
cellName.appendChild(document.createTextNode(childData.created));
button.appendChild(itd);
rowIndex = rowIndex+1;
//document.write(username);
})
});
}
Thanks in Regards
You only append data to the existing table, without ever removing existing rows in the table:
var row = tblUsers.insertRow(rowIndex);
You should make sure to remove all existing rows before adding the new one(s):
for (var i = tblUsers.rows.length; i >= 0; i--) {
tblUsers.deleteRow(i - 1);
}

Text not marking up

I am writing a page which allows a tournament director (TD) to add players to an event. When the TD goes to search for a player I want the search results to appear on keyup below the search input (without needing to refresh the page).
At this stage I have 2 php pages and 1 js page and have the live search happening, but the output is not getting marked up. I have written a piece of code to convert a PHP $_SESSION[''] array to a javascript array, but my brain is frying and I'm not sure where to go from here.
I effectively want the processed version of this code as output (presuming the SQL returns only 1 player named John Smith)
<tr></td> 123 </td><td> John Smith </td></tr>
My main php page has:
<table border='1px'>
<tr><th colspan='6'> <?php echo ($eName . " - " . $vn); ?></th></tr>
<tr><th>Player ID</th>
<th>Player Name</th>
<th>Place</th>
<th>Points</th>
<th>Cash</th>
<th>Ticket?</th></tr>
<tr><td colspan='3'>Search <input type='text' id='newsearch'</input>
</table>
<br>
<div id="newsearch-data"> </div>
<script>
var players = [];
</script>
<?php
//Makes php array into js array
foreach ($_SESSION['players'] as $id){
echo "<script> players.push('" . $id . "') </script>";
}
?>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>
<script src="global.js"> </script>
js page:
$('input#newsearch').on('keyup', function(){
var newsearch = $('input#newsearch').val();
if ($.trim(newsearch)!= "") {
$.post('newsearch.php', {newsearch: newsearch}, function(data) {
$('div#newsearch-data').text(data);
});
}
});
And 2nd php page
<?php
session_start();
unset($_SESSION['players']);
if (isset($_POST['newsearch']) === true && empty($_POST['newsearch'] === false)){
require 'dbconnect.php';
$term = $_POST['newsearch'];
$terms = "%" . $term . "%";
$_SESSION['players'] = array();
$query = ("SELECT * FROM players WHERE Username LIKE '$terms'");
$run_query = mysqli_query($dbcon, $query);
while ($dbsearch = mysqli_fetch_assoc($run_query))
{
array_push ($_SESSION['players'],$dbsearch['PlayerID']);
echo "<tr><td>" . $dbsearch['PlayerID'] . "</tr></td>";
}}?
How can I output a new row on a html table rather than raw html code?
replace $('div#newsearch-data').text(data);
with $('div#newsearch-data').html(data);
$.text() escapes the input string and you should use it when you know the input is a string, and that you want to preset it "as is". If the input includes actual HTML that you want to inject into the DOM, $.html() is your friend :-)
You need .html() to render output as a HTML rather than .text(), because .text() will output the result as a raw data, then try this solution instead :
$('div#newsearch-data').html(data);
Live example - credited to #Peter Bailey for live example.
References
http://api.jquery.com/html/ - .html()
http://api.jquery.com/text/ - .text()

Call Javascript from recurring loop with incremental IDs

I have this php site and i use javascript with it.
One of the pages is an entry form with 10 lines to enter data in.
One line in this case would be coded in this way:
echo "<td style='border-width: 0'><input type='text' id = 'price1' style = 'font-size: 10px' name='poline1[price]' size='7'></td>";
Right next to this input field there is a button:
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow1;' class='button6'>Copy Down</a></td>";
Javascript function copyRow1 is as follows:
<script type="text/javascript">
function copyRow1() {
document.fabricorder.price2.value = document.fabricorder.price1.value;
}
</script>
It copies inputted value from input box ID = price1 into input box ID = price2.
I have 10 Javascript functions like this
copyRow1(), copyRow2(), copyRow3(), etc....
It works fine but I am trying to optimize all the code to make it easier for modifications and now I want to loop all my lines.
So I want change my line script in this way:
for ($i = 1; $i <= 10; ++$i){
echo "<tr>";
echo "<td style='border-width: 0'><input type='text' id = 'price$i' style = 'font-size: 10px' name='poline[$i][price]' size='7'></td>";
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow($i);' class='button6'>Copy Down</a></td>";
echo "</tr>";
}
and my function this way:
<script type="text/javascript">
function copyRow(i) {
document.fabricorder.price(i+1).value = document.fabricorder.price(i).value;
}
</script>
Unfortunately this doesn't work. What am i doing wrong?
Try modifying your copyRow function to:
function copyRow(i) {
for (var j=i,numRows=document.fabricorder.length;j<numRows;j++) {
document.fabricorder["price"+(j+1)].value = document.fabricorder["price"+(j+1)].value;
}
}
You need to loop over all input fields, copying each value to the next. It's hard to give you 100% working code without seeing 100% of your code. Can you put it in a JSFiddle?

Categories