Problem With qTip2

I think I’m probably doing this wrong:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head><body><pre><pre class="xdebug-var-dump" dir="ltr"><b>object</b>(<i>database</i>)[<i>2</i>]
</pre></pre>


    <title>Universal Empires</title>
    <link rel="stylesheet" href="Universal%20Empires_files/default.css">

    
    



<div id="content">

    <div id="header">
        <div id="status_bar">
        </div>    
        <br>
        <a href="http://localhost/universal_empires/index">Home</a>
        <a href="http://localhost/universal_empires/game">Game</a>
        <a href="http://localhost/universal_empires/forum">Forum</a>
        <a href="http://localhost/universal_empires/blog">Blog</a>
        <a href="http://localhost/universal_empires/wiki">Wiki</a>
                    <a href="http://localhost/universal_empires/bugs">Bugs</a>
            <a href="http://localhost/universal_empires/support">Support</a>
            <a href="http://localhost/universal_empires/Chat">Chat</a>
            <a href="http://localhost/universal_empires/admin">Admin</a>
            <a href="http://localhost/universal_empires/login/logout">Logout</a>    
        SpacePhoenix    </div>
    <div id="page_contnet">
    <div id="crumb_trail">

    </div>    
                <div id="nav_tabs">
</div>

<h1>Inbox</h1>


<p>This is your Inbox</p>

<form method="post" action="/universal_empires/create/create_items/{$_GET[" continent']}'="">
    <fieldset>
        <legend>Inbox</legend>
        <table>
            <tbody><tr>
                <th>Select</th>
                <th>Subject</th>
                <th>Starter</th>
                <th>Started</th>
                <th>Last Poster</th>
                <th>Last Post Date</th>
                <th>Posts</th>
            </tr>
            

            <tr>
                <td><input name="selected_pms[]" value="1" type="checkbox"></td>
                <td> <a href="http://localhost/universal_empires/message/view/1">Test Message 1</a></td>
                <td><a href="http://localhost/universal_empires/ajax.php?username=SpacePhoenix" class="ajax_link">SpacePhoenix</a></td>
                <td>2014-06-25 20:40:52</td>
                <td>Toaster</td>
                <td>2015-02-14 04:04:20</td>
                <td>7</td>
            
            </tr>
        
        
            <tr>
                <td><input name="selected_pms[]" value="2" type="checkbox"></td>
                <td> <a href="http://localhost/universal_empires/message/view/2">Test Message 2</a></td>
                <td><a href="http://localhost/universal_empires/ajax.php?username=SpacePhoenix" class="ajax_link">SpacePhoenix</a></td>
                <td>2014-06-26 07:26:53</td>
                <td>SpacePhoenix</td>
                <td>2014-06-26 07:26:53</td>
                <td>1</td>
            
            </tr>
        
        
            <tr>
                <td><input name="selected_pms[]" value="3" type="checkbox"></td>
                <td> <a href="http://localhost/universal_empires/message/view/3">Test Message 3</a></td>
                <td><a href="http://localhost/universal_empires/ajax.php?username=SpacePhoenix" class="ajax_link">SpacePhoenix</a></td>
                <td>2014-06-30 09:14:41</td>
                <td>SpacePhoenix</td>
                <td>2014-06-30 09:14:41</td>
                <td>1</td>
            
            </tr>
        
                </tbody></table>
        <select>
            <option selected="selected" value="delete">Delete</option>
            <option value="move">Move</option>
            <option value="export">Export</option>
        </select> 
        <input value="Select Messages" class="button" type="submit">
    </fieldset>
</form> </div>
<div id="footer">
    <p>The Footer</p>
    
</div>
</div><!-- end content div -->
<div id="sidebar">
    <div id="site_logo">
        <a href="http://localhost/universal_empires" class="image" title="Goto the Home Page">
            <img style="border:0;" src="Universal%20Empires_files/SpacePhoenix.png" alt="http://localhost/universal_empires" longdesc="http://localhost/spacecoreccms" height="115" width="85">
        </a>
        <p>Universal Empires</p>
    </div>
    <div id="round_info">
            
        <div id="sys_time">
            <p>
                February 14, 2015<br>05:09:16 UTC            </p>
        </div>
        <div id="round_name">
            <p>
                Bodge In Progress!
            </p>
        </div>
    </div>
    <div id="navigation">
    
        <ul id="nav">
            <li>Menu Goes Here</li>
        </ul>


    </div>

                        
