We Keep Coding

React colspan not working

Why colspan attribute doesn't have effect in React? I created simple component which renders the following:
<table border="1">
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</table>
and what I get is:
Am I missing something?
Edit: SOLVED
Here is the solution. React expects the attribute name as colSpan, not colspan. Figured this out after wasting ridiculous amount of time to discover this little evil fact.

In addition to changing the case, I also had to change the value from a string to a number.
Instead of this:
<td colspan='6' />
I had to do this:
<td colSpan={6} />

From React's DOM Differences documentation:
All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style.
If you check your browser's console, you'll see that React warns you about this:
<meta charset="UTF-8">
<script src="https://npmcdn.com/react#15.2.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.2.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser-polyfill.min.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">
var App = React.createClass({
render() {
return <table border="1">
<tbody>
<tr>
<th colspan="2">people are...</th>
</tr>
<tr>
<td>monkeys</td>
<td>donkeys</td>
</tr>
</tbody>
</table>
}
})
ReactDOM.render(<App who="World"/>, document.querySelector('#app'))
</script>
Warning: Unknown DOM property colspan. Did you mean colSpan?
in th (created by App)
in tr (created by App)
in tbody (created by App)
in table (created by App)
in App

colspan property is in camelCase like colSpan. So instead of colspan we need to use colSpan.
In React v16.12 you can still supply the value as either int, like so colSpan={4} or string, like so: colSpan="4".

I had a bit of a different case, but the final solution for me was to actually giving the th/td a display: table-cell; property.

I had to put colSpan at the end before closing the opening tag for some reason it wasn't working in the beginning as the first prop.

I tried colSpan with only one td in tr but for me, it didn't work out and if I put another empty td in the same tr it worked.
So the code looked like this
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
<tr>
<td colSpan={3}>lorem ipsum</td>
<td></td> <-- Using this empty <td> worked
</tr>
</table>
by using that last empty td it worked for me

Why does this Javascript only run once per page?

I have this Try-it-Yourself section to my website but for some reason when I am wanting to have more than one Try-it-Yourself section it will only work for the one at the top of the page. So if I had three of them on a page the top one would work in the way I want but the next two would do nothing.
I have the following HTML:
<div class="tryit">
<table>
<tr>
<td>Try It Yourself</td>
</tr>
<tr>
<td><textarea id="input" rows="10" cols="47"></textarea></td>
</tr>
<tr>
<td><input onclick="update();" type="button" value="Update"></td>
</tr>
<tr>
<td><iframe id="output" name="output" width="600" height="300" ></iframe></td>
</tr>
</table>
</div>
And the following Javascript:
function update()
{
var tryitoutput = document.getElementById('input').value;
window.frames['output'].document.documentElement.innerHTML = tryitoutput;
}
Thank you.

As others mentioned, this is happening because there can't be more than one HTML element with same value of ID attribute. In your case javascript only finds the first element, that's why it doesn't work on later Update buttons. The simplest approach would be to set different ID attribute values for different "Try it yourself" boxes:
Slightly modify your JS, see following jsFiddle example
function update(tryItIndex) {
var tryItOutput = document.getElementById('input-' + tryItIndex).value;
window.frames['output-' + tryItIndex].document.documentElement.innerHTML = tryItOutput;
}

That's because you are referring to the textarea and the output by id which means it will always just retrieve the first one. A quick fix would be having unique id's for these fields and send the names as parameters to the update function like update(inputId, outputId)

Is having "value" attribute to act as a hidden value a correct practice

As far as I know, value is being used as HTML input attribute.
<form action="form_action.asp" method="get">
<input type="submit" value="Submit form" />
</form>
However, I was wondering, is it a correct practice, that I can use it in other HTML attributes, to act as hidden value?
For example, for each table row, I would like to tag it with a unique ID, as the unique ID in SQL database. However, at the same time, I would also like to hide the unique ID from end users.
Here is the technique I have been using.
<html>
<head>
<title>
XXX
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.delete-button').click(function() {
var clicked = $(this);
alert(clicked.parent('tr').attr('value'));
});
});
</script>
</head>
<body>
<table style="border-style:none">
<tbody>
<tr>
<th>Server Name</th>
<th>IP Address</th>
</tr>
<tr style="border-style:none" value="ROW ID 1">
<td class="edit">Yahoo Server</td>
<td class="edit">196.168.0.1</td>
<td class = "delete-button" style="border-style:none">DELETE</td>
</tr>
<tr style="border-style:none" value="ROW ID 2">
<td class="edit">Google Server</td>
<td class="edit">196.168.0.2</td>
<td class = "delete-button" style="border-style:none">DELETE</td>
</tr>
</tbody>
</table>
</body>
</html>
Since I didn't do HTML and JavaScript quite often, I was wondering, whether the above is a correct and common used technique?

