0

I want to build a url, send the url and display the returned html page in a div or any block element on the same page. Ultimately, what I want to do is send a request as soon as the user enters a name, create a div to display the response, fill the div with the response, hide the div then display a button or tab for the user to click to see the returned document. But for now I'm just trying to figure out how to get the response into a div on the same page.

This seems like a fundamental HTML activity but I can't figure out how to direct the returned page to a div instead of having it replace the original page. I would prefer to do this with plain HTML5 and javascript, not JQuery, but if JQuery is the only way I'll tackle that learning curve.

<html>
<body onload="buildPage()">
    <div id="documents"></div>
</body>

<script>
    function buildPage() {
        var name="somename" ;  // this will eventually come from user input and be passed in
        var documentName = name + ".html";
        var url ="http://localhost:8080/docserver/getpage?name=" + documentName;

        // create a div to display the requested document
        var newDiv = document.createElement("div");
        newDiv.id = documentName;
        newDiv.style.visibility = "hidden";

        // ... probably need to do something here to direct the url response into the new div

        // nest the newDiv in the existing div
        document.getElementById("documents").appendChild(newDiv) ;

        //TBD create a button to display the returned document
    }
</script>

</html>
Improve this question
4
  • You most probably want to look at using jQuery to make an AJAX call, then grabbing the HTML from the .success callback and again using jQuery to dump that into a div. Sounds harder than it actually is. Some gentle Googling around should yield decent results. Commented Apr 1, 2015 at 19:05
  • 2
    possible duplicate of How to load external page using ajax Commented Apr 1, 2015 at 19:06
  • Thanks jonny, I've just spent five hours googling and got nowhere, that is why I'm here. Commented Apr 1, 2015 at 19:07
  • Key term for your googling: ajax Commented Apr 1, 2015 at 19:07

3 Answers 3

Reset to default
2

It sounds like you want to make an ajax request, which returns html, then render that html in a div?

I would also recommend using jQuery if you are not. It will make your life a lot easier.

Your file(s) will need to look something like this:

HTML

....
<div id="mydiv"></div>
....

JQUERY

$( document ).ready(function() {
    $.ajax({
        'type': 'get',
        'contentType': 'text/plain',
        'url': 'path/to/your/script/',
        'dataType': 'html',
        'timeout': 50000
    }).done(function (data) {
        // success
        $('#mydiv').html(data);
    }).fail(function (error) {
        // something went wrong
        console.log(error);
    });
});

For the sake of simplicity, Let's say your html that is returned is:

HTML

<p>Hello World!</p>

Your page (after the ajax request runs) will look like this:

HTML

....
<div id="mydiv"><p>Hello World!</p></div>
....

This should get you rolling.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This is a far better answer (almost textbook) than mine. This makes me sad :(
dragonslovetacos, thanks for the nice reply. Here is my quandry: I don't want to use JQuery. Since HTML is all about sending requests and displaying the resulting page I assumed there was a dead simply way of doing what I want. Are you saying that AJAX is the only solution?
No, jQuery provides helper wrappers around JavaScript functionality. You can do it yourself in pure JavaScript using "xmlhttprequest" w3schools.com/xml/xml_http.asp
@jonnyknowsbest is correct, you don't need to use jQuery, you don't need to drive a car to get where you are going either. It's just a lot easier than walking sometimes. For example, look at my script above - it's just an ajax call. Compare that to all of the javascript you had to write below. It just makes things "easier". :)
Just as a closing note, I would suggest you accept this answer by dragonslovetacos as, in my opinion, it is a really clear and concise example of what you were initially asking.
0

To expand on my comment, this code will pretty much do it for you

$.ajax({
  url: "mypage.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

With really good supporting documentation found here http://api.jquery.com/jquery.ajax/

Improve this answer

2 Comments

I am really confused. A few days ago I fooled around with the JQuery Tabs widget. If you pass a URL when creating a tab, the content is automatically loaded when the tab is clicked. Is JQuery using AJAX under the hood to do this? I really did not understand the Tabs examples but it appeared that an iframe was involved. I gave up on JQuery because I got a 1.9 solution mostly working then found that tabs.add() and tabs.remove() are deprecated. So I went back to a 'pure' html/js solution.
So you want tabs content to be loaded / refreshed from a server when that tab is clicked, and be able to create / remove tabs dynamically? Under the hood jQuery wraps the xmlhttprequest object to make it more user friendly
0

Thanks to all that answered my query. Especially jonny who did some impressive hand holding. I really don't understand JQuery so I wanted a pure html/js solution. Here is what I ended up doing.

function buildPage() {
    var name="somename" ;  // this will eventually come from user input and be passed in
    var documentName = name + ".html";
    var url="http://localhost:8080/FDS/documents?filename=" + documentName ;

    // create a div to display the requested document
    var newDiv = document.createElement("div");
    newDiv.id = documentName;
    //newDiv.style.visibility = "hidden";

    // create an iframe to place in the div
    var newIframe = document.createElement("iframe") ;
    newIframe.src = url ;

    // nest the iframe in the div just created
    newDiv.appendChild(newIframe) ;

    // nest the newDiv in the existing div
    document.getElementById("documents").appendChild(newDiv) ;

The missing component was an iframe. I thought I saw JQuery using iframes in the tabs widget but I did not pursue that avenue until it looked like I was going to get only JQuery based replies.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.