</div> <!-- end sidebar div -->
    <script type="text/javascript" src="Universal%20Empires_files/tinymce.js"></script>
    
    <script type="text/javascript" src="Universal%20Empires_files/jquery.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});
</script>
<script type="text/javascript" src="Universal%20Empires_files/jquery_002.js"></script>

<script language="javascript">
// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: api.elements.target.attr('href') // Use href attribute as URL
                    })
                    .then(function(content) {
                        // Set the tooltip content upon successful retrieval
                        api.set('ajax.php', content);
                    }, function(xhr, status, error) {
                        // Upon failure... set the tooltip content to error
                        api.set('ajax.php', status + ': ' + error);
                    });
        
                    return 'Loading...'; // Set some initial text
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     });
 });
</script>        

</body></html>

When I click on a user name it’s redirecting to another page instead of displaying a tooltip. Have I messed up the script or could it be down to the .htaccess file?

It’s supposed to grab via ajax 3 items about a user which should be displayed

Are you including the qtip library?
I couldn’t see it anywhere in the code you posted (unless it’s jquery_002.js)

Both jquery and qtip library loaded (jquery first). Firefox seems to like to rename the javascript files when saving locally (doesn’t seem to like having any . in the file name). atm clicking on a user name in the “Starter” column doesn’t seem to do anything.

Firebug gives an error for the marked line:

SyntaxError: missing } after function body

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
	<title>Universal Empires</title>
	<link rel="stylesheet" href="Universal%20Empires_files/default.css">

	<script type="text/javascript" src="Universal%20Empires_files/tinymce.js"></script>
	
	<script type="text/javascript">
		tinymce.init({
		    selector: "textarea",
		    theme: "modern",
		    plugins: [
		        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
		        "searchreplace wordcount visualblocks visualchars code fullscreen",
		        "insertdatetime media nonbreaking save table contextmenu directionality",
		        "emoticons template paste textcolor colorpicker textpattern"
		    ],
		    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
		    toolbar2: "print preview media | forecolor backcolor emoticons",
		    image_advtab: true,
		    templates: [
		        {title: 'Test template 1', content: 'Test 1'},
		        {title: 'Test template 2', content: 'Test 2'}
		    ]
		});
	</script>
	<script type="text/javascript" src="Universal%20Empires_files/jquery_002.js"></script>

	<script type="text/javascript" src="Universal%20Empires_files/jquery.js"></script>
	<script type="text/javascript">
	// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: api.elements.target.attr('href') // Use href attribute as URL
                    })
                    .then(function(content) {
                        // Set the tooltip content upon successful retrieval
                        api.set('content.text', content);
                    }, function(xhr, status, error) {
                        // Upon failure... set the tooltip content to error
                        api.set('content.text', status + ': ' + error);
                    });
        
                    return 'Loading...'; // Set some initial text
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     }); // <--- This line here
	</script>


	</head>
<body>


<div id="content">

	<div id="header">
		<div id="status_bar">
		</div>	
		<br>
		<a href="http://localhost/universal_empires/index">Home</a>
		<a href="http://localhost/universal_empires/game">Game</a>
		<a href="http://localhost/universal_empires/forum">Forum</a>
		<a href="http://localhost/universal_empires/blog">Blog</a>
		<a href="http://localhost/universal_empires/wiki">Wiki</a>
					<a href="http://localhost/universal_empires/bugs">Bugs</a>
			<a href="http://localhost/universal_empires/support">Support</a>
			<a href="http://localhost/universal_empires/Chat">Chat</a>
			<a href="http://localhost/universal_empires/admin">Admin</a>
			<a href="http://localhost/universal_empires/login/logout">Logout</a>	
		SpacePhoenix	</div>
	<div id="page_contnet">
	<div id="crumb_trail">

	</div>	
				<div id="nav_tabs">
</div>

<h1>Inbox</h1>


<p>This is your Inbox</p>

