Using AJAX to send data from jquery to php file and back

Question

on my webpage, when the user clicks on a word it should show the definition of the word. When the user clicks on the word, it would send the word variable to the php file that connects to the oxford dictionary api and queries the word for its definition, then returns that definition to the webpage. The problem is when I tried to pass the word variable to the php file through ajax, it doesn't seem to be working. I am using a php wrapper to use the api and there's no problem when I set the word query manually. I am able to connect to the api and retrieve the definitions and all, so I think the problem is the ajax part. I've never used jquery, ajax or php before this assignment. I'm not sure what I did wrong. Please help!

My JS file

function getSelectedText(){
    var selectedText = '';
        if (window.getSelection)
               selectedText = window.getSelection();
return selectedText;
}

// Retrieve definition 
$(document).ready(function()
{
var selected_text = getSelectedText();
$('#selectable').on("dblclick", function () {
$('.selection').text(selected_text);
$('.is-selected').text(getSelectedText() !== '');
    });

$.ajax({
    url: "dictionary.php", // php file path
    method: "POST", // send data method
    data: {"selected_text": selected_text}, // data to send {name: value}
    success: function(data){
        alert(data);
    } // response of ajax
  });

});

My PHP file

$selected_text = $_POST['selected_text'];
echo $selected_text;

$dictionary->queryWord($selected_text);

$dictionary->setResult(0);

/* Get results from dictionary class */
echo "<h1>Dictionary Class Results - ".$dictionary->getWord()."</h1>";
echo "<b>Word:</b> ".$dictionary->getWord();
echo "<br><b>Definition:</b> ".$dictionary->getDefinition();
echo "<br><b>Short Definition:</b> ".$dictionary->getShortDefinition();
echo "<br><b>Example:</b> ".$dictionary->getExample();

/* Displays the current result set */
echo "<br></br>Using result set: <b>".$dictionary->selected_result."</b>";

?>

Your javascript is certainly the issue here. On page load you are setting the selected text, and then firing off ajax instantly. Never do you fire ajax off again on any click actions, nor ever change what is in selected_text. — IncredibleHat
– IncredibleHat, Commented Feb 15, 2020 at 18:00
@IncredibleHat So I moved the ajax under the onlick function but it doesn't seem to work. Am I doing this wrong? — jellyie
– jellyie, Commented Feb 15, 2020 at 18:36

xxMrPHDxx · Accepted Answer · 2020-02-15 19:10:13Z

1

First of all the getSelectedText function should actually return the selected text as such

function getSelectedText(){
    var selectedText = '';
    if (window.getSelection) selectedText = window.getSelection().toString();
    return selectedText;
    // Or even better using ternary operator: return window.getSelection ? window.getSelection().toString() : '';
}

Then, as IncredibleHat said, you should correct the way you handle the event probably as below cause I usually use Fetch API for this kind of purpose:-

// Only fire the ajax when user double click any text/selectables
$('#selectable').on("dblclick", function () {
    // Marked contants since it won't change
    const selected_text = getSelectedText();
    // Make sure you check if the string is not empty before you do the request too
    if(selected_text.trim().length > 0)
    // Then do the request and process the output
    $.ajax({
        url: "dictionary.php", // php file path
        method: "POST", // send data method
        data: {"selected_text": selected_text}, // data to send {name: value}
        success: function(data){
            alert(data);
        }
    });
});

edited Feb 15, 2020 at 19:10

answered Feb 15, 2020 at 18:38

xxMrPHDxx

6675 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jellyie Over a year ago

Hi thank you so much! This seems to work, the only problem is instead of selecting one word, it selects all the contents in the selectable div.

jellyie Over a year ago

Sorry, I figured out what to do! I changed the return value of getSelectedText() to return selectedText.toString(); and that seemed to work. Thank you so much again!

xxMrPHDxx Over a year ago

Ohhh great!!! I was just about to post a ridiculous way to solve that lol.. Make sure you trim the text btw

Collectives™ on Stack Overflow

Using AJAX to send data from jquery to php file and back

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related