Jump to content
Sign in to follow this  
FooKelvin

Ajax Call JSON - qtip2

Recommended Posts

Wondering Am I doing the correct thing. Im using qtip2 plug in to show something from another page content.

 

I have 2 pages of php.

 

aa.php

<html>
<head>
<title>My site</title>

<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.css" />
</head>
<body>

<!-- jQuery FIRST i.e. before qTip (and all other scripts too usually) -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<!-- Include either the minifed or production version, NOT both!! -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.js"></script>

<!-- Optional: imagesLoaded script to better support images inside your tooltips -->
<script type="text/javascript" src="/path/to/jquery.imagesloaded.pkg.min.js"></script>


<a href="#">Test</a>

<script type="text/javascript">
$('a').qtip({
content: {
        text: function(event, api) {
            $.ajax({
                url: 'aaCal.php', // URL to the JSON file
                dataType: 'json', // Tell it we're retrieving JSON
            })
            .then(function(data) {
                /* Process the retrieved JSON object
                 *    Retrieve a specific attribute from our parsed
                 *    JSON string and set the tooltip content.
                 */
                var content = 'My name is ' + data.person.firstName;

                // Now we set the content manually (required!)
                api.set('content.text', content);
            }, function(xhr, status, error) {
                // Upon failure... set the tooltip content to the status and error value
                api.set('content.text', status + ': ' + error);
            });

            return 'Loading...', // Set some initial loading text
        }
    }
});

Another page aaCal.php

$arr = array('person' =>array('firstname' => "Foo"));
echo json_encode($arr);

The output of aaCal.php is

 

{"person":{"firstname":"Foo"}}.

 

reference plug in guide:

http://qtip2.com/guides

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.