Having this .html snippet:
<body>
<div id="testDiv">
This always appears
</div>
<%
if(step==1)
{%>
html code
<% }
if (step==2)
{
%>
other html code
<% } %>
</body>
How can I access the variable "step", present in a .js file, imported using a script tag, in order to show HTML elements conditionally?
I am trying to somehow simulate the *ngIf function of Angular2, in AspX.
Thanks!
You can use it like this and create a javascript variable.
<script type="text/javascript">
var step = <%= step %>;
alert(step);
</script>
You can also use a ScriptManager
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "setValue", "var step = " + step + ";", true);
In both cases step is available in .js files.
Related
I am attempting to load a javascript file onto my rails application, but only for a specific page in my application, not the homepage. How would I get my javascript file to load for a specific page is using rails.
The javascript I have now, located in programs.js in assets/javascript, looks like this:
document.addEventListener('DOMContentLoaded', (event) => {
let program = document.getElementsByClassName('program-name')
console.log(program)
})
Again, the code itself works fine. The problem is that it executes for the homepage, and not for any particular page that I want it to. How would I go about getting the code to execute for a specific page within my rails application?
Why wouldn't you add the javascript tag to the View you want it to run on?
If you wanted a bit better rendering speed, you could add a end-of-page yield to your layout and then specify your javascript in the View like this:
layout/application.html.erb
<!DOCTYPE html>
...
<%= yield(:scripts) %>
</body>
</html>
view/.../index.html.erb
<!-- regular view code here -->
...
<% content_for :scripts %>
<%= javascript_tag do %>
document.addEventListener('DOMContentLoaded', (event) => {
let program = document.getElementsByClassName('program-name')
console.log(program)
});
<% end %>
<% end %>
An other way is to do the following:
app/views/layouts/application.html.erb
<body class="<%= controller_name %> <%= action_name %>">
<!-- This will add your page's controller and action as classes, for example, "blog show" -->
Then, in your script file, you can do the following:
if($('body').is('.yourcontroller.youraction'){
// Do something
}
I am trying to select DOM elements via VanillaJS or jQuery. Either way they are producing undefined within my ejs file.
I load all of my libraries at the top of ejs.
In middle of the page I have a simple
<% if (somevariable < 1) { %>
<!-- do something -->
<script> document.getElementById("showorders").style.visibility = "hidden" </script>
<% } %>
Further down the page I have a table with id "showorders".
All i want to do is set the visibility of the table to hidden if the statement is true. Else continue to run down the page and do normal process.
Why is the values undefined?
The problem might occur because in your script there is a reference to an element which does not exist.
You should wait for the DOM load event.
Vanilla
<% if (somevariable < 1) { %>
<!-- do something -->
<script>
document.addEventListener("DOMContentLoaded, function() {
document.getElementById("showorders").style.visibility = "hidden";
}, false);
</script>
<% } %>
jQuery
<% if (somevariable < 1) { %>
<!-- do something -->
<script>
jQuery(function() {
jQuery("#showorders").css("visibility", "hidden");
});
</script>
<% } %>
When the browser encounters a script tag it stops parsing the page and runs the script. This is how document.write is able to add content at the current position in the page.
If you want your script to run after the DOM has been fully parsed, you should listen for the DOMContentLoaded event.
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("showorders").style.visibility = "hidden"
});
I'm working with underscore.js and i'm having problems with < and > in <%= name %>. They're automatically replaced by < ; and > ; and that causes my code not to work.
My index.html:
<div id="underscore">
<%= name %>
</div>
My script:
var source = $("#underscore").html();
var compiled = _.template(source);
var html = compiled({name: 'pepe'});
$("#underscore").html(html);
I fixed the problem adding to my script this lines (before var compiled) and works fine
source = source.replace("<","<");
source = source.replace(">",">");
Is there any other way to solve my problem?
Conventionally people use <script> tags with non-JavaScript "type" attributes to embed templates.
<script id=underscore type=text/underscore>
<%= name %>
</script>
The browser will completely ignore everything up to the closing </script> tag. You'll still be able to fetch it as the .innerHTML of the <script>.
I'm new to the javascript world and have a simple test to read session vars in javascript:
my asp file:
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Session("id")=1234
Session("code")="ZZ"
%>
my html file:
<html>
<head></head>
<body>
<script type="text/javascript" src="asp/testSession.asp">
alert("Session ID " + Session("id"));
</script>
</body>
What am I doing wrong?
All ASP code has to be placed between <% and %> tags to be processed server-side:
alert("Session ID " + <%=Session("id") %>);
^^^ add tags ^^
Also, you can use <%= as a shortcut to output a variable. It's short for Response.Write.
You cannot mix javascript and asp in the way you did it. Javascript is executed locally while asp is compiled by the server and then send to your browser.
When the page reaches your browser, only the product of the asp compilation remains. In order to use the value or print it, you should do the following :
<html>
<head></head>
<body>
<script type="text/javascript" src="asp/testSession.asp">
alert("Session ID " + <%=Session("id")%>);
</script>
</body>
I am using ASP.NET
I have to set the value of a variable [testVar] into Javascript on page load. only for the first time when the page load. Just like !IsPostBack event on code side.
From next postback this function of Javascript should not call. Please let me know how to implement it.
Add this line to your ASPX page:
<% if (!this.IsPostBack) %>
<% { %>
<script type="text/javascript">
document.getElementById("<%= this.timeVar.ClientID %>").value = '1/1/2010';
</script>
<% } %>