CODEWITHSUNDEEP
javascriptjquery
Abhishek Suthar
Abhishek Suthar

Reputation: 674

Load another page in jquery tooltip

My html code is:

<div class="ui-widget photo">
    <div class="ui-widget-header ui-corner-all">
         <h2>St. Stephen's Cathedral</h2>

         <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo="data-geo">Vienna, Austria</a></h3>

    </div>
    <div id="result"></div>
</div>

My Javascript code is:

$(function () {
    $(document).tooltip({
        items: "[href]",
        content: function () {
            var element = $(this);
            if (element) {
                var text = element.text();
                var link = element.attr('href');
                // alert(link);
                return "<img class='map' alt='" + text +
                    "' src='http://maps.google.com/maps/api/staticmap?" +
                    "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
                    "Vienna, Austria" + "'>";

            }

        }
    });
});

This thing is given here :

jQuery tooltip

But Now I want to load another page from another url say : www.google.com in this tooltip.

what I am doing is:

I am putting .load() function in this content section so that I can get response html and return it into the tooltip

Here is my code but its not working I am getting nothing in response ...

$(function () {
    $(document).tooltip({
        items: "[href]",
        content: function () {
            $('#result').load('http://stackoverflow.com/', function (response, status, xhr){
                var responseText = response;

            });
            var element = $(this);
            if (element) {
                var text = element.text();
                var link = element.attr('href');
                // alert(link);
                return responseText;

            }

        }
    });
});

Upvotes: 0

Views: 3512

Answers (2)

Pankucins
Pankucins

Reputation: 1720

$.load('http://stackoverflow.com');

Won't return anything because you're trying to load another web site. That's against how AJAX works.

From jQuery docs:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted.

It allows the user to load a file on the same domain, not external ones, for security reasons.
If you observe this fiddle with firebug opened you can see that the call will return header 200 OK but will not load anything due to these restrictions.

To achieve what you want you could make a local file that fetches the desired page, then make an ajax call to it, instead of a directly calling the web site.

A simple example of using local php file to get the page. Create a local file, I'll call it foo.php

<?php
   echo file_get_contents($_GET['url']); 
   // this will echo contents of given url
?>

Mind, this is only an example code and is not for serious use

Then call it like this

$("#container").load("foo.php?url=google.com");

Upvotes: 1

Gautam Chadha
Gautam Chadha

Reputation: 306

This is because you are trying to make a CORS (Cross Origin Resource Sharing) request. And because of security concerns such requests are not entertained by browsers and servers unless the server returns Access-Control-Allow-Origin header with the requesting domain acceptable to it.

To know when does CORS come into play read this: http://en.wikipedia.org/wiki/Same_origin_policy#Origin_determination_rules

To know more about CORS read the following article http://www.html5rocks.com/en/tutorials/cors/.

To test if the server supports CORS you can use the following website: http://client.cors-api.appspot.com/client

An alternative would be to make a PHP proxy on your server and then make a CORS request through that proxy.

Here is a tutorial for creating your own PHP proxy http://jquery-howto.blogspot.in/2009/04/cross-domain-ajax-querying-with-jquery.html

Upvotes: 0

Related Questions