This may be a sad implementation to start with but...
I have an XML string that I want to pass to a FusionChart but it fails (without errors...).
Controller code: trying to pull XML from a page
data_url = "[removed URL]/run/custom.xml?start=#{#start_week}&end=#{#end_week}&x=daychart=line&application=#{#application}".html_safe
data_uri = URI::escape(data_url)
#response = RestClient.get(data_uri)
Rails.logger.debug("Data: " + #response.inspect)
View Code: instantiating the Chart and passing the XML
<script>
var chart = new FusionCharts("/charts/MSLine.swf", "quality_center_stats", "700", "400", "1", "0");
chart.setDataXML("<%= #response %>");
chart.render("quality_center_stats");
</script>
Let me know if there is more I can add
Can be any of the following:
The XML contains special characters which needs to be encoded in the DataXML method. e.g., % should be passed as %25, & as %26, " as %26quot; or "
Make sure you do not have any newline character in that XML string. That would break the string in JavaScript (and you will get "unterminated string" error in JavaScript console)
Make sure the XML data which is passed conforms to FusionCharts Mulit-series data format
Make sure you have placed the SWF and JS files in proper paths and are accessed correctly. (can check through network tab of Firebug or Developer Console of Chrome)
Related
Is it possible to turn a String into a Hyperlink using Html.Raw. What would the code for this be?
I'm trying to embed an <a> Tag into a Razor Page with the following:
#{
string strText = "<title>Link Test</title><a class=\"nav-link text-dark\" target=\"_new\" asp-
area=\"Test\" asp-controller=\"Test\" asp-action=\"ViewFile\" asp-route-Id=1> View File Test</a>";
}
#Html.Raw(strText)
My page just shows "View File Test" without a link.
When I view the page source in my browser I see the following:
<title>Link Test</title><a class="nav-link text-dark" target="_new" asp-area="Test" asp-controller="Test" asp-action="ViewFile" asp-route-Id=1> View File Test</a>
When I copy the above and paste it to my razor page, all works well.
Just for fun, I have also tried the following and get the same result:
#{
string strText = "<title>Link Test</title><a class=\"nav-link text-dark\" target=\"_new\" asp-
area=\"Test\" asp-controller=\"Test\" asp-action=\"ViewFile\" asp-route-Id=1> View File Test</a>";
}
<text>#strText</text>
The following example below works fine, but not the above. I thought maybe it had to do with the embedded quotes
#{
string strText = "My Text My link.";
}
#Html.Raw(strText)
For HtmlHelper.Raw Method , the parameter is the HTML markup, however asp-area and asp-controller are the Anchor Tag Helper attributes. HTML code, or actually any text, returned from methods is not processed by the Razor engine, so you cannot use HTML tag helpers here.
You could try to use #Html.ActionLink or #Url.Action helper methods as shown:
#{
string strText = "<title>Link Test</title><a class=\"nav-link text-dark\" target=\"_new\" href=\""+Url.Action("ViewFile","Test" ,new { Area="Test",Id=1})+"\" >View File Test</a>";
}
the generated url will be https://localhost:44348/Test/Test/ViewFile?Id=1.
register routes as below:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "areaRoute",
// if you don't have such an area named as `areaName` already,
// don't make the part of `{area}` optional by `{area:exists}`
pattern: "{area}/{controller=Home}/{action=Index}");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
Reference:
https://stackoverflow.com/a/35579040/10201850
https://stackoverflow.com/a/53147778/10201850
The main reason your solution with asp tags will not work because they (tag helpers) are compiled at run time into your existing views.
At runtime compilation, your string is getting compiled as a string and tags inside that are being ignored obviously because compiler is unaware of them.
But when you use html attributes like anchor tag, it will work fine because that gets parsed by your browser.
Keep in mind that in Razor, asp- prefixed attributes for tags are somehow rendered at server side. This properties/attributes are not from HTML5.
Answer: Yes, it is possible, but it must be valid HTML.
I'm trying to make a blog using Vue as laid out in the excellent demo here. I'd like to include some mathematical formulas and equations in my blog, so I thought I'd try to use vue-katex. vue-katex formats my mathematical notation perfectly when I put all my KaTeX HTML directly into my Vue templates, but to create a useable blog I need to keep my content separate from my templates (as shown in the demo).
I can't get vue-katex to format HTML content in the static folder. That's what I'd like help with.
Setup
I cloned the github repo for the demo.
I added vue-katex to package.json:
"vue-katex": "^0.1.2",
I added the KaTeX CSS to index.html:
<!-- KaTeX styles -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css"
integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb"
crossorigin="anonymous"
>
I added the import statement to src/App.vue:
import Vue from 'vue'
import VueKatex from 'vue-katex'
Vue.use(VueKatex)
and I added a simple line of HTML with KaTeX to the BlogPost template:
<p>Here's an equation in the actual Vue template: <div class="equation" v-katex="'X \\sim N(\\mu, \\sigma^2)'"></div></p>
As I said, this works - I see formatted mathematical notation in my blog post (URL http://localhost:8080/read/neque-libero-convallis-eget):
However, I need different equations for every blog post, of course.
So I tried adding KaTeX HTML to the "content" field in the JSON for the first blog post: static/api/post/neque-libero-convallis-eget.json. I changed the "content" line to:
"content": "Here's an equation in the static folder: <div class=\"equation\" v-katex=\"'X \\sim N(\\mu, \\sigma^2)'\"></div>",
This content appears on the page, but the equation doesn't render. I see this: (the text appears but no equation is shown)
When I use Developer Tools to inspect the HTML on the page, I see this:
You can see that vue-katex has been applied to the equation I put in the template directly: it has parsed the HTML I typed into lots of spans with all the mathematical symbols, which are showing perfectly.
However the KaTeX HTML I've added to the "content" in the static folder has simply been placed on the page exactly as I typed it, and is therefore not showing up as an equation on the page. I really need to keep my blog post content in this static folder - I don't want to have to create a different .vue file for each blog post, that defeats the point!
My question is: is there a way to manually "apply" vue-katex to the HTML I place in the static folder, when it loads? Perhaps there is something I can add to the plugins/resource/index.js file, since this contains the function that loads the data from the static folder?
Many thanks in advance for any help.
*Disclaimer: I'm definitely no expert / authority on what I'm about to explain!
One thing to remember is that Vue reads the templates you write, and then replaces them as reactive components. This means that although you often write Vue attributes like v-for, v-html or in this case v-katex these attributes are only useful up until the app or component is mounted.
With this in mind, if you have a Vue app that ajax loads some html, its not going to be able to rerender itself with those Vue bindings in place.
I have somewhat ignored your current set up and set about solving the issue in another way.
Step 1: Reformat your data from the server side
I've put the posts into an array, and each post contains the template (just a string of html) and the equations separately as an array. I've used [e1] in the post as a placeholder for where the katex will go.
var postsFromServer = [{
content : `<div>
<h2>Crazy equation</h2>
<p>Look here!</p>
[e1]
</div>`,
equations : [
{
key : 'e1',
value : "c = \\pm\\sqrt{a^2 + b^2}"
}
]
}];
Step 2: When the post is rendered, do some work on it
Rather than just use v-html="post.content", I've wrapped the html output in a method
<div id="app">
<div v-for="post in posts" v-html="parsePostContent(post)">
</div>
</div>
Step 3: Create a method that renders all the katex, and then replaces the placeholders in the post
methods : {
parsePostContent(post){
// Loop through every equation that we have in our post from the server
for(var e = 0; e < post.equations.length; e++){
// Get the raw katex text
var equation = post.equations[e].value;
// Get the placeholder i.e. e1
var position = post.equations[e].key;
// Replace [e1] in the post content with the rendered katex
post.content = post.content.replace("[" + position + "]", katex.renderToString(equation));
}
// Return
return post.content;
}
}
Here is the whole set up, which renders Katex:
https://codepen.io/EightArmsHQ/pen/qxzEQP?editors=1010
I wrote a javascript(nodejs+express) program to download a html document from a given url.
I converted into a DOM object using parse5, jsdom, cherrio(only one). Now I need to send the response(the DOM object) to an ajax call. But when I try
var document = jsdom(data); //can use any of these three
var $ = cheerio.load(data);
var document3 = parse5.parse(data);
return res.send({'data':document3});
It gives an error 'converting circular structure to json', which is obvious because I'm trying to convert a DOM object to JSON.
My requirement is to parse the HTML and send the DOM as response because I need to use the DOM on client side.
What should be approach?
Have you tried just send the DOM (assume you have done some process on it) as a string and convert the DOM string back to a DOM on client side? Obviously Json won't work for the DOM obj.
how to display a variable that contain html template in smarty?
$smarty = new my_smarty();
$page_content = "<p>{$my_content}</p>";
$smary->assign("my_content","whatever...");
$smarty->display($page_content); // how to render $page_content ???
From the documentation:
Smarty can render templates from a string by using the string: or eval: resource.
The string: resource behaves much the same as a template file. The template source is compiled from a string and stores the compiled template code for later reuse. [...]
The eval: resource evaluates the template source every time a page is rendered. [...]
For your case:
$smarty = new my_smarty();
$page_content = "<p>{$my_content}</p>";
$smary->assign("my_content","whatever...");
$smarty->display("string:" . $page_content);
I have a form that needs to submit a .csv file to the server and then append the words in it to a textarea in my page. I am using Remotipart to upload the .csv using AJAX but I cannot get the javascript in the server response to execute. Here are the relevant parts of my code:
The Form:
=form_tag(upload_canvas_words_admin_page_widget_widget_instance_path(widget.page, widget),:method=>'post',:remote=>true,:multipart=>true,:class=>"upload_words_csv") do
= label_tag "Upload File"
= file_field_tag "file"
= submit_tag "Upload"
The Controller:
def upload_canvas_words
#csv_text = params[:file].read
end
The .js.haml file:
= remotipart_response do
- if remotipart_submitted?
alert('#{#csv_text}');
alert('!');
- else
alert('WHYYYYY?');
When I look at the response I see the javascript being wrapped in a bunch of html, which I assume has something to do with the iFrame transport. But the javascript never actually executes.
Refer this issue. And try to follow the solution given here.
https://github.com/JangoSteve/remotipart/issues/89
So what happens is that reponse arrives to the browser with html entity (like ") inside the textarea. When the js code for evaluation is extracted the html entities are replaced by theirs respective characters (like " to ').
That's a characteristic of a textarea. So it doesn't get executed
Adding data: {type: :script} to the form should be the fix