How can I fix this? I have used PHP to display data from my database but I didn't foresee this bug. When I click the edit the modal will appear However, when I click the edit button of the other data the modal will not appear. How can I fix this? What I want is when I click the edit button modal will appear. I hope you can help me its been bugging me for days.
Edit Button.
Please See Modal.
Here is my code:
PHP:
echo "<div class='col-3'>";
echo "<div class='card'>";
echo "<div class='row'>";
echo "<div class='col-2'>";
echo "<h6 class='card-title'>".$row['project_name']."</h6>";
echo "</div>";
echo "<div class='col-2'>";
echo "<div class='card-setting'><i class='fa fa-gear'></i></div>";
echo "<div id='card-setting-dropdown' class='card-dropdown-content'>";
echo "<button class='card-dropdown-menu' id='btn-edit'>Edit Project</button>";
echo "<button class='card-dropdown-menu'>Delete Project</button>";
echo "<button class='card-dropdown-menu'>Add Task</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row'>";
echo "<div class='col-2'>";
echo "<label class='project-details'>".$row['department']."</label>";
echo "</div>";
echo "<div class='col-2'>";
echo "<label class='project-details' style='float:right;'>Priority: <span style='color:".$color."'>".$row['priority']."</span></label>";
echo "</div>";
echo "</div>";
echo "<div class='pr-task-data'>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>Tasks</label>";
echo "<p class='pr-task-details'>".$count_2."</p>";
echo "</div>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>Completed</label>";
echo "<p class='pr-task-details'>".$count_3."</p>";
echo "</div>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>In-Progress</label>";
echo "<p class='pr-task-details'>".$count_4."</p>";
echo "</div>";
echo "<div class='pr-task-summary-r'>";
echo "<label class='pr-task-title'>Not Completed</label>";
echo "<p class='pr-task-details'>".$count_5."</p>";
echo "</div>";
echo "</div>";
echo "<div class='progress'>";
echo "<div class='progress-bar' style='width:".$percent."%;'>";
echo "<label class='progress-bar-percent'>".$percent."%</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div id='modal_2' class='modal fade'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<h6 class='modal-title'>Add Project</h6>";
echo "<button type='button' class='close_2'>x</button>";
echo "</div>";
echo "<div class='modal-body'>";
echo "<form autocomplete='off' method='POST'>";
echo "<input type='hidden' id='".$row['project_id']."'>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Program</label>";
echo "<input type='text' placeholder='Program' name='program' id='program_2' class='form-control'>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Project Name</label>";
echo "<input type='text' placeholder='Project Name' name='pname' id='pname' class='form-control'>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Project Description</label>";
echo "<input type='text' placeholder='Description' name='description' id='description' class='form-control'>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Department</label>";
echo "<select class='form-control' id='department' name='department'>";
echo "<option value=''>Department</option>";
echo "<option value='Executive Department'>Executive Department</option>";
echo "<option value='CCA Department'>CCA Department</option>";
echo "</select>";
echo "</div>";
echo "<div class='form-group'>";
echo "<label class='form-control-label'>Priority</label>";
echo "<select class='form-control' id='priority' name='priority'>";
echo "<option value=''>Priority</option>";
echo "<option value='Low'>Low</option>";
echo "<option value='Medium'>Medium</option>";
echo "<option valie='High'>High</option>";
echo "<option valie='High'>High</option>";
echo "</select>";
echo "</div>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='submit' class='btn btn-update' name='update'>Update</button>";
echo "<button type='button' class='btn btn-secondary'>Close</button>";
echo "</div>";
echo "</form>";
echo "</div>";
echo "</div>";
echo "</div>";
SCRIPT:
//Edit Project Modal
var modal_edit = document.getElementById('modal_2');
var btn_edit = document.getElementById("btn-edit");
var span_edit = document.getElementsByClassName("close_2")[0];
btn_edit.onclick = function() {
$(modal_edit).toggleClass("modal-show");
}
span_edit.onclick = function() {
$(modal_edit).removeClass("modal-show");
}
$(".btn-secondary").click(function() {
$(modal_edit).removeClass("modal-show");
});
Try something like this.
Add a common class to your edit button Like class="btnEdit other_classes"
Try this code
var modal_edit = document.getElementById('modal_2');
var span_edit = document.getElementsByClassName("close_2")[0];
// I assumed that your button is added dynamically
$(document).on('click',".btnEdit",function(){
$(modal_edit).toggleClass("modal-show");
});
span_edit.onclick = function() {
$(modal_edit).removeClass("modal-show");
}
$(".btn-secondary").click(function() {
$(modal_edit).removeClass("modal-show");
});
Your Click is not working for other elements because you are using id to assign events with them but and id must be unique. I made sample fiddle with two elements with the same ID's and try to look at their difference..
$("#first").click(function(){
alert("I was clicked");
});
div{
display:inline-block;
width:100px;
height:100px;
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">DIV</div>
<div id="first">DIV</div>
The first one only works.. So use class instead..
Related
I have a table with datatables. When you click a row it opens a modal to edit that row. In the model there is a field wit a colorpicker. (col2)
The problem I have is that the colorpicker only works when clicking on the first row of the table.
I think a solution would be to have a variable field name, but does not know how to implement this.
here the code of my modal that opens when clicking a row in the table:
echo "<div class='modal fade' id='ModalEdit".$locations['id']."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>";
echo "<div class='modal-dialog' role='document'>";
echo "<div class='modal-content'>";
echo "<form class='form-horizontal' method='POST' action='editLocation.php'>";
echo "<div class='modal-header'>";
echo"<h4 class='modal-title' id='myModalLabel' >Locatie bewerken</h4>";
echo "</div>";
echo "<div class='modal-body'> ";
echo "<div class='form-group'> ";
echo "<label for='titel' class='col-sm-2 control-label'>Locatie</label>";
echo "<input type='text' name='locatie' class='form-control' id='locatie' value='".$locations['locatie']."' >";
echo "</div>";
echo "<div class='form-group'>";
echo "<label for='detailtitel' class='col-sm-2 control-label'>Color</label>";
echo "<input type='col2' class='form-control' id = 'col2' name='col2' value='".$locations['color']."' >";
echo "</div>";
echo"<div class='form-group'>";
echo"<input type='hidden' name='id' class='form-control' id='id' value='".$locations['id']."'>";
echo" </div>";
echo"</div>";
echo"<div class='modal-footer'>";
echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
echo"<button type='submit' class='btn btn-primary'>Save changes</button>";
echo" </div>";
echo"</form>";
echo"</div>";
echo"</div>";
echo"</div>";
And the script to load the colorpicker:
$(function () {
$('#col2').colorpicker({
format: 'hex'
});
});
Change ID to Class
ID is a Unique
echo "<input type='col2' class='form-control colorpicker' id = '' name='col2' value='".$locations['color']."' >";
$(function () {
$('.colorpicker').colorpicker({
format: 'hex'
});
});
or
Recall colorpicker function on bootstrap show modal event
How can I fix this? I have used php to display data from my database but I didn't foresee this bug.
When I click the gear icon both dropdown menu will appear. How can I fix this? What I want is when I click the gear of a specific project only one dropdown will appear. I hope you can help me its been bugging me for days. Thank you!!
Here is my code:
PHP CODE:
if ($level == "Level 1"){
$sql = "SELECT * FROM project";
$result = mysqli_query($conn,$sql);
$count = mysqli_num_rows($result);
if ($count > 0) {
while ($row = mysqli_fetch_array($result)) {
echo "<input type='hidden' id='".$row['project_id']."'>";
echo "<div class='col-3'>";
echo "<div class='card'>";
echo "<div class='row'>";
echo "<div class='col-2'>";
echo "<h6 class='card-title'>".$row['project_name']."</h6>";
echo "</div>";
echo "<div class='col-2'>";
echo "<div class='card-setting'><i class='fa fa-gear'></i></div>";
echo "<div id='card-setting-dropdown' class='card-dropdown-content'>";
echo "<button class='card-dropdown-menu' id='delete_project'>Delete Project</button>";
echo "<button class='card-dropdown-menu' id='add_task'>Add Task</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<div class='row'>";
echo "<div class='col-2'>";
echo "<label class='project-details'>".$row['department']."</label>";
echo "</div>";
echo "<div class='col-2'>";
echo "<label class='project-details' style='float:right;'>Priority: ".$row['priority']."</label>";
echo "</div>";
echo "</div>";
echo "<div class='pr-task-data'>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>Tasks</label>";
echo "<p class='pr-task-details'>12</p>";
echo "</div>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>Completed</label>";
echo "<p class='pr-task-details'>5</p>";
echo "</div>";
echo "<div class='pr-task-summary-l'>";
echo "<label class='pr-task-title'>In-Progress</label>";
echo "<p class='pr-task-details'>2</p>";
echo "</div>";
echo "<div class='pr-task-summary-r'>";
echo "<label class='pr-task-title'>Not Completed</label>";
echo "<p class='pr-task-details'>5</p>";
echo "</div>";
echo "</div>";
echo "<div class='progress'>";
echo "<div class='progress-bar'>";
echo "<label class='progress-bar-percent'>50%</label>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
}
}
}
Script:
//Card-Settings Dropdown
$(".card-setting").click(function() {
$(".card-dropdown-content").toggleClass("card-dropdown-content-show");
$(this).toggleClass("card-setting-active");
});
When the script activates you toggle the class car-dropdown-content-show for all cards. You should only focus on the one inside the card and find the one with the card-dropdown-content class:
$(".card-setting").click(function() {
var $this = $(this);
$this.parent().find(".card-dropdown-content").toggleClass("card-dropdown-content-show");
$this.toggleClass("card-setting-active");
});
We first need to go up to the parent because the find looks through all the descendants, the div with the card-dropdown-content class is a sibling.
You need to find related element to clicked gear.
Try this:
$('.card-setting').on('click', function () {
var $this = $(this) ;
$this.next().toggleClass("card-dropdown-content-show");
$this.toggleClass("card-setting-active");
});
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
I'm writing a plugin and have need of the media uploader in two different functions; add program, and edit program. Both these functions present a form for the site admin to fill in. One form for adding a new program, and the other for editing an existing one (facilitated by an id variable passed in the URL).
The code I got from this page: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/ is working perfectly in the add program admin page. However, the same code is not working on the edit program page. I've checked the source of both pages, and the appropriate scripts and styles are enqueued, the javascript is present in the body, just before the form code, and the upload field and button codes are correct. Everything tis as it should be on both pages, but it only works on one of them.
Being quite a novice at javascript and jQuery, it's quite possible I'm missing something simple. Any assistance would be appreciated.
Hi cale b, the only error shown is "tb_show is not defined" which, of course, isn't good. It LOOKS like it's defined in the code, though.
Here is the code for enqueuing the scripts and styles:
function bhcprograms_manager_admin_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
function bhcprograms_manager_admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'bhcprograms_manager_admin_scripts');
add_action('admin_print_styles', 'bhcprograms_manager_admin_styles');
The javascript and form code for the one that works:
echo "<script language=\"JavaScript\">\n";
echo "jQuery(document).ready(function() {\n";
echo "jQuery('#bhc_image_button').click(function() {\n";
echo "formfield = jQuery('#bhc_image').attr('name');\n";
echo "tb_show('', 'media-upload.php?type=image&TB_iframe=true');\n";
echo "return false;\n";
echo "});\n";
echo "window.send_to_editor = function(html) {\n";
echo "imgurl = jQuery('img',html).attr('src');\n";
echo "jQuery('#bhc_image').val(imgurl);\n";
echo "tb_remove();\n";
echo "}\n";
echo "});\n";
echo "</script>\n";
echo "<form method=\"post\" action=\"\" name=\"new_program\">\n";
echo "<h4>* indicates required field</h4>\n";
echo "<h4>Program Title *</h4>\n";
echo "<input type=\"text\" size=\"40\" name=\"bhc_title\" value=\"" . str_replace('"', '"', $bhc_title) . "\" maxlength=\"255\" />\n";
echo "<h4>Program Subtitle</h4><strong>If no subtitle, leave it blank</strong><br />\n";
echo "<input type=\"text\" size=\"40\" name=\"bhc_subtitle\" value=\"" . str_replace('"', '"', $bhc_subtitle) . "\" maxlength=\"255\" />\n";
echo "<h4>Description *</h4>\n";
echo "<textarea name=\"bhc_description\" rows=\"4\" cols=\"50\" type=\"textarea\">" . $bhc_description . "</textarea>\n";
echo "<h4>Image Upload</h4><strong>Upload an image to go with this program description. If no image wanted, leave it blank</strong><br />\n";
echo "<input id=\"bhc_image\" type=\"text\" size=\"40\" name=\"bhc_image\" value=\"" . $bhc_image . "\" />\n";
echo "<input id=\"bhc_image_button\" type=\"button\" value=\"Upload Image\" />\n";
echo "<h4>What to Bring</h4><strong>If N/A, leave it blank</strong><br />\n";
echo "<textarea name=\"bhc_bring\" rows=\"4\" cols=\"50\" type=\"textarea\">" . $bhc_bring . "</textarea>\n";
echo "<h4>What is Provided</h4><strong>If N/A, leave it blank</strong><br />\n";
echo "<textarea name=\"bhc_provided\" rows=\"4\" cols=\"50\" type=\"textarea\">" . $bhc_provided . "</textarea>\n";
echo "<br /><br />\n";
echo "<h4>Start program as active?</h4>\n";
echo "<input type=\"radio\" name=\"bhc_active\" value=\"1\"" . ($bhc_active==1?' checked':'') . "> Yes<br /><input type=\"radio\" name=\"bhc_active\" value=\"0\"" . ($bhc_active==1?'':' checked') . "> No<br />\n";
echo "<br /><br />\n";
echo "<input type=\"submit\" name=\"submit\" class=\"button-primary\" value=\"Add Program\" />\n";
echo "</form>\n";
and the javascript and form codes for the one that doesn't work:
echo "<script language=\"JavaScript\">\n";
echo "jQuery(document).ready(function() {\n";
echo "jQuery('#bhc_image_button').click(function() {\n";
echo "formfield = jQuery('#bhc_image').attr('name');\n";
echo "tb_show('', 'media-upload.php?type=image&TB_iframe=true');\n";
echo "return false;\n";
echo "});\n";
echo "window.send_to_editor = function(html) {\n";
echo "imgurl = jQuery('img',html).attr('src');\n";
echo "jQuery('#bhc_image').val(imgurl);\n";
echo "tb_remove();\n";
echo "}\n";
echo "});\n";
echo "</script>\n";
/* Show the form with the details */
echo "<form method=\"post\" action=\"\" name=\"edit_program\">\n";
echo "<strong>* indicates required field</strong>\n";
/* Find out if there are events scheduled for this program ... */
$bhc_program_event = $mydb->get_results("SELECT bhc_event_id FROM $table_events WHERE bhc_program_id = $bhc_id");
/* Loop through and display programs*/
echo "<h4>Program Title *</h4>\n";
if ($bhc_program_event) {
echo "<strong>" . $bhc_title . "</strong>\n";
echo "<input type=\"hidden\" name=\"bhc_title\" value=\"" . str_replace('"', '"', $bhc_title) . "\" />\n";
} else {
echo "<input type=\"text\" size=\"40\" name=\"bhc_title\" value=\"" . str_replace('"', '"', $bhc_title) . "\" maxlength=\"255\" />\n";
}
echo "<h4>Program Subtitle</h4>\n";
if ($bhc_program_event) {
echo "<strong>" . $bhc_subtitle . "</strong>\n";
echo "<input type=\"hidden\" name=\"bhc_subtitle\" value=\"" . str_replace('"', '"', $bhc_subtitle) . "\" />\n";
} else {
echo "<strong>If no subtitle, leave it blank</strong><br />\n";
echo "<input type=\"text\" size=\"40\" name=\"bhc_subtitle\" value=\"" . str_replace('"', '"', $bhc_subtitle) . "\" maxlength=\"255\" />\n";
}
echo "<h4>Description *</h4>\n";
echo "<textarea name=\"bhc_description\" rows=\"4\" cols=\"50\" type=\"textarea\">" . $bhc_description . "</textarea>\n";
echo "<h4>Image Upload</h4><strong>Upload an image to go with this program description. If no image wanted, leave it blank</strong><br />\n";
echo "<input id=\"bhc_image\" type=\"text\" size=\"40\" name=\"bhc_image\" value=\"" . $bhc_image . "\" />\n";
echo "<input id=\"bhc_image_button\" type=\"button\" value=\"Upload Image\" />\n";
echo "<h4>What to Bring</h4><strong>If N/A, leave it blank</strong><br />\n";
echo "<textarea name=\"bhc_bring\" rows=\"4\" cols=\"50\" type=\"textarea\">" . $bhc_bring . "</textarea>\n";
echo "<h4>What is Provided</h4><strong>If N/A, leave it blank</strong><br />\n";
echo "<textarea name=\"bhc_provided\" rows=\"4\" cols=\"50\" type=\"textarea\">" . $bhc_provided . "</textarea>\n";
/* Exclude active option if registrations exist */
$nowtime = date("U");
$bhc_reg_check = $mydb->get_row("SELECT bhc_event_id FROM $table_events WHERE bhc_program_id = $bhc_id AND bhc_current_peeps > 0 LIMIT 1");
if ($bhc_reg_check) {
echo "<input type=\"hidden\" name=\"bhc_active\" value=\"1\">\n";
} else {
echo "<h4>Set program as active?</h4>\n";
echo "<input type=\"radio\" name=\"bhc_active\" value=\"1\"" . ($bhc_active==1?' checked':'') . "> Yes<br /><input type=\"radio\" name=\"bhc_active\" value=\"0\"" . ($bhc_active==1?'':' checked') . "> No<br />\n";
}
echo "<br /><br />\n";
echo "<input type=\"hidden\" name=\"bhc_id\" value=\"" . $bhc_id . "\" />\n";
echo "<input type=\"submit\" name=\"submit\" class=\"button-primary\" value=\"Edit Program\" />\n";
echo "</form>\n";
exit;
So i am trying to display data in sql server using PHP. I am using a sortable library i found online and this is my code:
echo "<table id='report' class='sortable'>";
echo "<thead><tr>";
echo "<th>A</th>";
echo "<th>B</th>";
echo "<th>C</th>";
echo "<th>D</th>";
echo "<th>E</th>";
echo "<th>F</th>";
echo "<th>G</th>";
echo "<th>H</th>";
echo "<th>I</th>";
echo "</tr></thead>";
echo "<tbody>";
for($i=0; $i<$tablerows; $i++)
{
echo "<tr>";
echo "<td>".$result[$i]['A']."</td>";
echo "<td>".$result[$i]['B']."</td>";
echo "<td>".$result[$i]['C']."</td>";
echo "<td>".$result[$i]['D']."</td>";
echo "<td>".$result[$i]['E']."</td>";
echo "<td>".$result[$i]['F']."</td>";
echo "<td>".$result[$i]['G']."</td>";
echo "<td>".$result[$i]['H']."</td>";
echo "<td>".$result[$i]['I']."</td>";
echo "<td><div class='arrow'></div></td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='5'>";
echo "<div id='nestedAccordion'>";
echo "<h2>COLUMN 1 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 2 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 3 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 4 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 5 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "</div>";
echo "</td>";
echo "</tr>";
When my page is loaded, it can be sorted by the A-I headings in <th> tag. As you can see, in my 'for' loop my last tag has an arrow. I want that so if the user wants more information about the row, he can view that by clicking that arrow, and information that will be displayed is in: <td colspan='5'>
Here is the javascript/jquery:
$(document).ready(function () {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
var parentDivs = $('#nestedAccordion div'),
childDivs = $('#nestedAccordion h3').siblings('div');
$('#nestedAccordion h2').click(function () {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$('#nestedAccordion h3').click(function () {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
});
The question and the problem i have is only either sortable for table or arrow will work. When i load the page, and i click on the arrow to view more information i can view it, but if i sort afterward, the data under the arrow is taken as its own row rather than part of the row it was selected from.
If i sort at start, and then click on arrow, the row below is hidden. I think the problem is in this chunk of code:
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
Since the next tr is for colspan? But how do i fix it?