How i can check if a <P> inside a <Div> contain data - javascript

I have the following field inside my SharePoint office 365 page:-
here is the related markup:-
<div class="ms-rtestate-write ms-rteflags-0 ms-rtestate-field" id="ProjectClosureSummary_cdd30532-e128-4dcd-b9bd-baf3e12a4c04_$TextField_inplacerte"
role="textbox" aria-haspopup="true"
aria-labelledby="ProjectClosureSummary_cdd30532-e128-4dcd-b9bd-baf3e12a4c04_$TextField_inplacerte_label" style="min-height:84px" contenteditable="true"
aria-autocomplete="both" aria-multiline="true" rtedirty="true">
<p>
need to ge this text!!
<span id="ms-rterangecursor-start" rtenodeid="1">
</span>
<span id="ms-rterangecursor-end"></span><br>
</p>
</div>
now using javascript or jQuery i need to check if the field contain data? but i am not sure how i can get the text which is inside a <p> inside a <div>?

Maybe you could try something like this:
text = $('p').text();

Please take reference from below code:
var parentdiv = document.getElementById('parent');
var childNode = parentdiv.hasChildNodes() ? parentdiv.children[0] : ''
console.log(childNode.textContent || childNode.innerText);
<div id="parent"><p>hello world</p></div>

Related

Check input modified in html without using form Angular 6

How to check if input is modified in html code, without using any form
I have below code
<textarea #txt (change)="data.url = txt.value" placeholder="https://"
[value]="data.url" ></textarea>
<span *ngIf="!txt.value">
<span class="">Required</span>
</span>
<span *ngIf="txt && txt.dirty && !customValidationService.urlValidator(txt.value)">
<span class="">Invalid</span>
</span>
Please help,
Thanks

Using multiple ids get text from element that is visible