<form method="post" action="/universal_empires/message">
	<fieldset>
		<legend>Inbox</legend>
		<table>
			<tbody><tr>
				<th>Select</th>
				<th>Subject</th>
				<th>Starter</th>
				<th>Started</th>
				<th>Last Poster</th>
				<th>Last Post Date</th>
				<th>Posts</th>
			</tr>
			

			<tr>
				<td><input name="selected_pms[]" value="1" type="checkbox"></td>
				<td> <a href="http://localhost/universal_empires/message/view/1">Test Message 1</a></td>
				<td>
					<a href="">SpacePhoenix</a>
				</td>
				<td>2014-06-25 20:40:52</td>
				<td>Toaster</td>
				<td>2015-02-14 04:04:20</td>
				<td>7</td>
			
			</tr>
		
		
			<tr>
				<td><input name="selected_pms[]" value="2" type="checkbox"></td>
				<td> <a href="http://localhost/universal_empires/message/view/2">Test Message 2</a></td>
				<td>
					<a href="">SpacePhoenix</a>
				</td>
				<td>2014-06-26 07:26:53</td>
				<td>SpacePhoenix</td>
				<td>2014-06-26 07:26:53</td>
				<td>1</td>
			
			</tr>
		
		
			<tr>
				<td><input name="selected_pms[]" value="3" type="checkbox"></td>
				<td> <a href="http://localhost/universal_empires/message/view/3">Test Message 3</a></td>
				<td>
					<a href="">SpacePhoenix</a>
				</td>
				<td>2014-06-30 09:14:41</td>
				<td>SpacePhoenix</td>
				<td>2014-06-30 09:14:41</td>
				<td>1</td>
			
			</tr>
		
				</tbody></table>
		<select>
			<option selected="selected" value="delete">Delete</option>
			<option value="move">Move</option>
			<option value="export">Export</option>
		</select> 
		<input value="Select Messages" class="button" type="submit">
	</fieldset>
</form> </div>
<div id="footer">
	<p>(C) SpacePhoenix Industries 2014</p>
	<p>Powered By SpaceCoreCCMS v0.01</p>
	
</div>
</div><!-- end content div -->
<div id="sidebar">
	<div id="site_logo">
		<a href="http://localhost/universal_empires" class="image" title="Goto the Home Page">
			<img style="border:0;" src="Universal%20Empires_files/SpacePhoenix.png" alt="http://localhost/universal_empires" longdesc="http://localhost/spacecoreccms" height="115" width="85">
		</a>
		<p>Universal Empires</p>
	</div>
	<div id="round_info">
			
		<div id="sys_time">
			<p>
				February 15, 2015<br>12:12:57 UTC			</p>
		</div>
		<div id="round_name">
			<p>
				Round Name
			</p>
		</div>
	</div>
	<div id="navigation">
	
		<ul id="nav">
			<li>Menu</li>
		</ul>


	</div>

					
</div> <!-- end sidebar div -->




</body></html>

Well, that’s your immediate problem - you’re missing a })
This is something that sensible indentation would uncover in seconds

$(document).ready(function(){
  $('a').each(function() {
    $(this).qtip({
      content: {
        text: function(event, api) {
          $.ajax({
            url: api.elements.target.attr('href') // Use href attribute as URL
          })
          .then(function(content) {
            // Set the tooltip content upon successful retrieval
            api.set('content.text', content);
          }, function(xhr, status, error) {
            // Upon failure... set the tooltip content to error
            api.set('content.text', status + ': ' + error);
          });
          return 'Loading...'; // Set some initial text
        }
      },
      position: {
        viewport: $(window)
      },
      style: 'qtip-wiki'
    });
  });
});

If you still can’t get this to work, make a minimal working example (i.e. just one user, no tinymce) which I can run on my PC and I will be happy to take a look.

jquery_002.js is jquery and jquery.js is qtip2 (don’t know why FF renames them). Found with some digging what I belive (hope) is what is needed to grab the data (does javascript have an equivilent of PHP’s var_dump() that could be used to see if any json has been received by javascript?). I’ve stripped out the TinyMCE (isn’t needed for that particular page anyway)

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
	<title>Universal Empires</title>
	<link rel="stylesheet" href="Universal%20Empires_files/default.css">

	<script type="text/javascript" src="Universal%20Empires_files/jquery_002.js"></script>

	<script type="text/javascript" src="Universal%20Empires_files/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('a').each(function() {
				$(this).qtip({
					content: {
						text: 'Loading...', // Loading text...
						ajax: {
							url: 'http://localhost/universal_empires/api', // URL to the JSON script
							type: 'GET', // POST or GET
							data: {id : 1}, // Data to pass along with your request
							dataType: 'json', // Tell it we're retrieving JSON
							success: 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.user[0].info;
								this.set('content.text', content);
								// Now we set the content manually (required!)
							},
							
							error: function() {
								this.set('content.text', "error");
							}
						}
					},
					position: {
						viewport: $(window)
					},
					style: 'qtip-wiki'
				});
			});
		});

	</script>


	</head>
