Get then writeln

Question

[attempt 1]

<script>
var example = $.get("example.html");
document.writeln(example);
</script>

I'm looking to embed the source file as raw text (not markup). This does not even come close to working.

Thanks for everyone's help and input so far!

[attempt 2/3] @JasonP

...
<script>
$(document).ready(function () {
    $.get("example.html").done(function (result) {
        $('#SomeElement').text(result);
    });
});
</script>
...
<a id="SomeElement" />
...

As of attempt 3 I'm still not getting anything from this, though. However, I understand the 'ready.'

I updated my answer. People who post answers aren't automatically notified when you edit your question, so be sure to comment on their answer or direct a comment to them like this: "@JasonP Hey look at me!" — Jason P, Jul 22 '13 at 22:22

Jason P · Accepted Answer · 2013-07-22T22:20:50.457

3

You said you wanted raw text instead of markup. I assume you mean that you want "<span>text</span>" to display on the page as "<span>text</span>" and not as a span containing the text "text". If that's true, this should write the result as text and not html:

$.get("example.html").done(function(result) {
    $('#SomeElement').text(result);
});

Your example isn't working because $.get is asynchronous. The ajax request is sent off, then execution continues on and the document.writeln() line runs, but prints nothing since we don't yet have the result of the ajax call. My example uses the done() function which is executed after the ajax function returns a result.

Edit based on your question edit:

Two things.

First, the # selector is for element ids:

<a id="SomeElement" />

Second, make sure you wrap your code in a ready handler so you can be sure the element exists when you try to access it:

$(document).ready(function() {
    $.get("example.html").done(function(result) {
        $('#SomeElement').text(result);
    });    
});

edited Jul 22 '13 at 22:20

answered Jul 22 '13 at 20:58

Jason P

26,984
3
31
45

Phil is also not using a result handler. In this case, $.get is asynchronous call. He simply prints out whatever is returned from the method without waiting for the data to come back – mara-mfa Jul 22 '13 at 21:12
@user2409138 Added an explanation. – Jason P Jul 22 '13 at 21:16
@JasonP Thanks a ton for sticking with me until getRdun, not sure where I'm off at the moment. – Phil Andy Jul 22 '13 at 22:30
@PhilAndy At this point, your code looks fine, so it's time to debug. While viewing your site, hit F12 in your browser to bring up the dev tools, then refresh the page. Look for any errors on the Console tab/section, and look for any errors on the Network tab/section. If there are no errors, look for the ajax request on the Network tab and make sure the response is what you expect to see. – Jason P Jul 23 '13 at 01:05
@JasonP Uncaught ReferenceError: $ is not defined – Phil Andy Jul 23 '13 at 01:41
@JasonP after a bit of fiddling, Origin null is not allowed by Access-Control-Allow-Origin. – Phil Andy Jul 23 '13 at 01:48
This is a Chrome strictness issue. Since it's trying but fails, I feel your answer works. http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin – Phil Andy Jul 23 '13 at 01:53

Fabrício Matté · Answer 2 · 2013-07-22T21:15:32.117

$.get is asynchronous. That is, you can't synchronously write the result of an Ajax call (unless using non-async ajax but that's ugly and often freezes the browser UI). Also, $.get returns a jqXHR object which is compatible with the $.Deferred interface. You should pass a success callback to $.get or attach a Deferred.done handler.

<div id="dynamicContent"></div>
<script>
//passing a callback function to $.get:
$.get("example.html", function(data) {
    $('#dynamicContent').text(data);
});
</script>

An alternative way, attaching a done callback to the deferred instance:

$.get("example.html").done(function(data) {
    $('#dynamicContent').text(data);
});

And you will need to use .text() to set the received response as the text content of the #dynamicContent element. .text() will append the response as a text node, hence it is not interpreted as HTML.

Ehh I should've paid more attention to the question, thanks @Connor — Fabrício Matté, Jul 22 '13 at 21:08

Toiletduck · Answer 3 · 2013-07-22T22:07:31.220

1

Try:

$("body").text(example)

writeIn() is not the best way to do this.

edited Jul 22 '13 at 22:07

answered Jul 22 '13 at 20:56

Toiletduck

171
1
13

And this will also be rendered as HTML, not raw text. – Fabrício Matté Jul 22 '13 at 21:08
Yeah, just a small problem left that `.get()` does not return a response synchronously, but rather a jqHXR object (you can check my answer for details). `:P` – Fabrício Matté Jul 22 '13 at 22:11
1

Ya, I saw your answer and +1'd it. If I had to add it in mine I would just be riding your wave, so I left it. Good answer :) – Toiletduck Jul 22 '13 at 22:25

Carlos Duque Yemail · Answer 4 · 2013-07-23T04:47:07.880

0

You could try to append it to the children of your html file, like this

$.get("example.html", function(data){
$('body').text(data);
});

It would be add on your body. (I edited thanks to the help of Connor and Kevin B). Although, there is a good answer from Jason P.

edited Jul 23 '13 at 04:47

answered Jul 22 '13 at 20:59

Carlos Duque Yemail

196
2
7

`this` in that context is not a DOM Node, it's the options generated by the ajax request. – Kevin B Jul 22 '13 at 21:07
Maye you should just change this to `$('body').text(data);` then it would be correct and you may get some votes – iConnor Jul 22 '13 at 21:08
@carlos I have multiple div's on my body. How would you focus that output? – Phil Andy Jul 22 '13 at 23:04
I'm sorry my answer was edited. To focus on a div, you will have to use what Jason P said. with the id of the div, you have to call it with $('#id').text(data); I saw that you are having an error on uncaught reference. I dond't really know what could that be. – Carlos Duque Yemail Jul 23 '13 at 04:50

Get then writeln

4 Answers4