Select label from document without knowing id - javascript

I've been working on the modification of an iframe using javascript. The iframe contains this form
What I want to be able to do is retrieve information from the label; however it doesn't have an ID. is there any way I could get javascript to get the input button by ID, and have it analyze the label assigned to it?

You could go through all label elements and find the one whose for attribute matches your button ID:
var labels = document.getElementsByTagName('label');
var label = null;
var buttonID = '...';
for (var i = 0; i < labels.length; i++)
if (labels[i].htmlFor == buttonID) {
label = labels[i];
break;
}
// "label" now refers to the label you're looking for

casablanca's way is the best way if you only know the button ID.
Depending on what else you might know, other things might be quicker. If, for instance, you know that it is inside a DIV that you know the ID of, and you know that it is the only label inside that DIV, then you could do something like
var label = document.getElementById('myDiv').getElementsByTagName('label')[0];
If you know that it'll always be the only label with the same parent as your button, you could write
var label = document.getElementById('button').parentNode.getelementsByTagName('label')[0];
Basically, a broad set of solutions might be optimal depending on what assumptions you can afford to make. If you only know what you've told us in the question, then casablanca's iteration is the way to go.

I highly recommend investigating jQuery for this sort of manipulation. I'm sure that you probably don't want to introduce a whole Javascript framework to solve this one little issue, but if you learn it you will find that Javascript programming becomes much easier.
Assuming that #casablanca's answer is correct, you could accomplish the same thing in jQuery with the following code:
var label = $('label[for="..."]').get(0);
(Or something like that. My syntax may be off. :-)

Related

Can I set a <div> with an ID that has been dynamically created?

In my program I am dynamically creating feedback boxes to respond to user input. My problem is, I don't know how many of these pieces of feedback will be outputted. I have created a function in my javascript that assigns an id to each new element I create at runtime by concatenating a string with a variable number - which is incremented after every time the constructor is called - and appending it to my CSS class for styling, however I'm not sure how to reference a varying id in my html so that they actually appear on the screen.
var counter = 0;
function constructFeedbackBox() {
counter++;
var newElement = 'toast' + counter;
var i = null;
i = document.createElement('div');
i.id = newElement;
i.className = ".toastStyle";
}
In addition, if there are any problems with the way I've done my javascript to create my Id and/or append it to my class, the info would be much appreciated (I'm still pretty new to this)
First of all, document.createElement() takes a tagName as an input. If you are making divs, your line should read document.createElement('div');.
You can then do i.setAttribute(id, 'toast' + counter);.
What are you trying to accomplish overall with this? Maybe there is a better approach. Also worth noting that IDs must be unique, so be careful about that.

Making a variable I can manipulate further

I'm relatively new to jQuery and need to perform some transformations on the following working code:
jQuery('#vari_1').click(function() {
var selected = [];
jQuery('#cartsnitch')
.addClass('new')
.html(jQuery('#vari_1')
.find('input[type="radio"]:checked')
.val())
.fadeIn('5000');
})
The code returns the value of a radio button clicked in a tab id of #vari_1.
The problem is I then need to replace hyphens of the radio button value with spaces (duck-egg-blue to duck egg blue) and prepend an h2 heading. Chaining these appears to break my code.
I instead tried the below to make it into a variable so I can work with that on a new line, but couldn't get it to work. Can someone point me in the right direction please?
jQuery('#vari_1').click(function() {
var selected = [];
var cart1 = jQuery('#cartsnitch')
.addClass('new')
.html(jQuery('#vari_1')
.find('input[type="radio"]:checked')
.val())
.fadeIn('5000');
var cart2 = ('<h2>My heading</h2>') + cart1;
return cart2;
})
It's driving me nuts! Thanks in advance.
It sure can seem daunting Utkanos, I'm yet to get a straight answer to a question after being a member for a good few years. All I seem to attract is ambiguity and politician style question dodging!
Anyway due to lack of a hint other than Ashkay's syntax error spot (not in my code sorry), I fixed it as such:
jQuery('#vari_1').click(function() {
var selected = [];
jQuery('#cartsnitch').addClass('new')
.html(jQuery('#vari_1')
.find('input[type="radio"]:checked')
.val().replace("-"," "))
.prepend('<div class="mystyle"><small>My Label:</small><br />')
.append('</div>')
.fadeIn('5000');
})
val().replace() prepend() and append() were all I was after.
Thanks for the reassurance anyway!

Find any form element