<body>


<div id="content">

	<div id="header">
		<div id="status_bar">
		</div>	
		<br>
		<a data-hasqtip="0" href="http://localhost/universal_empires/index">Home</a>
		<a data-hasqtip="1" href="http://localhost/universal_empires/game">Game</a>
		<a data-hasqtip="2" href="http://localhost/universal_empires/forum">Forum</a>
		<a data-hasqtip="3" href="http://localhost/universal_empires/blog">Blog</a>
		<a data-hasqtip="4" href="http://localhost/universal_empires/wiki">Wiki</a>
					<a data-hasqtip="5" href="http://localhost/universal_empires/bugs">Bugs</a>
			<a data-hasqtip="6" href="http://localhost/universal_empires/support">Support</a>
			<a data-hasqtip="7" href="http://localhost/universal_empires/Chat">Chat</a>
			<a data-hasqtip="8" href="http://localhost/universal_empires/admin">Admin</a>
			<a data-hasqtip="9" href="http://localhost/universal_empires/login/logout">Logout</a>	
		SpacePhoenix	</div>
	<div id="page_contnet">
	<div id="crumb_trail">

	</div>	
				<div id="nav_tabs">
</div>

<h1>Inbox</h1>


<p>This is your Inbox</p>

<form method="post" action="/universal_empires/message">
	<fieldset>
		<legend>Inbox</legend>
		<table>
			<tbody><tr>
				<th>Select</th>
				<th>Subject</th>
				<th>Starter</th>
				<th>Started</th>
				<th>Last Poster</th>
				<th>Last Post Date</th>
				<th>Posts</th>
			</tr>
			

			<tr>
				<td><input name="selected_pms[]" value="1" type="checkbox"></td>
				<td> <a data-hasqtip="10" href="http://localhost/universal_empires/message/view/1">Test Message 1</a></td>
				<td>
					<a data-hasqtip="11" href="">SpacePhoenix</a>
				</td>
				<td>2014-06-25 20:40:52</td>
				<td>Toaster</td>
				<td>2015-02-14 04:04:20</td>
				<td>7</td>
			
			</tr>
		
				</tbody></table>
		<select>
			<option selected="selected" value="delete">Delete</option>
			<option value="move">Move</option>
			<option value="export">Export</option>
		</select> 
		<input value="Select Messages" class="button" type="submit">
	</fieldset>
</form> </div>
<div id="footer">
	<p>(C) SpacePhoenix Industries 2014</p>
	<p>Powered By SpaceCoreCCMS v0.01</p>
	
</div>
</div><!-- end content div -->
<div id="sidebar">
	<div id="site_logo">
		<a title="" oldtitle="Goto the Home Page" data-hasqtip="12" href="http://localhost/universal_empires" class="image">
			<img style="border:0;" src="Universal%20Empires_files/SpacePhoenix.png" alt="http://localhost/universal_empires" longdesc="http://localhost/spacecoreccms" height="115" width="85">
		</a>
		<p>Universal Empires</p>
	</div>
	<div id="round_info">
			
		<div id="sys_time">
			<p>
				February 15, 2015<br>13:28:12 UTC			</p>
		</div>
		<div id="round_name">
			<p>
				Round Name
			</p>
		</div>
	</div>
	<div id="navigation">
	
		<ul id="nav">
			<li>Menu</li>
		</ul>


	</div>

						
</div> <!-- end sidebar div -->




</body></html>

It doesn’t. Maybe your aforementioned .htaccess file?

Anyway, I boiled down the code you provided to produce this:

Could you now describe what should happen when you click where?

When the user’s name is clicked on (worth adding a class to the usernames for the javascript), the “tooltip” will appear displaying info about the user grabbed by JSON (what’s displayed will depend on what user groups the person viewing has), and will stay open until either a close button is clicked on or a close link is clicked on

