We Keep Coding

DOM not updating on GET request + data-attributes

Issue: Upon updating the src of images, retrieved via GET request, the DOM never updates but their new values show in console.
Suspected Cause: I think there is some conflict with using data-attributes, but using attr() instead of data() does not seem to remedy.
HTML to be updated:
<div class="data-block">
<img data-item="hp-logo" />
<img data-item="hp-banner" />
</div>
GET Request:
if(promoid != null) {
$.get({
url: '/snippets/data.html',
cache: false
}).then(function(data){
var tempData = $('<output>').append($.parseHTML(data)).find('.data[data-promo-id="' + promoid + '"]');
myContent = tempData.html();
dataItems = $('.data-block').html();
//console.log('Data Items On Page: ', dataItems);
$(dataItems).each(function (index, value) {
if( $(this).is('[data-item]')) {
//console.log('Data Items With Attribute: ', this);
dataItemLookup = $(this).attr('data-item');
//console.log('Data Item Lookup Value: ', dataItemLookup);
$(myContent).each(function (index, value) {
//console.log('Retrieved Items Checking Against: ', this);
if ( $(this).attr('data-alias') == lastalias ) {
//console.log('Retrieved Items Match Alias: ', this);
if ($(this).attr('data-item') == dataItemLookup) {
//console.log('Retrieved Item Match', this);
dataImageDesktop = $(this).attr('data-image-desktop');
//console.log('Value to be Passed to Data Item: ', dataImageDesktop);
} else {
// Do nothing
}
} else {
// Do nothing
}
});
$(this).attr('src', dataImageDesktop);
console.log(this);
}
});
});
}
data.html:
<div class="data-container">
<div class="data" data-promo-id="11202016">
<div data-alias="test.html" data-item="hp-logo" data-image-desktop="http://placehold.it/250x150"></div>
<div data-alias="test.html" data-item="hp-banner" data-image-desktop="http://placehold.it/350x250"></div>
<div data-alias="not-test.html" data-item="hp-spot" data-image-desktop="http://placehold.it/450x350"></div>
</div>
</div>
Not sure how to proceed in troubleshooting this issue. Everything works as expected, except the DOM updating. Ideas?

Using html() on an element will get you the innerHTML of the object, which is a string. As such using it inside $() later will cause jQuery to create new elements that are not attached to the DOM. If all you are after is to select elements and modify them, simply use the $(selector) and modify it. Do not use html() and wrap the results with $().

Instead of $(selector).attr('data-name') try using $(selector).data('name') as shown in the jQuery.data() documentation.

Is it possible to select element by attribute value only?

I need to find all elements in a page by attribute value only (ignoring the key) using jquery.
Is there a way to do this easily?
Currently, I am just iterating on all elements in the page, on every property etc..