I am trying to find if a class exists and if not just find the first form element. How do I write :input? This does not seem to work.
$('.focus:not(:hidden):first, :input:not(:hidden):first').focus();
Comma-separated selectors are not hierarchical in the manner you seem to indicate. Your selector will yield the first visible .focus and the first visible input element. You'll need to break this up in two selectors:
var focusElement = $('.focus:visible:first');
if(focusElement.length == 0)
focusElement = $(':input:visible:first');
focusElement.focus();
Or I suppose you could write
$('.focus:visible:first, body:not(:has(.focus:visible)) :input:visible:first').focus();
Your code actually worked for me. Take a look at this jsfiddle. Try removing my class='focus' and it then falls back to selecting the first input field.
I would go for the easy to understand model:
var finder = $('.focus:not(:hidden):first');
finder = finder.length ? finder: $(':input:not(:hidden):first');
finder.focus();
Same result, but likely better given the right to left sizzle re: performance
var finder = $('.focus').not(':hidden').eq(0);
finder = finder.length ? finder: $(':input').not(':hidden').eq(0);
finder.focus();

How to find a ModalPopupExtender in a JavaScript?

I need to write a Javascript function that run from Master page, to find a ModalPopup in the contenct page and close it. Following code works, but not what I want. I need use something like mpeEditUser.ClientID, but I got an error. Also, it would be nice if I could find a ModalPopup without knowing its id, by its type (ModalPopupExtender) instead. Any suggestion?
function CloseModalPopup() {
var mpu = $find('ctl00_ContentPlaceHolder1_mpeEditUser');
mpu.hide();
}
Here is my solution: (If you see any problem, please let me know. Thanks)
I get the ModalPopup id in the codebehind, and pass it to my javascript function.
In the Page_Load of the default.master.cs:
ContentPlaceHolder cph = (ContentPlaceHolder)FindControl("ContentPlaceHolder1");
string sMpeID = (AjaxControlToolkit.ModalPopupExtender)cph.FindControl("mpeEditUser");
In my Javascript function:
var mpe = $find('<%=sMpeID%>');
if (mpe != null) {
mpe.hide();
}
Its likely the tag is getting mucked up by being called through another page, this happened to me. I don't know the best fix for you, however the way I addressed the issue was to first find the mpe through a javascript function that looked for a vague match out of all of the elements on the page.
var elemets = document.getElementsByTagName("*");
var mpe;
for (var i = 0; i < elemets.length; i++) {
var id = elemets[i].id
if (id.indexOf("mpe") >= 0) {
mpe = elemets[i];
}
}
If you have more then one mpe on the page you may want to match more if the string. For me the elements function only returned about 50 elements, so it was not too much overhead. That may not be the case for you, but even if you dont use this function in the final product it will assist you in discovering the actual ID of the elment.

How to add an item to the top of a dynamic list

Like the title states, does anyone out there have a clear way to implement this type of functionality?
Example:
If you go to http://weewar.com, in their front page you noticed an ajax module that updates every second. However, all of the new items are added to the top of the list. My question is around that very same functionality.
Does anyone have an easy and clear idea as to how one would implement this functionality?
So far I have a method that initially creates the list, then another method is called in an interval that pulls the most recent data from the server..
However, I'm stuck with, how can I add the new dynamic node to the top of the list.
If you can guide me to where I can find this information or give me an idea as to how I can implement this I will be very happy and grateful.
jQuery would make it pretty easy for you. Here's an example:
jQuery
$(document).ready(function(){
$('<div>News 1</div>').prependTo('#textbox');
$('<div>News 2</div>').prependTo('#textbox');
$('<div>News 3</div>').prependTo('#textbox');
$('<div>News 4</div>').prependTo('#textbox');
});
HTML
<div id="textbox"></div>
Output
News 4
News 3
News 2
News 1
As you can see, the news that was added first gets pushed downwards.
If you use jQuery you can use jQuery('#list_ID:first-child').prepend(new_item);
If you want to do it the old fashion way, document.getElementById('list_ID').innerHTML = new_item + document.getElementById('list_ID').innerHTML;
Or you can use a more DOM friendly method:
var list_item = document.createElement('li');
list_item.innerHTML="Some Text"
document.getElementById('list_ID').insertBefore(list_item, document.getElementById('list_ID').firstChild);
One way will be to recreate the list using javascript. Its like list.items=newitem+list.items. Sorry for writing a conceptual pseudo code. If you need to know the exact javascript, please send me a reply/comment.
You can also implement the same in the following way also:
var m =document.getElementById(listElement).options.length;
for(var i = m; i>= 0 ; i = i-1)
document.getElementById(cmbCategory).options[i] = document.getElementById(cmbCategory).options[i-1];
var opt2 = new Option();
opt2.value="100"; /*new value */
opt2.text="New option text";
document.getElementById(listElement).options[document.getElementById(listElement).options.length] = opt2;

Categories