I am using angular js with multiple conditions all using the same id. Need to get text just from the condition that is true.
I just found a big bug in an app I'm about to release.
I am using angularjs/ionic vs 1 and use allot of conditions in my html.
These condition produce great results and show what I want to be shown.
However whenever I save the information it fetches the element id, which each condition has the same id, and instead of giving me the text to the visible condition, I get all of them.
I need a way to grab the id text only if it's visible. This used to work, unless this was missed during testing.
Checking the id in controller.
function JqliteIds(id) {
// var myElement = angular.element( document.querySelector( '#some-id' ) );
var p = angular.element(document.getElementById(id)).text().trim();
p = p.replace(/(\r\n|\n|\r)/gm, " ");
p = p.replace(/ +/g, ' ');
return p;
//stepTwoFormula = stepTwoFormula.replace(/(\r\n|\n|\r)/gm, " ");
//stepTwoFormula = stepTwoFormula.replace(/ +/g, ' ');
}
The html form with multiple conditions. The id is... id="stepOneFormula"
<div class="item item-text-wrap">
<div ng-if="level.light">
<div ng-show="level.stepOne.bleachAdditiveType < 0">
<p id="stepOneFormula">
Mix {{config.productTypes[level.stepOne.productType]}} with
<span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
the manufacturer suggested developer or
</span> {{level.stepOne.peroxideVolume}} volume / {{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise.
</p>
</div>
<div ng-show="level.stepOne.bleachAdditiveType > -1">
<p id="stepOneFormula">
Add approximately {{config.partsInches[level.stepOne.bleachInches]}} of
{{config.productTypes[level.stepOne.bleachAdditiveType]}} to {{config.productTypes[level.stepOne.productType]}}. Mix with
<span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
the manufacturer suggested developer or
</span> {{level.stepOne.peroxideVolume}} volume / {{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise.
</p>
</div>
</div>
<div ng-if="!level.light">
<p>
<!--Going Red-->
<div ng-show="level.stepOne.redRootsTonePercentOne > -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/red-rootsDbl1.html'"></div>
</div>
<!--Mixed Levels of gray-->
<div ng-show="level.stepOne.grayTonePercentFour > -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/gray-mixedDbl1.html'" data="level.stepOne"></div>
</div>
<!--Regular Levels-->
<div ng-show="level.stepOne.grayTonePercentFour === -1 && level.stepOne.redRootsTonePercentOne === -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/genericDbl1.html'"></div>
</div>
</p>
</div>
</div>
As soon as I posted this question I started reading on the ng-show, ng-if and changed my ng-shows to ng-if... it worked.
https://docs.angularjs.org/api/ng/directive/ngIf
Don't need to check if element is visible. Unlike ng-show, the ngIf directive removes or recreates the element. So if it isn't created it's not there so the id is irrelevant.

How to print hyperlinks inside <p> tag when databinding AngularJS

I'm using a controller to convert any web links inside an <input> tag, and show them in a <p> tag. I want it to show the links in a hyperlink format as in
https://www.w3schools.com is great but it shows
Here's my code,
my HTML
<div class="col-sm-10 col-sm-offset-1">
<div class="row" style=" margin-top:70px;">
<div id='dv1'>
<form>
<input ng-model="comment.txtcomment" id="txtcomment" style='width:500px' >
<button ng-click="addComment()" style='margin-top:10px;'>Post Comment</button>
</form>
<!--displaying comments-->
<h4>Comments</h4>
<p>{{myText}}</p>
</div>
<div></div>
my controller
(function(){
angular.module('StayFit')
.controller('CommentController',['$scope','$state','$http', function($scope,$state,$http){
$scope.user=JSON.parse(localStorage['User-Data']) || undefined;
console.log( $scope.user.data);
$scope.comment={};
$scope.addComment=function(){
var text=$scope.comment.txtcomment;
//this code will identify any links
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
var text1=text.replace(exp, "<a href='$1'>$1</a>");
var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
var val=text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
$scope.myText=val;
}//.error(function(error){console.log(error);});
}])}());
Tried using ng-binding-html, also doesn't work
You apparently want to use text as HTML, not text, so you need to use ngBindHtml.
Be aware that SCE comes into play as well, so you will have to use something like $scope.myTextVal = $sce.trustAsHtml(val);.

Selecting element with JS issue

Please help me to understand this. I have HTML code like this:
<div id="one">
<div>
<div>
<span class="spanone"></span>
<span class="spantwo"></span>
<div>
</div>
</div>
.
.(some other html of the page)
.
<sometag class="spanone"></sometag>
<someothertag class="spantwo"></someothertag>
And I basically want to target only the first <span> and the second by JS without touching the sometags elements. In other words the: <span class="spanone"> and <span class="spantwo">. And then I want to use innerHTML to replace the code with the one I want.
Thanks!
var spanone = document.querySelector('.span1');
var spantwo = document.querySelecftor('.span2');
spanone.innerHTML = "Replacement";
spantwo.innerHTML = "Replacement";
You can achieve this in a couple ways
Use id
<span class="spanone" id="myspan1"></span>
<span class="spantwo" id="myspan2"></span>
so in vanilla JS
var d = document;
d.getElementById('myspan1');
d.getElementById('myspan2');
or with classes
<span class="spanone myspans"></span>
<span class="spantwo myspans"></span>
and in your JS
d.querySelectorAll('.myspans')
This should work:
var spanone = document.querySelector('.spanone')[0];
var spantwo = document.querySelecftor('.spantwo')[0];

how to change values in a hidden chunk of html code

I have this hidden block of code that i want to call based on the values that are received from server:
<div id="hiddenChart" style="display:none;">
<li style="height:auto;">
<div class="col-sm-4" id="chart_0_0">
<div class="panel panel-success" style="width:550px; height:auto;" id="accordion_0_0">
<div class="panel-heading">
<div class="btn-group" style="float:right;">
<i class="glyphicon glyphicon-minus" id="minimize_0_0"></i>
<i class="glyphicon glyphicon-remove" id="close_0_0"></i>
</div>
<h3 class="panel-title">title</h3>
</div>
<div class="panel-body" style="height:400px;">
<nvd3-multi-bar-chart data="Sec1Graf1Data" id="dataChart_0_0" height="400" showXAxis="true" reduceXTicks="true" showYAxis="true" showLegend="true" showControls="true" tooltips="true">
<svg></svg>
</nvd3-multi-bar-chart>
</div>
</div>
</div>
</li>
</div>
but i need to change some values: ids, tags, data variables.
I know how to show the code using "$('ul').append($('div').html());" but i have to change it before doing it.
How can i do it?
How do i define in which fields i have to insert the string i'me receiving?
Thk
UPDATE:
I was able put it to work, here is the fiddle with it fiddle.
When i inspect the element, the ids that i want to change, instead of #1, it returns chart_0_0.
Thank you all for your posts and help
You can get a reference to your div like this:
var $div = $('#hiddenChart');
To clone it,
var $clonedDiv = $div.clone();
Then, in the $cloneDiv object, you make the changes:
$clonedDiv.find(--selector of a node--).attr(atributeName, atributeValue); //change/add attribute
$clonedDiv.find(--selector of a node--).removeAttr(atributeName); //remove attribute
And so on. I won't explain how jQuery works, Lekhnath gave you a link.
Finally you insert the $clonedDiv with .appendTo() wherever you want. The original div remains untouched so you can clone it again and again.
Jquery Change text/html from a hidden div content :
Simple
maintain a copy of the hidden content
replace the content based on the element class/id selector with the server response
then paste the html into another div
replace the content of the hidden back to original (optional)
http://jsfiddle.net/austinnoronha/ZJ3Nt/
$(document).ready(function(){
var serverRes = {
title: "New Title In Header",
body: "New body text from server <\/br><nvd3-multi-bar-chart data=\"Sec1Graf1Data\" id=\"dataChart_0_0\" height=\"400\" showXAxis=\"true\" reduceXTicks=\"true\" showYAxis=\"true\" showLegend=\"true\" showControls=\"true\" tooltips=\"true\"><svg><\/svg><\/nvd3-multi-bar-chart>"
};
var tmpOldCont = $("#hiddenChart").html();
var counter = 1;
$(".serverres").click(function(){
$("#hiddenChart").find(".panel-body").html(counter + " = " + serverRes.body);
$("#hiddenChart").find(".panel-title").text(serverRes.title + " " + counter);
counter++;
$(".box-container").html($("#hiddenChart").html());
$("#hiddenChart").html(tmpOldCont);
});
});

Categories

Resources