How do I load the ajax data into a div with jquery?

Question

I'm trying to do is load an external html page then display the contents within a div when a button is clicked.

I get the alert message displaying the contents of the test.html, however when I try to display it within a div nothing happens.

The contents is just a div tag. I don't want to load the div tag just the text itself which does come up in the alert message.

Within a html file, I know I don't really need to use ajax for something so simple however if I can get this to work it will help me with future problems.

      $.ajax({
      type: "GET",
      url: "test.html",
      dataType: "text",
      success : function(data) {
                    step1j = data;
            alert(step1j); // WORKS
            return step1j;
                }
    });


$("#step1").click(function() {
    $("#texter").html(step1j);
});

You cannot return from an ajax call. you can do the call on click, and assign the html on success. — karthikr, Sep 05 '14 at 00:22

score 4 · Accepted Answer · edited May 23 '17 at 12:23

4

Ajax calls are asynchronous by default so what you have won't work. What I would suggest is using jQuery's .load() which handles the entire loading into a div for you (jQuery reference info here).

$("#step1").click(function() {
    $("#texter").load("test.html");
});

For this to work, the following must be true:

#step1 must exist already at the time you run this initial code (e.g. the DOM must already be loaded to install the .click() handler. For example, you can't install a click handler from code in the <head> tag because the page DOM has not yet loaded.
#texter must exist at the time of the click. Please make sure there is no misspelling there.
The URL you are loading must be of the same origin (e.g. same domain) as the web page where you are running the javascript. This is because of the brower's "same origin" security restrictions.

Read this answer if you want to learn more about why you can't return data from an asynchronous Ajax call like you were trying to do. Asynchronous calls finish some indeterminate time later and thus the only reliable place to use their results is in the completion callback or in a function that you call from within the completion callback. In this case, .load() is a higher level piece of jQuery functionality that makes this easier.

edited May 23 '17 at 12:23

Community

1
1

answered Sep 05 '14 at 00:22

jfriend00

683,504
96
985
979

Thanks, I tried .load but it still didnt update the data within the div. Do I need to declare a variable with that holds the contents of test.html then display it? – Codegenesis G Sep 05 '14 at 00:30
@CodegenesisG - if your URL is the same origin as your page (e.g. same domain, port and protocol), then `.load()` just as I've shown it works perfectly fine all by itself. If your URL is not the same origin, then you can't fetch that content with ajax at all because of the brower's "same origin" security restrictions. If you are loading from the same origin and it still isn't working, then something else you haven't disclosed is wrong because this type of code works just fine. – jfriend00 Sep 05 '14 at 00:31
Do i still need the ajax chunk of code for this to work? – Codegenesis G Sep 05 '14 at 00:37
@CodegenesisG - Please read the [jQuery doc page](http://api.jquery.com/load/) I linked above and here again. It is all spelled out there. As I say in my answer `.load()` will do it all for you with no other ajax call. Is your div `#texter` or `#tester` as that typo could cause it to fail? – jfriend00 Sep 05 '14 at 00:49
Thanks im checking them now. I think the problem might be with the actual test.html file – Codegenesis G Sep 05 '14 at 01:05
I didn't realise it loaded the contents of the htmls div not just all of what was within the html file which was why the div was displaying nothing. Really thankful for all your help man its really really appreciated!!!! THANK YOU SO MUCH! – Codegenesis G Sep 05 '14 at 01:13

score 1 · Answer 2 · answered Sep 05 '14 at 00:23

1

Try this:

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

    $.ajax({
      type: "GET",
      url: "test.html",
      dataType: "text",
      success : function(data) {
            $("#texter").html(data);
            //step1j = data;
            //alert(step1j); // WORKS
            //return step1j;
      }
});
});

answered Sep 05 '14 at 00:23

artm

8,554
3
26
43

Thanks I tried this and I did'nt recieve any errors in console however the data was still not updated to the div. ill keep trying. Thanks again – Codegenesis G Sep 05 '14 at 00:30
Put back alert(data); in success: , does it load the html from test.html when you click #step1? – artm Sep 05 '14 at 00:33
Yeah when i click the button the alert(data); works, but the div contents dont update. The name of #tester is correct as well as the id. – Codegenesis G Sep 05 '14 at 00:40
Is it #tester or #texter? – artm Sep 05 '14 at 00:40
texter sorry that was a typo – Codegenesis G Sep 05 '14 at 00:43
Sure the #texter is correct? add alert($("#texter").html()) in success: what do you get? – artm Sep 05 '14 at 00:45
Sorry the server has gone down... I'll have to try it once the ftp can connect again. I did try that before and I got something like [object, Object] in the alert box. – Codegenesis G Sep 05 '14 at 00:51
I tried alert ($("#texter").html()) The alert box appears with nothing in it – Codegenesis G Sep 05 '14 at 00:57
I resolved it with .load jquery function instead. Thanks alot for all your help though I really appreaciate it! – Codegenesis G Sep 05 '14 at 01:14
This works when you are loading data from the controller's method. I was loading a partial view on click of a button and wanted it to load in div, and it worked. – anu Mar 24 '17 at 20:02

How do I load the ajax data into a div with jquery?

2 Answers2

Linked