Develop Reference

Enabling a disabled element

I tried to enable a disabled element on click of a P element.The code below will store the value from the textbox into another textbox which I have appended with the div.later this textbox will be disabled.On mouse over the div an edit and delete will appear.On click of the edit, the textbox within the div must be enabled again.
<div id="ta"></div>
<input type="text" id="tb"><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var ta="";
function add() {
var newDiv="",newTa="",newP="",newImg="";
ta=document.getElementById('ta');
newDiv = document.createElement("div");
ta.appendChild(newDiv);
newTa = document.createElement("input");
newTa.type="text"
newTa.disabled="true";
newTa.value=document.getElementById("tb").value;
newDiv.onmousedown=function(){
newP.style.visibility="visible";
newImg.style.visibility="visible";
};
newP=document.createElement("p");
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.style.padding="5px";
newP.onclick=function()
{
newTa.disabled="false";//this is not working
}
Why is it not working?Is there any other way to do this?

The reason is probably because you are providing "false" as a string. From another answer here:
[...] a non empty string is truthy. So assigning "false" to the disabled property has the same effect of setting it to true.
Try using the proper boolean value instead.
newTa.disabled = false;

newTa.disabled="true"
newTa.disabled="false"
these two should be without ""
newTa.disabled=true
newTa.disabled=false
otherwise you could do it like this:
var x = document.getElementById("mySelect").disabled;
https://www.w3schools.com/jsref/prop_select_disabled.asp

How to hide a list element on linkbutton click within an asp listview control using JavaScript

I have a asp:listview control that is populating data from a databound data table in the code behind to create a dynamic list. With that list I have a linkbutton that I wish to bind to a JavaScript function to hide the corresponding li element if clicked. Here is my HTML:
<asp:ListView ID="lstAIInsureds" runat="server">
<LayoutTemplate>
<ul class="collection">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="collection-item" id="liRemoveAI">
<div>
<%#Eval("Response").ToString().Replace("|",", ")%>
<asp:LinkButton ID="lbRemoveAI" class="material-icons" ClientIDMode="Static" OnClientClick="return RemoveAI();" runat="server">remove_circle</asp:LinkButton>
</div>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<p>Nothing here.</p>
</EmptyDataTemplate>
</asp:ListView>
and my code behind is being bound like so:
this.lstAIInsureds.DataSource = dt;
this.lstAIInsureds.DataBind();
Here is my current JS, but of course has gaps in the for loop which is what I need to accomplish:
function RemoveAI() {
var olsRemoveAI = document.getElementById("liRemoveAI"); //this is the ls that is to be hidden
var obtRemoveAI = document.getElementById("lbRemoveAI"); //this is the linkbutton that is clicked to hide the parent ls element
for (i = 0; i < olsRemoveAI.???.length; i++) {
//if this button is contained in the parent li, mark the li as hidden:
olsRemoveAI.style.visibility = "hidden";
olsRemoveAI.style.display = "none";
//else:
olsRemoveAI.style.visibility = "visible";
olsRemoveAI.style.display = "block";
}
return false;
}
is this do-able? Assistance is greatly appreciated!

Since the element lbRemoveAI is running at "server", you need to see the HTML output of your page and get the final client ID, then update your javascript with that element ID.

Get the parent element:
var buttonParent = document.getElementById("lbRemoveAI").parentElement;
Of course, this will return the div and not the li. It looks like you could simply remove the div and change some of your CSS, or you could use .parentElement twice.
Read this, it's about .parentElement.
Then, you can use:
buttonParent.style.display = 'none';
Or, with jquery:
$(buttonParent).hide();
UPDATE:
here's the jQuery that will work. You should really be using a class, not an ID for the buttons. Using (this) will reference the exact button that was clicked. You probably don't want jQuery, but I don't know how to do it with plain JS off the top of my head. It should be easy to figure out how to change it if you can't use jQuery.
var obtRemoveAI = document.getElementById("lbRemoveAI");
$(obtRemoveAI).click(function() {
$(this).parentElement.hide()
});

(JavaScript / HTML) How to change display in style attribute on button click?

I'm a beginner programmer and I wanted to have an image loaded but not displayed:
<img src="someImage.png" class="mainImage" id="image1" style="display:none"/>
I want to add a button which would then remove/change the image display from none to make it visible, so that each image could be displayed by clicking on a button.
Thanks!

You can toggle the element's display between block and "" (empty string). So you might have a button like:
<button onclick="toggleDisplay('image1')">Image 1</button>
And a toggleDisplay function like:
function toggleDisplay(id) {
var el = document.getElementById(id);
if (el && el.style) {
el.style.display = el.style.display != 'none'? 'none' : '';
}
}
Toggling between none and "" (empty string) allows the element to return to its default or inherited value and the function becomes generic.

Try this
$("#btn").click(function(){
$("#image1").show();
});
Or
$("#btn").click(function(){
$("#image1").css("display", "block");
});

Creating a Label Dynamically using Javascript

I am using Aspnet, and i need to create an undetermined number of labels for one specific page.
I have a button that calls a function which generates a label dynamically using javascript:
<script type="text/javascript">
function create() {
var newlabel = document.createElement("box1");
...
document.getElementById("MainContent_revenuestreams").appendChild(newlabel);
}
</script>
What happens is that after the label is created he only shows on the webpage for about 2-3 seconds and after that it disapears (i think that the postback eliminates its content).
I would like to know how can i avoid this

document.createElement(type) - type must be a html tag name like: div, table, p.
In your case:
var newLabel = document.createElement("label");
Then you set attributes for this element (for - most important in label, id, name).
Finally:
newLabel.appendChild(document.createTextNode("This is where label caption should be"));
document.getElementById("MainContent_revenuestreams").appendChild(newLabel);
Some links:
http://www.w3schools.com/jsref/met_document_createelement.asp
http://www.w3schools.com/jsref/met_document_createtextnode.asp
As you see box1 is not a valid argument for document.createElement(type).

You have to return false to cancel the postback of the button:
<asp:Button runat="server" OnClientClick="javascript: create();return false;"/>
Also note that document.createElement("box1"); will create a <box1></box1> element which is probably not what you want. You should change "box1" to "label" or "span"

Add OnClientClick="addNewlabel();return false;"
function addNewlabel() {
var NumOfRow++;
var mainDiv=document.getElementById('MainDiv');
var newDiv=document.createElement('div');
newDiv.setAttribute('id','innerDiv'+NumOfRow);
var newSpan=document.createElement('span');
newSpan.innerHTML="Your Label Name";
// append the span
newDiv.appendChild(newSpan);
mainDiv.appendChild(newDiv);
}

Javascript: document.getElementById() returns NULL

I am quite new with Javascript and I got a problem with document.getElementById() that always returns NULL, and that's driving me nuts.
I have a element in my code and I want to get its coordinates so I can move it.
Here is the code:
<html>
<head>
<script type="text/javascript" >
function MoveIt(obj) {
alert(obj); // returns "Object HTMLDivElement"
var xx = document.getElementById("arect");
if(document.getElementById("arect").value == null) {
alert('NULL >> ' + xx.value);
}
else {
alert('NOT NULL >>' + xx.value);
}
posX = xx.style.scrollTop;
posY = xx.style.left;
}
</script>
</head>
<body bgcolor="white" >
<DIV class="background" id="MyDiv2">
<div id="arect" name="arect" class="transbox" onmousedown="MoveIt(this);" >
</div>
</div>
</body>
</html>
The above function MoveIt() always returns NULL

The page contents need to be loaded before trying to read them. Try
window.onload = function() {
// run your script in here
}
Or if you're using jQuery, prefer
$(document).ready(function() {
...
}

You never checked getElementById(...) for NULL.
You checked getElementById(...).value for NULL, and divs don't have a "value".
Also note that you forgot to close that <div /> tag, which is illegal in your XHTML... and used an SVG doctype for some reason. SVG is not HTML.
It's not really clear what you're trying to do here.

The "arect" element is a <div>, and <div> elements don't have a "value".
Get rid of that bogus SVG doctype too.

if(document.getElementById("arect").value == null){
alert('NULL >> '+ xx.value);
}
This code always returns null or error. If you want to see if the object exists, do the following....
if(xx == null)
alert('Object does not exist');
else
alert('Object exists. Inner HTML: ' + xx.innerHTML);
Also, div does not have value. If you want to get the html inside div, use xx.innerHTML

if the button is set to visisble= false then you cannot get the id of that button on client side. To hide the button use
button1.Style.Add("display","none")-- for visible false
and
button1.Style.Add("display","block")-- for visible true
and even if button is enabled false we cannot get the Id of the button on client side
You can get the id of the button by document.getElementById('<%= button1.ClientID %>');
Or
if you set the ClientIDMode="Static" for the control in aspx page you can get it directly by document.getElementById('button1');
Or
document.getElementById('MainContent_button1');--- MainContent here is the Id of the contentplaceholder if you have the id of the contenet placeholder different use that id_button1.

in my case it was because of having this line at the beginning of the jsp/html(whatever) file:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
removing it solved my problem.