Using jQuery to load html into page

Question

I have a page where I need to have different html loaded into a div on the click of a folder. This kind of works because on click...the div will say hello. I tried to replace "hello" with the html and using ' instead of " but it doesn't work. I have also tried to use .load and .get commands to read from external files. Here are the key parts and my .get and .load command that won't work no matter what I do.

Is their another way to do this? Or is there a way I can use what I have.

jQuery:

$("#one").click(function() {
        $("#read").html("hello");
});

HTML:

  <div id="read">

  </div>

Failed .get:

$("#one").click(function() {
  $.get('readfrom/one.txt')
  .success(function(data) {
     $('#read').html(data);
 });
});

Failed .load:

$("#one").click(function() {
   $('#read').load('readfrom/one.txt');
});

Just save one.txt as an html file (one.html)...that'll fix it...unless for some reason you need a txt file??? cant see why you would though? — Kylie
– Kylie, Commented Aug 11, 2013 at 23:28
I actually just did try that :/ it still didn't work. I even separated my codes from everything else and tried them and they still didn't work. — Not a discord mod
– Not a discord mod, Commented Aug 11, 2013 at 23:31
Is this site running on a webserver or on local filesystem?(as it is both attempts should work and work for me, but depending on the browser, e.g. on Chrome, AJAX is not possible on local filesystem) — Dr.Molle
– Dr.Molle, Commented Aug 11, 2013 at 23:38
this is on a local file system at the moment. If i moved this to my web server would it work then? — Not a discord mod
– Not a discord mod, Commented Aug 11, 2013 at 23:39
It should, but it should for example with firefox also work on local filesystem — Dr.Molle
– Dr.Molle, Commented Aug 11, 2013 at 23:43

Momo1987 · Accepted Answer · 2013-08-11 23:30:37Z

2

you need to do like this:

$(document).ready(function() {
    $("#one").click(function() {
        $.ajax({
            url : "readfrom/one.txt",
            dataType: "text",
            success : function (data) {
                $("#read").html(data);
            }
        });
    });
});

answered Aug 11, 2013 at 23:30

Momo1987

5446 silver badges16 bronze badges

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

2 Comments

Momo1987 Over a year ago

For me it works without any error, check your path or if there is some error

Not a discord mod Over a year ago

When I put this on my web server like Dr.Molle suggested it worked. Thank you so much!

Matt Rowles · Accepted Answer · 2013-08-11 23:58:22Z

How is this?

$(window).load(function(){

  $("#one").click(function() {

    /* Create ajax object for txt parsing */
    $.ajax({
      type: "GET",
      contentType: "text/plain; charset=utf-8",
      url: "readfrom/one.txt",
      success: readData,
      error: err
    });

    /* Successful load of file, perform this function */
    function readData(txt) {
      var fileData = $(txt);
      console.log ("data check: " + fileData);
      $('#read').append(fileData);
    }

    /* Unsuccessful load of file, log errors */
    function err(request, status, error) {
      console.log("Request: " + request);
      console.log("Status: " + status);
      console.log("Error: " + error);
    }

  }

}

The main reason I split the success/error functions from being within the .ajax call is because I find it gets messy if they become large, but if you are keeping it short and sweet, feel free to add them to it:

$.ajax({
  ...
  success: function(data){
    console.log("data: " + data);
  },
  error: function(request, status, error){
    console.log("Request: " + request);
    console.log("Status: " + status);
    console.log("Error: " + error);
  }
});

Collectives™ on Stack Overflow

Using jQuery to load html into page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related