Jade render's my html twice - express

Maybe I'm asking my question wrong since it seems like the answer should be relatively easy to search for. I am parsing some .md files in express and returning the response to a jade template.
= body returns <h1>my content</h1> as a string.
#{body} returns <<h1>my content</h1>><!--<h1-->my content> or effectively:
<
my content #as a styled h1
>my content>
Thanks for any help.
UPDATE FOR CLARITY:
My question is - why is the content returning twice.


why is the content returning twice.
Because with the syntax of #{VARIABLE} Jade replace the variable with the value and interpret it as a HTML tag. For example:
passing a local variable {foo: 'bar'} and this template
#{foo}
generat this HTML
<bar></bar>
So you should pass the content and don't let interpret it by jade using = or != for unbuffered code:
!=body
btw: a whitespace is forbidden between = and the variable!

Related

How to interpolate with variables in pug?

I have a pug view
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text !{about}
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume
In express server I render it with "about", "works" and "reviewsAmount" variables.
The "about" variable value is
const about = `
<p>
I have #{works.length} works and #{reviewsAmount} reviews.
</p>
`;
But in page it renders like "I have #{works.length} works and #{reviewsAmount} reviews.". Variable values do not interpolate in paragraph tag. So, how to do that?

You are mixing up pug interpolation and JavaScript template strings. When the code is in your node/express route (and not in the template) you need to use JavaScript template strings.
If you use the ${} syntax this will fix it.
const about = `
<p>
I have ${works.length} works and ${reviewsAmount} reviews.
</p>
`;
With that said, I'd recommend against doing this and leaving all of your HTML in pug and not moving it into the node/express code. This will make your web pages more difficult to debug when something goes wrong, and also require more effort to maintain longer term.

Just pass those variables on to Pug and do the interpolation there:
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text
p I have #{works.length} works and #{reviewsAmount} reviews.
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume

Pug / Jade : Render a string variable of pug formatted text within .pug template file

I have passed an object to my pug template which contains a property which is a string of pug formatted text.
data.pugtext is 'p span This is a test.'
I want my pug template to render this variable but can't seem to figure this out. If I include data.pugtext it errors out saying data.pugtext file is not found. If I do #{data.pugtext} is does not render but simple passes the string as is to my client.
Anyone know how to render a string variable containing pug formatted text inside a template.pug file?

Can't access javascript text via css selector

I wan to be able to select the contents of the following script tag.
<script type="text/javascript" class="sample">
/* <![CDATA[ */
var test = {};
test.hey = 1;
/* ]]> */
</script>
Running $(".sample").text() in geb results in an empty string. Is there a way to access the plain text script contents?

Not familiar with the framework you mentioned but it is possible that $(".sample").text() returns an empty string because the code within the <script> tag is not a visible piece of HTML. As mentioned in this SO post try using either $(".sample").html().
This of course is assuming that the gebish framework API supports a .html() method on the object. You could find something equivalent in the API docs if this solution does not work.

VB.NET hates </script> tag in string literal

I am trying to update some of my projects old login code, which is a bunch of aspx files with inline VB.NET (no codebehind).
The page in question uses a master page layout. I am trying to expose the header of this master page to the slave pages, which I did by adding a placeholder in the header and exposing it as a property of the master page.
The problem comes in when I try to add a script tag to the header, like this:
Master.Header.Controls.Add(New LiteralControl("<script type='text/javascript' src='http://mysite.com/myscript.ashx'></script>"))
Then i get the error "Only Content controls are allowed directly in a content page that contains Content controls."
I think the aspx parser is seeing the </script> in the string literal and thinking that it is then end of the tag, and giving me that error because it thinks the content following that end tag are not in an block. I can add other tags to the header perfectly fine.
What do you think?

You can escape the / in </script> to prevent this.
Master.Header.Controls.Add(New LiteralControl("<script type='text/javascript' src='http://mysite.com/myscript.ashx'><\/script>"))

Alternatively, you can try
Dim gc As New HtmlGenericControl
gc.TagNane = "script"
gc.Attributes.Add("type", "javascript")
gc.Attributes.Add("src", "http://mysite.com/myscript.ashx")
Master.Header.Controls.Add(gc)

What does the dojo.query() return?

I'm just getting started with dojo, and I've understood that dojo.query is the same as $ in jQuery.
But I haven't figured out what it returns. Is it a specialized object like in jQuery?
What I'm trying to do (with no luck) is:
dojo.query("output").innerHTML = data;
//this doesn't work either:
dojo.query("output").html(data);
//tried accessing by id as well
dojo.query("#output").html(data);
//and tried to access a div, incase dojo has some issues with html5 elements
dojo.query("#divOutput").html(data);
And I'm currently using the new html5 elements:
<output id="output">Output goes here</output>
<div id="divOutput">non-html5 output goes here</div>
And I can't seem to find a good list on what to do with objects returned by dojo.query()..
edit: Okay, I think dojo is just messing with me now. I found this method: addContent() and that works on the above selector. But I don't want to add content, I want to replace content...

The query method returns a NodeList object.
In the ref for NodeList you can find a list of functions that you can apply to the list
of elements. There is no innerHTML function for the list, but the html function should work.
There is no "output" element in HTML, perhaps you try to target elements with the class name "output"?
dojo.query(".output").html(data)
Or the element with id "output"?
dojo.query("#output").html(data)

If you want to replace all the output tags' content with the same thing, then this code should always work:
// replace the contents of ALL <output> tags
dojo.query('output').forEach(function(node) { node.innerHTML = data; });
Dojo also provides a little shortcut for these kinds of things. You can specify a string to NodeList's forEach function like this:
// replace the contents of ALL <output> tags (as long as data is global)
dojo.query('output').forEach("item.innerHTML = data;");
The word item in the string is special. (This is a pain to debug, so it might not be worth it.)

As was said above, query method returns NodeList object, so you can iterate it's result as array, or use dojo methods that work with NodeList (e.g. attr):
dojo.query("#divOutput").attr("innerHTML", data);
But as soon as you are trying to query nodes by id, it would be better to use dojo.byId() method, which returns domNode:
dojo.byId("divOutput").innerHTML = data;
Or in more dojo style:
dojo.attr(dojo.byId("divOutput"), "innerHTML", data)

Try this by adding the [0] like this:
dojo.query("output")[0].innerHTML = data;

Also, there is a dojox.jq wrapper (in development, coming in 1.4) which emulates the JQuery return object APIs

The documentation seems to be a mess, this is the only thing i get to work with 1.7,
dojo.query("whatever").forEach(function(node, index, array)
{
node...
});