Angular: parsing DOM objects - javascript

Im using an external library that returns an object. I console logged the object and found out that the information im trying to dig can be found here:
console.log(object.helper.context.innerHTML);
Which produces a whole bunch of html as shown below. Question is, is there a way to parse the "#number text" part? The format is always: hashtag+numbertext. Note: I do not know beforehand what the number / text will be each time.
// more code...↑
<p><b class="ng-binding"> #55 text</b></p>
</div>
<div class="Body">
<hr ng-class="{highlight : hover}" class="highlight">
<p class="ng-binding">joo</p>
<i id="editCog" class="fa fa-cog" ng-click="method" title="Click to edit" ng-show="hover"></i>
</div>

This might help:
var element = angular.element(object.helper.context);
var text = element.find('b.ng-binding').text();
alert(text);

Related

jQuery - Trying to dynamically add new elements created out of DOM

Hopefully, I've titled this right I still get confused with my terminology. I'm trying to dynamically add new elements which I used an AJAX request to get and I placed into a div called <div class="hidden-tags"></div>.
Whenever a button is clicked, it triggers this function
$(".tags").on("click", '.tag i', function() {
var lastTag = $(".tags > span").last().text();
$(".tags").append($(".tagname-"+lastTag).parent().next());
});
So it should be appending the .tagname-VARIABLE parent's next parent to the .tagselement but instead nothing happens and there is no element added, nor an error in the console
when i do some testing i found that everything up to the $(".tags").append($(".tagname-"+lastTag).parent().next()); worked fine, some reason the .parent().next() didnt work; still unsure why
Example:
On one of the tests, I did the lastTag variable was defined as portal so therefore the function is $(".tags").append($(".tagname-portal").parent().next());
so it should append the <span class="tag">guide<i class="fa fa-times tagname-guide"></i></span> to the .tags element but instead doesn't do that and leaves me with no error in the console
Here are the tag layouts in case this helps (just examples)
<div class="tags">
<span class="tag">games<i class="fa fa-times"></i></span>
<span class="tag">guides<i class="fa fa-times"></i></span>
</div>
<div class="hidden-tags">
<span class="tag">games<i class="fa fa-times tagname-games"></i></span>
<span class="tag">guides<i class="fa fa-times tagname-guides"></i></span>
<span class="tag">video<i class="fa fa-times tagname-video"></i></span>
</div>
Edit:
To clarify, what i'm trying to do:
I've used AJAX to get a response in JSON and used $.each($.parseJSON(response), function(k, v) { to split the keys and values, i've then used a function which cuts the array off after a certain total character count, i then want to be able to find the next key/value after that 'cut off point' with jquery/js, and then the next key/value etc etc
if (tagchars < 415) {
$(".tags").append("<span class='tag'>"+k+"<i class='fa fa-times'></i></span>");
$("table").append("<tr><td>"+k+"</td><td>"+(v*2)+"%</td></tr>");
}
the json looks something like {"tagname":"value", "tagname":"value"},

How does one add HTML code in a JS function?

I am using the following js to replace text in a class called .relatedactivities with another text. In the example below the text is Related Activities.
<script>
$(document).ready(function(){
$(".relatedactivities").text('Related Activities');
})
</script>
How can I replace the text "Related Activities" with the HTML code below instead?
<h1 class="GreenLrg" align="center">Related Activities</h1>
<div align="center"> <a href="/activities/kauai/ziplineadventures/koloa-zipline.htm">
<div class="CatBox"><img src="/Portals/0/1koloa-zipline-tour-2.jpg" height="174" width="231"><span>Koloa Zipline Tour</span></div>
</a> <a href="/activities/kauai/ziplineadventures/zip-n-dip-expedition.htm">
<div class="CatBox"><img src="/Portals/0/2zip-n-dip-2.jpg" height="174" width="231"><span>Zip N' Dip Expedition</span></div>
</a> <a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
<div class="CatBox"><img src="/Portals/0/3kipu-zipline-safari-2.jpg" height="174" width="231"><span>Kipu Zipline Safari</span></div>
<p></p>
</a></div><a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
I do not suggest you hard code HTML in your JavaScript, as it will become extremely difficult to maintain in the long run.
In a perfect world, you can call a backend service via AJAX which would return HTML, or you could use a framework or library like AngularJS or React.JS.
Now, to answer you question, simply change .text() for .html('<html here/>').
You'll need to use .html() instead of .text():
$(".relatedactivities").html('<h1 class="GreenLrg" align="center">Related Activities</h1>...');
Use: html() like
$(".relatedactivities").html('your code html');
This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.
For more about that, check http://api.jquery.com/html/

how to send through onclick="function(this)" [duplicate]

