I want to get h2 tag id value in the edit mode. Because if DetailsHeader is blank then I have to display error message.
<div class="modal-header">
<h2 class="tc_pageheader editableName" id="DetailsHeader"></h2>
</div>
You can use this:
var h2 = $(".modal-header > h2").attr("id");
I used jQuery because, I feel you are using BootStrap and it includes jQuery.
Fiddle: http://jsfiddle.net/praveenscience/nhp6d/
So to find if it is empty, you can use something like this:
if ($("#" + h2).text() == "")
// Do something if empty!
Fiddle: http://jsfiddle.net/praveenscience/nhp6d/1/
Related
I am new to jquery and was wondering how I can point one html element equal to another. I want to make it so that whenever something in the h2 tag changes, the text within the p tags will copy the change. Below is how my tags are set up within the class fc-center.
var title = $('div.fc-center h2').text();
$('.fc-center').append('<p>'+'' +'</p>');
with the html looking something like
<div class = 'fc-center'>
<h2> text text</h2>
<p> </p>
</div>
essentially what I want to do is something like this :
$('div.fc-center p').equalto $('div.fc-center h2')
But I am not quite sure how to go about it
I propose this solution:
var title = $('.fc-center').find('h2').text();
var elementsP=$('.fc-center').find('p');
if (elementsP.length > 0) {
$.each(elementsP, function(i, val) {
$(this).empty().html(title);
});
}
https://jsfiddle.net/julian9319/grc0y6qf/1/
I'm confused. I'm trying to check in a loop if the outputted key is a mail key, if yes, I want to wrap the output into a <a> tag to make the email clickable. Somehow it's not working and it's printing the whole content inside the div:
<div>{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}</div>
Current result on the page:
{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}
I'm not sure if I understood the whole thing correctly. I'm coming from PHP and there I can do something like this. Can someone please explain me my issue?
If you surround the html elements inside the div with quotes like you did, you are telling angular that the divcontent is actually a text value. So it will end up displaying your condition as text.
You can add dynamic html by binding to innerHtml property like suggested, however I find it cleaner to keep display logic in the template using one of the options below. Besides, they will avoid the extra overhead of calling a function every round of change detection
*ngIf
<div >
<a *ngIf="contactInfo.key === 'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngIf="contactInfo.key !== 'mail_outline'">{{contactInfo.value}}</ng-container>
</div>
Or use *ngSwitch, which will be more adequate if you've got several different cases
<div [ngSwitch]="contactInfo.key">
<a *ngSwitchCase="'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngSwitchDefault>{{contactInfo.value}}</ng-container>
</div>
Use angular Html binding. Update your html
<div [innerHtml]="getLink()"></div>
In your typescript
getLink(){
if(this.contactInfo.key === 'mail_outline')
{
return `<a href='${this.contactInfo.value}'>${this.contactInfo.value}</a>`;
}
else
{
return this.contactInfo.value;
}
}
Thanks.
I have a page with a set of jQuery accordions built from an MVC foreach statement.
Before each accordion, I would like to add some text in a <p> tag. Whatever I have tried, the jQuery styling has added classes and styles to my tag.
Is there a simple way to add a <p> tag and say that I want it the same as the other <p> tags on the non jQuery page? Almost like an inline !important setting.
EDIT
Code to build accordions:
<section id="accordions" aria-label="accordion-expand\collapse" class="col-md-12">
#{
foreach (var accordion in Model.Content.Children.Where(f => f.DocumentTypeAlias.Equals("Accordion", StringComparison.CurrentCultureIgnoreCase)))
{
var isInScheme = Model.User != null ? Model.User.IsInScheme(accordion.GetPropertyValue<String>("schemeTypes")) : false;
var isMemberStatus = Model.User != null ? Model.User.IsMemberStatusType(accordion.GetPropertyValue<String>("memberStatusTypes")) : false;
if ((!accordion.HasValue("schemeTypes") && !accordion.HasValue("memberStatusTypes")) || (isInScheme && isMemberStatus))
{
if (accordion.GetPropertyValue<String>("accordionText") != "" & accordion.GetPropertyValue<String>("accordionText") != null)
{
<p>accordion.GetPropertyValue<String>("accordionText")</p>
}
<h3 class="clearfix" id="#accordion.Id">
<span class="title">#(accordion.GetPropertyValue<String>("accordionHeader"))</span>
</h3>
<article class="clearfix">
#(Html.Raw(accordion.GetPropertyValue<String>("accordionContent")))
</article>
}
}
}
</section>
where the accordionText is being inserted, jQuery is adding the classes to it.
If I understood correctly, the problem is your jQuery CSS selector.
You may have something like this:
$("p").addClass("class");
That is why jQuery is matching all your <p> tags, even the ones you do not want it to.
What you could do is change your tag selector to a class selector, then use this class in the descendant <p> elements of the accordion.
Option 1:
Change this:
<p>accordion.GetPropertyValue<String>("accordionText")</p>
To this:
<p class="accordion-text">accordion.GetPropertyValue<String>("accordionText")</p>
And this:
$("p").addClass("class");
To this:
$(".accordion-text").addClass("class");
Option 2:
$("#accordions p").addClass("class");
Is searching possible in html tags on the behalf of ID? for example to find div tag having id="abc".
I can use document.getElementByID("abc"). But i need parent div + its inner HTML in return of searching. i.e if this div has childs
Try this :-
<script >
function showHTML(){
var vinner=document.getElementByID("abc").innerHTML;
var totalinner="<div >"+vinner+"</div>";
alert(totalinner);
}
</script>
HTML part:-
<body onload="showHTML();">
<div id="abc">
Hello inside abc
<div>
Inner div inside abc tag.
</div>
</div>
</body>
Its working fine. You can get Attributes here.
It's hard to understand what you want to achieve:
document.getElementById("abc").parentNode.innerHTML;
//will return <div id="abc"> and other items from parrent
document.getElementById("abc").getAttribute("name");
//will atribute of <div id="abc">
if (document.getElementById("abc").hasChildNodes()) {
// It has at least one
}
Using jQuery is much simplier, you could do that:
$("#abc").attr('id') //retunrs id
$("#abc").attr('class') //returns classes
//or other manipulations
One way to do this is to use outerHTML, which:
gets the serialized HTML fragment describing the element including its descendants.
Given the following HTML:
<div id="abc" data-attr="A custom data-* attribute">Some text in the div.</div>
The following JavaScript will log, in the console, the HTML of the element of id equal to abc:
var htmlString = document.getElementById('abc').outerHTML;
console.log(htmlString);
JS Fiddle demo.
References:
outerHTML.
outerHTML compatibility.
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.