[Solved] Use external urls to display relevant data

[placebo33]

I've been trying to figure out this for the past 4 hours however I'm just unable to get it to work since I don't know Javascript very well.

So basically the closest thing to what I'm trying to achieve is the "Loading images" demo just that I'd like to display content from an external website specific to the link that's clicked.

JS Code

$(document).ready(function() 
{   $('#content a[rel]').each(function()
   {
      $(this).qtip(
      {
         content: {
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $(this).attr('rel'), 
 
         }

The issue with this code is I can't call external urls in my REL parameters, but if I could it'd satisfy my needs since I could call voting.php (as in the code below) and pass the "car" parameter which would enable me to diaplay content that's specific to the link. But since this isn't possible I'm wondering what might be a work around this.

Currently I'm using an iframe to display small 15x15 image hosted on external server. The code looks like this (there are several iframes through the page for each car brand):

<a href="#" rel="www.example.com/voting.php?car=bmw"><iframe src="www.example.com/image.php?car=bmw" width="15" height="15" frameBorder="0">
</iframe></a>

<a href="#" rel="www.example.com/voting.php?car=nissan"><iframe src="www.example.com/image.php?car=nissan" width="15" height="15" frameBorder="0">
</iframe></a>

My server returns a specific image from my database depending on the car parameter.

What I want to achieve is to display a box on mouseover that calls an external url http://www.example.com/voting.php?car=[CARTYPE] specific to the url that is used in the "rel".

If displaying a full external page isn't possible I'm wondering if it's possible to just pick the "car" parameter from the "rel" and use it in the "text:" to display links that pass that parameter? The only issue with this is I don't know how to have the user click the link and submit data using AJAX in order to avoid the full page refresh issue when a link is clicked.

I'm sorry for the length but I'd really really appreciate any help!

[Craig]

I'm not too sure I understand what it is you're trying to achieve exactly. If you're looking to display a full page within the qTip, you'll need to use an iframe within the qTip itself and set it's src attribute using the rel attribute:

JS Code

$(document).ready(function() {  
   $('#content a[rel]').each(function(){
      $(this).qtip({
         content: {
            text: '<iframe src="http://example.com/voting.php?car=' + $(this).attr('rel') + '" frameBorder="0" width="115" height="115" />'
         }
      })
   })
})

[placebo33]

This is exactly what I needed. Thanks!

[placebo33]

Craig, would it be possible to trigger qtip only based on iframe without the div surrounding it?

Right now I'm using a modified version of your code:

JS Code

$(document).ready(function() {  
   $('#content iframe[src]').each(function(){
      $(this).qtip({
         content: {

and on my page I'm using this to trigger the qtip:

JS Code

<div id="content"> 
 
<iframe src="http://www.example.com/image.php?car=nissan" width="15" height="15" frameBorder="0"></iframe></div>

Basically what I'd want is to only match iframes that use "http://www.example.com" at the start of the url in the "src" tag so I could get rid of the div tags and at the same time only match specific iframes that use my url.

I hope this makes sense.

[Craig]

Yep, just use the partial attribute value match selector:

JS Code

$('#content iframe[src^="http://www.example.com"]') // Only matches iframes that start with example.com