How to get Html code after javascript has modified it? - javascript

I want to get the HTML code of a webpage after it has been modified (similar to one that we see in inspect element tab of a browser) and I want to do it programatically (if possible using python or any other programming language). Can someone suggest how I might be able to proceed with this? I know its possible since browsers are able to do it.

As the server has no access to client window after client-side changes, you have to use client side languages.
In jquery:
var fullCode= "<html>" + $("html").html() + "</html>";
if you want also to include the Doctype:
var node = document.doctype;
var fullCode = "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>';
fullcode += "<html>" + $("html").html() + "</html>";
Thanks to this

Using JQuery you can achieve this by the following code
$(document).ready(function(){
var html = "<html>"+$('html').html()+"</html>";
});

Related

Declaring an empty element before insertAdjacentHTML

Hi I have a simple question, do I need to specify lblWelcomeUserMessage.innerHTML = ""; ( see below in code ) in the following function before insertAdjacentHTML on it ? It actually works as it is without declaring it, but I want to know what is the optimal approach ?
// Dynamic HTML / user interface for ALL users
function showWelcomeMessage() {
//lblWelcomeUserMessage.innerHTML = "";
var sWelcomeUserMessage = '<h3>' + 'Welcome:' + ' ' + sessionStorage.getItem( 'name' ) +
' ' + sessionStorage.getItem( 'lastname' ) + ' ' + sessionStorage.getItem( 'role' ) + ' </h3>';
var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
}
It depends on what you want to do.
If you are calling showWelcomeMessage function more than once then
you need to set it to empty lblWelcomeUserMessage.innerHTML = ""
function showWelcomeMessage() {
lblWelcomeUserMessage.innerHTML = "";
var sWelcomeUserMessage = '<h3>' + 'Welcome:' + ' ' + sessionStorage.getItem( 'name' ) +
' ' + sessionStorage.getItem( 'lastname' ) + ' ' + sessionStorage.getItem( 'role' ) + ' </h3>';
var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
}
setInterval(showWelcomeMessage,4000);
OR
Otherwise you can remove lblWelcomeUserMessage.innerHTML = ""; from
above code
insertAdjacentHTML inserts some HTML around a node (lblWelcomeUserMessage, which you should have get before with something like lblWelcomeUserMessage = document.getElementById('welcome_tag')).
Setting it's inner content to an empty string is not really necessary, unless you want to clear it. It's rather a design issue than a programmatic one.
Optimal approach for what?
By the way based on MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
insertAdjacentHTML() parses the specified text as HTML or XML and
inserts the resulting nodes into the DOM tree at a specified position.
It does not reparse the element it is being used on and thus it does
not corrupt the existing elements inside that element. This avoids the
extra step of serialization, making it much faster than direct
innerHTML manipulation.
So it's basically depends on your needs. If you want to replace previous message you just add the lblWelcomeUserMessage.innerHTML = ""; , if you want to show all previous message just comment that code.

How to do javascript scripting in BIRT report?

Can someone give me references where I can learn about javascript scripting in BIRT reports?
Scenario is, I have a drop down where which contains name of all car companies... Along with it, it has ALL option.
When "ALL" option is selected it should display all the records of all car brands.
Currently when I select individual car names, it works fine.
ALL option is not working.
Here is a code snippet.
if (params["RP_CarCompany_Name"].value == 'ALL') {
this.queryText = this.queryText.replace('DYNAMIC_CARCOMPANY', "'" + 'BMW' + "'," + "'" + 'AUDI' + "'," + "'" + 'JEEP' + "'," + "'" + 'DATSUN' + "'");
} else {
this.queryText = this.queryText.replace('DYNAMIC_CARCOMPANY', "'" + params["RP_CarCompany_Name"].value.join("','") + "'");
}
P.S.: DYNAMIC_CARCOMPANY is a placeholder in SQL query which is something like this
SELECT * FROM CAR_DB WHERE carcompany IN(DYNAMIC_CARCOMPANY);
Thanks for your help in advance.

Outputting data from an AJAX call to HTML

