Как я могу получить всплывающую подсказку при наведении мыши и использовать выделенный текст в функции AJAX?

Question

Как я могу получить всплывающую подсказку при наведении мыши и использовать выделенный текст в функции AJAX?

Я использую этот код, чтобы показать перевод текста в промежутке в виде всплывающей подсказки:

$(document).ready(function () {
$('.word').tooltipster({
trigger: 'click',
touchDevices: true,
content: 'Loading...',
functionBefore: function (origin, continueTooltip) {

continueTooltip();

if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'GET',
url: 'translate.php?word=' + $(this).text(),
success: function (data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
}
});
});

Я хотел бы также показать (вызвать) всплывающую подсказку, когда текст выделен, и отправить выделенный текст в качестве параметра URL, как это: translate.php?word={selected text}, Это должно работать, даже если текст находится в отдельных интервалах, частично в интервале, а не в интервале и т. Д .; в основном любой текст, выделенный на странице.

Я нашел код ниже (jsfiddle), но я не могу понять, как интегрировать это в то, что у меня уже есть:

$('div').mouseup(function() {
alert(getSelectedText());
});

function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
} else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}

Вот как выглядит мой HTML:

    <div class="container">
15, 16. (<span class="word">a</span>)
<span class="word">Paano</span>
<span class="word">napaibig</span>
<span class="word">ni</span>
<span class="word">Esther</span>
<span class="word">ang</span>
<span class="word">hari</span>? (
<span class="word">b</span>)
<span class="word">Bakit</span>
<span class="word">maaaring</span>
<span class="word">naging</span>
<span class="word">hamon</span>
<span class="word">kay</span>
<span class="word">Esther</span>
<span class="word">ang</span>
<span class="word">mga</span>
<span class="word">pagbabago</span>
<span class="word">sa</span>
<span class="word">buhay</span>
<span class="word">niya</span>?<br>
15
<span class="word">Nang</span>
<span class="word">panahon</span>
<span class="word">na</span>
<span class="word">para</span>
<span class="word">iharap</span>
<span class="word">si</span>
<span class="word">Esther</span>
<span class="word">sa</span>
<span class="word">hari</span>
...

4

ajax javascript jquery php tooltipster

Решение

Другие решения

по моему мнению, использование такой огромной библиотеки для получения того, что вы пытаетесь сделать, не очень хорошая идея, хотя вы можете легко сделать это без плагина, также то, что вы пытаетесь сделать, кажется невозможным с помощью плагина, потому что ваш действие не является ни click ни hover который поддерживает плагин.

вот демо без плагина DEMO

var cache = []; //defining the cache

$('.word').mouseup(function(e) {
var selectedText = getSelectedText();
if (selectedText.length > 0) { //if any text was selected

//position and show the tooltip
$('.tooltip').css({
left: e.pageX,
top: e.pageY
}).addClass('show').text('loading...');

if (checkCache(cache, selectedText) === '') { //check the cache for the translation

//for the sake of the demo we'll simulate the ajax call, remove this part in your actual code
setTimeout(function() {
cache.push({
value: selectedText,
translation: 'translation of ' + selectedText
});
$('.tooltip').text('translation of ' + selectedText);
}, Math.floor(Math.random() * (2000 - 300 + 1) + 300));
return;
//end of the simulation

//if didn't find the translation call the ajax
$.ajax({
type: 'GET',
url: 'translate.php?word=' + selectedText,
success: function(data) {

//cache the translated text
cache.push({
value: selectedText,
translation: data
});

$('.tooltip').text(data); //show the translation
}
});
} else {

//if it was cached, load from the cache
$('.tooltip').text(checkCache(cache, selectedText));
}
}
});

//close the tooltip if clicked somewhere on the page other than the text or the tooltip
$(document).on('click', function(e) {
if ($('.word,.tooltip').is(e.target) || $('.word,.tooltip').has(e.target).length > 0) return false;
$('.tooltip').removeClass('show');
});

//get the selected text
function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
} else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}

//check the cache for translation
function checkCache(cache, value) {
var translation = '';
$.each(cache, function(i, obj) {
if (obj.value == value) {
translation = obj.translation;
return false;
}
});
return translation;
}

2

Источник

Accepted Answer

Попробуйте позвонить getSelectedText() от вызова Аякса. Но сделай это на mouseup, Он проверит, возвращен ли какой-либо выбранный текст из вашей функции, а затем выполнит вызов ajax, если он есть.

$('div').mouseup(function() {
var selectedText = getSelectedText();
if(selectedText) {
$.ajax({
type: 'GET',
url: 'translate.php?word=' + encodeURI(selectedText),
success: function (data) {
origin.tooltipster('content', data).data('ajax', 'cached');
}
});
}
});

function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
} else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}

1