2013-09-27 4 views
0

Я использую qtip2 ajax-tooltips. Это скрипт (http://jsfiddle.net/craga89/L6yq3/):Всплывающие подсказки Ajax с идентификатором данных

// 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: 'Loading...', 
      ajax: { 
       url: 'http://qtip2.com/demos/data/owl', 
       loading: false 
      } 
     }, 
     position: { 
      viewport: $(window) 
     }, 
     style: 'qtip-wiki' 
    }); 
}); 
}); 

Чтобы использовать сценарий, мне нужна ссылка из Аякса файла:

<a href='http://qtip2.com/demos/data/snowyowl'>Snowy Owl</a> 

Я хочу, чтобы вызвать файл АЯКСА без ссылки, но с данными -id, поэтому он выглядит так:

<a href="#" data-id="1">Snowy Owl</a> 

Как это сделать?

Чтобы сделать его более ясным, что-то вроде этого кода:

var urlFormat = "/content/web/tooltip/ajax/ajaxContent{0}.html"; 

      $(document).ready(function() { 
       $("#products").qtip({ 
        filter: "a", 
        content: { 
         url: "/content/web/tooltip/ajax/ajaxContent1.html" 
        }, 
        width: 520, 

        position: "top", 
        requestStart: function(e) { 
         e.options.url = qtip.format(urlFormat, e.target.data("id")); 
        } 
       }); 

       $("#products").find("a").click(false); 
      }); 

ответ

0

Я думаю, что вы после это:

// 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: 'Loading...', 
       ajax: { 
        url: $(this).data('id'), 
        loading: false 
       } 
      }, 
      position: { 
       viewport: $(window) 
      }, 
      style: 'qtip-wiki' 
     }); 
    }); 
}); 

Обратите внимание, что я изменил параметр URL-адрес из фиксированного URL для используйте атрибут data-id из зависающей ссылки. url: $(this).data('id'),

Он даже, кажется, работает: http://jsfiddle.net/L6yq3/492/

редактировать
Вы можете просто построить URL самостоятельно, то и добавить идентификатор где-то там. Что-то вроде этого:
url: 'http://path/to/ajax/script-' + $(this).data('id'),

Или, если у вас есть (PHP) скрипт на сервере можно добавить идентификатор в качестве переменной запроса и сделать обработку там. Что-то вроде этого
url: 'http://path/to/ajax/script.php?id=' + $(this).data('id'),

Обратите внимание, что вы можете также использовать фактический id атрибут, а не атрибут data-id, заменив $(this).data('id') на $(this).attr('id')

Вы получаете идею?

+0

Спасибо. Но я ищу решение, где у меня есть папка, где все мои файлы ajax находятся внутри. Теперь я хочу назвать их только с идентификаторами. – user2800148

+0

Я отредактировал свое оригинальное сообщение, чтобы сделать его более понятным ... – user2800148

+0

Хорошо, у меня есть папка с этими файлами ajax, которые строятся так: ajaxContent1.html, ajaxContent2.html .... Итак, с вашим первым решением это url: 'http: // path/to/ajax/ajaxContent-' + $ (this) .data ('id'). Но всплывающая подсказка не находит этот скрипт. – user2800148

Смежные вопросы