This question already has answers here:
passing $(this) from function to function
(3 answers)
Closed 7 years ago.
Okay, so I have got two problems here. First I will show you the html.
<div id="servicesAvailable">
<div>
<input type="text" name="servicesAvailable[]">
<i class="fa fa-plus-circle"></i>
<span>Add another service</span>
</div>
</div>
Okay so i want the user to be able to click the '.fa-plus-circle' class to add another div inside #servicesAvailable.
So i did this:(i know that people will say why dont you write $() instead of jQuery(), but its fine like this).
jQuery('fa-plus-circle').click(function(){
jQuery('#servicesAvailable').append(
'<div>
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">
<i class="fa fa-plus-circle"></i>
<span> Add another service</span>
</div>'
);
jQuery(this).next().hide();
jQuery(this).hide();
});
Ok so with this it should work fine. It actually works the first time i click the class. Then when i click on the fa-plus-circle class on the new appended section it just doesn't do anything. Even if i put console.log('here'); inside the jQuery click function it doesn't log.
So to start of if anyone can point out something i did wrong there then great!.
However i have tried now to change the way i do this to get it to work which leads the the title question 'how to send through onclick="function(this)"'
<div id="servicesAvailable">
<div>
<input type="text" name="servicesAvailable[]">
<i class="fa fa-plus-circle" onclick="addServices(this)"></i>
<span>Add another service</span>
</div>
</div>
function addServices(this)
{
jQuery('#servicesAvailable').append(
'<div>
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">
<i class="fa fa-plus-circle"></i>
<span> Add another service</span>
</div>'
);
this.next().hide();
this.hide();
}
now straight away in the console before i do any thing is has
Uncaught SyntaxError: Unexpected token this
function addServices(this)
Can anyone advise what i am doing wrong in either cases to get this to work please?
Ill admit i'm not 100% which the second way but i'm pretty sure the first attempt should work.
As the error is Syntax Error Uncaught SyntaxError: Unexpected token this.
Your string is not completed on the same line. For multiline strings use \ at the end of line
function addServices(el) {
jQuery('#servicesAvailable').append(
'<div>\
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
<i class="fa fa-plus-circle"></i>\
<span> Add another service</span>\
</div>'
);
jQuery(el).hide().next().hide();
}
This is your working code:
$('#servicesAvailable').on("click", ".fa-plus-circle",function () {
$('#servicesAvailable').append('<div>\
<input type="text" name="servicesAvailable[]" onclick="addServices(this)">\
<i class="fa fa-plus-circle">click to add</i>\
<span> Add another service</span>\
</div>');
jQuery(this).next().hide();
jQuery(this).hide();
});
Here is the JSFiddle demo
The event was binded only to the existing element, and not with the dynamically added elements. To bind events with dynamically added elements you need to update
jQuery('fa-plus-circle').click(function(){
to
jQuery("#servicesAvailable").on("click", "fa-plus-circle", function(){
For reference - http://api.jquery.com/on/

how can I read dynamic value in ui in e2e protractor

I'm developing e2e test in protractor. I'm running the test chrome browser.
In UI there is a dynamic field :
<div ng-show="searchResult.count" >
<h4>Search Results: </h4>
<p id="font-weight-500">{{searchResult.count}} Items</p>
<hr>
</div>
I need to take the value of searchResult.count
I tried
element(by.binding('searchResult.count'));
$('[ng-show="searchResult.count"]')
;
I did some change in html and added ng-model='shearchResult.count' in div
<div ng-show="searchResult.count" ng-model="searchResult.count">
then I call
element(by.model("searchResult.count"));
All of them's result is same:
<h4>Search Results: </h4>
<p id="font-weight-500" class="ng-binding"> Items</p>
<hr>
I also tried to use $scope
SearchPage.prototype.getSearchResultNumber=function($scope){
....
var value=$scope.searchResult.count;
....
But I've got the "$scope" is undefined result
Although I can see the number in web browser I cannot read or take in e2e spec in protractor.
How can I get this dynamically generated data?
Can anyone help me to solve this problem?
Thanks
You can workaround it by using getAttribute() to get the value of ng-model attribute:
var div = element(by.model("searchResult.count"));
expect(div.getAttribute('ng-model')).toBe('10'); // 10 is an example

Javascript, writing dynamic content to textarea

I am programming a blog in php, for the record I've just started out but Im doing pretty good with this PHP but Javascript I don't really understand.
On my blog I would like people to comment and discuss.
What I want:
Every comment has an id that is displayed.
I want to click on it and then the Javascript should place it in the textarea for leaving comments.
Thats all.
(This answer uses jQuery.)
// getting a reference to the TEXTAREA element
var $ta = $("#new_comment textarea");
$(".comment").click(function() {
var text = $(this).find(".text").text(); // depends of the structure
$ta.val(text);
});
<div class="comment">
<p class="author"> Peter </p>
<p class="text"> Good article! </p>
</div>

Categories