I'm using AJAX to add more articles to a list of articles when you press a button. So my AJAX call returns data that includes a title, author and 1 to 3 images associated with the article. Below is the code I'm using to output it, but it feels VERY clunky.
What are the best practices for printing out HTML with JavaScript/jQuery in a scenario like this where I need to add many new tags with new information? Thanks for the help!
Also, I know some of the code isn't super well written because it's a first draft just to make stuff work, so please only answer this question with regards to printing out the HTML or things that will make printing the HTML easier
$j.getJSON(ajaxurl, {action: 'load_articles', issues: $issues}, function(data) {
if (data.message != null) {
alert(data.message);
return
}
list = $j('.all-articles ul');
for (i in data.articles) {
article = data.articles[i];
//Hides articles already on page
if ($j("#" + article.id).size() === 0) {
list.append('<li class="article-preview" id="' + article.id + '">' +
'<h3 class="article-headline">' + article.title + '</h3>' +
'</li>');
current = $j("#" + article.id)
current.append('<p class="authors"></p>');
authors = $j("#" + article.id + " .authors")
for (a in article.authors) {
authors.append(article.authors[a].data.display_name + " ");
}
current.append('<div class="images"></div>');
images = $j("#" + article.id + " .images")
for (i in article.image) {
text = "<div class='image-expand-container'>";
if (i == 0) {
text += ('<img id="' + article.image[i].id + '"class="selected" src="' + article.image[i].medium + '"></img>');
}
else {
text += ('<img id="' + article.image[i].id + '" src="' + article.image[i].medium + '"></img>');
}
text += '<div class="dashicons dashicons-editor-expand"></div></div>';
images.append(text);
}
}
}
There are a few approaches you can take.
As you're doing here, you can return data from your ajax call (e.g. as JSON) and then use a javascript function to generate the corresponding HTML by building strings. This, as you're finding, is often messy.
You can generate the actual HTML on the server side, and have the ajax call return an HTML fragment, which you insert into your DOM. This has the advantage that, if some of your HTML is loading when the page loads, and some is loading via ajax, you can use the same approach (PHP, XSLT, ASP.NET Razor, any kind of server-side templating) to generate all of the HTML.
You can use a javascript templating framework to turn your JSON data into HTML. If all of your HTML is being generated via javascript (e.g. in a single-page application) this may be your best bet.

Internet Explorer open outlook appointment javascript

Go figure, I am having issues with IE and was hoping someone might be able to help....
I have a site where visitors will come and sign up for a specific meeting and then I want to be able to generate an appointment for the calendar of their choice; the choices are gmail, yahoo, and outlook. The gmail and yahoo appointments are generated as expected in all browsers, but the outlook appointments work in every browser except IE. Instead of throwing a file save dialog, IE opens a new window and attempts to navigate the url.
I am using the iCalendar jquery library that I modified a bit and building the ics markup in javascript, like this
//build ics markup
var event = makeAppointment(settings);
//render ics markup as outlook appointment
window.open("data:text/calendar;charset=utf8," + escape(event));
function makeAppointment()
{
return 'BEGIN:VCALENDAR\n' +
'VERSION:2.0\n' +
'PRODID:jquery.icalendar\n' +
'METHOD:PUBLISH\n' +
'BEGIN:VEVENT\n' +
'UID:' + new Date().getTime() + '#' +
(window.location.href.replace(/^[^\/]*\/\/([^\/]*)\/.*$/, '$1') || 'localhost') + '\n' +
'DTSTAMP:' + $.icalendar.formatDateTime(new Date()) + '\n' +
(event.url ? limit75('URL:' + event.url) + '\n' : '') +
(event.contact ? limit75('MAILTO:' + event.contact) + '\n' : '') +
limit75('TITLE:' + event.title) + '\n' +
'DTSTART:' + $.icalendar.formatDateTime(event.start) + '\n' +
'DTEND:' + $.icalendar.formatDateTime(event.end) + '\n' +
(event.summary ? limit75('SUMMARY:' + event.summary) + '\n' : '') +
(event.description ? limit75('DESCRIPTION:' + event.description) + '\n' : '') +
(event.location ? limit75('LOCATION:' + event.location) + '\n' : '') +
(event.recurrence ? makeRecurrence(event.recurrence) + '\n' : '') +
'END:VEVENT\n' +
'END:VCALENDAR';
}
You can get the file save dialog to work in IE by adding a "Content-Disposition: attachment" response header. However, this must happen on the server and cannot happen in client-side scripting, since JavaScript cannot modify header information.
See this answer for related details.

Add absolute hyperlink URL

I have the part of the jquery code
success: function(results) {
if (results.d.Product.length > 1) {
var html = '<h3>' + results.d.Product+ '<h3>'
+ '<div>' + results.d.ProductDescription + '</div>'
+ '**' + results.d.Url + '';**
$(test).html(html);
}
I need to add a absolute address eg. http://comcast.net
How can I do that.
Thanks,
SA
Your code doesn't escape the values (unless that's done on the server).
It would be better done like this:
$(test)
.empty()
.append($('<h3 />').text(results.d.Product))
.append($('<div />').text(results.d.ProductDescription))
.append(
$('<a />')
.attr('href', "http://yourdomain.tld/" + results.d.Url)
.text(results.d.Url)
);
I assume that this is what you're trying to do. Note that you might need to remove the / from the domain name string if the URL from the server already has it.

Categories

Resources