Get Javascript document.write Data into variable and show it - javascript

I have a remote Javascript which allow us to output data using a function, which returns the data by document.write(thedata).
See http://www.websnapr.com/implementations/. Here :
wsr_snapshot('http://URL', 'websnapr API Key', 'Size');
Function has document.writed the data at http://www.websnapr.com/js/websnapr.js. See source of this JS File.
Now I would like to store this Data(whatever is writed) into a variable and then assign it to some Div innerHTML.
I tried everything but it is just changing the page where I am implementing it. I do not want to change the page. It should not open new screen and write it. It should do it on same page and hence I want to store the document.write data by the function into a variable and use it in innerHTML of any DIV.

You could rewrite document.write prior to including the script and change it back to the original afterwards:
<script>
var oldwrite = document.write;
var text = '';
document.write = function(t) { text = t; }
</script>
<script src="jsfile"></script>
<script>
document.write = oldwrite;
//text now contains your text
</script>

Why not just copy the javascript file to your web server, and modify it to store the data instead of writing it?

Related

Passing Variables to External Javascript

I have a view dynamic variables that I would like to pass to an external javascript.
in the HTML I am setting a few hidden input fields, as such:
<input type=hidden id="varID" value="sourceID">
and then calling them in my external Javascript file as such:
varID = document.getElementById("varID").value;
When I check to see if there is anything in there, I always get an undefined. In my HTML, I am setting the hidden input field before I even al to load the external javascript file.
Any ideas of what I'm missing?
Try this in your external JavaScript.
$(document).ready(function() {
var varID = document.getElementById("varID").value;
});
Try this:
window.onload = function () {
var varID = document.getElementById("varID").value;
}
Basically, the JavaScript code will only run once the page has loaded.

Get ajax value from JavaScript function

