I have a jsfiddle here where a jquery function is used in able to make a calculation between the number entered in the text input and subtracting the number with the "Total Marks" number per question.
Have a play around in the jsfiddle, in question 1 change the values in the text input and you will see the total marks change with in the same question block. For question 2 it is a readonly box but the reason it is readonly is because it is a single answer. If a question has a single answer then the text input should be readonly else if multiple answers then it should not be readonly.
The fact is though is that I want the jquery function to work with the code below but it doesn't at the moment. These are the problems I have which needs to be fixed:
The total marks should not equal 5, it should equal the value of $searchMarks[$key], as each question could have a different total marks
At the moment for the code below it does not perform the calculation
Finally it is not making the text input readonly if question only contains single answer.
My question is that how should the code below be setup so that it can work exactly the same as the jsfiddle?
Below is the code:
<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery/basic.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $inputs = $('input.individualMarks');
$inputs.filter(function() {
return $(this).prop('readonly') === true;
}).each(function() {
var $input = $(this);
});
$inputs.filter('[data-q_group]').keyup(function() {
var $group = $inputs.filter('[data-q_group="' + $(this).data('q_group') + '"]');
var $marks = $group.eq(0).closest('tr').find('td.noofmarkstd');
var markVal = <?php $searchMarks ?>;
$group.each(function() {
markVal -= ($(this).val() || 0)
})
$marks.text(markVal)
})
});
</script>
</head>
<body>
<form id="QandA" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<?php
echo "<table border='1' id='markstbl'>
<tr>
<th class='questionth'>Question No.</th>
<th class='questionth'>Question</th>
<th class='answerth'>Answer</th>
<th class='answermarksth'>Marks per Answer</th>
<th class='noofmarksth'>Total Marks</th>
</tr>\n";
$previous_question_id = null;
$rowspans = array_count_values($searchQuestionId);
foreach ($searchQuestionContent as $key=>$question) {
// removed logic, not necessary to set empty strings if you're skipping them
echo '<tr class="questiontd">'.PHP_EOL;
if ($previous_question_id != $searchQuestionId[$key]) {
echo '<td class="questionnumtd" name="numQuestion" rowspan="'.$rowspans[$searchQuestionId[$key]].'">'.htmlspecialchars($searchQuestionId[$key]).'</td>' . PHP_EOL;
echo '<td class="questioncontenttd" rowspan="'.$rowspans[$searchQuestionId[$key]].'">'.htmlspecialchars($question).'</td>' . PHP_EOL;
}
echo '<td class="answertd" name="answers[]">';
echo $searchAnswer[$key];
echo '</td>' ;
echo '<td class="answermarkstd"><input class="individualMarks" name="answerMarks[]" id="individualtext" type="text" /></td>' . PHP_EOL;
if ($previous_question_id != $searchQuestionId[$key]) {
echo '<td class="noofmarkstd" rowspan="'.$rowspans[$searchQuestionId[$key]].'">'.htmlspecialchars($searchMarks[$key]).'</td>' . PHP_EOL;
}
// moved this to the end
if ($previous_question_id != $searchQuestionId[$key]) {
$previous_question_id = $searchQuestionId[$key];
}
}
echo '</tr>';
echo "</table>" . PHP_EOL;
?>
</form>
Your code behaved the same locally as it did in jsFiddle after enclosing it within $(document).ready (As mentioned in a comment above).
$(function() {<your code>});
Maybe you forgot to src jquery?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Related
I have a dynamic table which I populate with data fetched from my db using PHP.
I tried following some tutorials and I could see that in their fiddle it was working but why doesn't it work on mine?
Could it be related to the scripts and links I am importing?
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#myTable').dataTable({
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var select = $('<select class="browser-default custom-select form-control-sm"><option value="" selected>Filter</option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
$('#example tbody').on('click', 'tr', function() {
var data = table.row(this).data();
});
});
$('#myTable tr').each(function() {
// need this to skip the first row
if ($(this).find("td:first").length > 0) {
var cutomerId = $(this).find("td:first").html();
}
});
</script>
and the table below:
<table id="myTable" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th>Report ID</th>
<th>Client</th>
<th>Case</th>
<th>Date received</th>
</tr>
</thead>
<tbody>
<?php if (!empty($show_arr)) { ?>
<?php foreach ($show_arr as $user) {
if ($user['display'] == 1) {
?>
<tr>
<td>
<?php echo '<a href=selectedReport.php?rep_id=' . urlencode($user["id"]) . "&cus_id=" . urlencode($user["cus_id"]) . "&name=" . urlencode($user["name"]) . '>' . $user["id"] . '</a>'; ?>
</td>
<td>
<?php echo '<a href=selectedReport.php?cus_id=' . urlencode($user["cus_id"]) . "&rep_id=" . urlencode($user["id"]) . "&name=" . urlencode($user["name"]) . "&state=" . urlencode($user["state"]) . '>' . $user["name"] . '(' . $user["username"] . ')</a>'; ?>
</td>
<td>
<?php
echo '<a href=selectedReport.php?cus_id=' . urlencode($user["cus_id"]) . "&rep_id=" . urlencode($user["id"]) . "&name=" . urlencode($user["name"]) . "&state=" . urlencode($user["state"]) . '>' . $user['report_cases_accepted'][0]['case_id'] . '</a>';
?>
</td>
<td>
<?php
echo $user['date_sent'];
?>
</td>
</tr>
<?php
}
}
} ?>
</tbody>
<tfoot>
<tr>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</tfoot>
</table>
My intention is to be able to click in rows and get the data you see in PHP and then redirect to another page. Basically, I want to do exactly the same what I am doing below using a href... but without it, now I just want to click anywhere in the rows, take the values of that row and redirect to next page.
Please let me know if there you see something wrong with the code above. My doubts are somewhere in the way I am importing the scripts and stylesheets but I am not sure.
Hello i have these code.
<div class="col-md-6"> <br><br>
<table class="table">
<thead>
<th> Subject </th>
<th> Schedule </th>
<th> Day </th>
<th> Slots </th>
<th> Sections </th>
<th> Action </th>
</thead>
<tbody>
<?php
foreach($Subjects as $row)
{
$course = $this->session->userdata('course');
if($course == 'BSITWMA' || $course == 'BSCSSE' || $course == 'BSITDA' || $course == 'BSITGDD')
{
if($row->ite == '1' ) {
echo '<tr>';
echo '<td id="subj_code" name="subj_code">' .$row->subject_code. '</td>';
echo '<td id="sched_time" name="sched_time">' .$row->schedule_timestart. ' - ' .$row->schedule_timeend.' </td>';
echo '<td id="day" name="day">' .$row->schedule_day. '</td>';
echo '<td id="slot" name="slot">' .$row->slots. '</td>';
echo '<td id="sect_code" name="sect_code">' .$row->section_code. '</td>';
echo '<td > <button id = "btn-add" class="btn" > Reserve </button > </td>';
echo '</tr>';
}
}
else {
if($row->coe == '1' ) {
echo '<tr>';
echo '<td id="subj_code" name="subj_code">' .$row->subject_code. '</td>';
echo '<td id="sched_time" name="sched_time">' .$row->schedule_timestart. ' - ' .$row->schedule_timeend.' </td>';
echo '<td id="day" name="day">' .$row->schedule_day. '</td>';
echo '<td id="slot" name="slot">' .$row->slots. '</td>';
echo '<td id="sect_code" name="sect_code">' .$row->section_code. '</td>';
echo '<td > <button id = "btn-add" class="btn" > Reserve </button > </td>';
echo '</tr>';
}
}
}
?>
</tbody>
</table>
</div>
I have updated my code and this is what it looks like now.
what i want is to when i press the button. i will retrieve all the values and use it to insert into the database.
i dont have any code yet for the retrieving of value part.
i have the jquery part like this, and i still dont have any idea how to get the values in each TD.
$('button').on('click',function() {
var rowCount = $('#mhTable >tbody >tr').length;
});
You could get the ancestor <td> element of the button and get the values by accessing the text element of the sibling <td> elements using the jQuery .each() function.
The code should look something like this:
$(document).ready(function() {
$("#btn-add").on('click', function() {
var values = [];
$(this).parent('td').siblings().each(function() {
values.push($(this).text());
});
console.log(values);
});
});
Here I pass the values to an array for simplicity but you can pass these values using ajax or whatever other method you use to send values to the database.
Here is a fiddle with this example in practise
Why not do something like this for each of your variables within your foreach?
$subject_code = $row->subject_code;
and then you can use that variable for whatever you choose (such as your query)
I am trying to utilize a button that will open a dialog based on the specific row that the button is located in. I have attached my code below.
The button is class is dlg-outletpart-btn:
Here is the jquery javascript portion:
<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
} );
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "fade",
duration: 700
},
});
$( ".dlg-outletpart-btn" ).click(function() {
var outletID = $(this).attr("data-dlg-outletparts");
$( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>
Here is the html with php:
<body>
<div>
<p>
<h3>Go Back to main page</h3>
</p>
</div>
<div>
<?php
session_start();
require_once('./includes/php/include_master.php');
if ($_SESSION['authenticated'] == "true") {
$id_account = $_SESSION['ID_Account'];
$q = $protoFM['EMGSV'] -> newFindCommand('web_outlets');
$q -> addFindCriterion('id_account', '=='.$id_account);
$r = $q->execute();
if(FileMaker::isError($r)){
if($r->code == 401){
echo "No outlets found.";
}else{
echo "Unknown Error:".$r->code;
}
}else{
}
} else {
echo "You are not logged in.";
}
?>
<?php
foreach ($r->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');
echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
echo '<p>';
echo '1. '.$outletPart1.'<br>';
echo '2. '.$outletPart2.'<br>';
echo '3. '.$outletPart3.'<br>';
echo '4. '.$outletPart4.'<br>';
echo '5. '.$outletPart5.'<br>';
echo '6. '.$outletPart6.'<br>';
echo '7. '.$outletPart7.'<br>';
echo '8. '.$outletPart8.'<br>';
echo '9. '.$outletPart9.'<br>';
echo '10. '.$outletPart10.'<br>';
echo '</p>';
echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
<tr>
<th>Floor</th>
<th>Area Served</th>
<th>Room Number</th>
<th>Outlet Number</th>
<th>Outlet Gas</th>
<th>Outlet Manufacturer</th>
<th>Outlet Model</th>
<th>Outlet Parts</th>
</tr>
</thead>
<tbody>
<?php
foreach ($r->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');
echo "<tr>";
echo '<td>' .$outletFloor. '</td>';
echo '<td>' .$outletAreaServed. '</td>';
echo '<td>' .$outletRoomNumber. '</td>';
echo '<td>' .$outletNumber. '</td>';
echo '<td>' .$outletGas. '</td>';
echo '<td>' .$outletManufacturer. '</td>';
echo '<td>' .$outletModel. '</td>';
echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
}
?>
</tbody>
</table>
</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>
I didn't try to test this and there was a lot of cleanup needed so take this with a grain of salt rather than the exact solution.
Before I get into the explanation, there are a couple of points that need to be made:
Stay on top of your indention levels
Poorly indented code is harder to build in and even harder to troubleshoot.
REMEMBER: what you post online reflects on you as a programmer.
Don't use variables with single letters.
Give your variables proper and descriptive names. Single letter names also make it hard to code and hard to troubleshoot.
If you don't need it, don't write it
This is especially true if you're going to post on StackOverflow asking for help. The place where you had an else clause without any code in it should be stripped out of your question and really should be stripped out of your code. If you don't have any tasks to perform within a clause then don't add it. Add it back in when you actually need it. This goes for the closing and immediately opening of the php element. There's no reason to close one php element if you're going to immediately open another. If this is because your knitting two different sections together for the question then clean it out before you submit it.
So, here's the code you can try. Focus on the parts that I commented on in the javascript. The basic idea is:
Make the table your main selector.
You could make the tr element the main selector and it would still give you the index of the tr in the table, but adding the selector to the table itself means if you programmatically add new rows after the DOM has been rendered the jquery method will work for them as well.
Use the this keyword as a starting point.
this will be the button clicked which will allow you to navigate around.
Leverage jquery's navigation methods, in this case closest().
<html>
<head>
<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
});
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "fade",
duration: 700
},
});
// I changed the element selector to the id of the table element.
// This allows you to specify the selector for the 'on' method to apply to all
// tr elements within the given table and then reference their index relative
// to the overall table.
// I'm using `button` for the method's selector because you have only have
// on button in your table so it de-couples your selector from your class name.
$( "#table_id_outlets" ).on('click', 'button', function() {
debugger;
// this: refers to the button that was clicked
// closest: walks up the node hierarchy till it finds a `tr`
// index(): gives you the index of the `tr` within the table.
// Use the index number however you need.
console.log($(this).closest('tr').index());
var outletID = $(this).attr("data-dlg-outletparts");
$( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>
</head>
<body>
<div>
<p>
<h3>Go Back to main page</h3>
</p>
</div>
<div>
<?php
session_start();
require_once('./includes/php/include_master.php');
if ($_SESSION['authenticated'] == "true") {
$id_account = $_SESSION['ID_Account'];
// Note: you can't put a space between your
$query = $protoFM['EMGSV']->newFindCommand('web_outlets');
$query->addFindCriterion('id_account', '==' . $id_account);
$result = $query->execute();
if(FileMaker::isError($result)){
if($result->code == 401){
echo "No outlets found.";
}else{
echo "Unknown Error:".$result->code;
}
}
} else {
echo "You are not logged in.";
}
foreach ($result->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');
echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
echo '<p>';
// Use an unordered list here
echo '1. '.$outletPart1.'<br>';
echo '2. '.$outletPart2.'<br>';
echo '3. '.$outletPart3.'<br>';
echo '4. '.$outletPart4.'<br>';
echo '5. '.$outletPart5.'<br>';
echo '6. '.$outletPart6.'<br>';
echo '7. '.$outletPart7.'<br>';
echo '8. '.$outletPart8.'<br>';
echo '9. '.$outletPart9.'<br>';
echo '10. '.$outletPart10.'<br>';
echo '</p>';
echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
<tr>
<th>Floor</th>
<th>Area Served</th>
<th>Room Number</th>
<th>Outlet Number</th>
<th>Outlet Gas</th>
<th>Outlet Manufacturer</th>
<th>Outlet Model</th>
<th>Outlet Parts</th>
</tr>
</thead>
<tbody>
<?php
foreach ($result->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');
echo "<tr>";
echo '<td>' .$outletFloor. '</td>';
echo '<td>' .$outletAreaServed. '</td>';
echo '<td>' .$outletRoomNumber. '</td>';
echo '<td>' .$outletNumber. '</td>';
echo '<td>' .$outletGas. '</td>';
echo '<td>' .$outletManufacturer. '</td>';
echo '<td>' .$outletModel. '</td>';
echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
}
?>
</tbody>
</table>
</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>
</html>
I didn't test the php portion out, but the jquery definitely works.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
Hi I click on one of the links given in the save column. Once it is clicked the code between the script tags should be run and give an alert ('BBBBBBBBBBBBBBBBBBBB'). But I can't figure out why it doesn't give the expected result. Please someone help me to correct this
<html>
<title></title>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script></head>
<script>
$(".QuestionEdit").click(function(){
alert('BBBBBBBBBBBBBBBBBBBB');
var B=$(this).attr('id');
var Data=B.replace("QuestionEdit","");
alert(Data);
return false;
});
</script>
</head>
<body>
<?php
echo "<form>";
echo "<div id='QuestionDetails' style=' position:relative; top=50px;'>";
$Query="SELECT * FROM Questions WHERE Form_ID='0'";
echo "<table border='1' id='DisplayFormDetailss'>
<tr style='background-color:#D0A9F5;' height='40px;'>
<th width='100px;'>Question_ID</th>
<th width='420px;'>Question Name</th>
<th width='100px;'>Inactivate</th>
<th width='70px;'>Edit</th>
</tr>";
$i=0;
while($i<5){
echo "<tr height='25px;'>";
echo "<td><input name='QuestionID[]' id='QuestionID ".$i."' align=center value='8'></input></td>";
echo "<td><input name='QuestionName[]' style='width:420px;' id='QuestionName".$i."' align=left value='7'></input></td>";
echo "<td name='QuestionInactive[]' id='QuestionInactive".$i."' align=center><input type='checkbox'></input></td>";
echo "<td class='QuestionEdit' id='QuestionEdit".$i."' align=center><a href='' align=left>Edit</a></td>";
echo "</tr>";
$i++;
}
echo "</table>";
echo "</div>";
echo "<div id='Sub' style='position:relative; top:50px;'>";
echo "<input type='submit' value='Save The Table'></input>";
echo "</div>";
echo "</form>";
?>
</body>
</html>
The div.QuestionEdit is not loaded when the script executes. Wrap the script in $(document).ready() to execute when the DOM is available.
$(document).ready(function(){
$(".QuestionEdit").click(function(){
alert('BBBBBBBBBBBBBBBBBBBB');
var B=$(this).attr('id');
var Data=B.replace("QuestionEdit","");
alert(Data);
return false;
});
});
Solution:
$(document).ready(function() {
$(".QuestionEdit").click(function(){
alert('BBBBBBBBBBBBBBBBBBBB');
var B=$(this).attr('id');
var Data=B.replace("QuestionEdit","");
alert(Data);
return false;
});
});
Your script is running before the document has loaded.
Use the document ready callback to run any jQuery code that needs to access the DOM so it runs when the DOM is loaded.
$( document ).ready(function() {
// Handler for .ready() called.
});
I've got a little issue with a highlight function I'm working on. I basically load records out of a database that match the current form data in certain ways. Then, when someone is filling in the form, if they are describing an issue that already exists in my system, it will highlight words that their description has in common with the existing record(s). My issue is that the table breaks. It will work to a certain extent, but sometimes it breaks the PHP loop portion out of the rest of the table, and it then has no formatting, and the highlighting function will not work. To be more specific, once broken, the td tags in the body of the table do not follow the formatting of the header row.
Conditions that cause the undesirable effect:
tabbing through the text area
If too many classes have to be removed or applied at once (via deleting all, adding many words or deleting or searching for a single character with many occurrences)
html on the main page && script to trigger the highlighting
<textarea name="description" id="description"></textarea>
<script>
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(function(){
$("#description").keydown(function(){
delay((function(){
$("#displayer *").removeClass('highlight');
var1 = $('textarea#description').val().split(' ');
for (var i=0;i<var1.length;i++){
$("#displayer *").highlight(var1[i], "highlight")};
}),1000);
});
});
</script>
the external php that builds the searched table based on an ajax call is this:
echo '<TABLE BORDER="0" CELLSPACING="5" CELLPADDING="5" id="displayer"><FONT FACE="ARIAL">';
echo ' <tr> ';
echo ' <td width="20" ALIGN="LEFT" height="1">ID</td>';
echo ' <td width="89" ALIGN="LEFT" height="1">Date</td> ';
echo ' <td width="200" ALIGN="LEFT" height="1" >Description</td>';
echo ' <td width="89" ALIGN="LEFT" height="1" >Solution</td>';
echo ' <td width="20" ALIGN="LEFT" height="1" >User:</td>';
echo ' <td ALIGN="LEFT" height="1" >Key?:</td>';
echo ' <td ALIGN="LEFT" height="1" >Part:</td>';
echo ' <td ALIGN="LEFT" height="1" >Classified As:</td>';
echo ' </tr> ';
for ($i=1; $i <= $num_results; $i++)
{
$row = mysql_fetch_array($result1);
echo '<TR BGCOLOR="#EFEFEF">';
echo '<TD width="20">';
echo stripslashes($row['0']) ;
echo '</TD>';
echo '<TD width="89" >';
echo $row['1'] ;
echo '</TD>';
echo '<TD width="200">';
echo stripslashes($row['6']) ;
echo '</TD>';
echo '<TD width="89">';
echo stripslashes($row['11']) ;
echo '</TD>';
echo '<TD width="20">';
echo $row['5'] ;
echo '</TD>';
echo '<TD>';
if ($row['8'] == 1)
{echo 'Yes' ;}
else
{echo 'No' ;}
echo '</TD>';
echo '<td>'.$row['10'].'</td>';
echo '<td>'.$row['9'].'</td>';
echo '</TR>';
}
echo '</TABLE>';
external highlight plugin:
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
$(this).contents().filter(function() {
return this.nodeType == 3 && regex.test(this.nodeValue);
}).replaceWith(function() {
return (this.nodeValue || "").replace(regex, function(match) {
return "<span class=\"" + className + "\">" + match + "</span>";
});
});
});
};
I think I should add a test for empty with some kind of escape, to solve the first condition, but with the second, I'm not sure what's happening. Any suggestions are definitely appreciated. Sorry for the post being huge and convoluted, but I wanted everyone to have all the information I could provide.
$(function(){
$("#description").keydown(function(){
delay((function(){
var divClone = $("#disp_hidden .serial_display").clone();
$("#displayer .serial_display").replaceWith(divClone);
if ($.trim($('textarea#description').val()) != ''){
var1 = $('textarea#description').val().trim().split(' ');
for (var i=0;i<var1.length;i++){
$("#displayer *").highlight(var1[i], "highlight")};
};
}),1000);
});
});
hidden table clone, replaces at new edit, fixed.