unable to grab the children div - javascript

I am trying to grab a div inside a divContainer.
On a menu mouse over I am grabbing the value of custom data attribute and the name of div to grab.
Now the code is:
containerNameToGrab = $(this).attr('data-containerName');
It returns menu1Container.
Now i added a # using this containerNameToGrab = '#' + containerNameToGrab;.
And finally I am trying to find the div using this:
currentContainerDiv = $('.mainMenuSlidingContainer').find(containerNameToGrab);
Now, when i checked the value of currentContainerDiv it returned Object object.
Please tell me where I am doing it wrong.
Thanks.
OK THE PROBLEM IS SOLVED NOW I USED # directly in data-customattribute and then grabbed the lement. thanks.

Related

How to assign HTML text to a JavaScript variable?

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();

Polymer: paper-autocomplete set value

I have a paper-autocomplete element as follows inside a <paper-card>
<paper-autocomplete label="Select HWName"
id="HWName"
on-autocomplete-selected="onDeviceSelect"
no-label-float="true"></paper-autocomplete>
in a given html file. I am accessing this from another file as follows
var hwName = document.querySelector("#HWName");
I need to be able to set some value in its input area on refresh, which i've remembered using localStorage API. I tried using
hwName.value = "test"
or
hwName.label = "test"
but it doesn't work. Even tried using setOption(option) as described here but doesn't work.
Is it possible to show some value on the paper-autocomplete element? I don't want to type, it should just set the last value.
You need to set text property of paper-autocomplete.
So your code will be like
hwName.text = "test"

jQuery + JSON - .each not retrieving unique values

This is my codepen: http://codepen.io/JTBennett/pen/OpEeBG
This is the jQuery in question:
$('.gvListing').each(function(){
var cntTxt = $('.dispCntry').text()
$(this).attr('data-country',cntTxt)
var valueC = $('.ddCountry:selected').val();
var valueR = $('.ddRegion:selected').val();
$('#testDiv').text(valueC)
});
(^this all happens at the bottom of the JS on the codepen link)
The issue looks like this:
So the data attribute is being filled up with every .dispCntry div's contents even though I'm doing this function in .each() .gvListing div. I have a feeling I'm missing something stupid, like the letter i somewhere - but I can't seem to get it right.
var cntText=$('.dispCntry').text();
will take every text of input that has .dispCntry class.
It does not concentrate on your .each() .gvListing div.
Either you have to use only one .dispCntry class input, or give unique class or id to each .dispCntry elements

How insert an input field in a table cell?

Sorry for the noob question: I want to create a table with input fields where the can add new ones, if they are needed. But I can'T figure out how add another input field inside a cell where another input field already exists.
My code is:
var par=obj.parentNode;
while(par.nodeName.toLowerCase()!='tr')
{ par=par.parentNode; }
// this gives me the index of the row.. works fine.
cell1=document.getElementById('avz_tabelle').rows[par.rowIndex].cells;
// this puts the content of the cells into the array "cell1"
var feld = cell1[1].createElement("input");
feld.setAttribute("name","avz_keywords" + avz_array + "[]");
feld.setAttribute("onblur","");
feld.setAttribute("type","text");
feld.setAttribute("size","30");
// Now I create a input element
// And now comes the problem:
cell1[1].appendChild(feld); // --> doesn't work
Has anyone a suggestion for me?
I got the idea to work without a table, theoratically that would work with my way. But that wouldn't be satisfying :/
If you look in a debugging console, you should see something like
TypeError: Object #<HTMLDivElement> has no method 'createElement'
Instead of creating the element from cell1[1], use document.createElement()
var feld = document.createElement("input");
You should use document.createElement("input"); instead of cell1[1].createElement("input");
As always (and as also stated in another answer here), the JavaScript console should be the first place to look for hints on what the problem is!
And wouldn't it actually be much easier if each table cell you want to add values to got a separate ID? Something containing perhaps the row index and the column index ... Then you could just select it directly.

Javascript id question

I have a beginner question. I have a shoutbox, an Ajax shoutbox.
I made a form where i can update the users depending on them being a DJ or not.
If that option is selected then a small image appears after the user's name.
Is working but I can't make it work but my problem is, that if I set it on my profile, it adds the image to everybody's name.
Here is my code:
var radios = document.getElementById("radios");
if(radios.innerHTML == 'yes') {
radios = "<img src='http://www.site/pic/radios.gif'>";
}
My question is: How to insert the current user's id in this if statement?
In the code sample you've included, there appears to be an error.
With this line of code:
var radios = document.getElementById("radios");
you get the DOM object that has an id="radios". Then, you try to set that same variable to be a piece of HTML:
radios = "<img src='http://site/pic/radios.gif'>";
That won't accomplish anything other than setting a variable that you were previously using to store a DOM object to now be a string. That line of code does not modify the DOM in any way. Did you mean to write it this way?
radios.innerHTML = "<img src='http://site/pic/radios.gif'>";

Categories

Resources