I have looked for possible roots of my issue but have been unable to do so.
I have some java Script that dynamically creates a list of check boxes. Some have text other have anchor links with text inside that.
It looks like this:
createCheckbox: function (checkBoxDiv, sensorName, sensorId, checked, makeHyperLink, guid) {
var liElement = document.createElement("li");
var checkBoxElement = document.createElement("input");
checkBoxElement.setType = "checkbox";
checkBoxElement.name = "sensorName";
checkBoxElement.id = "check" + sensorId;
checkBoxElement.setAttribute("type", "checkbox");
checkBoxElement.setAttribute("runat", "server");
checkBoxElement.setAttribute("onchange", "OnCheckedChangedMethod('" + sensorName + "')");
if (checked)
checkBoxElement.setAttribute("checked", "true");
if (makeHyperLink) {
var linkElement = document.createElement("a");
linkElement.setAttribute("style", "color:white;");
linkElement.setAttribute("href", "#");
linkElement.id = "link" + sensorId;
linkElement.text = "" + sensorName;
checkBoxElement.appendChild(linkElement);
} else {
checkBoxElement.setAttribute("text", sensorName);
}
liElement.appendChild(checkBoxElement);
this.checkboxes++;
return liElement;
}
This returns the element to be appended to my div.
It creates this list correctly and the HTML looks like this:
<ol id="sensorList"><li>
Sensors
</li><li><input id="check1" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('0-Predator Simulator (FLIR)')" checked="true"><a id="link1" style="color:white;" href="#">
Item1
</a></input></li><li><input id="check2" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('a')"><a id="link2" style="color:white;" href="#">
Item2
</a></input></li>
</ol>
The webpage looks like this:
I have tried removing all of my css incase it was something to do with that and nesting the text in other tags: <p> , <h1>but nothing changes.
Any thoughts on what the root of this problem might be. I am still fairly new to web programming.
Thanks
input element can't have children. So this:
checkBoxElement.appendChild(linkElement);
is incorrect.
Instead use label element that contains both checkbox and link:
var labelElement = document.createElement("label");
labelElement.appendChild(checkBoxElement);
labelElement.appendChild(linkElement);
Edit:
You can't click on link element to change checked state of the checkbox. because it refreshes the page (with href='#'). What do you want to do with link element?
Related
In some part of an html page, I have a link with the following code :
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
I would like to automatically display the same link in another part of the same page by using a javascript.
What would be the script to insert in my page ?
Thank you in advance for any help in this matter.
Patrick
Try this:
myVar = document.getElementById("idname");
varLink = (myVar.attributes.href);
As son as you know the target id:
<div id="targetID">New Link: </div>
<div id="targetID2">New Link 2: </div>
And If you are using jQuery you can do like this:
var link = $("#idname").clone();
link.attr("id",link.attr("id") + (Math.random() * 10));
$("#targetID").append(link);
If not:
var link = document.getElementById("idname");
var newLink = document.createElement("a");
newLink.href = link.href;
newLink.className = link.className;
newLink.innerHTML = link.innerHTML;
newLink.id = link.id + (Math.random() * 10);
document.getElementById("targetID2").appendChild(newLink);
See this Example
<script>
window.onload = function() {
// get data from link we want to copy
var aHref = document.getElementById('idname').href;
var aText = document.getElementById('idname').innerHTML;
// create new link element with data above
var a = document.createElement('a');
a.innerHTML = aText;
a.href = aHref;
// paste our link to needed place
var placeToCopy = document.getElementById('anotherplace');
placeToCopy.appendChild(a);
}
</script>
Use code above, if you want just to copy your link to another place. JSFiddle
First, I want to point out that if you will just copy the element that will throw an error because the copied element will have the same id of the first one, so if you will create a copy of your element you don't have to give it the same id.
Try this code:
function copyLink(newDestination){
var dest=document.getElementById(newDestination);
var newLink=document.createElement("a");
var myLink=document.getElementsByClassName("classname")[0];
newLink.href=myLink.href;
newLink.className = myLink.className;
newLink.innerHTML = myLink.innerHTML;
newDestination.appendChild(newLink);
}
The newDestination parameter is the container element of the new Link.
For example if the new Container element has the id "div1":
window.onload = function() {
copyLink(div1);
}
Here's a DEMO.
Thank you very much to everyone for so many prompt replies.
Finally, I was able to use Jquery.
So, I tried the solution given by Andrew Lancaster.
In my page, I added the codes as follows, in this order :
1-
<span id="span1">
<a class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
and further down the page :
2-
<script type="text/javascript">
var span1val = $('#span1').html();
$('#span2').html(span1val);
</script>
Therefore, the two expected identical links are properly displayed.
But, unfortunately, I forgot to say something in my initial request:
the original link is in the bottom part of my page
I would like to have the duplicated link in a upper part of my page
So, would you know how to have the duplicated link above the original link ?
By the way, to solve the invalid markup mentioned by David, I just deleted id="idname" from the original link (that I could ignored or replaced by other means).
Thank you again in advance for any new reply.
Patrick
Using Jquery you could wrap your link in a span with an ID and then get the value of that ID and push it into another span id.
HTML
<span id="span1">
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
jQuery
var span1val = $('#span1').html();
$('#span2').html(span1val);
Example can be found here.
http://jsfiddle.net/3en2Lgmu/5/
Is it possible to click text in a list to add into a text box. I have made a JSON api that gets a list of people in the database. I then have a form that has a text field and displays the list of people. I would like to click a particular person and add it to the text box.
main.js
var ajax_call = function() {
var $people = $('#people');
$.ajax({
type: 'GET',
url: '/all/api',
success: function(people) {
$.each(people, function(i, person) {
$people.empty()
});
$.each(people, function(i, person) {
$people.append('<li>name: ' + person.first_name+', last: '+ person.last_name + '</li>');
});
}
});
$("#people").on("click", "li", function() {
var content = $(this).html();
//$("#testbox").val(content); //replace existing name in textbox
$("#testbox").val($("#testbox").val() + content + "\n"); //add new name to textbox
});
};
var interval = 800;
setInterval(ajax_call, interval);
form.html
<form id="textbox" action="" method="post">{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="create" />
</form>
<ul id="people"></ul>
Try this "click" function attached to the ul but filtered by the li's (this allows the list to remain dynamic), it allows you to add the individual names (two versions one that overwrites the existing textfield info and the second that appends to it): DEMO
$("#people").on("click", "li", function() {
var content = $(this).html();
//$("#testbox").val(content); //replace existing name in textbox
$("#testbox").val($("#testbox").val() + content + "\n"); //add new name to textbox
});
I think the answer to your question is pretty easy.
In your code you have the line
$("#people").keyup(function() {
Which is probably not what you wanted to do, cause now you are waiting for a keyup (release of a key) event on a list. First of all your question stated that you want the user to click and not to press a button and second you want the list items not the list itself.
So IMO you have to change that part to something like:
$("li","#people").click(function(){
var content = this.html();
$("#testbox").val(content);
});
Try this :
replace this
$("#people").keyup(function() {
var content = $('#people').html();
$("#testbox").val(content);
});
with this
$("#people").click(function() {
var content = $('#people').html();
$("#testbox").val(content);
});
If I have understood your question right away then
$("#people").click(function(){
var content = $('#people').html();
$("#testbox").val(content);
});
should do the work. But I think you should use something like custom attribute instead of id as there can be only one id for a specific tag.
<li class="catalog-list-item" data-icon="false">
<a href="/items/170893265">
How would I use console.log to log the href /items/IDHERE (IDHERE = 170893265) by using catalog-list-item?
$.get("http://m.roblox.com/Catalog/CatalogSearch?startRow=0&keyword=&filter=Collectibles",
function(Data) {
var test = $(Data).find('.catalog-list-item')
var itemID = test.attr("href");
console.log(itemID);
});
And that won't work for me (the test part does work, not the itemID part though.)
If
<li class="catalog-list-item" data-icon="false">
<a href="/items/170893265">
is the full response, then li.catalog-list-item will be the selected element in $(Data). I.e. $(Data).find('.catalog-list-item') would try to find a .catalog-list-item element inside a .catalog-list-item element, which doesn't work.
You can .filter the selection and then search for the a element(s):
var test = $(Data).filter('.catalog-list-item').find('a');
You left out the a tag, which is the one you're targeting -- the one that has the href attribute you're looking for:
var test = $(Data).find('a'); //<<<<-------
var itemID = test.attr("href");
console.log(itemID);
To get just the id use:
var itemID = test.attr("href").split('/').pop();
you realize the href attribute isn't in the li tag. I suggest you do this
var test = $(Data).find('.catalog-list-item')
var itemID = test.find('a').attr("href")
console.log(itemID)
I am developing a small web application specifically for IE8 (I know you all feel the pain already). In this application, I have an Update "button" that (when clicked) generates a box where they user can click Yes or No. I used JavaScript to generate the box and the input tag with type="submit".
Here is a snippet of the code:
HTML
<form action="." method="POST" id="yield_curve_form" enctype="multipart/form-data">
<div class="fileUploadDiv">
<img id="yieldCurve" src="../img/market/yield_curve.jpg" alt="ZBPF Bond Market" >
<div class="fileUploadButton">
<span>Upload New Image</span>
<input type="file" name="image_file" accept="image/*" class="uploadInput">
</div>
<div class="fileUploadReq">
<p>Image Requirements:</p>
<ul>
<li>Format: .png, .jpg, .jpeg, .bmp, .tif, .tiff</li>
<li>Resolution: 650 x 383</li>
<li>Maximum size: 2.0 MB</li>
</ul>
</div>
</div>
<button type="button" class="marketUpdateButton" onclick="confirmUpdate('yield_curve');">Update</button>
JS
function confirmUpdate(name)
{
// Create a div element
var div = document.createElement('div');
// Give it an ID
div.id = 'preSubmitAlert';
// Create a child h2 tag
var h2 = document.createElement('h2');
h2.innerHTML = 'This is a permanent change';
// Create a child p tag
var pMessage = document.createElement('p');
pMessage.innerHTML = 'Did you double check the data? It is important the data is accurate before you submit it.';
// Create child input tags
var inputYes = document.createElement('input');
var inputNo = document.createElement('input');
// Set parameters for input tags
inputYes.type = 'submit';
inputYes.name = name + '_update';
inputYes.value = 'Yes. Update the data.';
inputYes.id = 'inputYes';
inputNo.type = 'button';
inputNo.value = 'No. Take me back, please.';
inputNo.id = 'inputNo';
// Append the children to
div.appendChild(h2);
div.appendChild(pMessage);
div.appendChild(inputYes);
div.appendChild(inputNo);
// Create the background for transparency (needed for IE8 support)
var bg_div = document.createElement('div');
bg_div.id = 'bg_div';
// Create a screen and append the above div to it
var screenDiv = document.createElement('div');
screenDiv.id = 'screenDiv';
// Appending div and bg_div to screenDiv
screenDiv.appendChild(div);
screenDiv.appendChild(bg_div);
// Appending screenDiv to the body tag
document.body.appendChild(screenDiv);
// This line needs a reference to the #screenDiv is, which is inserted in the DOM only in the above line.
inputNo.onclick = function(){destroyElement(document.getElementById('screenDiv'))};
inputYes.setAttribute('form', name + '_form');
}
Question
Why isn't the the <input type="submit" ...> not submitting the data when clicked?
Obs.: This piece of code works on every other browser, including higher versions of IE.
Thank you in advance.
Change this...
document.body.appendChild(screenDiv);
To this...
document.getElementById(name + '_form').appendChild(screenDiv);
I doubt very much that IE8 supports the HTML5 form attribute so you'll need to make the submit button a descendant of the form.
I can't find any official documentation on this though and I doubt anybody is going to the trouble of researching it properly.
I am creating tabs dynamically when an user clicks a menu. The referenced html file is opened within a iframe which is also created dynamically.
Everything worked fine but When the tab count exceeds '3' and the user clicks on the previous tab the next iframe gets displayed below the previous iframe content.
Below is the code i used. Can anyone suggest what should i do ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script text/javascript>
$(document).ready(function() {
var c=0;
$("#documents a").click(function() {
c++;
addTab($(this),c);
return false;
});
$('#tab1 a.tab').live('click', function() {
// Get the tab name
i = 0;
var chk;
var contentname = $(this).attr("id") + "_content";
var ifid=$("#content .dcontent:last iframe").attr("id");
// hide all other tabs
if(ifid>1)
{
for(i=ifid;i>0;i--)
{
fr = document.getElementById (i);
if (fr.style.display!='none')
{
fr.style.display="none";
}
}
}
//make the current frame visible
var lnm=$(this).attr("name");
fr = document.getElementById (lnm);
if (fr.style.display=='none')
fr.style.display="block";
$("#tab1 li").removeClass("current");
// show current tab
$(this).parent().addClass("current");
});
});
/* Creation of Tab*/
function addTab(link,ct) {
// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;
// hide other tabs
$("#tab1 li").removeClass("current");
if(ct>1)
{
for(i=ct-1;i>0;i--){
fr = document.getElementById (i);
if (fr.style.display!='none')
fr.style.display="none";
}
}
// add new tab and related content
$("#tab1").append("<li class='current'><a class='tab' id='" + $(link).attr("rel") + "' name='"+ct+"' href='" + $(link).attr("href") + "' target='" + $(link).attr("target") + "'>" + $(link).html() + "</a><a name ='"+ct+"' href='#' class='remove' >x</a></li>");
var e = $('<div class="dcontent" ><li style="list-style:none;"><iframe id="'+ct+'" src='+$(link).attr("href")+' name="content" align="middle" width=600px; height=400px;> </iframe></li></div>');
$('#content').append(e);
}
</head>
<body>
<ul id="tabs">
<!-- Tabs go here -->
<div style="float: left;">
<ul id="menu">
<li> Next
<ul id="documents">
<li><a href="tab1.html" target="content" rel="1" >Document4</a></li>
<li><a href="tab2.html" rel="2" target="content" >Document5</a></li>
<li><a href="tab3.html" rel="3" target="content" >Document6</a></li>
<li><a href="tab4.html" rel="4" target="content" >Document6</a></li>
</ul>
</li>
</ul>
</div>
</ul>
<ul id="tab1">
<div style="float: left;">
</ul>
<div id="content">
</div>
A major issue is the way your IDing your elements. You have a variable c which is numeric, starting at 0, increases whenever a link is clicked, and then is set as the ID as one of your iframes. However, you are also setting numeric IDs to the created tabs. Eventually, these element IDs will overlap and you will have errors like these.
At the very least, make your iframes have the ID of
"frame_" + $(link).attr("rel")
rather than the ct numeric variable you are using now (copy of c)
so that an example ID may be "frame_2" for the button with rel attribute of 2. That way you won't have a button with rel attribute of 2 connected to some frame with a random numeric ID.
Get rid of the c variable completely.
Instead of this loop:
if(ct>1) {
for(i=ct-1;i>0;i--){
alert(i);
fr = document.getElementById (i);
if (fr.style.display!='none')
fr.style.display="none";
}
}
use:
$("#content").children("div.dcontent").each(function() {
var theFrame = $(this).find("li iframe");
if ($(theFrame).attr("id") != ("frame_" + $(link).attr("rel"))) {
$(theFrame).css("display", "none");
}
});
That way you can easily link the rel attribute to the frame's ID, rather than an arbitrary numeric value from your c variable.
You should use your rel attribute for everything, since you've given your links that. You could use use something like data-buttonid and use .data() to access it, but that's up to you.
Then when you ID everything, use that number to pair everything together. i.e.
Frame ID: "frame_" + $(link).attr("rel")
Tab ID/Name: "tab_" + $(link).attr("rel")
A Name: "tab_anchor_" + $(link).attr("rel")
Testing with the code I provided resulted in it executing how you want.