You can use $.expr, Element.attributes, Array.prototype.some()
$.expr[":"].attrValue = function(el, idx, selector) {
return [].some.call(el.attributes, function(attr) {
return attr.value === selector[selector.length - 1]
})
};
// filter element having attribute with `value` set to `"abc"`
$(":attrValue(abc)").css("color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div title="abc">abc</div>
<div title="def">def</div>
<div title="ghi">ghi</div>
<div title="jkl">jkl</div>

Use brackets []
var ElementsWithAttributeKeyTest = $('[attributeKey="Test"]');
Or pass an object with the attribute name and value as parameter to this function:
var getElemsByAttribute = function(obj) {
if (obj) {
if (obj.attributeKey && obj.attributeValue) {
return $('[' + obj.attributeKey + '="' + obj.attributeValue + '"]');
}
}
}
var attrObj = {
attributeKey: 'data-color',
attributeValue: 'red'
}
getElemsByAttribute(attrObj).css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span data-color="red">Red</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>
<span data-color="blue">Blue</span>
<span data-color="red">Red</span>
<span data-color="green">Green</span>

If you want to search all attributes values you can use this small plugin:
$.fn.search_by_attr_value = function(regex) {
return this.filter(function() {
var found = false;
$.each(this.attributes, function() {
if (this.specified && this.value.match(regex)) {
found = true;
return false;
}
});
return found;
});
};
and you can use it like this:
$('*').search_by_attr_value(/^some value$/);
Based on this answer

You could define new function take as parameter the value you want to filter with (e.g get_elements_by_value(filter)), then inside this function parse all the elements of the page using $('*').each(), after that parse the attributes of every element el of those elements using attribute attributes like below :
$.each(el.attributes, function(){ })
Then inside the each loop you could make your condition and push the matched values with the passed filter inside matched[] that should be returned.
Check working example below, hope this helps.
function get_elements_by_value(filter){
var matched=[];
$('*').each(function(index,el) {
$.each(el.attributes, function() {
if( this.value===filter )
matched.push(el);
})
})
return $(matched);
}
get_elements_by_value('my_value').css('background-color','green');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="my_value">AA</div>
<div title="def">BB</div>
<input type='text' name='my_value' value='CC'/>
<p class='my_value'>DD</p>
<span title="test">EE</span>

I want to compare that old and new value are same or not for input textbox in angularjs?

I have two input box in angularjs html structure.
When I click on my button or a tag I want my textbox old and new value in angularjs or I want to compare that old and new value are same or not.
I'm using angular 1.4.7.
<input phone-input ng-show="mode == 'edit'" ng-model="leader.work"/>
<input phone-input ng-show="mode == 'edit'" ng-model="leader.mobile"/>
<a ng-show="mode == 'edit'" ng-click="mode = null;save_profile(leader)" style="cursor: pointer" title="Save">Save</a>
$scope.save_profile = function (leader) {
/* How to get/compare both text box old and new value are same or not*/
};

try this
function TodoCrtl($scope) {
$scope.newValue = 'Initial Text';
$scope.save_profile = function(newvalue, oldvalue) {
//Here you can access old value and new value from scope.
$scope.new = 'New Value :' + $scope.newValue;
$scope.old = 'Old Value :' + $scope.oldValue;
//After accessing update the scope old value to new value with function parameters
$scope.newValue = newvalue;
$scope.oldValue = newvalue;
};
$scope.changeValue = function() {
$scope.newValue = 'Dynamic Change';
};
}
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>ng-click</title>
</head>
<body>
<div ng-controller="TodoCrtl">
<input type=text ng-model="newValue" ng-init="oldValue=newValue">
<button ng-click="save_profile(newValue,oldValue)">Save</button>
<div>{{new}}</div>
<div>{{old}}</div>
<br>
<button ng-click="changeValue()">Change Dynamic</button>
</div>
</body>
</html>

The simplest possible approach which will work in all occasions is to make a copy of the leader when you load it and compare current leader with the copy you made when you press the button.
function TodoCtrl($scope) {
// initialization
var originalLeader = null;
$scope.leader = null;
$scope.mode = 'edit';
// this is where you get your leader data, in my example
// I simply set it to demo data but you can load the
// data using AJAX for example
var loadLeader = function() {
var leaderData = {
mobile: '000',
work: '111'
};
originalLeader = angular.copy(leaderData);
$scope.leader = leaderData;
}
// loadLeader will be invoked on page load
loadLeader();
$scope.save_profile = function (leader) {
// you have access to your original data and current data,
// you can compare them and do whatever you want with them
console.log('originalLeader ', originalLeader);
console.log('leader ', leader);
// for example
if ( leader.mobile != originalLeader.mobile ) {
alert('Mobile has changed from ' + originalLeader.mobile + ' to ' + leader.mobile);
}
};
}
Some answers suggested to use $scope.$watch, you can implement your solution using that but you need to be careful as the $scope.$watch callback will be invoked on each change. To illustrate what I mean let's add something like this to your code:
$scope.$watch('leader.mobile', function(newVal,oldVal) {
console.log('newVal ', newVal);
console.log('oldVal ', oldVal);
});
Let the leader.mobile be 000 at the init time.
You type 1 to the text box, now leader.mobile is 0001, the callback function will be invoked and the log will be:
newVal 0001
oldVal 000
Now you press backspace and delete 1 you previously typed, the leader.mobile variable is now 000 and the log is:
newVal 000
oldVal 0001
Your current data is same as starting data but the $scope.$watch was invoked twice and is difficult to determine if data has really changed or not. You would need to implement some additional code for that, something like this:
// be careful about this, you need to set to null if you reload the data
var originalMobile = null;
$scope.$watch('leader.mobile', function(newVal,oldVal) {
// set originalMobile to value only if this is first
// invocation of the watch callback, ie. if originalMobile
// was not set yet
if ( originalMobile == null ) {
originalMobile = oldVal;
}
});
$scope.save_profile = function(leader) {
if ( leader.mobile != originalMobile ) {
// ...
}
}

You can use the $watch function. The link below will show you how to implement it. You can get an old and new value with it.
How do I use $scope.$watch and $scope.$apply in AngularJS?

how to parse this xml in jquery to get an attribute?

I need to parse the following example XML in jquery, to get the attribute "V"
XML file:
<RES>
<R N="1">
<MT N="myMeta1" V="myMeta1Value"/>
<MT N="myMeta2" V="myMeta2Value"/>
<MT N="myMeta2" V="myMeta2Value"/>
</R>
</RES>
And my javascript is the following:
function(data){
$(data).find('R').each(function(){
var $result = $(this);
$result.find('MT').each(function(_mt) {
console.log($(_mt).attr("V") );
});
});
}
I get undefineds, what am I doing wrong?

The first argument to .each callback is the index, the second one is the value. You can also use this:
$result.find('MT').each(function() {
console.log($(this).attr("V") );
});
Or:
$result.find('MT').each(function( index, _mt ) {
console.log($(_mt).attr("V") );
});

You are using index as an element in each. As first parameter is index pass two parameter in each and use the second to get the element.
function(data){
$(data).find('R').each(function(){
var $result = $(this);
$result.find('MT').each(function(_mt, obj) {
console.log($(obj).attr("V") );
});
});
}

Suggest any Good mustache document

Suggest me any good mustache doc. Also i want to know in a mushtach loop how do i get the count or the loop no. I mean how can i do a for loop in mustache.
In the below code i wish to change the id in every loop
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
<script>
var data, template, html;
data = {
name : "Some Tuts+ Sites",
big: ["Nettuts+", "Psdtuts+", "Mobiletuts+"],
url : function () {
return function (text, render) {
text = render(text);
var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
return '' + text + '';
}
}
};
template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no"> {{#url}} {{.}} {{/url}} </li> {{/big}} </ul>';
html = Mustache.to_html(template, data);
document.write(html)
</script>
<body></body>

You can't get at the array index in Mustache, Mustache is deliberately simple and wants you to do all the work when you set up your data.
However, you can tweak your data to include the indices:
data = {
//...
big: [
{ i: 0, v: "Nettuts+" },
{ i: 1, v: "Psdtuts+" },
{ i: 2, v: "Mobiletuts+" }
],
//...
};
and then adjust your template to use {{i}} in the id attributes and {{v}} instead of {{.}} for the text:
template = '<h1> {{name}} </h1><ul> {{#big}}<li id="no-{{i}}"> {{#url}} {{v}} {{/url}} </li> {{/big}} </ul>';
And as an aside, you probably want to include a scheme in your url:
url : function () {
return function (text, render) {
text = render(text);
var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
return '' + text + '';
//---------------^^^^^^^
}
}
Demo: http://jsfiddle.net/ambiguous/SFXGG/

Expanding on #mu's answer, you could also keep an index in the data object and have the template refer to it and the function increment it. So you wouldn't need to add i to each item.
see demo : http://jsfiddle.net/5vsZ2/