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>
+---+----+ +-------+ +-------+
Related
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!
I have a ui grid where i require to merge some of the middle columns. It should look something like below :
Name | Address | Comment | Job | College | Married
----------------------------------------------------------
Keshvi | India | New | Not applicable | No
----------------------------------------------------------
I am currently using rowTemplate.
function rowTemplate() {
return ' <div ng-repeat="(colRenderIndex, col) in grid.appScope.customiseRowsDeletedBy(colContainer.renderedColumns) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
' <div class="other-override-background" >{{row.entity.job}}</div>' +
' <div ng-repeat="(colRenderIndex, col) in [colContainer.renderedColumns[5]]) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ng-style="{position:\'absolute\, display:\'block\'}" ui-grid-cell ></div>'
'</div>';
}
$scope.customiseRowsDeletedBy = (arr) => arr.slice(0, 2);
however, my output looks something this :
Name | Address | Comment | Job | College | Married
----------------------------------------------------------
Keshvi | India | New | Not applicable |
----------------------------------------------------------
No
----------------------------------------------------------
The third div shifts the content down.
Any idea how to go about?
TableData objects have a property called 'ColSpan' that you can use.
document.getElementById("myTd").colSpan = "2";
I'm not too familiar with rowTemplate but perhaps it has a similar property.
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>
I am trying to create a dynamic tab and table headers from an xml file,
The tab name is goign to be "Adapter" or so forth to show up only once ie ignore any duplicates Tab names
Similar for the header names for the table as well
How can I remove teh duplicate tabs and header title?
Currently the output generated form the script below:
Adapters <- TAB
TargetClass | TargetName | DisplayName | AdminStatus | OperStatus | Type |
Interface | IF | IF | UP | UP | EMAC | Normal|
Adapters - <- TAB
TargetClass | TargetName | DisplayName | AdminStatus | OperStatus | Type |
Interface | IF | IF | UP | UP | EMAC | Alert|
Adapters - <-TAB
TargetClass | TargetName | DisplayName } AdminStatus | OperStatus | Type |
Network | IF | IF | UP | UP | EMAC | NA|
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "view.xml",
dataType: "xml",
complete: function(data,status) { parseXml(data.responseXML); }
});
});
function parseXml(xml)
{
$(xml).find("cView").each(function()
{
$("#output").append('<b>' + $(this).attr("type") + " - TAB CView type </b><br />");
$(this).find("field").each(function()
{
$("#output").append('<b>' +$(this).attr("name") + " -- </b>");
// $("#output").append($(this).text() + " -- ");
});
$("#output").append("<br />");
$(this).find("field").each(function()
{
//$("#output").append('<b>' +$(this).attr("name") + " -- </b>");
$("#output").append($(this).text() + " -- ");
});
$("#output").append("<br /><br/>");
});
}
XML bit
<?xml version="1.0" encoding="utf-8"?>
<feed>
<entry>
----
----
<cView type="D1">
<field name="TargetObjectClass">Disk</field>
<field name="TargetObjectName">DISK A1</field>
<field name="DisplayName">DISK-Name</field>
<field name="MaxAvgDataRate KB/sec">50.00 KB/sec</field>
<field name="MaxAvgQueueDepth">50.00</field>
</cView>
<cView type="D1">
<field name="TargetObjectClass">Disk</field>
<field name="TargetObjectName">DISK B2</field>
<field name="DisplayName"> Disk-Name 2 </field>
<field name="MaxAvgDataRate KB/sec">60.00 KB/sec</field>
<field name="MaxAvgQueueDepth">60.00</field>
</cView>
...
</entry>
</feed>
I don't understand what elements need to be clean, but maybe are you looking for that :
http://api.jquery.com/jQuery.unique/
I am trying to build an application that generates a custom list item which will be displayed on the screen dynamicly(like contact list update), and have the following code which works pretty well on both IE and Firefox.
<html>
<head>
<style type="text/css">
.divCss table{
width:100%;
height:130px;
}
.divCss {
width:100%;
height:100%;
border:solid 1px #c0c0c0;
background-color:#999000;
font-size:11px;
font-family:verdana;
color:#000;
}
.divCss table:hover{
background-color :#FF9900;
}
</style>
<script type="text/javascript" language="javascript">
var elementCounts = 0;
function myItemClicked(item)
{
alert("item clicked:"+item.id);
}
function createItem()
{
var pTag = document.createElement("p");
var tableTag = document.createElement("table");
tableTag.id = "" + (elementCounts++);
tableTag.setAttribute("border","1");
tableTag.setAttribute("cellpadding","5");
tableTag.setAttribute("width","100%");
tableTag.setAttribute("height","130px");
tableTag.onclick = function() {myItemClicked(this);};
var tBody = document.createElement("tbody");
var tr1Tag = document.createElement("tr");
var tdImageTag = document.createElement("td");
tdImageTag .setAttribute("width","100px");
tdImageTag .setAttribute("rowspan","2");
var imgTag = document.createElement("img");
imgTag.setAttribute("width","100px");
imgTag.setAttribute("height","100px");
imgTag.id = "avatar";
tdImageTag .appendChild(imgTag);
var tdTextTag= document.createElement("td");
tdTextTag.setAttribute("height","30%");
tdTextTag.setAttribute("nowrap","1");
tdTextTag.setAttribute("style","font-weight: bold; font-size: 20px;");
tdTextTag.id = "text";
tdTextTag.innerHTML = "text";
tr1Tag.appendChild(tdImageTag);
tr1Tag.appendChild(tdTextTag);
var tr2Tag = document.createElement("tr");
var tdAnotherTextTag = document.createElement("td");
tdAnotherTextTag.setAttribute("valign","top");
tdAnotherTextTag.id = "anotherText";
tdAnotherTextTag.innerHTML = "Another Text";
tr2Tag.appendChild(tdAnotherTextTag );
tBody.appendChild(tr1Tag);
tBody.appendChild(tr2Tag);
tableTag.appendChild(tBody);
tableTag.className ="divCss";
pTag.appendChild(tableTag);
document.getElementById("list").appendChild(pTag);
}
function clearList()
{
document.getElementById("list").innerHTML = "";
elementCounts = 0;
}
</script>
</head>
<body>
<input id="btn1" type="button" value="create item" onclick="createItem();" />
<input id="btn2" type="button" value="clear list" onclick="clearList();" />
<div id="list" class="divCss" style="overflow: scroll;"></div>
</body>
</html>
This code generates a new table element on click of "create item" button and adds it inside a div element on the main page.
The table element is supposed to be like the following
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
The above code does showup properly on firefox, however on IE, the rowspan is kinda ignored and the output looks like
+---------------+--------------------+
| Image with | Text |
|rowspan ignored| |
|---------------+--------------------|
| Another Text | |
| | |
+---------------+--------------------+
Can anyone help me why this must be happening? I also checked writing direct tags ( instead of using createElement and appendChild), and that works, but the dynamic generation seems to be problamatic. Am I doing anything worng here?
Also, after adding the generated table elements in the div element ( "list" ), there seems to be some gap between consecutive table elements and am not able to remove it even if i specify margin and padding as 0 in div tag.
Any help would be much appreciated.
Thanks.
EDIT: About the gap between table elements inside div.
Here is the output as expected: ( This works in jsfiddle as suggessted by Shadow Wizard ).
+------------------------------------+
| List Element 1 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
| List Element 2 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
| List Element 3 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Here is the output that i get on chrome, ie, firefox..
+------------------------------------+
| List Element 1 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Gap
+------------------------------------+
| List Element 2 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Gap
+------------------------------------+
| List Element 3 |
+---------------+--------------------+
| | Text |
| Image with | |
| rowspan of +--------------------|
| 2 | Another Text |
| | |
+---------------+--------------------+
Sorry for explaining things like this. I was not able to upload my snapshots. However, you can see the difference between jsfiddle and other browser effects by opening the page as html file in any browser.
EDIT (Shadow_Wizard) - here is the screenshot:
In IE, the attributes are pretty limited and better be set "directly" and not via setAttribute.
Try this instead:
tdImageTag.rowSpan = 2;
Same for width and height: those better be set as part of the style:
imgTag.style.width = "100px";
imgTag.style.height = "100px";
Edit: by gaps do you mean the parts marked with red circles?
Edit II: if you see difference between jsFiddle and your own file it might mean you're missing DOCTYPE declaration. Try adding this line on top of your code, above the <html> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jsFiddle is adding such line by itself, you can View Source to see it.
Also, I saw you're running the file locally... that's also not good you better run it as part of website to simulate "real" web page.
Try tdImageTag.setAttribute("rowSpan","2"); - it needs to be the upper case S
The gaps between the table elements may happen because the default cellspacing try this code: tableTag.cellSpacing=0;
Also if you are using the strict mode you can set the cellspacing in the css:
table.divCss {border-spacing:0;}