Trying to Load HTML Source Code using JQuery

Question

I am trying to load some HTML source code I have in a text file into jquery. When I click the link to add the text nothing loads into the page. Any suggestions?

Load Script:

<div data-role="collapsible" data-collapsed="true">
    <h3>Accordion Concept</h3>
    <p>The accordion concept splits the page into catagories to save space. Each catagory contains information but this information is collapsed in order to make it so you only see the information you want to see on the page.</p>
    <div id = "loadEx">Click Here to Load Example Script File</div>
    <script>
        $( "#loadEx" ).click(function() {
            $('#hello').load('mywebpage.txt');
        });
    </script>
    <pre id = "hello"></pre>
</div>

Text File:

<body class="container">
    <div data-role="page">
        <div data-role="header">
            <h1> Page  One Title </h1>
        </div>
        <div data-role="content">
            <div data-role="collapsible-set" >
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number one </h3>
                    <p> information for header number one is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number two </h3>
                    <p> information for header number two is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number three </h3>
                    <p> information for header number three is here. </p>
                </div>
            </div>
            <div data-role="footer">
                Copyright
            </div>   
        </div>

</body>

What does the JavaScript error console say? What happens if you add console.log statements to the function? does the function run at all? What happens in the Net tab of the browser's developer tools? Is the HTTP request made? Is the response what you expect? — Quentin
– Quentin, Commented Apr 15, 2014 at 14:48
No error. It works if I write something like "hi". Just with the HTML it pretty much adds a blank div. — Nick
– Nick, Commented Apr 15, 2014 at 14:50
What happens if you examine the <pre> element with the DOM inspector? Do you see the HTML there? What styles are applied to it? — Quentin
– Quentin, Commented Apr 15, 2014 at 14:51
The physical HTML is added into the page when I look at the DOM inspector. — Nick
– Nick, Commented Apr 15, 2014 at 14:55
So it is being added to the page then. Now you just need to fix your CSS so it shows up. — Quentin
– Quentin, Commented Apr 15, 2014 at 14:55

Quentin · Accepted Answer · 2014-04-15 15:01:10Z

2

The real question emerged through the comments:

what would I change in the CSS that would make it so it appears as text rather than HTML?

You wouldn't use CSS for that. You need to not use the load method (which is designed to handle HTML, not text).

Use a less short-handy Ajax function, and manually put the data into the element as text.

        $( "#loadEx" ).click(function() {
            $.get('mywebpage.txt', function (data) {
                $('#hello').text(data);
            });
        });

answered Apr 15, 2014 at 15:01

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Gajender Singh · Accepted Answer · 2017-11-06 07:09:45Z

0

first load the dom then use $.get function.

$(document).ready(function(){
   $( "#loadEx" ).click(function() {

  $('#hello').html("hey there, I am calling get request");
  $.get('mywebpage.txt',function(data,status){
    if(status == "error"){
        alert("File not found "+status);
    }

    $('#hello').html(data);

  });

 });

answered Nov 6, 2017 at 7:09

Gajender Singh

1,31314 silver badges13 bronze badges

Collectives™ on Stack Overflow

Trying to Load HTML Source Code using JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related