I have a page with angular-moment on it. Upon page rendering angular-moment is working.
Using
<span am-time-ago="message.time"></span>
But when I append new html.. it's not working
var date = '<span am-time-ago=\"message.time\"></span>';
angular.element('#here').append(date);
Did I missed something? Please help...
Thanks, Kurai
HTML that is appended manually must be bound to a $scope.
To do this you inject and use the $compile service.
// Pass element or HTML string to `$compile` to get a link function
var linkFn = $compile('<span am-time-ago="message.time"></span>');
// Pass `$scope` to the link function to get an element bound with it
var element = linkFn($scope);
// Append the element
angular.element('#here').append(element);
It's often written like this:
var element = $compile('<span am-time-ago="message.time"></span>')($scope);
angular.element('#here').append(element);
Note that if you must add HTML manually like this and want to follow the best practices of Angular, it should be done from a directive.
Related
I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal
Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.
I am creating a custom sign in experience for a customer using okta Sign in Widget. As part of this 'widget' the function creates an HTML login form. One of the tags this generates I want to modify the contents of after it has been generated on page load by the Okta widget.
I've created a fiddle where I used the following code to modify the contents but it doesn't seem to be working.
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass.innerHTML = "<h2>Public Offers</h2>";
}) ;
Please could someone advise on how to get this working.
getElementsByClassName will give you an array of elements with that class name. So you need to iterate over it, or if you are sure there is only one element, use getElementsByClassName[0]
Example:
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass[0].innerHTML = "<h2>Public Offers</h2>";
}) ;
More information: https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName
I have CKEditor with config.fullPage = true;, so I have an entire document to work with.
My goal is to automatically find and modify the action of all form elements in the CKEditor content. I've tried using the method of converting the html string to jquery and back with no luck (I think it's because I'm working with a full document).
Any help is greatly appreciated!
If editor is the instance of your CKEditor, then calling editor.editable().$ will get you the native body element of the iframe, then you can keep using DOM methods or jQuery if you prefer.
jQuery(editor.editable().$).find('form').attr('action', '');
UPDATE
check this CKEditor Jquery Adapter and you can also get HTML of the element with .getHtml .
ANOTHER UPDATE
$("#mybutton").click(function(){
var editor_contents = CKEDITOR.instances[YOUR_TEXTAREA_ID].getData();
var dom = document.createElement("DIV");
dom.innerHTML = editor_contents
var plain_text = (dom.textContent || dom.innerText);
alert(plain_text);
});
I'm new to javascript and jquery.
I wonder if there are any ways to download content of a target html page.
And bind the downloaded content to a variable , and later I can search for its tags inside or not.
Can anyone give me an answer please ? :)
Thank you
Yes, you can, using the jQuery 'load()' function: api.jquery.com
If you want to load it into a variable instead of an element, you cah use the 'get' function. After you loaded the html into a variable, you can wrap it to get a jQuery element.
A simple example (just pseudocode, copy/paste probably won't work):
$.get("/example.html", function( data ) {
var source = $(data);
//and now you have a jQuery element. You can use 'find' to seach the including tags
}, 'html');
Using HTMLAgilityPack to get the content from target html,like as
HtmlWeb htmlWeb = new HtmlWeb();
HtmlDocument doc = htmlWeb.Load(url);
doc.DocumentNode.SelectSingleNode(#"id('content')/div/div[1]/");
hopefully this help you.
I am building an MVC 5 web app using Visual Studio 2013.
I am trying to create a list of Courses using anchor tags which when clicked will pass as a parameter the selected Course to a Javascript function. The Javascript function will in turn use Ajax to call a second function to retrieve a list of Students enrolled on the selected Course.
In the View I have:
#model IEnumerable<School.Models.Course>
...
#foreach (var item in Model)
{
<a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="#item.CourseName">#item.CourseName</a>
}
The Course list gets created as expected:
<a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="Chemistry">Chemistry</a>
<a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="Physics">Physics</a>
My Javascript function is defined as follows:
function selectedCourse() {
var selectedCourseName = $(this).data('cname');
}
The code reaches the Javascript function but the value of selectedCourseName is always 'undefined'.
Am I missing something really basic for this to work?
Any help would be greatly appreciated.
Walter
The reason that it's not working is because the context of this on an inline event handler is not the element itself, but the window element. Change your code so that the handler is applied separately from your markup, this is a best practice anyway, and the context will be correct.
$('.selectedCourse').on('click', function(e) {
e.preventDefault();
var selectedCourseName = $(this).data('cname');
...
});
An alternative, and one I don't recommend, is to add a parameter to your inline handler and pass this as the parameter. The value of the parameter will be the element that was clicked.
Don't do this!
See examples at http://jsfiddle.net/cJZpK/