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.
Related
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 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.
Firstly excuse my ignorance with any inaccurate information I provide I a very new to javascript, jquery and json.
Anyway I have a script which pulls data from a json file and displays in a webpage with the help of javascript, jquery, ajax(i think) and json.
There is a callback for when I get back the results:
function searchCallback(data) {
$(document.body).append('<h1>' + data.title + '</h1>');
}
And it works fine the like this. However I want data.title (json object) to be displayed in a html element of my choice without having to use $(document.body) because my page won't display correctly at I have other html elements outside the script.
As far as I know (excuse ignorance) with javascript I can possible add a variable and use it as follows:
var title = data.title;
And in my html:
<span id="title"></span>
or maybe there is cleaner way?
Anyway how do I achieve this. Thank you for any help!!
If you want to find an element and modify, jQuery makes this easy. Instead of $(document.body).append find an existing element by it's id, and then call the text method on it to replace the text inside that element with something new.
$('#title').text(data.title);
I am writing a program that does the following:
Creates an iframe in the DOM
Makes an AJAX request to a page (a site's main page)
If the page has changed, I use iframe.srcdoc = contents; to the iframe, where contents is what came back from AJAX
Note that this way any image etc. with a relative URL specified will not render correctly. To make it look right, I have to add a <base> tag to <head>.
I am very reluctant to use regexp like this:
contents = contents.replace('<head>','<head><base href="http://www.example.com/">');
Because it might stuff things up (but, am I being way too overcautious and over-paranoid?).
NOTE: I cannot do this by manipulating DOM: if I do iframe.srcdoc = contents; and then add the <base> tag, the page will still render incorrectly. The <base> tag needs to be there before I assign it to iframe.srcdoc...
How would you go about this?
Merc.
Use appendChild DOM operation to add the element.
document.getElementsByTagName('head')[0].appendChild('<base href="http://www.site.com" />');
In my holy opinion using appendChild with string-values it not the best idea, so here is my approach.
// create new "base"-node
var node = document.createElement('base');
// set href="http://www.site.com"
node.setAttribute('href', 'http://www.site.com');
// append new "base"-node to first "head"-node in html-document
document.getElementsByTagName('head')[0].appendChild(node);
see W3-School The HTML DOM (Document Object Model) for details about DOM-Manipulation, DOM-Understanding and Javascript-Reference.
Solution for inject "base"-tag with string-manipuation (kind of "non-dom-offline") is Regex to prepend base-tag before closing head-tag.
contents = contents.replace(/<\/head>/ig, '<base href="http://www.site.com" />$&');
An other solution can is using jQuery to construct an "offline-DOM" of the contents of the iframe and using DOM-Manipulation-Methods.
contents = jQuery(contents).find('head:first').append('<base ... />').html()
// no guarantee here that this will work ;-) it was just out of my mind, but should work.
I'm implementing some third-party web software for my company. It returns some html which I can't directly change. I'd like to make some minor updates using jQuery but am not familiar with this syntax.
<div c:id="container"> </div>
How do I find this div in the dom using jQuery? What is "c:id" anyway? I've never seen that syntax before.
Thanks.
c:id is just an html attribute like any other. You can access it in jQuery using the attribute selectors:
var container = $('[c\\:id="container"]');
Could you post the entire XML ?
It probably is an XML namespace define with xmlns:c={url}
You can;
var el = $('div[c\\:id="container"]');
(unescaped : being a pseudo-class)