You mean grabbed via AJAX, with the AJAX request returning JSON from which you then construct your tooltip?

Edit: Gotta nip out now, but I’ll be able to sort you out with a demo later tonight.

Here’s a demo where the tooltip opens when the link is clicked and doesn’t shut until the close button in the tooltip is clicked.

The content of the tooltip is retrieved via AJAX. All I am doing here is passing an id (stored in a data attribute on the anchor tag), as well as the anchor tag’s text to a remote PHP script.

The PHP script retrieves these values from $_POST, then returns some HTML (containing the id and name) to the JavaScript on the client. The JS then inserts the AJAX response into the body of the tooltip. In your case this step would involve a database lookup and would be more complex.

Here’s a demo of it in action

HTH.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>qTip2 demo (AJAX)</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/jquery.qtip.min.css">
    </head>
  <body>
    <a href="#" class="user" title="Spacephoenix" data-id="1">SpacePhoenix</a><br>
    <a href="#" class="user" title="Pullo" data-id="2">Pullo</a><br>
    <a href="#" class="user" title="Ralph M" data-id="3">ralphm</a>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
    <script type="text/javascript">
      $("a.user[title]").qtip({
        show: "click",
        hide: false,
        content: {
          text: function(event, api){
            $.ajax({
              url: "get_user_details.php",
              data: {
                id: $(this).data("id"),
                name: $(this).text()
              },
              type: "POST"
            })
            .done(function(html) {
              api.set("content.text", html)
            })
            .fail(function(xhr, status, error) {
              api.set("content.text", status + ": " + error)
            })
            return "Loading...";
          },
          button: "Close"
        }
      });

      $("a.user").on("click", function(e){
        e.preventDefault();
      });
    </script>
  </body>
</html>

get_user_details.php

<?php
  $id = $_POST['id'];
  $name = $_POST['name'];

  echo "<p>User id: " . $id . "<br>Name: " . $name . "</p>";
?>

Still no luck with this, I’m starting to think it’s either I’ve screwed up at the PHP end:

header('Content-type: application/json');
            $user_info = json_encode($data);
            echo $user_info;

$data is the array returned by the result set

or the htaccess is screwing it up:

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l

RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]

When the url for the ajax is selected I get:

[{"user_name":"SpacePhoenix","last_seen":"0000-00-00 00:00:00","joined":"0000-00-00 00:00:00"}]

<!DOCTYPE html>
<html><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Universal Empires</title>
	<link rel="stylesheet" href="Universal%20Empires_files/default.css">

	</head>
<body>


<div id="content">

	<div id="header">
		<div id="status_bar">
		</div>	
		<br>
		<a href="http://localhost/universal_empires/index">Home</a>
		<a href="http://localhost/universal_empires/game">Game</a>
		<a href="http://localhost/universal_empires/forum">Forum</a>
		<a href="http://localhost/universal_empires/blog">Blog</a>
		<a href="http://localhost/universal_empires/wiki">Wiki</a>
					<a href="http://localhost/universal_empires/bugs">Bugs</a>
			<a href="http://localhost/universal_empires/support">Support</a>
			<a href="http://localhost/universal_empires/Chat">Chat</a>
			<a href="http://localhost/universal_empires/admin">Admin</a>
			<a href="http://localhost/universal_empires/login/logout">Logout</a>	
		SpacePhoenix	</div>
	<div id="page_contnet">
	<div id="crumb_trail">

	</div>	
				<div id="nav_tabs">
</div>

<h1>Inbox</h1>


<p>This is your Inbox</p>

<form method="post" action="/universal_empires/message">
	<fieldset>
		<legend>Inbox</legend>
		<table>
			<tbody><tr>
				<th>Select</th>
				<th>Subject</th>
				<th>Starter</th>
				<th>Started</th>
				<th>Last Poster</th>
				<th>Last Post Date</th>
				<th>Posts</th>
			</tr>
			

			<tr>
				<td><input name="selected_pms[]" value="1" type="checkbox"></td>
				<td> <a href="http://localhost/universal_empires/message/view/1">Test Message 1</a></td>
				<td>
					<a title="" oldtitle="SpacePhoenix" data-hasqtip="0" href="" class="user" data-id="1">SpacePhoenix</a>
				</td>
				<td>2014-06-25 20:40:52</td>
				<td>Toaster</td>
				<td>2015-02-15 13:17:34</td>
				<td>9</td>
			
			</tr>
		
				</tbody></table>
		<select>
			<option selected="selected" value="delete">Delete</option>
			<option value="move">Move</option>
			<option value="export">Export</option>
		</select> 
		<input value="Select Messages" class="button" type="submit">
	</fieldset>
