Develop Reference

force to validate a checkbox

This script below allow to validate all checkox inside a form.
My problem, I need to have just one to validate.
What is the element to change to verify if just one chabox is validated ?
<?php
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox" options>';
$display_option .= '<label class="control-label ProductsInfoOptionCheckbox" for="input-option' . $option['products_option_id'] . '">' . $option['name'] . '</label>';
foreach ($option['products_option_value'] as $t => $option_value) {
$display_option .= '<div class="checkbox">';
$display_option .= '<ul class="list-unstyled ProductsInfoOptionCheckbox">';
$display_option .= '<li class="ProductsInfoOptionCheckbox">';
$display_option .= HTML::checkboxField('id[' . $option['products_option_id'] . ']', $option_value['products_option_value_id'], $checked_attribute, 'required');
}
$display_option .= '<div>';
echo $display_option;
?>
<script>
$(function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
</script>

I solved this by using:
$display_option .= '<div class="form-group ProductsInfoOptionCheckbox options">';

Hide / show table with javascript

I have a little problem to hide and show table. I tred this, I haven't error in console but it does'nt work. Maybe I forget something wrong or make a mistake.
I saw the data inside the code but it does'nt appear when I click on the link.
Thank you
$i = 0;
foreach($option_attributes_name as $value) {
$content .= ' <li class="col-md-12"><a onclick="showTabOption' . $i .'" class="nav-link" data-toggle="tooltip" data-target="#section_ProductsAttributesNewApp_content" href="' . OSCOM::link('index.php?A&Catalog\Products&Edit&cPath=' . $_GET['cPath'] . '&pID=' . $_GET['pID'] . '#tab-option' . $i) . '"><i class="fa fa-minus-circle"></i> ' . $value['name'] . '</a></li>';
// $i++;
$t++;
}
$Qoption = $this->app->db->prepare('select option_id, type
from :table_test_products_options_attributes');
$Qoption->execute();
$i =0;
while ($Qoption->fetch()) {
$content .= '<div id="tab-option' . $i . '" style="display:none;">';
$content .= '<h4>' . $Qoption->value('type') . '</h4>';
$content .= '<table width="100%" cellpadding="5" cellspacing="0" border="0">
</table>
</div>
';
$content .= '
<script type="text/javascript"><!--
function showTabOption' . $i . '() {
$("a[href=\'#tab-option' .$i . '\']").parent().remove();
$(\'#tab-option'. $i . '\').remove();
$(\'#option a:first\').div(\'show\');
}
//--></script>
';
$i++;
}

You can settle a few issues first by adjusting how you are doing things with the js and jquery use.
1) Setting up the elements you will click with just a class, and data-tableid:
$content .= '<li class="col-md-12"><a class="showTabOption nav-link" data-tableid="'. $i .'" ... etc etc ...</a>';
^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^
2) Fix this in your first loop: Change $t++; to $i++;.
3) You do not need to adjust the table builds (the ones from the while loop):
$content .= '<div id="tab-option'. $i .'" style="display:none;">';// this is ok
4) Then adjust your SINGLE javascript function. Have it output OUTSIDE of the while loop (since this must only be done once):
<script language="Javascript" type="text/javascript">
$( document ).ready(function() {
$(".showTabOption").click(function(e) {
e.preventDefault(); // stop the a href from firing off
var tableid = $(this).data('tableid'); // the table in question
$(this).parent().remove(); // remove what you clicked?
$("#tab-option"+ tableid ).show(); // show your options table
});
});
</script>
This should get you rolling on making that table (the div surrounding it) show up when you click one of those links. Of course it looks like you have much more going on in there, table rows, something with the href link value, and the sort, but you only asked about showing the table div.
TL;DR: Full example of your example code adjusted:
<?php
$i = 0;
foreach($option_attributes_name as $value) {
$content .= '<li class="col-md-12"><a class="showTabOption nav-link" data-tableid="'. $i .'" data-toggle="tooltip" data-target="#section_ProductsAttributesNewApp_content" href="'. OSCOM::link('index.php?A&Catalog\Products&Edit&cPath='. $_GET['cPath'] .'&pID='. $_GET['pID'] .'#tab-option'. $i) .'"><i class="fa fa-minus-circle"></i> '. $value['name'] .'</a></li>';
$i++;
}
$Qoption = $this->app->db->prepare('select option_id, type
from :table_test_products_options_attributes');
$Qoption->execute();
$i = 0;
while ($Qoption->fetch()) {
$content .= '<div id="tab-option'. $i .'" style="display:none;">';
$content .= '<h4>'. $Qoption->value('type') .'</h4>';
$content .= '<table width="100%" cellpadding="5" cellspacing="0" border="0">';
// table tr rows go here
$content .= '</table>';
$content .= '</div>';
$i++;
}
?>
<script language="Javascript" type="text/javascript">
$( document ).ready(function() {
$(".showTabOption").click(function(e) {
e.preventDefault(); // stop the a href from firing off
var tableid = $(this).data('tableid'); // the table in question
$(this).parent().remove(); // remove what you clicked?
$("#tab-option"+ tableid ).show(); // show your options table
});
});
</script>

How pull innerHTML of element created by javascript function

Question:
I have a div element with id of "tableholder" which is purely to hold the output on a javascript function that pulls data via ajax from a PHP file.
Within the tableholder element, is a list.js table that works if we simply include he php file instead of calling it via ajax and setting it via innerHTML = "".
How do I use the contents of innerHTML of the tableholder div when it has been created dynamically?
Code so far:
PHP File called:
<?php
// Connection details for the database being called.
include 'connection.php';
// Putting the query to the database in a variable called "$assets".
$assets = "SELECT * FROM assetregister.getassets";
$assetPull = $conn->query($assets);
$output = "";
// Pulling all of the details from the database and displaying them on the page within the inidividual divs.
if ($assetPull->num_rows > 0) {
$output .= "<div id='users'>";
$output .= "<input class='search form-control mt-2' placeholder='Search...' />";
$output .= "<div class='m-2'>";
$output .= "<button class='sort btn' data-sort='model'>Sort By Model</button>";
$output .= "<button class='sort btn ml-2' data-sort='domain'>Sort By Domain</button>";
$output .= "<button class='sort btn ml-2' data-sort='location'>Sort By Location</button>";
$output .= "</div>";
$output .= "<table class='table table.hover list'>";
$output .= "<thead>";
$output .= "<th style='text-align: center;'>Model</th>";
$output .= "<th style='text-align: center;'>Serial Number</th>";
$output .= "<th style='text-align: center;'>Asset Number</th>";
$output .= "<th style='text-align: center;'>Domain</th>";
$output .= "<th style='text-align: center;'>Location</th>";
$output .= "<th style='text-align: center;'>Type</th>";
$output .= "</thead>";
while ($row = $assetPull->fetch_assoc()) {
$output .= "<tbody class='list' style='text-align: center;'>";
$output .= "<td class='model'>" . $row['modelName'] . "</td>";
$output .= "<td class='serialNumber'>" . $row['serialNumber'] . "</td>";
$output .= "<td class='assetNumber'>" . $row['assetNumber'] . "</td>";
$output .= "<td class='domain'>" . $row['domain'] . "</td>";
$output .= "<td class='location'>" . $row['locationName'] . "</td>";
$output .= "<td class='type'>" . $row['type'] . "</td>";
}
$output .= "</tbody>";
$output .= "</table>";
$output .= "</div>";
// If there is no rows in the table that is being called then they will display 0 Results... See below.
} else {
$output .= "0 results";
}
echo $output;
$conn->close();
?>
This works:
<div class="container-fluid">
<div class="container">
<div class="row">
<main class="col-12" style="margin-top: 80px;">
<button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
<?php include 'scripts/getAsset.php'; ?>
</main>
</div>
</div>
</div>
<script>
populatetable('tableholder');
window.onload = function () {
var options = {
valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList = new List('users', options);
};
</script>
This outputs the table and all of the list.js functions work fine as expected.
This Doesn't Work:
<div class="container-fluid">
<div class="container">
<div class="row">
<main class="col-12" style="margin-top: 80px;">
<button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
<!-- Pulling in the results of the assets (most recent assets) -->
<div id="tableholder"></div>
<!-- end -->
</main>
</div>
</div>
</div>
<!-- PHP include for the footer -->
<?php include 'assets/layout/footer.php'; ?>
<!-- end -->
<script>
populatetable('tableholder');
window.onload = function (){
var options = {
valueNames: [ 'model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList = new List('users', options);
};
function populatetable(name){
$.ajax({
url: "scripts/getAssets.php",
success: function(data){
document.getElementById(name).innerHTML = data;
}
})
}
</script>
What I can assume:
From the various console.log lines and php echos I have put in to test the code, it would appear that the issue it that the javascript command for initiating the list.js table isn't able to find the "user" table that is created by the document.getElementById(name).innerHTML = data; in the populatetable() function. I know this because the folllowing shows blank:
console.log(document.getElementById(tableholder).innerHTML);
What am I doing wrong, or is it not possible to pull the innerHTML data of a dynamically created element?

The problem is that by the time you're calling List(), the ajax call hasn't finished yet, since it's asynchronous.
Try this instead:
var options = {
valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList;
$(document).ready(function() {
populatetable('#tableholder');
});
function populatetable(id) {
$.ajax({
url: "scripts/getAssets.php",
success: function(data) {
$(id).html(data);
userList = new List('users', options);
}
});
}
Here I'm using jQuery everywhere it's useful, and I'm calling List() only after the data is actually inserted.
Also note, that like I mentioned in my comment, you need to move the <tbody> line outside the loop.

remove() function not deleting the item within ul list

I have created a javascript function on drop down select it adds element and calculate the total amount of the added product now what I want do here is to make a function to delete that product added from the dropdown list but when I click on delete button it us only deleting the selected button and not deleting the row which I want it to be deleted by clicking on the button. You can review on this fiddle and will understood what is going on with it https://jsfiddle.net/h1k6mohs/ and also my script is not working may be is because it is not calling to that function below is my php script file
Controller
Home.php
public function addpart() {
$part = $this->input->post('parts');
$part_modify = explode(")", $part);
$part_id = $part_modify[0];
$old_price = $this->input->post('old_price');
$old_minutes = $this->input->post('old_minutes');
$data = $this->get_data->data_cart($part_id, $old_price, $old_minutes);
echo $data;
}
public function removepart() {
$part_id = $this->input->post('partid');
$old_price = $this->input->post('old_price');
$old_minutes = $this->input->post('old_minutes');
$data = $this->get_data->delete_part($part_id, $old_price, $old_minutes);
echo $data;
}
Model
Get_data.php
public function data_cart($part_id, $old_price, $old_minutes) {
$get_data = $this->db->get_where('rapair_parts', array('id' => $part_id));
$total_minutes = $get_data->row()->repair_time + $old_minutes;
$total_price = $get_data->row()->part_price + $old_price;
$html = '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Repair time</div>';
$html .= '<div class="col-xs-6">'.$total_minutes.' mins</div></div>';
$html .= '<input type="hidden" id="minutes_parts" value="'.$total_minutes.'" />';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Discount</div>';
$html .= '<div class="col-xs-6">'."£".'0.00</div></div>';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Total</div>';
$html .= '<div class="col-xs-6">£'.$total_price.'</div></div>';
$html .= '<input type="hidden" id="price_parts" value="'.$total_price.'" />';
return $html;
}
public function delete_part($part_id, $old_price, $old_minutes) {
$get_data = $this->db->get_where('rapair_parts', array('id' => $part_id));
$total_minutes = $get_data->row()->repair_time - $old_minutes;
$total_price = $get_data->row()->part_price - $old_price;
$html = '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Repair time</div>';
$html .= '<div class="col-xs-6">'.$total_minutes.' mins</div></div>';
$html .= '<input type="hidden" id="minutes_parts" value="'.$total_minutes.'" />';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Discount</div>';
$html .= '<div class="col-xs-6">'."£".'0.00</div></div>';
$html .= '<div class="col-xs-12">';
$html .= '<div class="col-xs-6">Total</div>';
$html .= '<div class="col-xs-6">£'.$total_price.'</div></div>';
$html .= '<input type="hidden" id="price_parts" value="'.$total_price.'" />';
return $html;
}
Please help me out with this bug please

Elements in Chrome have a .remove() method which allows for self-removal of an element instead of having to do it from the parent.
So "remove" is a reserved keyword, that's the issue and the reason it removes the element and not executing your function. You need to choose another name for your function.

I gone through your code, as per code you are using remove() which is inbuilt in JQuery, so you can directly apply to the HTML, kindly follow the below code.
<div id="js-part">
<li id="parts3" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Wifi Antenna</div>
<div class="col-d-3"><a>Remove</a></div>
</li>
<li id="parts1" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Glass Screen</div>
<div class="col-d-3"><a >Remove</a></div>
</li>
<li id="parts4" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Rear Camera</div>
<div class="col-d-3"><a>Remove</a></div>
</li>
<li id="parts5" style="display: list-item;" onclick="remove();">
<div class="col-md-9"><i class="fa fa-check-circle"></i> Front Camera</div>
<div class="col-d-3"><a>Remove</a></div>
</li>
</div>
<div id="total">
<div class="col-xs-12">
<div class="col-xs-6">Repair time</div>
<div class="col-xs-6">170 mins</div>
<input type="hidden" id="minutes_parts" value="170">
</div>
<div class="col-xs-12">
<div class="col-xs-6">Discount</div>
<div class="col-xs-6">£0.00</div>
</div>
<div class="col-xs-12">
<div class="col-xs-6">Total</div>
<div class="col-xs-6">£362</div>
<input type="hidden" id="price_parts" value="362">
</div>
</div>
So, i am directly remove the div on clicking each li elements.

Retrieving form data and displaying it on a modal

So I have a table that displays multiple rows (each row is from a table on the database)...I have a button (with id view) on each row which should open a modal with the complete form data.
This is my how I generate my table:
echo "<tbody id=\"tdata\">";
while($fetch= mysqli_stmt_fetch($stmt))
{
//$table .="<tbody>";
$table .="<tr data-id=\"$det_Id\" id=\"dat_Row\" >";
$table .="<td>".$i."</td>";
$table .="<td>".$title."</td>";
$table .="<td>".$date."</td>";
$table .="<td>".$status."</td>";
$table .="<td class=\"btn-group\" style=\"border:none\">";
//<div class="btn-group">
$table .="<button id=\"view\" data-id=\"$det_Id\" class=\" btn btn-primary \">"."View"."<span class=\" glyphicon glyphicon-expand\">"."</span>"."</button>";
/**$table .="<ul class=\"dropdown-menu\">";
$table .="<li>".""."View".""."</li>";
$table .="<li>".""."Comments".""."</li>";
$table .="</ul>";**/
//<!--</div>-->
$table .="</td>";
$table .="</tr>";
$i++;
}
echo $table;
echo "</tbody>";
echo "</table>";
echo "</div>";
//end of while
}
As u can see, I used the data-id attribute within each button.
This is how I make the modal appear:
<script>
$(document).ready(function(e) {
//Here, i am implementing a functionality that will show the user details of his/her submissions via the use of a modal
//get the form's unique identifier
$(" tbody #view").click(function(e) {
form_Id = $(this).attr("data-id");
$("#myModal").modal({
// backdrop:"static",
show: false,
remote:"./php/modalGet.php?form_Id="+form_Id
});
$("#myModal").modal('show');
$('#myModal').on('shown.bs.modal', function (){
//im trying to debug here
alert(form_Id);
});
//alert(form_Id);
});
});
</script>
getModal.php (This retrieves the form_Id from the remote method and prints out the form to be displayed on the modal)
<?
include("../inc/connect.php");
//retreive id from the remote method
$det_Id =$_GET["form_Id"];
// Setup Query
$query = "SELECT `title`,`aim`,`overview`,`no_of_part`,`selection`,`advice`,`risk_part`,`risk_res`,`consent`,`findings` FROM `tbl_SubDets` WHERE `det_Id`=? LIMIT 1";
// Get instance of statement
$stmt = mysqli_stmt_init($mysqli);
// Prepare Query
mysqli_stmt_prepare($stmt, $query);
// Bind Parameters [i for integer]
mysqli_stmt_bind_param($stmt,'i',$det_Id);
// if statement executes, bind the reult and printout table
if(mysqli_stmt_execute($stmt))
{
//alternative method: query parameters could be placed in an array and then "imploded" in here
mysqli_stmt_bind_result($stmt,$title,$aim,$overview,$no_of_part,$selection,$advice,$risk_part,$risk_res,$consent,$findings);
//echo "<form>";
// Fetch Value
while($fetch = mysqli_stmt_fetch($stmt))
{
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Aim of Project"."</label>";
echo "<textarea class=\"form-control\" id=\"aim\" name=\"aim\" >";
echo $aim;
echo "</textarea>";
echo "</div>";
//Overview
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Project Overview"."</label>";
echo "<textarea class=\"form-control\" id=\"aim\" name=\"aim\" >";
echo $overview;
echo "</textarea>";
echo "</div>";
//num of participants
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Project Overview"."</label>";
echo "<input type=\"number\" class=\"form-control\" value=\"$no_of_part\" >";
echo "</div>";
//selection
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Project Overview"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $selection;
echo "</textarea>";
echo "</div>";
//advice
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Advice to Participants"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $advice;
echo "</textarea>";
echo "</div>";
//risk to participants
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Risk to participants"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $risk_part;
echo "</textarea>";
echo "</div>";
//Risk to researcher
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."Risk to Researcher"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $risk_res;
echo "</textarea>";
echo "</div>";
//consent
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."How will Records of consent be changed"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $consent;
echo "</textarea>";
echo "</div>";
//findings
echo "<div class=\"form-group\">";
echo "<label for=\"project-aim\">"."How will the findings of this research be disseminated?"."</label>";
echo "<textarea type=\"number\" class=\"form-control\" >";
echo $findings;
echo "</textarea>";
echo "</div>";
}
mysqli_stmt_free_result($stmt);
// echo "</form>";
}
?>
This is the students page:
<section class="container" style="margin-top:150px">
<div class="row">
<div class=" col-md-4">
<ul class="list-group panel panel-primary">
<div class="panel-heading">Dashboard <span class="glyphicon glyphicon-dashboard "></span></div>
<li class=" list-group-item"><span class="glyphicon glyphicon-file"></span>Proposals Sent<span class="badge" id="total_Sent"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-minus-sign"></span>Pendiing Proposals<span class="badge" id="total_Pending"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-ok "></span>Proposals Accepted<span class="badge" id="total_Accepted"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-remove "></span>Proposals Rejected<span class="badge" id="total_Rejected"></span></li>
<li class=" list-group-item"><span class="glyphicon glyphicon-calendar"></span>Deadline<span class="badge" id="deadline"></span></li>
</ul>
</div><!--end of panel-->
<div class="col-md-8" id="table">
</div>
</div>
<div id="myModal" class="modal fade" role="dialog" ><!---->
<div class="modal-dialog">
<div class="modal-content">
<div id="subDets-Body" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</section>
My problem:
Lets assume we have 3 rows (with data-id 1,2,3) I click on any button and the modal shows with data from that row but if I close the modal and click on another button from a different row, the modal appears but the data displayed is still from the previous click