I'm using math formula in ckeditor, when I insert new content by textarea, it can read math formula, but if I edit this content, it seem can not read and display text formula as before..
this is my source:
<head>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"> </script>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<span >Question Code : <%=id_q%> - <%=valid_types%> (Number presented : <%=make_cnt%>)</span>
<table border="0">
<tr>
<td width="640" height="650">
<textarea name="ir1" id="ir1" rows="1" cols="10" style="width:580px; height:600px; min-width:400px; min-height:50px; display:none;"></textarea>
<script>
var ir1 = CKEDITOR.replace('ir1', {
extraPlugins: 'mathjax,video,font,justify,preview,colorbutton,panelbutton',
mathJaxLib: 'https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML'
});
CKFinder.setupCKEditor(ir1, 'libraries/ckfinder/');
</script>
</td>
</tr>
</table>
</body>
This is result when I cliked edit button for content:
How to display correct mathjax in ckeditor when edit content? thanks
You could try to move the MathJax-script to the bottom of your head tag like this:
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});</script>
</head>
To ensure the code has access to the MathJax namespace.
Related
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
is there something wrong with the code below
Just trying to fix decimal paces for a specific class of td.
need to use only jquery
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<td class="go"> 25.252525
</td>
<script type="text/javascript">
$('.go').each(function() {
return parseFloat($(this).toFixed(2));
}
</script>
</body>
</html>
You need to use .text() to get text from td then use .toFixed() and finally change updated value inside your td i.e : $(this).text(parseFloat($(this).text()).toFixed(2));
Demo Code :
$('.go').each(function() {
$(this).text(parseFloat($(this).text()).toFixed(2)); //change text..
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table>
<tr>
<td class="go"> 25.252525
</td>
</tr>
<tr>
<td class="go"> 25.2223525
</td>
</tr>
</table>
My JS code looks like this. But when I open the page it says "Uncaught TypeError: Cannot set property 'innerHTML' of null"
I tried to change the NewItem constructor to a function. But VSC keeps saying I should declare it as a class instead. I converted it in the first place because the constructor wasn't working as a function either.
class NewItem {
constructor(name, date, price) {
this.itemName = name;
this.itemDate = date;
this.itemPrice = price;
}
}
const onListItem = new NewItem("John", "Date", "Price");
document.getElementById("demo").innerHTML = onListItem.itemDate;
HTML looks like this
<!DOCTYPE html>
<html lang= "en">
<head>
<link rel="stylesheet" href="ShopListStyle.css">
<meta name="viewport" content="width=device-width" initial-scale=1.0>
<title>Shopping List</title>
</head>
<body>
<script src="ShopListScript.js"></script>
<div id="container">
<div id="inputbox" class="section">
<form id="labels-form">
<label><h2>Shopping List</h2></label>
<input id="labels-name" class="labels-input" type="text" value="Item Name"></input>
<input id="labels-date" class="labels-input" type="text" value="Date of Purchase"></input>
<input id="labels-price" class="labels-input" type="text" value="Item Price"></input>
<button id="labels-button">Add to List</button>
<p id="demo"></p>
</form>
</div>
<div id="shopListBox" class="section">
<!--Need to add a delete button/ Maybe a quantity button down the road-->
<table id="shopList">
<caption><h2>Spending List</h2></caption>
<thead id="table-header">
<tr>
<th class="table-header" id="table-name">name</th>
<th class="table-header" id="table-date">date</th>
<th class="table-header"id="table-price">price</th>
<th class="table-header" id="table-delete">delete</th>
</tr>
</thead>
<tbody id="table-body">
<tr class="newRow">
<td class="new-item" id="item-name">item</td>
<td class="new-item" id="item-date">item</td>
<td class="new-item" id="item-price">item</td>
<td class="new-item"><button class="item-button">Delete</button></td>
</tr>
</tbody>
<tfoot id="table-footer">
<tr>
<td id="item-price-sum" colspan="4" style="width: 100%" >Sum of Prices</td>
</tr>
</tfoot>
</table>
<!--The sum of all the prices will go somewhere here-->
</div>
</div>
</body>
</html>
Your JavaScript code is trying to access this element with id demo (<p id="demo"></p>):
document.getElementById("demo").innerHTML = onListItem.itemDate;
Your script is added at the opening body tag...
<body>
<script src="ShopListScript.js"></script>
...
...which means the demo element does not exist yet.
Solution: Put your script before the closing body tag:
...
<script src="ShopListScript.js"></script>
</body>
</html>
You can also try to set
<script src="ShopListScript.js" defer="defer"></script>
Because javascript will block the DOM rendering, so we should put in the end of
like Peter Krebs's answer:
...
<script src="ShopListScript.js"></script>
</body>
I got AutoIt to work with my router login page. However for our HP Pro Curve Switch.. I can't get it to work...
#NoTrayIcon
#include <ie.au3>
$Address = "http://10.255.96.2/index.html"
$pwd="mypassword"
$oIE = _IECreate ($Address)
_IELoadWait($oIE)
$oForm = _IEFormGetObjByName ($oIE, "maindata")
for $stuff in $oForm
if $stuff.name = "password" and $stuff.type = "password" then _IEFormElementSetValue ($stuff, $pwd)
If $stuff.value == "Login" and $stuff.type = "submit" Then $stuff.click
Next
exit
I get "H:\loginToSwitch.au3" (10) : ==> Variable must be of type "Object".:
Basically the "maindata" is incorect.
Here is the HTML if I right click on the page and view source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta name=Copyright content="Copyright (c) 2005 HP Networks, Inc. All Rights Reserved.">
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<title>HP Networks Web Interface</title>
<script src="/mainjs.js" language=javascript type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//<!--
checkFrame(); // Ensure we are not within a frame
implementLoginFrames('login.html');
document.write('<noframes>');
//-->
</script>
</head>
<body BGCOLOR="#DAE3EB">
<center>
<font color="#008BD1" face="Arial, Helvetica, sans-serif"><B>Please ensure that your browser supports Frames and Javascript, and that they are both enabled.</b></font>
</center>
<script language="javascript" type="text/javascript">
//<!--
document.write('<\/noframes>');
//-->
</script>
</body>
</html>
However, when I use firefox to identify elements... it gives me a completely different code (which is what I got the buttons and textbox info from):
<html>
<head></head>
<frameset framespacing="0" border="0" frameborder="0" rows="80,*">
<frameset framespacing="0" border="0" frameborder="0" cols="*,22"></frameset>
<frame src="login.html" noresize="" name="loginFrame" scrolling="auto">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head></head>
<body onload="loadConfiguration();">
<script type="text/javascript" language="javascript"></script>
<form onsubmit="return login();" name="tF" method="post" action="login.html">
<table class="container" style="height: 650px">
<tbody>
<tr>
<td class="container">
<div class="container">
<div class="loginbox">
<!--
Login box HTML code here...
-->
<table class="login">
<tbody>
<tr>
<td id="devname" class="hdr style2" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif;" colspan="2"></td>
</tr>
<tr>
<td class="hdr style2" valign="top"></td>
<td class="maindata">
<input id="password" type="password" onkeypress="capsCheck(event);" size="20" name="password" maxlength="16"></input>
<script type="text/javascript" language="javascript"></script>
<input class="button" type="submit" style="position: relative; top: 2;" value="Login"></input>
<br></br>
<span id="passwd" class="default" style="display: none;"></span>
</td>
</tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
<span id="wrong" class="warning" style="display: none;"></span>
<br></br>
<span id="capsmsg" class="warning" style="display: none;"></span>
<br></br>
It is recommended that you use a minimum of
<br></br>
Microsoft® Internet Explorer 5.5 to view the Inter…
<br></br>
<br></br>
<!--
Login box HTML end...
-->
</div>
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" language="javascript"></script>
</form>
</body>
</html>
</frame>
</frameset>
<noframes></noframes>
</html>
_IEFormGetObjByName() Returns an object variable, not a collection.
Use _IETagNameAllGetCollection($oForm) to list all of the element inside a object.
Edit:
I have looked closely to the html and I see that the password field has ID and NAME attributes. Use _IEGetObjById to get the object of a password field.
#NoTrayIcon
#include <ie.au3>
$Address = "http://10.255.96.2/index.html"
$pwd="mypassword"
$oIE = _IECreate ($Address)
;_IELoadWait($oIE) Not needed because IECreate does wait for page to load by default.
$oPassword = _IEGetObjById($oIE, "password")
_IEFormElementSetValue ($oPassword, $pwd)
$oForm = _IEGetObByName($oIE, "tF")
_IEFormSubmit($oForm)
I have 3 html pages. main.html, page1.html and page2.html. I am displaying page1.html and page2.html in main.html using following code.
<html>
<frameset frameborder="1" rows="50%, *">
<frame src="page1.html" />
<frame src="page2.html"/>
</frameset>
</html>
page1.html code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<table id="resultDetails">
<th>Result Details</th>
<tr>
<td>Row 1</td>
<div id="r1">
<p> R1 data</p>
</div>
</tr>
</table>
</body>
</html>
And Page2.html code
<html>
<body>
<div id="myDiv">
<p> Testing.... </p>
</div>
</body>
</html>
My JavaScript myjs.js
$(document).ready(function () {
$('table tr').on('click', function () {
$('#r1').load('page2.html#myDiv');
});
});
With this code, on click on table row, i am able to display the "myDiv" content in "r1". But I want reverse behavior. i.e., on clicking row, content of div "r1" of page1 should be displayed in div "myDiv" of page2.
I tried $('page2.html#myDiv').html('#r1'); but no success.
Any thoughts
If possible change the frames to iframes. You are then able to access the elements in each of the iframes by using the .contents() function assuming the two iframes are on the same domain.
You would then do something like the following.
main.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="myjs.js"></script>
</head>
<iframe id="page_1" src="page1.html"></iframe>
<iframe id="page_2" src="page2.html"></iframe>
</html>
page1.html
<html>
<body>
<table id="resultDetails">
<th>Result Details</th>
<tr>
<td>Row 1</td>
<div id="r1">
<p> R1 data</p>
</div>
</tr>
</table>
</body>
</html>
page2.html
<html>
<body>
<div id="myDiv">
<p> Testing.... </p>
</div>
</body>
</html>
myjs.js
$(window).on('load',function () {
$('#page_1').contents().bind('click','tr', function () {
$('#page_2').contents().find('#myDiv').html($('#page_1').contents().find('#r1').html())
});
});