</form> </div>
<div id="footer">
	<p>(C) SpacePhoenix Industries 2014</p>
	<p>Powered By SpaceCoreCCMS v0.01</p>
	
</div>
</div><!-- end content div -->
<div id="sidebar">
	<div id="site_logo">
		<a href="http://localhost/universal_empires" class="image" title="Goto the Home Page">
			<img style="border:0;" src="Universal%20Empires_files/SpacePhoenix.png" alt="http://localhost/universal_empires" longdesc="http://localhost/spacecoreccms" height="115" width="85">
		</a>
		<p>Universal Empires</p>
	</div>
	<div id="round_info">
			
		<div id="sys_time">
			<p>
				February 16, 2015<br>07:58:49 UTC			</p>
		</div>
		<div id="round_name">
			<p>
				Round Name
			</p>
		</div>
	</div>
	<div id="navigation">
	
		<ul id="nav">
			<li>Menu</li>
		</ul>


	</div>

					
</div> <!-- end sidebar div -->

 
<script type="text/javascript" src="Universal%20Empires_files/jquery.js"></script>
	<script type="text/javascript" src="Universal%20Empires_files/jquery_002.js"></script>
	<script type="text/javascript">
      $("a.user[title]").qtip({
        show: "click",
        hide: false,
        content: {
          text: function(event, api){
            $.ajax({
              url: "http://localhost/universal_empires/api/get_user_info",
              data: {
                id: $(this).data("id"),
                name: $(this).text()
              },
              type: "POST"
            })
            .done(function(html) {
              api.set("content.text", html)
            })
            .fail(function(xhr, status, error) {
              api.set("content.text", status + ": " + error)
            })
            return "Loading...";
          },
          button: "Close"
        }
      });

      $("a.user").on("click", function(e){
        e.preventDefault();
      });
    </script>

</body></html>

qTip is currently expecting HTML to be returned, not JSON.
Try constructing the HTML on the server and sending that back to the browser.

Output from the “source”:

<!doctype html>

			<head>
			</head>
			<body>
				<p>Username: SpacePhoenix</br />
				Last Seen: 0000-00-00 00:00:00</br />
				Joined: 0000-00-00 00:00:00</p>
			</body>
			</html>

With firebug open (and error list cleared, hitting Ctrl-F5), firebug

