I am working on a system that creates light box popups in order to deal with user requests appropriately, and for this, elements are built dynamically on the parent window.
When a user clicks a link, it has an onclick action that needs to refer to the parent window in order to get the desired information, but the issue lies in the fact that it does not have an id and it is not an option to add one to the elements themselves.
I have tried many things, including but not exhaustive of:
var obj = window.parent.document.{name};
var obj = jQuery(window.parent.document.{name});
var obj = window.top.document.{name};
The element is a simple hidden input element that is built at time of page load and looks something akin to:
<input type="hidden" name="{name}" value="1|2|3" />
Any ideas on how to achieve this goal are greatly appreciated.
Note: Any use of {name} within this are merely to show where the elements name is and not that it IS that
You can select elements (which have 'special' attribute value) with:
document.querySelector('input[name="{name}"]')
or, with the own selector of the attribute:
document.getElementsByName('{name}')[0]
Related
In a nutshell I'm trying to target an element within the DOM, then inject a class on the fly to later alter that element.
The situation is as follows, I am working with an application that has predetermined mark up (Manage Engine). It's a tool for system work flows, creating a centralized portal for ticket logging, asset management blah blah. So I use the tool to create templates for end users to log service requests. This is accessed via a web interface portal which in turn obviously has mark up.
So far I have been able to alter specific things such as background colors on table headers for example. I achieve this by creating a rule to fire within that template upon load time. So essentially I am allowing the template to load with its predetermined code and then I am applying a for loop to alter the code once it has loaded. (Hacky I know, however its working really well).
The issue I'm running into now is that certain things within the mark up are generic (no class or id associated to the element). My plan is to target that specific generic element as a variable then add my own class to it upon load. Is there a way to target an element that has a class and then target the child elements within, save that child as a variable to then add a class on the fly with javascript. Please see example below.
<tr class=test1>
<td>
<input>
<input>
<input>
</td>
<tr/>
So with the example above what I am trying to achieve is add my own class with JavaScript to the <td> element. Obviously if i target just <td> it will alter all <td> elements within the markup. Can i get to that specific <td> via the <tr> parent with the test1 class. I am currently unable to use any jquery requests as the base code can not be touched.
Again I know this is a little backwards and hacky but it does work with anything I can specifically target (has a class or id). I need to be able to do this with pure JavaScript. Any suggestions or help is greatly appreciated, apologies if this is a noob approach or question, first time posting in a forum. Let me know if further examples or information is required.
document.querySelector("body").children can get all child elements of body
step1: Select the class. The variable t1 will contain an Array of tr elements.
var t1 = document.querySelector('.test1');
step2: Get the first value from the array t1. So, tr_el1 contains one tr element.
var tr_el1 = t1[0];
step3: Get the children of tr. td_el contains an Array of td elements.
var td_el = tr_el1.children;
Now you can use the td from the td_el array
var tr = document.getElementsByClassName('test1')[0]
var td = tr.children[0]
var inputs = Array.prototype.slice.apply(td.children)
Now you got your inputs inside an array. You're welcome ;-)
Thanks a lot for the assistance, really appreciate it. The examples above helped me build a hybrid that although not exact has given me the outcome i needed.
var parent = document.querySelector(".roweven").children;
var nS;
for (nS = 0; nS < parent.length; nS++) {
parent[nS].style.position = "absolute";
parent[nS].style.width = "100%";
}
I am yet to wrap this up in a function but working as intended. Thanks again :) :)
Based on this DOM tree below when a comment reply button is clicked I need to use $(this) and then navigate to the next comment textarea .task-modal-cmt-reply-textarea
I am using jQuery and tried to use .parent().parent().closest('.task-modal-cmt-reply-textarea') and a few other combination without luck so far.
Can someone show me an efficient way to get this element into a var?
What I am trying to accomplish...
I have a click even on a comment reply button which insert a reply form into the DOM below a parent comment when the reply button is clicked using...
$document.on('click', '.cmt-reply-btn', function(e) {}
In this click event the reply form is put into the DOM with...
$parentCmtDomNode.after(cmtReplyFormTemplateHtml);
After the form is in the DOM I try to attach a jQuery plugin to it for #mention style capability using...
$('.task-modal-cmt-reply-textarea').mentionsInput({});
The problem
The #mention library works for the 1st clicked on comment form but all other reply forms do not work
another way to get a reference to that element, would be to do this:
var el = $(this).parent().parent().next().find('.task-modal-cmt-reply-textarea').eq(0);
note that the eq(0) just gives a single object back instead of an array with one element, which may or may not be necessary depending on what you want to do with it.
You need to do another .parent(), the two parent() you did only bring you up to the level of class "Activity-item Activity-comment" with data-activity-id = 12. Do another parent and you should be fine.
try this
var textarea_value=$(this).closest('.Activity-item').next('.Activity-item').find('form .task-model-cmt-reply-textarea').val();
or if its related with data-activityid = "12" so you can use
$(document).on('click','.cmt-reply-btn',function(){
var textarea_value = $(form[data-comment-parent-id = "'+$(this).attr('data-activityid')+' .task-modal-cmt-reply-textarea"]).val();
});
A more efficient way would be to use the parents api from jQuery then followed by your .closests
.parents('div')
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.
Then add the following sub selector to your closest chain.
.closest('textarea[name=^"task-modal-cmt-textarea"]')
This looks for the closest textarea with the name starting with task-modal-cmt-textarea. This is more efficient than what you have as this will eliminate any lookups on non textarea elements then it will only filter out the textareas that have that particular name.
EDIT: Updated Answer to the OP's recent edit.
$('.task-modal-cmt-reply-textarea').mentionsInput({});
This will select all of the ".task-modal-cmt-reply-textarea" that are on the screen at the time, it will not account for future ones. To achieve what you are looking for you should put a sub selector on this chain to allow it to attach to the newest form that was created.
$('.task-modal-cmt-reply-textarea',$($parentCmtDomNode).next('textarea')).mentionsInput({});
This should be placed after the
$parentCmtDomNode.after(cmtReplyFormTemplateHtml);
Try this:
var txt_html = $(this).parents('.Activity').children("textarea:first").html();
var txt_val = $(this).parents('.Activity').children("textarea:first").val();
In the parents() function you need to use the closest parent class/ id.
var el = $(this).parents('.Activity-item').next().find('.task-modal-cmt-reply-textarea').eq(0);
So I am trying to append a select, and it works fine when the class of this plugin, bootstrap-select, is not attached:
var select = $("<select class='new-select'></select>");
$('#selects-container').append(select);
However, when I add the class 'selectpicker', the select is appended, but it's not processed through the javascript of the plugin, and is therefore not visible.
var select = $("<select class='new-select selectpicker'></select>");
$('#selects-container').append(select);
So my question is how to get the new appended select to be ran through the javascript of the plugin and be formatted as would a select that was present on screen load.
Sincere thanks for the help, it is greatly appreciated.
So there are a number of ways to declare new DOM nodes using jQuery. For your task specifically, you'll want to specify an options object as the second argument, then add attributes to that, rather than in the selection string itself.
Try this:
var select = $('<select></select>', {
'class': 'new-select selectpicker'
});
$('#selects-container').append(select);
Also, be aware of this, from the docs:
The name "class" must be quoted in the object since it is a JavaScript
reserved word, and "className" cannot be used since it refers to the
DOM property, not the attribute.
I've got some html and this html conatains somewhere deep in the dom the following div:
<div class="barbottomleft arrow " onclick="go('login')">
As you can see there is no id or whatever and it is a div among a lot of others. However, the onclick="go('login')" makes it unique in the whole document. Therefore I'd like to select it somehow and the click on it. Something like:
javascript:document.getElementById(\"element_id\").click();
However, this is not possible since it got no id but a unique onclick function call. So is there a possibility to select this element based on the function it is going to call?
You could use a query selector with a lot of accuracy as such:
var myElement = document.querySelector('.barbottomleft.arrow[onclick="go(\'login\')"]');
This gets you an element with the two class and matching onclick attribute value. You could make it even more accurate by making sure it's a div:
var myElement = document.querySelector('div.barbottomleft.arrow[onclick="go(\'login\')"]');
I hope that helps.
Dojo converts several "ordinary" input elements into a more complex node structure. For example, a Dojo dijit/form/Select results in a widget composed of a table instead of a <select> element. dojox.form.Uploader converts into something where the id is mapped to a span and not to a <input id="myId" type="file" element. etc etc.
For accessibility, I need to map a label to an input widget, and running my website through Wave generates a lot of red flags because label for values do not match an input id.
What's the best way round this issue?
You can set an id property on most widgets, which should be put on the inner <input> node that you desire. Take a look at this fiddle for an example. If you open up your HTML inspector for the TextBox widget, you will see that the outer node has an id of "widget_[my id]" and a widgetid of the id you passed to the widget. Digging into the contents of that outer div, you will see that the actual <input> element indeed has the desired id that I passed in.
However, it seems that for more complex widgets that use a hidden <input> to store the value, you have to explicitly set the id of the valueNode property. You can see an example in this fiddle.
So you can create your widget like programmatically like this:
var select = new Select({
... widget properties
});
select.valueNode.id = "my_id"; // probably best to use dom-attr to set this.
If your widget is created declaratively, then you will need to get access to it via the registry, an attach point, or dijit#byId.