We Keep Coding

Remove a single row in table created using div's

I'v table which I create using PHP and I used divs to create the table, below is the table code.
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table">
<div class="row header">
<div class="cell topLeft">
Customer Name
</div>
<div class="cell">
Target
</div>
<div class="cell">
File Type
</div>
<div class="cell">
Job Comment
</div>
<div class="cell">
Cust. ID
</div>
<div class="cell topRight">
Select Job
</div>
</div>
<?php while ($getJobsRow = $getJobs -> fetch(PDO::FETCH_ASSOC)){ ?>
<?php $loopCount++; //Count the loop run through time ?>
<div class="row">
<div class="cell left <?php if ($numOfRows == $loopCount){ ?>bottomLeft<?php } //Set the CSS class if the loop is at the last row ?> " data-title="Full Name">
<?php echo $getJobsRow['customer_name']; ?>
</div>
<div class="cell" data-title="Age">
<?php echo $getJobsRow['Mal_Name']; ?>
</div>
<div class="cell" data-title="Job Title">
<?php echo $getJobsRow['FileExt']; ?>
</div>
<div class="cell" data-title="Location">
<?php echo $getJobsRow['Job_Comment']; ?>
</div>
<div class="cell" data-title="Location">
<?php echo $getJobsRow['customer_id']; ?>
</div>
<div class="cell right <?php if ($numOfRows == $loopCount){ ?>bottomRight<?php } ?> " data-title="Location">
<button class="selJobBtn w3-btn w3-blue-dark w3-round-medium w3-ripple" data-jid="<?php echo $getJobsRow['jId']; ?>">Select</button>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
I've select button for each data row. I want to hide or remove each row after data get successfully submitted to table. I use jquery to send the data and to disable the button.
My Jquery code,
$(document).ready(function () {
$('.selJobBtn').on('click', function () {
var selBtn = this;
$.ajax({
url: '../Functions/OpenjobLister_Function.php',
type: 'get',
data: {
'jid':$(this).data('jid'),
'uid':$('#uId').val()
},
dataType:'text',
complete:function(data){
if(data.responseText !== "1"){
alert("Data not added");
}else{
$(selBtn).prop('disabled', true);
$('.row').parent('div').first().remove();
}
}
});
});
});
I tried to remove a single line using many other methods mentioned in SO but none of them worked. Current code just removed the entire table I'm just stuck not knowing how to remove a single line.

That is because you find the parent div of any .row in your document, which is the entire table. Try to find the closest div.row from the button clicked and remove that one:
selBtn.closest('div.row').remove();

Use the HTML DOM elements to remove the row:
This is how you use the function where (0) is the index of the table row.
document.getElementById("myTable").deleteRow(0);

Load Data From Database PHP

I need to transfer data from my HTML table to my modal(I am not using bootstrap). As you can see from the image below, I displayed the data from my MySQL database into the table.
The problem is when I click the EDIT button of the 1st row the data will be transferred to my modal. However, when I click the EDIT button of the 2nd row the data transferred to my modal is still the data of the 1st row. Please help me in fixing this problem. I am still learning PHP and JavaScript.
Table Data Generation Here |
Modal Here
PHP Code:
while ($row = mysqli_fetch_array($result)) {
echo "<tr class='table-row'>
<td class='table-cell'>".$row['program']."</td>
<td class='table-cell'>".$row['project_name']."</td>
<td class='table-cell'>".$row['department']."</td>
<td class='table-cell'>".$row['start_date']."</td>
<td class='table-cell'>".$row['end_date']."</td>
<td class='table-cell'><span style='color:".$color."'><i class='fa fa-circle-o'></i></span> ".$row['priority']."</td>
<td class='table-cell'><span style='color:".$color_2."'><i class='fa fa-circle-o'></i></span> ".$row['status']."</td>
<td class='table-cell'><a id='edit-modal-show' class='btn btn-edit'>Edit</a>
<div class='editProject-modal' id='edit-project-modal'>
<div class='editProject-modal-dialog'>
<div class='editProject-modal-content'>
<div class='editProject-onboard'>
<header class='onboard-header'>
<h1 class='onboard-title'>Edit Project</h1>
<button class='onboard-close-2'>
<i class='fa fa-close'></i>
</button>
</header>
<div class='onboard-body'>
<form autocomplete='off' method='POST'>
<input type='hidden' id='".$row['project_id']."' name='p-id' value=".$row['project_id'].">
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Program</label>
<input type='text' placeholder='Program' name='program' id='pr-".$row['project_id']."' class='form-control' value='".$row['program']."' required>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Project Name</label>
<input type='text' placeholder='Project Name' name='pname' id='pn-".$row['project_id']."' class='form-control' value='".$row['project_name']."' required>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Project Description</label>
<textarea type='text' placeholder='Project Description' name='description' id='desc-".$row['project_id']."' class='form-control' required>".$row['description']."</textarea>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Lead Department</label>
<select class='form-control' name='department' required>
<option value=''>Department</option>";
if ($count_2> 0) {
while ($row_2 = mysqli_fetch_array($result_2)) {
if ($row_2['department'] == $row['department']){
$selected = "selected";
}
else {
$selected = "";
}
echo "<option value='".$row_2['department']."'".$selected.">".$row_2['department']."</option>";
}
}
echo"</select>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Start Date</label>
<input type='date' name='s-date' id='s-date-".$row['project_id']."' class='form-control' value='".$row['start_date']."' required>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>End Date</label>
<input type='date' name='e-date' id='e-date-".$row['project_id']."' class='form-control' value='".$row['end_date']."' required>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Priority</label>
<select class='form-control' name='priority' id='priority' required>
<option value=''>Priority</option>";
if ($count_3 > 0) {
while ($row_3 = mysqli_fetch_array($result_3)) {
if ($row_3['priority'] == $row['priority']){
$selected = "selected";
}
else {
$selected = "";
}
echo "<option value='".$row_3['priority']."'".$selected.">".$row_3['priority']."</option>";
}
}
echo "</select>
</div>
</div>
<div class='column-2'>
<div class='onboard-btn'>
<button type='submit' class='btn btn-update' name='update'>Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</td>
<td class='table-cell'><a href='delete.php?del=".$row['project_id']."' class='btn btn-delete'>Delete</i></a></td>
</tr>";
}
Javascript:
/* Edit Project Modal Event */
var modal_edit = document.getElementById('edit-project-modal');
var span_edit = document.getElementsByClassName("onboard-close-2")[0];
$(document).on('click',".btn-edit",function(){
$(modal_edit).toggleClass("edit-modal-show");
});
span_edit.onclick = function() {
$(modal_edit).removeClass("edit-modal-show");
}

Because it does not know which edit button is related to witch modal.
use
var modal_edit;
$(document).on('click',".btn-edit",function(){
modal_edit = $(this).parent().find(".edit-project-modal");
$(modal_edit).toggleClass("edit-modal-show");
});
$(".onboard-close-2").click(function(){
$(modal_edit).removeClass("edit-modal-show");
});
An other thing I know this is not related to your request but it will give you wrong result when you fix this problem. The form in the model should have a unique name such as your record id so that when it submits it you know which form has been submitted.
P.S. - If you are using double quotes in echo() then rather than doing .." . $PHPVariable . ".. use can directly write echo "<p id='$PHPVariable'>" double quotes can parse PHP Variables, but beware of messing up the single and double quotes.

I think you have to do this in your listing page you have to call onClick method on the button taking the respecting id as an argument
<td onClick="editRow(<?php echo $value['id']; ?>);"><?php echo ($value['display_offer']); ?></td>
and then by using ajax in the function get the respective value according to the id and populate the model.

I think the problem is the same Id for every edit modal. ID must be unique on a page.
You can fix it in two ways:
Use a counter variable inside loop $counter and assign ids like ...id='edit-project-modal-".$counter."'> in this way you will get unique ids like edit-project-modal-1, edit-project-modal-1.
Make a single Modal and dynamically add content to it when edit button is clicked. In this way, you have a single modal with unique Id and also page size will be smaller. For adding content you can make good use of data attributes or jQuery's .closest() and .find() methods.
Some Suggestions:
Use <p id='$phpvariables'> directly if you are using echo() with double quotes. double quotes can parse PHP variables.
Use bootstrap's Modal only build see https://getbootstrap.com/docs/3.3/customize/ to avoid modal related bugs.

Disable divs with checkboxes using class approach

I have combination of divs and check-boxes. In each div there are text-boxes and radio buttons. So at the top level if I want to disable any div I should be able to do so with checkbox corresponding to that div.
I have written JQuery to do so but if I check or uncheck checkbox for one div, it is also affecting another div and its content. So I want a class based approach to get this functionality. Also on page load, the div contents should be disabled. Thanks
$(".disableDivCheckbox").click(function () {
$(".disableDiv *").prop("disabled", !this.checked);
});

Refr this code working fine.
<script>
$(function () {
$("#chkPassport").click(function () {
if ($(this).is(":checked")) {
$("#dvPassport").show();
} else {
$("#dvPassport").hide();
}
});
});
</script>
//html/php code
<div class="form-group col-sm-12">
<label class="form-group col-sm-3">
<input type="checkbox" id="chkPassport" name="chkPassport" value="first_checkbox">Add Payment</label>
<div id="dvPassport" style="display: none">
<label class="form-group col-sm-12">Payment Type</label>
</div>
<div class="col-sm-4">
<?php
$stmt = $conn->prepare('Select pay_type_name from tbl_payment_type');
$stmt->execute();
$result = $stmt->fetchAll();
print '<select class="col-sm-11" name="pay_type_name" id="pay_type_name">';
foreach ($result as $row) {
print "<option value=".$row['pay_type_name'].">".$row['pay_type_name']."</option>";
}
print '</select>';
?>
</div>
</div>

Complex filtering on checkbox click in jQuery

I basically have two tables which I need to filter like this:
Table 1 : Users
Table 2 : BrandUsers
Now I've made the following HTML:
<div class="pop-us">
<div class="pop-j">
<div class="pop-journey">
<?php foreach($users as $user) {?>
<div class="pop-first-btn"><input class="check-user" type="checkbox" name="" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>
<?php } ?>
</div>
</div>
<div class="pop-city">
<div class="pop-txt"><?=$this->translate('Please choose a user.')?></div>
<!-- city -->
<?php for ($i = 0; $i < count($states); $i++) { ?>
<div class="pop-city-co">
<?php for ($j = 0; $j < count($states[$i]['citys']); $j++) { ?>
<label><input class="check-city" type="checkbox" name="" value="<?=$states[$i]['citys'][$j]['cityId']?>" data-id="<?=$i ?>"><?=$states[$i]['citys'][$j]['cityName']?></label>
<?php } ?>
</div>
<?php } ?>
</div>
<div class="modal-footer pop-footer">
<button type="button" class="btn btn-default pop-close-us">Close</button>
<button type="button" class="btn btn-primary pop-save-us">Save</button>
</div>
</div>
The left part of the modal popup lists all of the users... Now my wish is to when each some check-box is clicked in the left side, I'd like to pass the value of the UserId to the function and pass it to my query to search out the BrandUsers table... Now there are two types of things that I'd like to show on my modal popup..
When the user clicks on 1 user... All of the brands are listed out on the right side. The brands for which usedId exists in BrandUser table, I'd like to make them checked in the list, and the ones that are non-existent, I'd simply like to leave them un checked...
How can I make an event when an check-box is checked on the left side so that I pass the parameter UserId to DB and then display something on the right side of the modal popup ??
Can someone help me out with this?

Make your checkboxes like this. Note that I have added a data-id attribute that has the user id.
<div class="pop-first-btn"><input class="check-user" type="checkbox" name="" data-id="<?=$user['id'] ?>" value="<?=$user['id'] ?>"><?=$user['username'] ?></div>
And then add this to attach click handlers to all checkboxes
$('.check-city').on('click',function() {
var user_id = $(this).data('id);
$.ajax({
url: 'http://myserver.com/action' + 'user_id=' + user_id;
success: function(data) {
// Update modal popup with data
}
});
});
Hope this helps.

Display a hidden div after a html form submit to show output

I have a html form to collect name and place and after user submit the form, the out will display at bottom of the page using PHP echo
My requirement is,
hide the output div before the form submit and after user enter data and submit, I have to make output div visible to display form output using PHP echo.
Here is my HTML code:
<div class="main">
<form id="main" name="main" action="#text" method="post">
<div class="input">
<div id="name">
<div class="block">
<div class="input-quest">Your Name</div>
<div class="input-resp"><span><input class="textbox" id="nm" name="nm" type="text" value="" /></span>
</div>
</div>
</div>
<div id="place">
<div class="block">
<div class="input-quest">Your Place</div>
<div class="input-resp"><span><input class="textbox" id="pl" name="pl" type="text" value="" /></span>
</div>
</div>
</div>
</div>
<div class="submit">
<input id="generate" type="submit" name="script" value="generate" />
<input type="submit" id="clear" name="clear" value="clear" />
</div>
</form>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
</div>
It contain the PHP echo codes at output div section.
I have searched for solution in previous questions and tried below methods mentioned there:
1.Added a inline CSS tag for output div to hide it
<div id="output" style="display: none;">
<!-- echo php here -->
</div>
and added JavaScript to call function during submit
$('main').submit(function(){
$('#output').show();
});
It didn't work.
2.Tried with below JavaScript code
$('main').submit(function(e){
$('#output').show();
e.preventDefault();
});
It didn't work.
3.Removed inline CSS for output div to hide and added the same to my CSS stylesheet
<div id="output">
and in stylesheet
#output{
display:none;
}
and used below JavaScript code on submit
$('main').submit(function(){
$('#output').css({
'display' : 'block'
});
});
It didn't work.
Added a onclick function along with the form submit
and submit button code:
<input id="generate" type="submit" name="script" value="generate" onclick="showoutput()"/>
and JavaScript:
showoutput(){
$('#output').slideDown("fast");
}
and with
showoutput(){
$('#output').show();
}
It didn't work.
Please suggest a solution to do this.

I'm not sure why you need to use js/css for this at all. Just check if the variables were posted, and if they were, echo them (you'd have to set your form action to point to the same page):
<?php if (!empty($_POST['nm']) && !empty($_POST['pl'])) { ?>
<div class="output">
Hello, I am <?php echo $_POST['nm']; ?>, and I am from <?php echo $_POST['pl']; ?>
</div>
<?php } ?>
If you just want to display the name and place in div.output, without actually submitting the form, you could do:
$('#main').submit(function(e) {
e.preventDefault(); // prevent form from being submitted
$('div.output').text('Hello, I am ' + $('#nm').val() + ', and I am from ' + $('#pl').val());
});
Here's a fiddle

<?php if(isset($_POST['nm'])) { ?>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
<?php } ?>

Create a separate page to process your form using javascript/jquery (ajax), and have it return the info you want, hide the form and show the .output div.
PHP Page:
<?php
$name = $_POST['nm'];
$place = $_POST['pl'];
echo "Hello, I am ".$name." and I am from ". $place;
?>
The javascript/jquery would catch that as responseText and then use innerHTML on your .output div to put that responseText. You'd then use the JS/Jquery to hide the form and show the .output

You can actually accomplish this entirely with php. The simplest method that I would use would be to make a hidden input with a given value. Once the user submits the form, that variable will exist and you can grab it in your php.
First you need to change the entire page to .php, and echo all of your html. then in the form, set the action to the name of the page so that it will send the variables to itself and then you can deal with them on the same page.
add this to the html:
<input type='hidden' name='display' value='display' />
In your php, add:
if (isset($_POST['display']){
echo "make the div here";
}else{
//don't show the div
}