I'm doing a Firefox extension. The extension has a sidebar. In this sidebar, I created some textboxes dynamically. How I can put the focus on the last textbox that I created?
This is the code, I want to put the focus in the textbox "userResponse" . The textbox is a XUL element.
var textResponse= document.createElement("textbox");
textResponse.setAttribute("id", "userResponse");
textResponse.setAttribute("class", "question");
textResponse.setAttribute("title", "Type your question here");
textResponse.onkeypress = numberOfResults;
textResponse.focus("");
var trResponse = document.createElement("tr");
var tdResponse = document.createElement("td");
tdResponse.appendChild(textResponse);
trResponse.appendChild(tdResponse);
tableQuestion.appendChild(trResponse);
I tried it with document.getElementById("userResponse").focus() but it doesn't work.
Calling textResponse.focus() is the correct way - but without parameters and after adding this element to the document. You can retrieve that element again of course by using document.getElementById() - but same thing there, you should do it after the element has been added to the document.
Related
Is it possible to assign HTML text within an element to a JavaScript variable? After much Googling, I note that you can assign HTML elements to a variable, but I want the actual text itself.
Details about my goal:
I am currently working on a CRUD application, and with the click of a delete button, a modal will display and ask the user for confirmation before deleting the record. Once the button has been clicked, I want to retrieve HTML text within a specific element used for AJAX call data. However, what I have tried so far is not being logged to the console; even when I change the global variable to var deleteLocationID = "test"; I doubt the modal displaying will affect the click function?
The code:
var deleteLocationID;
$("#deleteLocationBtn").click(function () {
deleteLocationID = $(document).find(".locationID").val();
console.log(deleteLocationID);
});
What I have tried so far:
Changing "deleteLocationID = $(document).find(".locationID").val();" to the following variations:
deleteLocationID = $(document).find(".locationID").html();
deleteLocationID = $(".locationID").val() / deleteLocationID = $(".locationID").html();
deleteLocationID = document.getElementsByClassName("locationID").value;
Any help would be much appreciated.
Use the text() method from JQuery, with this you can get the text inside of your element.
Use this way, it may help you:
deleteLocationID = $(document).find(".locationID").text()
Here is example of getting text from class element:
$('.locationID').text()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="locationID">45</div>
It depends on the type of element you are trying to find your value.
for input types you can find the value by .val() in jQuery like:
$(document).find(".locationID").val();
you can grab innerHTML of the element by .html() in jQuery like:
$(".locationID").html();
but if you want to grab innerText of an element you can use .text() in jQuery like:
$(".locationID").text();
What's the best method to find the yellow-highlighted text in the above HTML?
Is there a way to find a text on the page in a specific tag?
I need to perform a click on this element, which inturn opens up the table 15112-1-table-ssrc_2210456055_recv
I tried by.xpath("//*[contains(text(),'ssrc_+\w+_recv')]"); but it didn't work
Assuming you know the ssrc_something_recv text beforehand:
var summary = element(by.xpath("//summary[starts-with(., 'ssrc_') and contains(., '_recv')]"));
summary.click();
Now, to locate the related table, you can use the following-sibling axis:
var table = summary.element(by.xpath("following-sibling::table"));
I am working on a script that is meant to pull the inner html of a paragraph that is only shown onblur. I have spent hours on this and have not been able to successfully surface this inner html in our data layer.
Firstly, the data layer is custom (i.e. not the default data layer for GTM) - not sure if this makes a difference.
Secondly, the JavaScript I am using to attempt to achieve this. The onblur listener shows a parahraph (with no Element ID, only Element Class) when a user moves on from the form (which is the first parent element which has an ID, it is several parent elements up from the class). The paragraph passes a validation message (e.g. enter a valid email). I am attempting to pass the error message to the data layer:
<script>
object.onblur=function(){
var myForm = document.getElementById('instantSearchForm');
if(myForm) {
var myPara = myForm.getElementsByTagName('error-message');
if(myPara.length) {
var paraValue = myPara[0].innerHTML;
dataLayer.push({inputError: paraValue });
}
}}
</script>
As per your comment I see that you are using the class name for selecting your elements. Then you should try
myForm.getElementsByClassName('error-message');
instead of
myForm.getElementsByTagName('error-message');
I want to add a hyperlink on the ribbon. I was able to add the hyperlink to the existing div. The Hyperlinks are getting increased by one for every action i do on the page.
How i can make it(hyperlink) restrict to one?
I am using the following code:
var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm");
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);
Please suggest me.
var aTag = document.createElement('a');
Creates a new anchor element everytime it's called. Without more context it's hard to see why and how often this code is called.
What we do know, is every time it's called, you're appending it to the div, which is why you have multiple links.
mydiv.appendChild(aTag);
I have table where I can add new rows with input fields. Also there's a possibility to remove an added input field. Deleting a complete row works, but there's a problem to delete single input fields inside a cell.
Here's the code:
cell1=document.getElementById('avz_tabelle').rows[par.rowIndex].cells;
var feld = document.createElement("input");
feld.setAttribute("name","avz_keywords" + avz_array + "[]");
feld.setAttribute("onblur","");
feld.setAttribute("type","text");
feld.setAttribute("size","30");
cell1[1].appendChild(feld);
var remove = document.createElement("a");
remove.setAttribute("href","#");
remove.setAttribute("onclick","this.parentNode.parentNode.removeChild(this.parentNode);");
remove.innerHTML = " X";
cell1[1].appendChild(remove);
var br = document.createElement("br");
cell1[1].appendChild(br);
The problem is that the remove action completly deletes the whole cell, instead of the related input field. The strange thing, that this works on the first tier of the table without problems.
Do you see the error? Thanks for any suggestions!
Ok, you are appending the anchor element remove to cell1[1], which is a single table cell of the row with index par.rowIndex. So the parentNode to the anchor element is the cell. With this.parentNode.parentNode.removeChild(this.parentNode) you are removing the parentNode of the anchor, which is the cell.
EDIT: removed a sentence that might have been offensive ... sorry :-)
EDIT2: Possible solution:
this.previousSibling.parentNode.removeChild(this.previousSibling);
because this.previousSibling might be the input element
Since you are building your HTML with the DOM, you don't have to set attributes for events:
replace remove.setAttribute("onclick"... by something like:
remove.onclick = function(ev){
feld.parentNode.removeChild(feld);
}
feld and the onclick function are defined in the same scope, you have a closure here. It makes feld available inside the function.