SyntaxError: test for equality (==) mistyped as assignment (=)?
...;while(a[c++]=b[d++]);a.length=c-1}}}function gb(a,b,d,e){var f,h,j,k,l,o,r,s,w


jquery.js (line 2, col 6151)SyntaxError: test for equality (==) mistyped as assignment (=)?
..._.exec(a)))if(j=f[1]){if(9===k){if(h=b.getElementById(j),!h||!h.parentNode)retu


jquery.js (line 2, col 6377)SyntaxError: test for equality (==) mistyped as assignment (=)?
...hile(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function mb(a){return func


jquery.js (line 2, col 7633)SyntaxError: test for equality (==) mistyped as assignment (=)?
...===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=


jquery.js (line 2, col 9510)SyntaxError: test for equality (==) mistyped as assignment (=)?
...while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)ret


jquery.js (line 2, col 11072)SyntaxError: test for equality (==) mistyped as assignment (=)?
...while(c=c.parentNode)h.unshift(c);c=b;while(c=c.parentNode)i.unshift(c);while(h


jquery.js (line 2, col 11648)SyntaxError: test for equality (==) mistyped as assignment (=)?
...while(c=c.parentNode)i.unshift(c);while(h[d]===i[d])d++;return d?lb(h[d],i[d]):


jquery.js (line 2, col 11686)SyntaxError: test for equality (==) mistyped as assignment (=)?
...B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return 


jquery.js (line 2, col 12647)SyntaxError: test for equality (==) mistyped as assignment (=)?
...}else while(b=a[d++])c+=e(b);return c},d=gb.selectors={cacheLength:50,createPse


jquery.js (line 2, col 12959)SyntaxError: test for equality (==) mistyped as assignment (=)?
...(p){l=b;while(l=l[p])if(h?l.nodeName.toLowerCase()===r:1===l.nodeType)return!1;


jquery.js (line 2, col 14780)SyntaxError: test for equality (==) mistyped as assignment (=)?
...p]||(m=n=0)||o.pop())if(1===l.nodeType&&++m&&l===b){k[a]=[w,n,m];break}}else if


jquery.js (line 2, col 15044)SyntaxError: test for equality (==) mistyped as assignment (=)?
...p]||(m=n=0)||o.pop())if((h?l.nodeName.toLowerCase()===r:1===l.nodeType)&&++m&&(


jquery.js (line 2, col 15192)SyntaxError: test for equality (==) mistyped as assignment (=)?
...getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while


jquery.js (line 2, col 16264)SyntaxError: test for equality (==) mistyped as assignment (=)?
...(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var 


jquery.js (line 2, col 18595)SyntaxError: test for equality (==) mistyped as assignment (=)?
...];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d


jquery.js (line 2, col 18684)SyntaxError: test for equality (==) mistyped as assignment (=)?
...!0}else while(b=b[d])if(1===b.nodeType||e){if(i=b[u]||(b[u]={}),(h=i[d])&&h[0]=


jquery.js (line 2, col 18744)SyntaxError: test for equality (==) mistyped as assignment (=)?
....relative[a[i].type])m=[sb(tb(m),c)];else{if(c=d.filter[a[i].type].apply(null,a


jquery.js (line 2, col 20027)SyntaxError: test for equality (==) mistyped as assignment (=)?
...){m=0;while(o=a[m++])if(o(l,g,h)){i.push(l);break}k&&(w=v)}c&&((l=!o&&l)&&p--,f


jquery.js (line 2, col 20587)SyntaxError: test for equality (==) mistyped as assignment (=)?
...){m=0;while(o=b[m++])o(r,s,g,h);if(f){if(p>0)while(q--)r[q]||s[q]||(s[q]=F.call


jquery.js (line 2, col 20695)SyntaxError: test for equality (==) mistyped as assignment (=)?
...",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocumen


jquery.js (line 3, col 14175)SyntaxError: test for equality (==) mistyped as assignment (=)?
...){j=0;while(e=f[j++])fb.test(e.type||"")&&c.push(e)}return k},cleanData:functio


jquery.js (line 3, col 14302)SyntaxError: in strict mode code, functions may be declared only at top level or immediately within another function
...ndChild(f);function g(){f.style.cssText="-webkit-box-sizing:border-box;-moz-box


jquery.js (line 3, col 18951)SyntaxError: test for equality (==) mistyped as assignment (=)?
...f(d=e[f].call(c,b,a))return d}function Vb(a,b,c){var d,e,f,g,h,i,j,k,l=this,m={


jquery.js (line 3, col 25868)SyntaxError: test for equality (==) mistyped as assignment (=)?
...].call(j,a,k,j.opts))return d;return n.map(k,Ub,j),n.isFunction(j.opts.start)&&


jquery.js (line 3, col 28239)SyntaxError: test for equality (==) mistyped as assignment (=)?
...eType)while(c=f[e++])d=n.propFix[c]||c,n.expr.match.bool.test(c)&&(a[d]=!1),a.r


jquery.js (line 4, col 90)SyntaxError: test for equality (==) mistyped as assignment (=)?
...){f=0;while(e=b[f++])d.indexOf(" "+e+" ")<0&&(d+=e+" ");g=n.trim(d),c.className


jquery.js (line 4, col 1897)SyntaxError: test for equality (==) mistyped as assignment (=)?
...){f=0;while(e=b[f++])while(d.indexOf(" "+e+" ")>=0)d=d.replace(" "+e+" "," ");g


jquery.js (line 4, col 2341)SyntaxError: test for equality (==) mistyped as assignment (=)?
...)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else(c===U||"


jquery.js (line 4, col 2755)SyntaxError: test for equality (==) mistyped as assignment (=)?
...on(c))while(d=f[e++])"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):


jquery.js (line 4, col 5998)SyntaxError: test for equality (==) mistyped as assignment (=)?
...};while(b=gc.exec(e))f[b[1].toLowerCase()]=b[2]}b=f[a.toLowerCase()]}return nul