With strict HTML4/XHTML, you should not create arbitrary attributes on tags. You can, but it is invalid for the schema.
With HTML5, the best practice is to use data- attributes.
eg.
<tr style="border-style:none" data-rowid="ROW ID 1">
<td class="edit">Yahoo Server</td>
<td class="edit">196.168.0.1</td>
<td class="delete-button" style="border-style:none">DELETE</td>
</tr>

Instead of using values, I'd recommend to use attributes. JQuery supports attributes and it's a pretty common practice.
http://api.jquery.com/attr/
On initialization you can set all the attributes, then you can have your own custom attribute to read the values you previous set (which can then map to a dictionary or something along those lines).
Does that help?

No. In this case value is a form component.
You would just use id="ROW ID 2" or whatever your value is -
alert(clicked.parent('tr').attr('id'));
Also, this html is pretty archaic. Just my opinion and not to be taken as a snide remark, but a good review of html5 and css3 would be beneficial.

ya sure... you can use... you can even have your own custom attribute to carry your data which will never be shown to end user except in the source view.. sample is as follows:
<tr style="border-style:none" mydata="ROW ID 2"> and it can be accessed as ('tr').attr('mydata')

Yep, you can use whichever attribute name you want
<tr style="border-style:none" rowid="1">
Then in jQuery you would access it by:
$('tr[rowid=1]');
or if you have a row and want to know it's id:
var rowid = $(this).attr('rowid');

javascript add data to table cell

<table border='1' id='output'>
<tr>
<td>
</td>
</tr>
</table>
my javascript code
document.getElementById("output").childNodes[0].childNodes[0].nodeValue = ajaxRequest.responseText;
Doesnt work please help

Using JQuery u can do it easly as given below:
$(document).ready(function(){
$("#output tr td").text("JQUERY HELP");
});
or if u want to continue with javascript u can refer other posted answers.
CLICK HERE TO SEE THE DEMO

document.getElementById("output").children[0].children[0].children[0].innerHTML;

You have two things wrong:
That's not a valid <table>.
Tables have to have a <tbody> tag. Which is probably getting added by the browser, which means you need to go one level deeper to access the <td> element.
The second thing, nodeValue will always be null for a non-text node, which is what a <td> is. Instead use the innerHTML property to alter the element's text.
After correcting those two things, your code should look like this:
document.getElementById("output").childNodes[0].childNodes[0].childNodes[0].innerHTML = ajaxRequest.responseText;

<table border='1' id='output'>
<tr>
<td></td>
</tr>
</table>
$(function(){
$('#output td').append("blaa");
});
Check this
Hope this helps.

Alex is right, there is a tbody TAg.
try below one:
document.getElementById("output").getElementsByTagName("td")[0].innerHTML="test1"

need help with arrays and links in javascript

Hi i have a question regarding html and javascript.
Say that i click on a link on a html site say
<tr>
<td>www.hello1.com</td>
</tr>
then I also want to see if there are any other related link on that site with a narrow name, for example
<tr>
<td>www.hello2.com</td>
</tr>
So what I want to do is construct a javascript method that everytime you click on a link
you run this method and check what link that has been pressed, and then also search the entire html site for a similar link (here its very simple, the site only consist of a table containing links, so there will not be so much to search trough).
How is this done?
I only need the method, I know how to run the method everytime you press a link :)
Thanks in advance :)
Edit
With "similar" i mean something like this
'\\b'+theUrlToGoTo+'\\b'
In other words the only thing that will change is a number after the name for example
hello1 and hello2
Edit 2
Thanks to nemophrost I now know how to do the first one. I now have a second question, before Im done, thats regarding generating html code with javascript.
Now say that I have an array after I have run the everyClickFunc() func that includes
var myArray = [ 'www.hello1.com', 'www.hello2.com', 'www.hello3.com'];
I would now like to generate a simple html page like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
And this file is to be overwritten each time I click on a link. So the links will be diffrent depending on what links i click on, on the original site.
In other words I want something like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.testing1.com</td>
</tr>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.testing2.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
<tr>
<td>www.diffrent1.com</td>
</tr>
<tr>
<td>www.diffrent2.com</td>
</tr>
</table>
</html>
To generate a new html site that contains the following information if you click on any of the above "hello" links
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
How is this easiest solved?
Again thanks you so much in advance :)

With jQuery you could do something like this:
function everyClickFunc(urlToMatch) { // pass in something like 'www.hello1.com'
var baseURLMatch = urlToMatch.match(/^www\.(.+\D)\d*\.com$/);
if (baseURLMatch && baseURLMatch.length > 1) {
var matchExp = new RegExp('^www\\.' + baseURLMatch[1] + '\\d*\\.com$');
$('a').each(function() {
if ($(this).attr('href').match(matchExp)) {
doSomethingBecauseYouGotAMatch(); // Call your successful match function
}
});
}
}