Change visibility of a control in JSP based on bool value - javascript

I'm guessing I will need to use javascript to do this, but I'm completely clueless. I've never used javascript before. Can someone give me a quick sample of how to change the visibility of a button based on a bool value in a JSP page?

If you are thinking about using it only once it's easy to include JSP value in your JS code:
<script type="text/javascript">
var e = document.getElementById("foo");
var myvar='<%=myScriptletVar %>'
if (myvar)
e.style.display = 'none';
</script>

Here was my final solution:
<c:if test="${viewModel.facebookToken != ''}">
<script type="text/javascript">
var e = document.getElementById("facebookButton");
e.style.display = 'none';
</script>
</c:if>

Related

How to get return value from javascript through JSP?

function testing(){
var e = document.getElementById("selectBranchId");
var strUser = e.options[e.selectedIndex].value;
return strUser;
}
function test(){
var resultValue = testing();
alert(resultValue);
}
How can I get the value of resultValue in JSP? I tried using request.setAttribute but I am getting error variable resultValue can't be resolved. What can be the solution?
As JavaScript runs on the client side and JSP/Scriptlet is running on the server-side.
So if you want to access any of your JavaScript variable in JSP/Java/Server Side, then either
Submit it as a Hidden form field
or Pass it via Ajax Request
The variable doesn't exist beforehand in the JspWriter. Consider your javascript in two categories; before the page is written and after.
<html>
<head/>
<body>
<%!
function testing(){
var e = document.getElementById("selectBranchId");
var strUser = e.options[e.selectedIndex].value;
return strUser;
}
%>
<% testing(); %>
</body>
</html>
See this answer for more information.

How can I make button label dynamic using javascript?

What I want to do is be able to change the text inside of a button by making the text inside an actual variable.
Something like this:
<button type=button>status</button>
but instead of a string, it's a variable:
var status = 'on';
If you're trying to assign the text of a button to a variable then it's as simple as following:
var buttonText = "click me!";
document.getElementById("id-of-your-button").innerHTML = buttonText;
if you are using jquery, then its a simple task.
suppose you have a button
then you can use jquery to assing its text by using
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
var status="on";
$(document).ready(function(){
$("#myButton").text(val);
});
</script>
or you could pure javascript:
var status="on";
document.getElementById('myButton').innerHTML=status;
Guess this helps:
<button id="myButton" type="button" value=""></button>
<input id="myInputButton" type="button" value=""></button>
<script type="text/javascript">
var status = 'on';
document.getElementById('myButton').innerHTML = status;
document.getElementById('myInputButton').value = status;
</script>

Assigning data from ruby on rails table to a javascript variable

I'm trying to assign a javascript variable data from ror. I already made the query, and it gives me what i want (a single integer), but i can't assign it to a js variable. Here is the js script i'm using:
<script type="text/javascript">
$(function() {
var number_of_products = '<%= Post.where(:id => 1).select(:amount).pluck(:amount)[0] %>';
$(document).ready(function(){
for (i=1; i <=number_of_products; i++) $('#itemsAmount').append('<img src="images/box.svg"/>');
})
})
</script>
But i can't seem to pass the ror value (<%= Post.where(:id => 1).select(:amount).pluck(:amount)[0] %>) to the js variable (number_of_products)
Any ideas?
Thanks,
Shai.
It would seem your problem isn't with getting the value into javascript, its simply the wrong type try and change your code to the following
<script type="text/javascript">
$(function() {
var number_of_products = <%= Post.where(:id => 1).select(:amount).pluck(:amount)[0] %>;
$(document).ready(function(){
for (i=1; i <=number_of_products; i++) $('#itemsAmount').append('<img src="images/box.svg"/>');
})
})
</script>
Edit:
Do you have #itemsAmount on your page?
Working fiddle http://jsfiddle.net/DeMd2/

Javascript getElementByID for asp:Image returns null

I am trying to find the control and display set to "block" or "none" on onclientselectedindexchanged event of RadCombobox. It returns always null. The script and controls are in User Control of Content page. There is also Master page for this Content page. I debugged the code with Debugger statement but the control has this tag. "ctl00_content2_ucControl1_imgTest". How can show and hide image? Please let me know. Thanks for your help. Also I tried to use document.getElementById("<%=imgTest.ClientID"); and $find(("<%=imgTest.ClientID") ; but none of these working.
<asp:Image ID="imgTest" ImageUrl="../../../images/test.gif" AlternateText="test"
runat="server" style="display:none"></asp:Image>
<telerik:RadComboBox ID="Combobox1" runat="server" DataTextField="test1"
DataValueField="test_id" NoWrap="true" Width="250" onclientselectedindexchanged="OnClientSelectedIndexChanged"> </telerik:RadComboBox>
<script type="text/javascript">
function OnClientSelectedIndexChanged(sender, eventArgs) {
{
var item = eventArgs.get_item();
if(item.get_value() == "8")
{
var imageControl = document.getElementById('imgTest');
imageControl.style.display = "block";
}
}
</script>
imgTest is a server control, so the client id will be automatically generated by the server.
Change this line:
var imageControl = document.getElementById('imgTest');
to:
var imageControl = document.getElementById('<%=imgTest.ClientId%>');
The issue with your previous attempts was the missing end tag %>
If you are on .net 4.0 you can set the ClientIDMode='Static' and then your code should work fine as intended as long as you aren't in a repeatable element.
Here is some more info on how to use the ClientIDMode:
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Storing whole code in a variable -- Javascript

I want to store javascript code in a javascript variable.
To explain clearly, please consider example:
<html>
<body>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<a onclick="toggle_visibility('1');toggle_visibility('2');">Click here to toggle visibility of element </a>
<div id="1">This is 1</div>
<div id="2">This is 2</div>
<script type="text/javascript">
//document.getElementById('2').style.display='none';
</script>
</body>
</html>
Now suppose all this code is in a variable as a string or something. (i want to do this because i am exporting file to another html page where the code should get copied.)
I used all variables such as
using \ before ' and so on. referring to http://www.w3schools.com/js/js_special_characters.asp
Store like this: var myFunc = function(){ do stuff }
Run like this: myFunc();
To interpret JS code you need to use the JS function eval()
var code = "alert('Ok')";
eval(code);
Here is why using eval() is a bad idea:
Why is using the JavaScript eval function a bad idea?
Maybe try something like this:
var quoteElement = document.getElementById('2');
var quote = quoteElement.value;
// or even ..
var quote = document.getElementById('2').value;
You would now have the text value of your element in a variable.

Categories

Resources