Display JS charts in Div using jQuery.AJAX

Question

Hi I am trying to display javascript charts in DIV tag. I want to call a url using jQuery.ajax. Following is my code.

<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./jquery-ui.css" />
<script src="./jquery-1.9.1.js"></script>
<script src="./jquery-ui.js"></script>
<script>
$(function() {
    $( "#btnRun" ).click(function() {
        $.ajax({
            type: "GET",
            url: "http://code.shutterstock.com/rickshaw/guide/start.html",
            success: function(response) {
                $('#divResult').html(response); // Assign the values to the DIV
            }
        });
    });
});
</script>
</head>
<body>
<input type="button" value="Run" id="btnRun" /> </br>
<div id="divResult"></div>
</body>
</html>

I am able to call url. But not able to display content existing in that url. Can anyone help me to solve this problem.

Are you trying to get exactly this url (http://code.shutterstock.com/rickshaw/guide/start.html)? — secelite, Sep 27 '13 at 11:40
Isn't it cross domain ajax request? Do you understand what response should be comming from that url? — Jai, Sep 27 '13 at 11:40
possible duplicate of [JQuery ajax cross domain](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain) — Jai, Sep 27 '13 at 11:42
@selite Yes. I am trying to call this page exactly. Actually I suppose to load JS graphs which looks similar to it. For that reason I have selected this url. When I call tabular format report, I am able to display in DIV tag. If I call JS reports, it is not working. — Deva, Sep 27 '13 at 12:35
@Deva please refer to the comment of Jai about cross domain ajax request — secelite, Sep 27 '13 at 12:40
@selite I understood it. But when I try to call local webserver links, I am not able to get graph. I am sure that I didn't call any cross domain. calling page and called page both resides in same webserver and in same location. — Deva, Sep 27 '13 at 12:45
@Deva do you get any error/notice in your browser console. Have you tried logging the answer of the request by `console.log(response)`? — secelite, Sep 27 '13 at 12:50

score 0 · Answer 1 · answered Sep 27 '13 at 11:52

0

I think you have a couple of problems here:

You're probably not allowed to do this because of Access-Control-Allow-Origin.
You can't load more JavaScript into a page asynchronous trough another HTML-file.

answered Sep 27 '13 at 11:52

olahell

1,931
3
19
35

score 0 · Accepted Answer · answered Sep 30 '13 at 07:42

0

I got solution for my problem. I added OBJECT tag in DIV. Here is code.

$( "#btnRun" ).click(function() {
        $('#divResult').html('<object data="http://code.shutterstock.com/rickshaw/guide/start.html" />');
    });

Thanks for All.

answered Sep 30 '13 at 07:42

Deva

1
2

Display JS charts in Div using jQuery.AJAX

2 Answers2