I'm trying to insert <span class=""> value inside an array arrChairs[], and insert this array inside an object room{}, obviously I'm doing it in the wrong way, because it isn't working, here are the codes:
html:
<div id="table">
<a href="" id="foo1">
<span class="chair1"></span>
<span class="chair2"></span>
<span class="chair3"></span>
<span class="chair4"></span>
</a>
<a href="" id="foo2">
<span class="chair1"></span>
<span class="chair2"></span>
</a>
<a href="" id="foo3">
<span class="chair1"></span>
<span class="chair2"></span>
<span class="chair3"></span>
</a>
</div>
js:
room = {},
arrChairs = [];
$('#table a').each(function(i){
tableId = $('#table a:eq('+i+')').attr('id');
room[tableId] = {};
$('#table a:eq('+i+') span').each(function(i){
arrChairs.push( $(this).attr('class') );
});
room[tableId].chairs = arrChairs;
});
I don't know why it isn't working.
This is what arrChair is return me on console.log:
['chair1','chair2', 'chair3', 'chair4', 'chair1', 'chair2', 'chair1', 'chair2', 'chair3']
It's concatenating all the content. Some help would be appreciated
You are putting <span class=""> all together since you don't initialize arrChairs for each <a> in the root <div>. Try with this instead:
room = {};
$('#table a').each(function(i){
tableId = $('#table a:eq('+i+')').attr('id');
room[tableId] = {};
var arrChairs = [];
$('#table a:eq('+i+') span').each(function(i){
arrChairs.push( $(this).attr('class') );
});
room[tableId].chairs = arrChairs;
});
An make the console.log for the room instead of arrChairs.
Hope this helps
Related
I have a div with multiple a elements.
<div class="vertical-menu">
<a href="#" data-actiontime="0" class="listItemActive">
<strong class="time">00:00</strong> || <strong class="action">Action x</strong>
</a>
<a href="#" data-actiontime="36" >
<strong class="time">00:36</strong> || <strong class="action">Action y</strong>
</a>
</div>
Each a calls the function myClickHandler when clicked.
For example when clicked in 1'st a:
function myClickHandler(evt)
{
evt.preventDefault();
var elemReceived, attrValue, aElem;
elemReceived = evt.currentTarget;
console.log(elemReceived); //it outputs the "a" with the childs elements "strong" ... ok
aElem = $(elemReceived).find('a'); //get only the "a" element
console.log(aElem); //it outputs "w.fn.init [prevObject: w.fn.init(1)]length: 0prevObject: w.fn.init [a.listItemActive]__proto__: Object(0)
attrValue = $(aElem).attr("data-actiontime"); //alse tried with: aElem.getAttribute("data-actiontime"); but still not working
console.log(attrValue); //it outputs "undefined"!!!!
globalVarY = attrValue ;
aElem.setAttribute("class", "listItemActive");
}
How can this be solved?
Edit 1:
function setListItemClickBehaviour()
{
var aElements;
aElements = document.querySelectorAll(".vertical-menu a");
aElements.forEach(function (aElements)
{
aElements.addEventListener("click", myClickHandler);
});
}//setListItemClickBehaviour
You can read the attribute like I'm showing you in the code snippet below:
function myClickHandler(evt) {
console.log(this.getAttribute('data-actiontime'));
}
function setListItemClickBehaviour() {
var aElements = document.querySelectorAll(".vertical-menu a");
aElements.forEach(function(aElements) {
aElements.addEventListener("click", myClickHandler);
});
}
setListItemClickBehaviour();
<div class="vertical-menu">
<a href="#" data-actiontime="0" class="listItemActive">
<strong class="time">00:00</strong> || <strong class="action">Action x</strong>
</a>
<br />
<a href="#" data-actiontime="36">
<strong class="time">00:36</strong> || <strong class="action">Action y</strong>
</a>
</div>
I have this javascript function which should redirect me to
http://localhost:8888/ID OF A PRODUCT/add-to-cart".
But instead I got this:
http://localhost:8888/undefined/add-to-cart".
$('.add-to-cart').on('click', function () {
var productId = $(this).find('.indexImg').attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
<img class="indexImg" src="{{$product->image}}" id="{{$product->id}}">
Can someone help me to get ID of a product ?
HTML:
#foreach($products as $product)
<div class="col-md-3">
<div class="box-product">
<div class="img-wrapper item">
<a href="/product/{{$product->id}}/{{$product->slug}}">
<a class="thumbnail" href="/product/{{$product->id}}/{{$product->slug}}" style="margin-bottom: 0px; border: none;">
<img class="indexImg" src="{{$product->image}}" id="{{$product->id}}">
</a>
</a>
<div class="tags">
#if($product->discount > 0)
<span class="label-tags"><span class="label label-danger">Išpardavimas</span></span>
#endif
<span class="label-tags"><span class="label label-info">Nauja</span></span>
</div>
<div class="option">
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i>
</div>
</div>
Do one thing
Change
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i>
With
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white" id="{{$product->id}}"></i>
and get by
$(this).attr('id');
So the code will be
$('.add-to-cart').on('click', function () {
var productId = $(this).attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
$('.add-to-cart').on('click', function (event) {
var productId = event.target.id;
$.ajax(productId+"/add-to-cart",
{
});
});
.find is try to find inside current element u need to go up then find indexImg
$('.add-to-cart').on('click', function () {
var productId = $(this).parents('.box-product').find('.indexImg').attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
The way you are trying to get product ID based on DOM is incorrect. The jQuery .find() method looks for specified elements within the elements, i.e. its descendants. If you look at the HTML, you'll see that the div elements containing the add-to-cart button and the image whose id attribute you are trying to fetch are on the same level.
So you've got to change the way you are traversing to reach the id attribute of the <img> tag.
var productId = $(this).closest('.box-product').find('.indexImg').attr('id');
i am just beginner in angular and developing shopping cart, now have problem to add 'Added!' value when I click on "add to cart" button.
Here is my code
<div ng-repeat="item in products"> <a ng-click="additem(item,$index)">add to cart</a><span>{{cartadded}}</div>
js
$scope.additem = function (product,index){$scope.productsList.push(product); var item=$scope.product[index]; item.cartadded="Added!"; }
You need to track that status of each item individually. I've also cleaned up your code a bit:
<div ng-repeat="item in products">
<a ng-click="additem($index)" ng-hide="item.cartadded">add to cart</a>
<span ng-show="item.cartadded>Added!</span>
</div>
Controller
$scope.additem = function(index) {
var item = $scope.products[index];
$scope.productsList.push(item);
item.cartadded = true;
}
so finally here is a solution for above the question for the help of other persons related this question
<div ng-repeat="item in products">
<a ng-click="additem1($index)" >add to cart</a>
<span ng-show="item.cartadded">Added!</span>
</div>
js
$scope.additem1 = function (index ){
var item = $scope.products[index];
$scope.productsList.push(item);
item.cartadded = true;
};
some improved above answer and thanks for AJ Funk
I have the following code and I need to get the obj.tileClass only but instead I get "XXXXX tile"
HTML
<li ng-repeat="obj in draggableObjects" ng-drop-success="onDropComplete($index, $data,$event)">
<div class="{{obj.tileClass}} tile">
<a href="{{obj.tileLink}}" ng-click="stopClick($data, $event)">
<div class="tileBody">
<h4>{{obj.tileHeader}}</h4>
<p>{{obj.tileContent}}</p>
</div>
<div class="tileFooter">
<i class="fa fa-file-text" aria-hidden="true"></i>
</div>
</a>
</div>
</li>
Controller.js
$scope.onDropComplete = function (index, obj, evt) {
var otherObj = $scope.draggableObjects[index];
var otherIndex = $scope.draggableObjects.indexOf(obj);
$scope.draggableObjects[index] = obj;
$scope.draggableObjects[otherIndex] = otherObj;
angular.forEach($scope.draggableObjects, function(value, key){
console.log("tile " + value.tileClass);
});
I need to get only XXXX. Cna anyone help me?
my data:
tiles: [
{tileClass: "fileTile"},
{tileClass: "videoTile"},
{tileClass: "linkTile"},
{tileClass: "fileTile"}
];
This data is appended to li elements which has already a class="tile" so the result will be i.e.
<li class="tile fileTile">*****</li>
When the tiles are rearranged, I need to get the class and store to DB, but instead of getting only i.e. "fileTile" I get the entire class value "tile fileTile".
I want to get the id/class/both of the anchor tag, regardless of where it falls in the tag hierarchy. Example below is strange but realistic for my purposes because our website is accessed through a CMS that I have no control over. If people add multiple levels of formatting at different times, the CMS likes to add new span's...
So, having the live with the above facts, I want to pin down specific anchor tags by their id/class/both, but I don't always know where they will be located in the tag drill-down.
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>
I have started off like such,
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var telm = event.target.parentNode.className;
var delm = 'anchor_id_A';
console.log(telm);
if (telm == delm) {
dataLayer.push({
'youClicked': telm
});
console.log(dataLayer);
};
});
*WHERE: telm = target element; delm = desired element.
To clarify. I am specifying anchor for a reason, it is not simply for the example. As I am restricted by our CMS, I can't go in and add markup to pre-defined code (i.e. template), but I do need to know what link was clicked as exactly as possible (for Google Analytics), so that I can track down what users are ignoring, not seeing, or prefering.
You can navigate up the hierarchy until you reach the anchor element, then just read its ID.
See here:
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var el = event.target;
while (el.parentElement && el.tagName != 'A') {
el = el.parentElement;
}
dataLayer.push({
'youClicked': el
});
console.log(dataLayer);
alert(el.id);
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>Click Me</p>
</span>
</span>
</span>
</a>
</div>
</div>
What you're trying to achieve, is probably something like this :
var dataLayer = [];
document.addEventListener('click', function(event) {
var needle = 'anchor_class_A'; // The class of the element you're looking for
var closest = event.target.closest("." + needle);
if(closest && closest.id) {
dataLayer.push({
'youClicked': closest.id
});
alert(JSON.stringify(dataLayer, null, '\t'));
}
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
<div class="div_class_A">
<a href="#" id="anchor_id_X" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_Y">
<span id="span_id_Z" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>