Develop Reference

Clicking specific class to trigger open 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 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..

get event of ul li javascript

I have a problem of access to certain class, because I've a list that descent of data base and when I select an item, select all.¿Why?
I think that I need acces with the event.
This is the script:
$(document).ready(function(){
$("#contenedor_central .boton_opciones").click(function(e){
e.preventDefault();
if ($("#contenedor_central .menu_noticia").hasClass('desactivado')){
$("#contenedor_central .menu_noticia").css({"display":"table"});
$("#contenedor_central .menu_noticia").removeClass('desactivado');
$("#contenedor_central .menu_noticia").addClass('activado');
}else{
$("#contenedor_central .menu_noticia").removeClass('activado');
$("#contenedor_central .menu_noticia").css({"display":"none"});
$("#contenedor_central .menu_noticia").removeClass('activado');
$("#contenedor_central .menu_noticia").addClass('desactivado');
}
});
});
This script show all ul and I want only the clicked element to be shown
This is the php:
<?php
echo '<div id="contenedor_central" class="contenedor_central">';
$conexion=mysqli_connect("***", "***", "", "***");
if(!$conexion){
echo "La conexion ha fallado : " . mysqli_error();
exit();
}
$tamano_paginas=6;
if(isset($_GET["pagina"])){
if($_GET["pagina"]==1){
header("Location: index.php");
}else{
$pagina=$_GET["pagina"];
}
}else{
$pagina=1;
}
$empezar=($pagina-1)*($tamano_paginas);
$consulta="SELECT * FROM contenidoblog";
if($resultado=mysqli_query($conexion, $consulta)){
$num_filas=mysqli_num_rows($resultado);
$total_paginas=ceil($num_filas/$tamano_paginas);
}
$consulta_filtrada="SELECT * FROM contenidoblog LIMIT $empezar, $tamano_paginas";
$resultado1=mysqli_query($conexion, $consulta_filtrada);
if($resultado1){
while($registro= mysqli_fetch_assoc($resultado1)){
echo "<div class='opciones'>
<ul class='menu_noticia desactivado'>
<li>Favoritos</li>
<li>Compartir</li>
<li>Me gusta</li>
<li>Comentar</li>
</ul>
</div>";
echo "<div id='cajaContenedor'> ";
if($registro['imagen']!=""){
echo "<img src='imagenes/" . $registro['imagen'] . "' />";}
echo"<div id='contenedor_titular_cabecera'> <i id='btnn' class='boton_opciones fa fa-bars fa-lg' aria-hidden='true'></i>
<a href='*'".$registro['cabecera']."&id=".$registro['id']."'>";
echo "<p> ". $registro['fecha'] ."</p>";
echo "<H2>" . $registro['cabecera'] . "</H2>";
echo "<p>". $registro['titular'] . "</p>";
echo "</a>";
echo "</div>";
echo "</div>";
}
}
mysqli_close($conexion);
for($i=1;$i<=$total_paginas;$i++){
echo "<a href='?pagina=". $i . "'/>" . $i . "</a> ";
}
echo "<BR></BR>";
echo "</div>";
?>
This is the image

Because $("#contenedor_central .menu_noticia") will choose all the li.
You have to distinguish between your current click li.
You can add eventListener for all the $("#contenedor_central .menu_noticia") and use $(this) to choose your current click li.
$("#contenedor_central .menu_noticia).click(function(e){
e.preventDefault();
if ($(this).hasClass('desactivado')){
$(this).css({"display":"table"});
$(this).removeClass('desactivado');
$(this).addClass('activado');
}else{
$(this).removeClass('activado');
$(this).css({"display":"none"});
$(this).removeClass('activado');
$(this).addClass('desactivado');
}
})

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

How to open Wordpress Media Upload in two places in plugin

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>&ast; indicates required field</h4>\n";
echo "<h4>Program Title &ast;</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 &ast;</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>&ast; 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 &ast;</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 &ast;</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;

Sortable and hidden information through nested accordion in HTML/PHP page?

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?