Hope everyone is fine. Well I have a weird question, something that I'm missing or failing to understand. Hope anyone here can help me out. Well here goes,
Well I have an html page where I've defined a table with a few hard-coded values as below,
<table id='data-table' class='someClass'>
<thead>
<tr>
<th id="name-title">NAME</th>
</tr>
</thead>
<tbody>
<tr class="odd"><th class='c1'>Zachary Quinto</th></tr>
<tr class="even"><th class='c1'>Penny</th></tr>
<tr class="odd"><th class='c1'>Glen McGrath</th></tr>
</tbody>
</table>
Now I have a javascript file in which, somewhere down the code (Using jQuery), I do this,
$('#data-table').click(function() {
var value = $(this).find("th.c1").text();
if(value == "Zachary Quinto")
someFunc.showData('data-table', 1);
});
And for some reason this doesn't work, it goes over this function and I don't see any change/effect. However, to my amazement, If, when encapsulating my data into tags, it seem to work. (By encapsulating, I mean something like below)
<tr class="odd"><th class='c1'>Zachary Quinto</th></tr>
<tr class="even"><th class='c1'>Penny</th></tr>
<tr class="odd"><th class='c1'>Glen McGrath</th></tr>
Can anyone please help me with this, I'm not really sure what I'm doing wrong in Javascript file which doesn't let me do this. It's kind of weird as I thought both mean the same thing one way or another.
Thanks a lot for your time.
Because something is wrong with your script.
You should write it as:
"use strict";
$('#data-table').on("click", "th", function(e) {
e.preventDefault();
var value = $(this).text();
if(value == "Zachary Quinto")
someFunc.showData('data-table', 1);
});
jQuery's text function returns the combined text of all matching elements. In your case, there are three th.c1 matches, so the text() function returns Zachary QuintoPennyGlen McGrath.
You can see this by throwing a breakpoint on your event handler in a debugger.
Related
I was trying to add data to my existing table using Jquery's append(), but for some reason it did not work. I found another way to solve this problem, but I was wondering why this solution did not work. Could anyone explain it to me?
JS Code:
$(document).ready(function(){
var mapItems=new Map();
mapItems.set("firstName", "First Name");
mapItems.set("lastName", "Last Name");
mapItems.set("dob", "Date of Birth");
mapItems.set("gender", "Gender");
mapItems.set("idnumber", "ID Number");
mapItems.set("occupation", "Occupation");
mapItems.set("ethnicity", "Ethinicity");
function viewAllItems(data){
var info="";
for(var x=0; x<data.length;x++){
info+="<th>";
for(var key of mapItems.keys()){
var added=data[x][key];
added="<tr>"+added;
added+="</tr>";
info+=added;
}
info+="</th>";
}
return info;
}
$("#viewAll").on('click', function(){
$.ajax({
url:"A_URL_THAT_RETURNS_DATA",
type: "GET",
success:function(data) {
$("#tableViewAll").children().remove();
$("#tableViewAll").append(viewAllItems(data));
}
});
});
});
HTML
<button id="viewAll">View All</button><br>
<table id=tableViewAll>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Gender</th>
<th>ID number</th>
<th>Occupation</th>
<th>Ethnicity</th>
</tr>
</table>
After console.logging viewAllItems(data), I got a proper HTML string back as a result, here it is:
<th><tr>sdfsdf</tr><tr>asdfasd</tr><tr>2006-03-04</tr><tr>male</tr> <tr>234234234</tr><tr>sadf</tr><tr>hispanic</tr></th><th><tr>John</tr><tr>Smith</tr><tr>1997-05-23</tr><tr>male</tr><tr>456456456</tr><tr>Garbageman</tr><tr>asian</tr></th><th><tr>aasd</tr><tr>asdfffe</tr><tr>2009-06-07</tr><tr>male</tr><tr>789789789</tr><tr>dfhdfbfdgb</tr><tr>hispanic</tr></th>
The information inside doesn't make any sense(on purpose) and is formatted poorly, but I just wanted to show that I get a proper HTML string back as a response.
Thus, my append method should append this string into the table. However, it does not do so.
Any help would be greatly appreciated. I just want to understand why it didn't work the way I thought it would.
P.S. I realize that I'm deleting my table headings, that's to be fixed. Also, I realized i'm using the th tag when I shouldn't be, but I'll also fix that later
The generated table row is wrapped in a TH. Also there is no TD present inside TR. Please correct that and the code should work fine.
This context of this issue is it is a set of measurements needed for review by the user. I'm reviewing some of my code and changing it to bootstrap's classes. I have a php function - reviewSlide(); that prints out the necessary html. From there it calls javascript script - reviewGetMeasurement(); function to grab the measurements the user inputs.
The event that triggers the javascript function is -
<button onclick="slideforms_step17(event);reviewGetMeasurement();" class="mdk_slidesforms_btn"><?= (!empty($button_text)) ? $button_text : 'Next' ?></button>
The function runs then moves into the below function reviewSlide() however if I do have the following code everything runs perfectly and the measurements are gathered and printed to the page.
function reviewSlide() {
<table>
<tr width="33%">
<table class="pktsq_measurement_table_my_account_table">
<tr>
<td colspan="2" class="pktsq_measurement_table_my_account_td pktsq_measurement_table_my_account_td_title">
Personal
</td>
</tr>
<tr>
<td class="pktsq_measurement_table_my_account_td">
Height
</td>
<td class="pktsq_measurement_table_my_account_td pktsq_measurement_table_my_account_td_measurement" id="userHeight"></td>
</tr>
</table>
</tr>
</table>
...
}
If I remove the above table nothing works.
I have tried
function reviewSlide() {
<p id="userHeight"></p>
<p id="userWeight"></p>
...
}
at the top of my function (which is at this stage above the table) and nothing comes up.
I've looked at other people's issues, some of the main problems were the page wasn't loading and you would have to wait for the page to load as the javascript would not see any html. But I believe I have a bit of a quirky problem here regarding the table code
Any help would be grateful. Thank you.
UPDATE and CLARIFICATION (same as comments):
I didn't write this so bear with me but yes reviewSlide is in php. To clarify I have a function stepxx() in a shortcodes.php file. Each step represents a slide and reviewSlide() also represents another slide, in this case the review slide with all the measurements. All this is written in html/php. In stepxx() there is a button tag that calls a javascript function slideforms_stepxx(event);. When each step is complete 1-xx, slidesforms_stepxx(event) is called to check the input.
This is where we come to the review slide. On the slide before the review slide we go into slideforms_step17 check the input and submit the values to the server via jquery. Then we enter the reviewGetMeasurement() function as seen above by <button onclick="slideforms_step17();reviewGetMeasurement();....>. ReviewGetmeasurement's task is to print out the values and this is where my problem lies.
Inside reviewGetMeasurements(), if I print out the value for a variable let's say the height via console.log(height), it'll work and I can see the value in the console. But once if I try to print the value our by doing
document.getElementById("userHeight").innerHTML = height + "cm";
I get null. But I know there is a value height and it's not null. HOWEVER if I put the <table> code from above it will work and the values are printed out. If I use the <p> tags with the right id it won't work.
You can't just blindly put HTML inside of a Javascript or PHP function. What's in those functions must be the appropriate type of code, not HTML.
If it's Javascript, then using Javascript you can create DOM elements and then insert them into the page.
If it's PHP running at page render time on the server, then you can use PHP's echo to insert content into the page.
If it's PHP running in an Ajax call, then you can also use echo to construct a response to the Ajax call.
Here's an example of inserting content into the page from a user event using a Javascript function:
function insertContent(html) {
var div = document.createElement("div");
div.innerHTML = html;
document.body.appendChild(div);
}
document.getElementById("run").addEventListener("click", function() {
insertContent(document.getElementById("newContent").value);
});
<input id="newContent" value="Some Text"> <button id="run">Insert</button>
My problem has left me trying many solutions and stumped for a while now. My problem is exactly this:
There's a HTML table and a button on a page. Upon pressing the button, a script will run, copying the contents of the cells in the table into a text box. Here is the code for the table:
<table>
<tr><th></th><th>Category1</th></tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr><th></th><th>Category2</th></tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr><th></th><th>Category3</th></tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr><th></th><th>Category4</th></tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
My first thoughts were to write a script that iterated through the table and copied the contents of each cell (and creating a new line after every 2 cells). I realized very quickly, that I had no idea how to do that. After some searching I was able to come up with a script that clones the table, and it actually works quite well. This code is here:
$("button").click(function () {
$("table").clone().appendTo(".copy");
});
There are two problems that arise from using this method, however. I want plaintext, not a carbon copy of the table. The other problem is that this method only works when I clone the table into a div, it will not work when I try to clone it to a text box.
I've searched for a while for something similar to this and can only find solutions to copying single rows or cells. I had originally started there but couldn't figure out a way to write a loop that started at the beginning of the table and iterated through the entire thing, copying the contents as it iterated row by row (and creating a new line with each new row that it encountered). The loop would obviously end when there were no more rows to iterate through... This all sounds so simple to do, I know there must be a way.
Please Note: This script will be applied to a Site.Master Page so the script must be able to run for a plethora of tables. All of the tables follow the same structure shown above, but some will have more rows than others.
Any ideas? Any help is greatly appreciated.
You could use the .each() JQuery Method:
JS
function cloneTableContents()
{
$("table tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text());
});
});
}
JS For All Tables On Page In Order
function cloneTableContents()
{
$("table").each(function()
{
$(this).find("tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text()+" ");
});
});
});
}
HTML
<table id="mine">
<tr><th></th>
<th>Category1</th>
</tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr>
<th></th>
<th>Category2</th>
</tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr>
<th></th><th>Category3</th>
</tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr>
<th></th><th>Category4</th>
</tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
<textarea class="copy"></textarea>
<button onclick="cloneTableContents('mine','.copy');">Copy</button>
Working Example:
http://casewarecomputers.com:8088/soHelp.html
I have a table:
<table>
<tr>
<td colspan="2"><h2>Order Awards here:</h2></td>
</tr>
<tr>
<td class="aocBlack">Delivery:</td>
<td>
<select style="width: 200px;" id="deliveryMethod" name="deliveryMethod" size="1" onchange="showMailing()">
<option value="print">I will print it myself.</option>
<option value="mail">Please mail it to me.</option></select>
</td>
</tr>
<tr id="messageText" style="">
<td class="aocBlack" colspan="2">Message to appear on card:</td>
</tr>
<tr id="messageText2" style="">
<td colspan="2"><textarea id="certMessage" name="certMessage" rows="5" cols="10" style="width: 284px;"></textarea></td>
</tr>
</table>
When the select box called deliveryMethod is set to "print", the following two table rows (id messageText and messageText2) should be visible. When it's set to "mail", they should be hidden. I have some javascript that's worked before with no problem, but the id's I was targeting before were always divs. I don't know if table rows behave differently, but I'm getting some strange results. Here's the JS:
function showMailing(){
e = document.getElementById("deliveryMethod");
eVal = e.options[e.selectedIndex].value;
if (eVal == "mail"){
document.getElementById("messageText").style.display="none";
document.getElementById("messageText2").style.display="none";
}else{
document.getElementById("messageText").style.display="inline";
document.getElementById("messageText2").style.display="inline";
}
}
The results are somewhat strange, to my (admittedly javascript/css-rusty) eyes. For example, when the page initially loads, everything displays as it's supposed to: the dropdown's default value is "print", and so the two table rows in question display. When you change the dropdown to "mail", they both disappear. But when you change it back, the fields are all pushed over out of where they're supposed to be. These results are consistent across FF and Chrome (strangely it works correctly in IE) so I have to assume I'm doing something wrong, but I don't know what.
Here are some screenshots (note there are a few fields displayed in the screenshot that I've stripped out of the code shown here just for clarity.) Can anyone help me out here?
On initial load:
After changing from print to mail:
After changing back from mail to print:
The default display value for a table row is table-row(*). If you set it to inline instead you'll be asking the browser to draw table cells inside inline text instead of a row, which will confuse it and give unspecified results.
(*: except on IE<8, which don't support the table-related display values, instead setting them all to block and giving the elements themselves magic layout powers.)
The better way do show/hide, where you don't have to worry about what the default display value might be, is to define a class:
.hidden { display: none; }
and then toggle that class on and off the element.
document.getElementById('deliveryMethod').onchange= function() {
var cls= this.value==='mail'? 'hidden' : '';
document.getElementById('messageText').className= cls;
document.getElementById('messageText2').className= cls;
};
Assigning the handler from script allows you to drop the onchange inline attribute. You also don't need size="1" (that goes without saying for a single-select), or the style="".
The business with reading the select's value using this.options[this.selectedIndex].value you probably don't need any more, unless you're dealing with ancient browsers.
function showMailing(){
e = document.getElementById("deliveryMethod");
eVal = e.options[e.selectedIndex].value;
if (eVal == "mail"){
document.getElementById("messageText").style.display="none";
document.getElementById("messageText2").style.display="none";
}else{
document.getElementById("messageText").style.display="table-row";
document.getElementById("messageText2").style.display="table-row";
}
}
I'd recommend avoiding "eVal" as a variable name, because there's a native JS method called eval(). The capitalization you used is different ("eVal" not "eval"), so it probably won't break things. But it could easily be confusing to a human reader. Also, if you accidentally forget to capitalize the "V" and then need to use the eval() method, it could break your script.
So just in general, avoid using variable names that are similar to the names of existing methods. May I suggest "selectedOption" or "sel" or something?
I'm using YUI3 and I've been trying to make <tr> tags inside a table draggable with no luck. I've found that I can drag <div> nodes around, but for some reason I can't drag a <tr>. It shouldn't be a limitation, I've found examples of YUI2 where this is done, but the code is completely different from YUI3 and I can't figure this out.
Does anyone know if you can drag <tr> nodes in YUI3, and how to do this?
Here's my code:
YUI({combine: true, timeout: 10000}).use("dd-drop", "dd-constrain", "node", function (Y) {
var drags = Y.Node.all('#draftable-players tr.drag');
drags.each(function(v, k) {
var dd = new Y.DD.Drag({
node: v,
dragMode: 'intersect'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#draft'
});
dd.on('drag:end', function(e) {
e.preventDefault();
});
});
});
And the relevant HTML:
<div id="draft">
<table id="draftable-players">
<tr class="drag"><td>some stuff</td></tr>
<tr class="drag"><td>some more stuff</td></tr>
</table>
<table> another table, i'm trying to drag <tr>s from the other one to this one
</table>
</div>
Any help would be appreciated. Thanks!
This question didn't garner too much interest, but I thought I'd answer it just as well in case someone comes across this in the future.
I found that you can't drag <tr> elements between two tables, only within the same table - further inspection of the YUI2 examples I mentioned above were doing exactly this, dragging within a given table.
I've since converted my tables to <div> elements and styled them to look like a <table> using CSS, and now I can drag from one 'table' to another. If anyone is curious to see some code for dragging and dropping, check out YUI3's docs here.