In my project i have to retrieve the content in all script tags. I am able to do this by simply including
var scrpt=document.getElementsByTagName('script');
script_txt=scrpt[i].innerHTML;
but by using the above code i am not getting dynamic scripts which are created by
var s=document.createElement('script');
s.src="http://somefile.js";
not only this there are many other ways of creating dynamic scripts like
document.write('<script src="">');
and
document.body.innerHTML='<script src="">';
and many more. I tried to retrieve it by using regular expressions like this
var pattern=/([a-zA-Z0-9_\.].*?)=(document.createElement\((.*)\));
/g;
but this may not match all.
Can anyone suggest a better method for achieving this property.
The first method you mentioned, using document.getElementsByTagName('script'), is fine.
I wrote up a fiddle where I'm counting script tags before and after inserting a tag dynamically. It works fine. http://jsfiddle.net/crGx9/
Could you show us an example of when it doesn't work?
Related
I'm adding some html to a div using the following jQuery method:
$('#pageTabContent').append($('\
<div class="tab-pane" id="'+ticketId+'">\
And a whole lot more html here..
</div>'));
This works fine, but because I've got way too much html in my javascript I want to move that to a separate file. The problem is that I also need to insert the ticketId in the html. Is there a way using Javascript/jQuery to load the html from a separate file, but still insert the ticketId in it?
[EDIT] Please note that the ticketId is different for every time this piece of code is used. I will be used multiple times within one page load, so I cannot load the ticketId in the html using php. I has to be done client side.
All tips are welcome!
For that specific example, it's pretty straightforward:
$.get("/path/to/file.html", function(html) {
var newStuff = $(html);
newStuff.find("div.tab-pane:first").attr("id", ticketId);
newStuff.appendTo("#pageTabContent");
});
You can generalize that a bit, the basic concept is: 1. Load the HTML, 2. Use jQuery to create DOM elements from it, 3. Use jQuery to find the element in question and modify it, 4. Add to the element.
Another approach is to use some form of templating, either a templating plugin or just DIY:
$.get("/path/to/file.html", function(html) {
html = html.replace("{{ticketId}}", ticketId);
$("#pageTabContent").append(html);
});
Again, there are plugins and templating systems to do that for you, which would offer various features over doing your own.
I generally recommend avoiding dynamic html generation in javascript.
There are several good template based frameworks out there. One I like to use in KnockoutJS http://knockoutjs.com/
Another benefit of this approach is change tracking between your model and your html elements.
The situation I have is that I'm opening a page using CasperJS.
The page in question has some Javascript (a combination of both inline and external) that removes several HTML elements from the document.
However, I want to be able to retrieve those elements using something like getElementsByXPath() within CasperJS before they are removed. Is this possible?
When I dump out the value of getPageContent(), the elements are not in there. However, if I set casper.page.settings.javascriptEnabled = false; before calling the page, getPageContent() now shows the raw HTML before any Javascript is executed, and the missing HTML tags are there. The problem now, though, is that disabling Javascript prevents any usage of evaluate(), so I still can't retrieve the elements. I could probably do it using a regex of some sort on the raw content, but I was hoping there could be a cleaner method of doing it.
Any suggestions welcome!
I've never heard of anyone doing this. I wouldn't say using regex is a bad idea. I usually scrape with a combination of casperjs xpath and python regex it works extremely well and I personally don't think it's any messier than trying to intercept JavaScript before the page is loaded.
That being said, casperjs allows you to inject JavaScript which you could use jquery if it's available on the page you're requesting. The below code fires before anything is loaded. You actually have to go out of your way to add code to prevent this from firing before the page loads.
<script type='text/javascript'>
alert("Stop that parsing!");
</script>
I'm working with a VisualForce page (SalesForce related) and I need to write a piece of JavaScript that will replace some text on the page after everything is loaded.
I've tried the following (I'm using jQuery on other parts of the page so I've used jQuery for this also):
var j$ = jQuery.noConflict();
j$(document).ready(function()
{
var replaced = $find("body").html().replace('Test', '1234');
$("body").html(replaced);
});
Unfortunately it doesn't seem to do anything. It's like I can't get the page HTML code. I'm assuming it's because this is a VisualForce page running on the Force platform, so if anyone can offer any help with this that would be much appreciated.
Thanks.
P.S. In case anyone is wondering why I'm doing this is because I can't do this through VisualForce or Apex since I'm trying to unescape some HTML characters provided by a variable and being used in a dataTable header. Unfortunately everything in a dataTable header is automatically escaped.
First of all, it should be $.find() but hum.. also not necessary: simply $("body") for a selector.
Then in one line you can write:
$("body").html($("body").html().replace(/test/g, '1234'));
Notice /g in the regex, it should allow it to replace all instance of test, not only the first one.
You might also need to be precise with your j$ and use it everywhere, not only for document ready event. The line above uses $ shortcut.
I'm thinking of using a couple jQuery tools/plugins to dynamically change the DOM of a page:
http://plugins.jquery.com/project/appendDom
http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/
When the new DOM is changed, I can use Firebug to see the new elements as they are added, but I'm wondering if anyone has suggestions on how I can also build an .html page that can be saved off after a number of elements have been added.
My ultimate goal is to create an HTML Form Builder that will generate the HTML output so I can save the work as I go along. I also want to take the output that was generated and upload it, have it parsed, which will allow me to continue working at another time.
Any thoughts on how to at least get the .html file would be great or tools that I can use.
Assuming that you will just be needing the bits inside the body tag of the page you can get the HTML with document.body.outerHTML.
You can use the native outerHTML:
vat thehtml = $('#yourElement')[0].outerHTML;
You could use jQuery to get the HTML of the entire <body> section:
$('body').html();
I am a newbie to javascript functioning and wanted to see its functioning regarding pasting dynamic data in the html.
I have this link where they tell what to use for the same in a table but I can't figure out how to do the same...
The link to the code is javascript link
I first made an html page using the html shown and then added the lines of javascript shown below it in <SCRIPT LANGUAGE="JavaScript"> tag.
But I am not getting the same output.... What am i doing wrong ?
Please help...
It seems like the example you're trying to imitate is doing client-side data binding. First of all, yes, you need to reference jQuery script in your page. Secondly, you'd be better off accomplishing client-side data binding with the jQuery Templates plugin.