I'm not an JS developer, so forgive me if this is a stupid question.
I have this web application, that uses ajax to keep the data update on the screen, but I'm not able to use the ajax value in my JS function, the code generated by my application is:
<span id="c0"></span>
In the web page I just see the numeric value, e.g. 5 and it's updated every second as expected, so I tried to use the same in my JS function:
<script type="text/javascript">
function getPoint()
{
console.log ('<span id="c0"></span>');
return 0;
}
</script>
But in the Chrome's log I just see <span id="c0"></span> instead of a numeric value.
Try the following:
<script type="text/javascript">
function getPoint()
{
var span_element = document.getElementById("c0");
var content = span_element.innerHTML;
console.log(content);
return content;
}
</script>
Explanation:
First you need to access the DOM element of javascript. You identified the element with the id: "c0". To access the element you need to use the function: document.getElementById("someID");
With the element you can do a lot of things. In this case you want to access whatever is inside the tag , so what you want is its inner HTML.
If you are using JQuery, you can also get its content like this:
var span_element = $("#c0");
var content = span_element.text();
Console.log simply logs whatever string you send it as a parameter. So what you are seeing is the expected behavior.
Assuming you are using jQuery, and the ajax returned value is being displayed in the span (id = "c0"), this console.log statement should work:
console.log($("#c0").text());
$("#c0") returns the jQuery object using the id selector (#).

Prevent "jQuery( html )" from triggering the browser to request images and other referenced content

Using jQuery to create new DOM elements from text.
Example:
jQuery('<div><img src="/some_image.gif"></img></div>');
When this statement is executed, it causes the browser to request the file 'some_img.gif' from the server.
Is there a way to execute this statement so that the resulting jQuery object can be used from DOM traversal, but not actually cause the browser to hit the server with requests for images and other referenced content?
Example:
var jquery_elememnts = jQuery('<div><img class="a_class" src="/some_image.gif"></img></div>');
var img_class = jquery_elememnts.find('img').attr('class');
The only idea I have now is to use regex to remove all of the 'src' tags from image elements and other things that will trigger the browser requests before using jQuery to evaluate the HTML.
How can jQuery be used to evaluate HTML without triggering the browser to make requests to the server for referenced content inside the evaluated HTML?
Thanks!
if you do the regexp way, maybe a simple one like
htmlString.replace(/[ ]src=/," data-src=");
will do the job ?
so instead of looking for :
jquery_elememnts.find('img').attr('src');
you will have to look for :
jquery_elememnts.find('img').data('src');
That's not possible afaik. When the browser loads an HTML fragment, such as one containing an img, which references another resource via src, it will try to fetch it.
However, if you only need to get the class attribute from the img, you can use $.parseXML() to obtain an XMLDocument, and then process it to get the required attribute. This way, the HTML fragment will never be loaded, and thus the image will not be fetched:
var jquery_elememnts = $.parseXML('<div><img class="a_class" src="http://4.bp.blogspot.com/-B6PMBqTyqpk/UC7syX2eRLI/AAAAAAAABL0/SEoLWoxgApo/s1600/google10.png"></img></div>');
var img = jquery_elememnts.getElementsByTagName("img")[0];
var img_class = img.getAttribute("class");
DEMO.
You can use parseXML in jQuery.
var elements = jQuery.parseXML('<div><img class="a_class" src="/some_image.gif"></img></div>');
var img_class = $(elements).find('img').attr('class');
alert(img_class);
The string should be a perfect XML. This is a workaround I used for a similar purpose, but don't know whether this will solve your issue.
var jquery_elememnts = (new DOMParser()).parseFromString('<div><img class="a_class" src="/some_image.gif"></img></div>', 'text/html');
var img_class = jQuery(jquery_elememnts).find('img').attr('class');

obtain a js variable from an ajaxed page

My question is this, if I have a page say index.HTML that has some script in, something simple like...
<script type="text/JavaScript">
$(document).ready(function() {
Var buttonBox = {};
})
</script>
Obviously there would need to be more, I'm trying to make this simple.
Then I use ajax to retrieve some data from the db and fill in the contents of a div, but in my return page I have another script tag, something like...
<script type="text/JavaScript">
$(function() {
buttonBox.start = "some variable or string";
})
</script>
Along with the HTML content. Why is buttonBox.start not available in the main index.HTML page? Is there a way to make it available? Is formatting the output of my server page as a huge json object then parsing through it to set every needed variable along with the HTML content the best/only way to achieve this?
Thank you for the help, if you need more info I'll be happy to provide it, I was just minifying this for sake of ease.
you could add the buttonBox to the window and make it global:
$(document).ready(function() {
window.buttonBox = {};
});
$(function() {
window.buttonBox.start = "some variable or string";
});
for each function in each tag, if the function is not global, it can not be reused. to make a function become global, you should use window. Also, you can put this function into an external file and load with

How do I define a javascript variable as a div's id?

I am trying to define a var equal to the id of a div in the body. My non-functional idea was this:
var userid = $('.all').attr('id');
Since I need the variable to be defined as the id as soon as the page loads, I am not using an event and cannot use a technique like:
$('.all').click(){
var alldivIDvalue = $(this).attr('id');
}
Not sure if it makes a difference, but the id will equal a php output of sessions profile/username.
Propably you should declare somewhere in the top of your page (even in head) var userid and then after document.load append value to this variable.
var userid = []; //In html head
Then inside your jquery load:
$(document).ready(function () {
userid = $('.all').attr('id');
});
Place where you put load doesnt matter and doesnt affect on other html bacause this event is triggered when html document is loaded.
Edit
Thanks for comment.
If the id is known to PHP at the time the page's HTML is built, then you can write it directly into javascript like this:
<script>
var userid = '<?php echo $userID; ?>';
</script>
When available, this approach is more straightforward than writing a value into the HTML server-side (and thence the DOM) then reading it into javascript client-side.
Of course, there's nothing to stop you writing the same value into the HTML/DOM for some other purpose.

Categories