Hide element depending on value of if/else statement not working - javascript

I have a Rails app that uses the LinkedIn Javascript API to authenticate users. What I'd like to do is hide an element depending on whether the user is signed up or not. I've tried a few things:
Put the code with the if/else statement at the bottom of the HTML before </body>
Check to see if document.cookie is an empty string instead of a more specific if/else
However, neither of these has hidden the element. If I go into my browser's console and paste in my code after the page is finished rendering, the element hides. So I thought this was a JavaScript load issue, but I must be doing something wrong. Can anyone shed some light on this?
Here's the code I've tried, none of which works:
<%= content_for(:script_footer) do %>
<script type="text/javascript">
// if ($('span.IN-widget:contains("inSign in with LinkedIn")').length > 0) {
// $('#select').hide();
// } else {
// $('#select').show();
// }
if (document.cookie == "") {
$('#select').hide();
} else {
$('#select').show();
}
</script>
<% end %>
And my application layout:
<!DOCTYPE html>
<html>
<head>
<title>rdtrip</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= yield(:linked_in) %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
<%= yield(:script_footer) %>
</body>
</html>

Wrap your jquery/javascript code with:
$(function(){
// your code here
});

The JavaScript is executed before the DOM is ready, so it can't find #select yet.
Wrap it in either:
$(document).ready( function() {
// code
});
Or:
$(function() {
// code
});

Related

Javascript not showing page heading and text in heroku at all

I have a site here https://thatdevlevi.herokuapp.com/. When the page loads you might notice a huge grey blank area. That area is supposed to have a h1 and some text that fades via javascript removing the hidden class from the elements. Why is javascript not working? I have tried putting my javascript inside the asset pipeline (homepage.js) and on the view inside script tags and neither work, but if I run
Alert("test");
that works fine.
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>PortfolioSite</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
I changed the cdn I was using to get jquery to https instead of http and it fixed the issue
I would like to make a little apology to #PaoloMangia as he essentially suggested I do this to fix it and I fairly rudely blew him off on his suggestion.

Using Rails, how do I execute a javascript file on a specific page in the application?

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
}

EJS unable to access DOM elements causing undefined

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"
});

Google CDN Jquery load not working

I currently have an ugly array of separate javascript files in one of my layouts and I'm trying to clean it up using the Google CDN.
Current state (horrible I know):
...css...
<%= yield :head %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" %>
<%= javascript_include_tag "ui/jquery.ui.core", "ui/jquery.effects.core",
"ui/jquery.effects.highlight", "ui/jquery.ui.widget", "ui/jquery.ui.tabs",
"ui/jquery.ui.progressbar" %>
<%= javascript_include_tag "jquery.ui.stars.min", "application", "rails" %>
I tried replacing the 2nd from bottom tag (with the long list of files) with:
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" %>
I am getting no luck with that - it seems as if the google file is not there at all (I checked my page source and it is loaded). What am I doing wrong here?
I don't know how to translate it into RAILS but this simple HTML should do the trick.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
if(typeof jQuery == 'undefined') {
//<![CDATA[
document.write("<script src='/includes/jquery-1.4.2.min.js' type='text/javascript'><\/script>");
//]]>
}
</script>
This would assume that your jQuery file is stored on /includes/jquery-1.4.2.min.js.
On Google's CDN failure, local copy will get fetched.
Sorry to dredge up an old post, but I'm not sure the question was actually answered.
I had a similar problem as you did, and the solution was actually quite simple: I was not including the CSS. You can do so through Google's CDN as well:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />
or
<%= stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css' %>
Obviously this is for the ui-lightness theme; there are other themes available on the CDN (though not all of them). I'm sure you can find those with a quick Google search.

!IsPostBack event from Javascript

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>
<% } %>

Categories

Resources