jQuery CSS - do not allow to override - html

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");

Related

How to hover the table using utext

I have an issue with utext in thymeleaf. I want to show a table as a hover.
This is my code
<td class="CellWithHtmlContent" th:title="${event.note}">
<span class="CellContent" ></span>
<span th:if="${event.note != null}"
th:utext="${!#strings.startsWith(event.note,'<') ? #strings.abbreviate(event.note, 60) : 'More'}"></span>
</td>
I have used th:title to show the table when hovering. But it just show the html code. Using th:utext, can show the table properly. but It isn't act as a hover. Is there any way to use th:utext inside the th:title?
Like this --> th:title = utext(${event.note})
Thymeleaf does not support this. It is not possible to have a browser render HTML in a title attribute. See Is it possible to add html inside a title attribute?
You will need to use something like https://atomiks.github.io/tippyjs/
Add this JavaScript snippet to your page:
<script>
document.addEventListener('DOMContentLoaded', function (event) {
tippy('.tooltip', {
content(reference) {
const id = reference.getAttribute('data-tooltipid');
const template = document.getElementById(id);
return template.innerHTML;
},
allowHTML: true
});
});
</script>
Now, add something like this:
<td class="CellWithHtmlContent" th:title="${event.note}">
<span class="CellContent" ></span>
<span th:if="${event.note != null}"
th:attr="data-tooltipid=${'cell-tooltip-'+event.id}"></span>
</td>
(I assumed event has an id. You will need something to make the tooltip reference unique for each tooltip on the current page).
Now, also have some hidden HTML on the page that will be loaded into the tooltip by the Tippy library:
<div th:id="${'cell-tooltip-'+event.id}" class="hidden">
<span th:if="${event.note != null}"
th:utext="${!#strings.startsWith(event.note,'<') ? #strings.abbreviate(event.note, 60) : 'More'}"></span>
</div>
It is important that the id of the hidden HTML matches with the data-tooltipid for the tooltip to work.

Using jquery to have one html element point to another

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/

Replace element with razor textarea

I want to take a tag and replace with a #Html.textarea() razor html helper but it doesn't look as if JQuery can replace DOM elements with html helpers. How do I go about this?
using(#Html.BeginForm())
{
<a id="clickme">Edit</a>
<div>#Model.username</div>
}
How can I replace this div with #Html.Textarea ? JQuery could do it with div and input tags.
jQuery cannot replace a tag with #Html.TextArea() !
The TextArea helper method is a C# method, which gets executed when razor tries to render the view. This happens in your web server. jQuery is a client side library and anything you do with jQuery happens at client side, in your browser.
But all these helper methods ultimately generate some HTML for DOM elements. That means, you can use jQuery to manipulate visibility of that.
If you are trying to do something like an inline edit, you can use a script like this , to start with
First, render the text area along with your label div, but have it hidden initially. Also wrap the label,edit link and the hidden input inside a container div which we can use later to help with our jQuery selectors.
#using (#Html.BeginForm())
{
<div class="edit-item">
Edit
<div class="edit-label">#Model.FirstName</div>
#Html.TextAreaFor(a => a.FirstName,
new { style = "display:none;", #class = "edit-text" })
</div>
<div class="edit-item">
Edit
<div class="edit-label">#Model.UserName</div>
#Html.TextAreaFor(a => a.UserName,
new { style = "display:none;", #class = "edit-text" })
</div>
}
Now when the user clicks edit, you have to toggle the visibility of the label and hidden input and update the value of label after user done editing the value in the input element.
$(function () {
$("a[data-mode]").click(function (e) {
e.preventDefault();
var _this = $(this);
var c = _this.closest(".edit-item");
c.find(".edit-text").toggle();
c.find(".edit-label").toggle();
if (_this.attr("data-mode") === 'label') {
_this.attr("data-mode", 'edit');
_this.text("done");
} else if (_this.data("mode") === 'edit') {
c.find(".edit-label").text(c.find(".edit-text").val());
_this.text("edit");
_this.attr("data-mode", 'label');
}
});
});
This is a head start. You can optimize this code as needed.
Here is a working jsfiddle for your reference

Insert HTML element after a specific div class name with Typescript & Angular

What I want to do is to insert a component inside a div, after a specific div with a specific class name. How do I do this in typescript?
<div class ="{{order.orderId}}">
<div class="enter-here"></div>
<other html elements here>
</div>
And TypeScript:
insertDiv(){
insert.component.after.className.enter-here;
}
Inserting new element is not the angular way of doing it, when using angular DOM manipulation should be avoided as much as possible. In your question you haven't mentioned what will be the contents of .enter-here, so I am assuming it is just plain text:
In your html:
<div class ="{{order.orderId}}">
<div *ngIf="showEnterHereDiv" class="enter-here">
some text or list which should be visible after showDiv is called
</div>
<other html elements here>
</div>
In your typescript:
// hidden by default
showEnterHereDiv: boolean = false;
...
showDiv() {
// call this method to show the div
this.showEnterHereDiv = true;
}
hideDiv() {
this.showEnterHereDiv = false;
}

Span inside div doesn't apply ng-style

i am trying to Append spans in a div. Below is my div code
<div
id="paragraph"
class="paragraph"
name="paragraph">
</div>
This is code i am implementing in my Controller
$scope.style_Text = {color:'#F00'};
for(var i = 0; i< $scope.paragraph.length; i++)
{
var span = "<span ng-style='style_Text' id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
$( ".paragraph" ).append($(span));
console.log(span);
}
Spans are added in the div, but style is not applied. When i copy the span from console and place it above div. This span is working fine. Style is applied on it.
I have tried putting style='color:red;' instead of ng-style, It also works.
Please help how to use ng-style here. Thank
What for u doing this? Thats bad pattern.
Your HTML:
<div
id="paragraph"
class="paragraph"
name="paragraph">
<span ng-repeat="elem in list">{{ elem.xxx }}</span>
</div>
In controller just add objects in your $scope.list after some action
$scope.addToList = function() {
$scope.list.push({...});
}
And angular add them to DOM inside your div tag.
If you use not angular event model for refresh DOM use $scope.$apply().
Do not mix jQuery to Angular, you really not need to
Do all the DOM manipulation in directives!
Now to your question, if you really want to it your way
You wanted this $scope.style_Text = {color:'#F00'}; to be a string I guess, so $scope.style_Text = '{color:\'#F00\'};' and then var span = "<span ng-style=" + $scope.style_Text + " id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
But really please do a directive
Edit: in such a case like this, what is the point of using ng-style and not style itself?