jquery.js (line 4, col 8484)SyntaxError: test for equality (==) mistyped as assignment (=)?
...]);if(c=rc(mc,k,b,v)){v.readyState=1,i&&m.trigger("ajaxSend",[v,k]),k.async&&k.


jquery.js (line 4, col 10386)SyntaxError: test for equality (==) mistyped as assignment (=)?
while( option = option[ levels[i++] ] ) {


jquery.qtip.js (line 496, col 39)SyntaxError: test for equality (==) mistyped as assignment (=)?
if(match = (new RegExp(rule, 'i')).exec(notation)) {


jquery.qtip.js (line 517, col 52)SyntaxError: test for equality (==) mistyped as assignment (=)?
...t.left = (horizontal === SHIFT && !!adjust.left)) { shiftonly(X, LEFT, RIGHT); 


jquery.qtip.js (line 2537, col 57)SyntaxError: test for equality (==) mistyped as assignment (=)?
...shift.top = (vertical === SHIFT && !!adjust.top)) { shiftonly(Y, TOP, BOTTOM); 


jquery.qtip.js (line 2538, col 53)ReferenceError: reference to undefined property this[c]
...st(c[1])&&n.isPlainObject(b))for(c in b)n.isFunction(this[c])?this[c](b[c]):this...


jquery.js (line 2, col 24125)ReferenceError: reference to undefined property c[b]
...b){var c=this.cache[this.key(a)];return void 0===b?c:c[b]},access:function(a,b,c...


jquery.js (line 2, col 30974)ReferenceError: reference to undefined property opts.metadata
if(invalidOpt(opts.metadata)) {jquery.qtip.js (line 316)ReferenceError: reference to undefined property opts.id
id = $.isArray(opts.id) ? opts.id[i] : opts.id;


jquery.qtip.js (line 1826, col 3)ReferenceError: reference to undefined property this.initialize
if(this.initialize === 'initialize') { this(api); }jquery.qtip.js (line 1836)ReferenceError: reference to undefined property l.delegateType
....").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.e...


jquery.js (line 3, col 3380)ReferenceError: reference to undefined property n.event.triggered
...=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf...


jquery.js (line 3, col 4791)ReferenceError: reference to undefined property a.nodeType
...return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function K(){Object.defineP...


jquery.js (line 2, col 30347)ReferenceError: reference to undefined property n.event.triggered
...handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type...


jquery.js (line 3, col 3160)ReferenceError: reference to undefined property i.disabled
...ype))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){fo...


jquery.js (line 3, col 6746)ReferenceError: reference to undefined property a.result
...stDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,...


jquery.js (line 3, col 6583)

Can you make an example and upload it somewhere?
You can PM me the link, if you don’t want to post it here.

I’m not sure that the AJAX is connecting, in the PHP script I’ve added

echo 'FAIL!';
die;

There isn’t any sign of FAIL being displayed. I’m going to have another look at the MVC framework for the PHP to see if there’s anything that I can spot there

There are various ways to debug AJAX, but I can’t really help without seeing an example of what you are doing.

Did the simple example I posted in #10 work for you (on your server)?

I’ve PM’d you a zip file, you’ll need to change the MySQL username and password to a valid one

Lol. And you’ll need to provide me with some idea of what I’m looking at. That zip file contains 286 files and folders.

1 Like

Turned my attention back to this today, tried the example provided by @James_Hibbard in post #10 and that works fine but when used in the application, the $_POST data isn’t getting through to PHP so I’ll need to look “upstream” to find where the $_POST data is being lost at.

Hey, everyone. I made a stripped down example:

If you watch the network console, the ajax request never gets sent at all. In fact, the content: { text: function(event, api) { function itself never executes.

I even visited qTip’s official demo:

But even here, the request doesn’t seem to go out. At this point, I’d wager there’s a bug in qTip itself. That, or their documentation and examples are out of date.

EDIT: Or maybe it’s a browser issue? I opened Pullo’s example from #10, which I presume he saw working before posting, yet it doesn’t work for me (tried in both Chrome and FF).

EDIT EDIT: I take that back. I missed that Pullo’s tooltips open on click instead of on hover. But the other two examples I posted still don’t work for me. Assuming everyone else has the same experience, then I think it’s time to play spot-the-difference. Why does Pullo’s example work but these other two not.