We Keep Coding

Find nth TD in table

I trying to get find out the value(td text) in column C if I click on any cell in the same row
+----------+----------+-----+----------+----------+----------+----------+
| A | B | C | D | E | F | G |
+----------+----------+-----+----------+----------+----------+----------+
| click me | click me | ok1 | click me | click me | click me | click me |
+----------+----------+-----+----------+----------+----------+----------+
| click me | click me | ok2 | click me | click me | click me | click me |
+----------+----------+-----+----------+----------+----------+----------+
| click me | click me | ok3 | click me | click me | click me | click me |
+----------+----------+-----+----------+----------+----------+----------+
I have tried the following with an onclick event but nothing:
var tellMe = $(this).closest('tr').find('td:eq(2)').text();
alert(tellMe) //ok1 | ok2 | ok3
Thanks!

How can I read the checked state of a checkbox within the cell of a dynamically created HTML table

I am using JS to determine the checked state of checkboxes which are contained within cells of a table which has been loaded dynamically into a web page.
The page comprises 2 fieldsets:-
+-SelectFieldset-----------------------------+
| <param1> <param2> { Load button } |
| {Update button} |
+--------------------------------------------+
+-ResultFieldset id=resultFS-----------------+
| Ref_ID Description Ready |
| +-resultTable id=outTable----------------+ |
| | 123 chair [ ] | |
| | 167 dresser [ ] | |
| | 231 sofa [ ] | |
| | ... etc... | |
| +----------------------------------------+ |
+--------------------------------------------+
Notes "[ ]" above depicts a table cell containing an input with type = checkbox;
param1, param2 are dropdown selectors
Initially the ResultFieldset is empty; and is loaded when the "Load" button is clicked (using a JQuery post statement) after the select parameters have been specified.
$.post("../listProducts.php", {
AccName: account,
From: startDate}, function(data){
$("#resultFS").after(data);
});
Once the resultTable is displayed, the user checks the checkboxes as relevant in the table rows.
Subsequently, when the "Update" button is clicked I need to loop through each table row, read that row's Ref_ID value and then, depending on the checked status of the associated checkbox, post an Update to the specified row of a MySQL table.
The code to loop through the table is:-
$("#btnUpdate").on('click', function() {
for (var i=0, row; row = outTable.rows[i]; i++) {
var rowRef = row.cells[1].textContent;
console.log( "Ref_ID = " + rowRef);
var isChecked = 0;
if (row.cells[2].firstChild.checked = true){
isChecked = 1;
// update MySQL table using rowRef;
};
console.log( "Ref_ID = " + rowRef + " Ready = " + isChecked);
};
};
This code logs the Ref_ID values as expected but I'm unable to determine the checkbox state in any row. (The checkboxes are behaving as expected on the webpage - clicking sets & unsets them.)
Please advise on how I should code for this (using either JS or JQuery). Thanks..

Display option selected with codeigniter

I want to ask for my code option selected with 2 tabel in page register
table prodi
+-------------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+-------------+-------------+------+-----+---------+-------+
| id_prodi | varchar(3) | NO | PRI | NULL | |
| nama_prodi | varchar(30) | NO | | NULL | |
| id_fakultas | varchar(3) | NO | MUL | NULL | |
| id | int(2) | NO | MUL | NULL | |
+-------------+-------------+------+-----+---------+-------+
and
table jurusan
+---------------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------------+-------------+------+-----+---------+-------+
| id_fakultas | varchar(3) | NO | PRI | NULL | |
| nama_fakultas | varchar(40) | NO | | NULL | |
+---------------+-------------+------+-----+---------+-------+
here's view :
<label for="fakultas">Fakultas : </label>
<select id="fakultas" name="fakultas_user" onChange="fakultas">
<?php
foreach ($qfakultas as $fakultas) {
echo "<option value=".$fakultas->kd_fakultas.">".$fakultas->nama_fakultas."</option>";
}
?>
</select>
<hr>
<label for="jurusan">Jurusan : </label>
<select id="jurusan" name="jurusan_user" onChange="jurusan">
<?php
foreach ($qprodi as $prodi) {
echo "<option value=".$prodi->kd_prodi.">".$prodi->nama_prodi."</option>";
}
?>
</select>
but I will display 'nama_prodi' based on 'id_fakultas"
register with option value
How to display when I click 'nama_fakultas' then display 'nama_prodi' based on 'id_fakultas' ?
Thanks

Here is the Ajax code that I can help, only to get nama_prodi based on id_falkutas.
You can use this code for your project, there is something you need to do. Not just copy the code. Just a few step (ID Lang : Jangan dicopy mentah2, hanya beberapa langkah saja untuk edit).
Change YOUR_URL_HERE into your base_url() or create var for it.
Change nama_controller into your controller name in CI_Controller
Change nama_fungsi into your function to get the data from your model (database). Example : ambil_data_jurusan.
Remove your foreach - echo <option> and onchange from your view.
Add the script into your view files or create a new .js file.
Please help me to mark as correct answer if this code helped you. ( tolong dibantu gan )
See Code Example :
<script>
$("#falkutas").on('change', function() {
$.ajax({
type:"POST",
url:'YOUR_URL_HERE/nama_controller/nama_fungsi',
data:{"falkutas_user":falkutas_user,"csrf_token":$("input[name=csrf_token]").val()},
dataType:'json',
success: function(result) {
for(var i=0; i<result.length; i++) {
res += '<option value="'+result[i]['id_prodi']+'">'+result[i]['nama_prodi']+'</option>';
}
$(document).ready(function() {
$("#prodi").html(res);
});
},
error: function(result) {
$(document).ready(function() {
$("#prodi").html(''); //empty select value
});
}
});
}
</script>
Then, in your function code :
// Inside function ambil_data_jurusan(), harusnya sudah jalan kalau gini
$return = $this->model->get_jurusan($this->input->post('falkutas',TRUE));
if(count($return)>0) {
echo json_encode($return);
}
In your view, just let select empty like this.
<select id="jurusan" name="jurusan_user">
</select>

ReactJS: ascii art issue after JSX transformation

I'm trying to get an ascii art to be properly rendered by my React application.
After jsx-transformer is executed my art looses the format and renders pretty strange in the browser
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var App = React.createClass({
render: function() {
return (
<pre>
<code>
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
Output:
If I remove react and add the pre code block directly to the html everything works fine.
Am I doing anything wrong here? Any help appreciated...
UPDATE 1: I cannot edit the ascii art.
UPDATE 2: I receive the art as a markdown file:
+--------+ +-------+ +-------+
| | --+ ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
After the markdown transformation to HTML this is the string I have:
<pre><code>+--------+ +-------+ +-------+
| | --+ ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code></pre>
I'm still using a JSX-loader to convert the HTML to JSX. The flow is markdown -> html -> jsx

So I ended up creating an issue in Github and Ben recommended to switch to Babel.
Here is the updated code that works just fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var App = React.createClass({
render: function() {
return (
<pre>
<code>{`
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
`}</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
Actually adding the {` ... `} works with jsx-transformer. But I'm not sure why it works.
UPDATE: It works because of template literals. Their recommendation is to use babel regardless because JSXTransformer has been deprecated.

If you're stuck with inseparable tags and ASCII you can use dangerouslySetInnerHTML:
var App = React.createClass({
render: function() {
// My representation of your input ASCII you get from elsewhere
var inputASCII = [
"<pre><code>+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
"</code></pre>",
].join('\n');
// dangerouslySetInnerHTML expects an object like this:
var wrappedASCII = {__html: inputASCII };
return <span dangerouslySetInnerHTML={wrappedASCII}></span>;
}
});
https://jsfiddle.net/yy31xqa3/5/
This functionality is mainly provided for cooperation with DOM string manipulation libraries
Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack.
https://facebook.github.io/react/tips/dangerously-set-inner-html.html
Only use this solution if you trust the source of the ASCII not to inject <script> tags or other malicious HTML.

Try adding \n characters between lines before hand:
var App = React.createClass({
render: function() {
var ascii = [
"+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
].join('\n');
return (
<pre>
<code>
{ascii}
</code>
</pre>
);
}
});
https://jsfiddle.net/yy31xqa3/

Try manually adding a linebreak to the end of each line, ex:
+--------+ +-------+ +-------+<br>
| | + ditaa + | |<br>
| Text | +-------+ |diagram|<br>
|Document| |!magic!| | |<br>
| | | | | |<br>
+---+----+ +-------+ +-------+

Placeholders for desktop and mobile views

There is a rather challenging task to implement, which broke my mind completely. Maybe someone will advise how to generate the algorithm based on the following description.
Objective
I have a single container with blocks of static width say 150px. The width of the container for desktop devices is say 600px and for mobile devices is 450px. This means that in the desktop version I have 4 blocks in a row and in the mobile version there are 3 blocks in a row. To complete all space left in a row (if any) I need to add placeholders which look like other blocks but with no content and of different colour. The number of added placeholders should always be the same but some should be hidden in the desktop version and some should be hidden in the mobile version. I need to use CSS for hiding and displaying the placeholders on different screens and JavaScript for adding placeholders on page load.
Examples
Consider the following markup for 5 blocks with content and 3 placeholders:
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
<article>Article 4</article>
<article>Article 5</article>
<span>Placeholder 1</span>
<span class="mobile-hide">Placeholder 2</span>
<span class="mobile-hide">Placeholder 3</span>
</section>
DEMO: http://jsfiddle.net/5qpsj/
Here I have 1 basic placeholder and 2 placeholders that are hidden on mobile screens. However if the number of content blocks is 4, then the combination of placeholders becomes different, displaying only 2 placeholders that must be hidden on desktop screens:
<section>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
<article>Article 4</article>
<span class="desktop-hide">Placeholder 1</span>
<span class="desktop-hide">Placeholder 2</span>
</section>
DEMO: http://jsfiddle.net/5qpsj/1/
I have tried different number of content blocks and created the following table of possible combinations:
---------------------------------------------------------------------
| Blocks | Placeholders | <no class> | .mobile-hide | .desktop-hide |
---------------------------------------------------------------------
| 0 | 4 | 3 | 1 | 0 |
| 1 | 3 | 2 | 1 | 0 |
| 2 | 2 | 1 | 1 | 0 |
| 3 | 1 | 0 | 1 | 0 |
| 4 | 2 | 0 | 0 | 2 |
| 5 | 3 | 1 | 2 | 0 |
| 6 | 2 | 0 | 2 | 0 |
| 7 | 3 | 0 | 1 | 2 |
| 8 | 1 | 0 | 0 | 1 |
| 9 | 3 | 0 | 3 | 0 |
| 10 | 2 | 2 | 0 | 0 |
| 11 | 1 | 1 | 0 | 0 |
| 12 | 0 | 0 | 0 | 0 |
| 13 | 3 | 2 | 1 | 0 |
| ... | ... | ... | ... | ... |
---------------------------------------------------------------------
Starting from 13 blocks the combinations remain the same as for 1 block, 2 blocks, etc. Personally I don't see any pattern in these numbers, which stops me from writing appropriate algorithm for adding placeholders and setting the required classes on page load.
Of course I could hard code the values from 0 to 12 number of blocks, or use approach which checks the width of the container on page resize and add/remove required number of placeholders (performs badly!), but my aim is to generate the code, which does all this job once on load, and then rely on CSS only.
So basically, something like that:
for (var i = 0; i < [number_of_placeholders]; i++) {
var placeholder = document.createElement('span');
if ([condition]) {
placeholder.className = 'mobile-hide';
}
if ([condition]) {
placeholder.className = 'desktop-hide';
}
section.appendChild(placeholder);
}
Do you have any ideas?

So, here is my approach. Feel free to replace the jQuery bits with VanillaJS. You could probably get a bit cleverer with the placeholders needed and calculate whether there are some shared among desktop and mobile. I just added them separately and would let CSS take care of that. See my example here http://jsfiddle.net/yThng/ (add more .blocks and run again to see that it works):
function generatePlaceholders(){
var mobileRowCount = 3, // blocks per row on mobile
desktopRowCount = 4, // blocks per row on desktop
// how many blocks are there?
blockCount = $('.block').length,
// how many placeholders on mobile/desktop needed
mobilePlaceholders = 0,
desktopPlaceholders = 0,
// iterator
i;
// use modulo to see if there are rows that are not filled (on mobile)
if( blockCount%mobileRowCount > 0 ){
// if there are, calculate how many placeholders needed
mobilePlaceholders = mobileRowCount - blockCount%mobileRowCount;
}
// same as above, but for desktop
if( blockCount%desktopRowCount > 0 ){
desktopPlaceholders = desktopRowCount - blockCount%desktopRowCount;
}
// append needed desktop placeholders
for( i=0; i < desktopPlaceholders; i++ ){
$('#container').append('<div class="desktop-only-placeholder" />');
}
// append need mobile placeholders
for( i=0; i < mobilePlaceholders; i++ ){
$('#container').append('<div class="mobile-only-placeholder" />');
}
}