jQuery context menu filled with php content based on selection

Question

When a user selects a word in a text on my website (PHP), and then right clicks, i want a jQuery context menu to come up, this can be done by using one of the already existing jQuery context menu plugins.

But besides the options like copy / paste / cut, etc. I also want something to be done with the selected word using PHP. Which, i think, is a little harder. For example using this script:

$selection = //the selected word or text
$target = //fetch from MYSQL database
$output = array();
while ($row = //fetch $target) {
   If ($selection == $row->input) { array_push($output,$row->output); }
}
echo '//menu '.print_r($output).''; // of course not print_r! Just for the example's sake.

Databse example: database example (Sorry for the oversized image)

Ok so selecting the word 'lazy' in the example text, and then right clicking, the jQuery box should pop up showing the results from the database extracted by PHP.

Example: text&menu example

Ok, so i know you can't just combine javascript with PHP and it can only be parsed, but i thought loading an iframe withing the menu, which does the database extraction would do the job by using javascript to set the iframe src containing the selected word in the url.

However, iFrames are not really a nice way to solve this.

The question: How can i do this effectively? Execute this script on right-click and show the database-related content in the menu?

What is your question about exactly? About how to get the related words or how to add them to your jQuery pop-up? If the latter, that would depend very much on what plugin you are using. — jeroen
– jeroen, Commented Jun 5, 2013 at 18:35
I also want to integrate this feature... can you please suggest me any built in jquery plugin as you told so that I can integrate !!!!! — Dharmesh patel
– Dharmesh patel, Commented Aug 11, 2016 at 18:13

frankpinto · Accepted Answer · 2013-06-05 18:43:56Z

2

I would need to know the plugin you're using to give you some code examples but, general, I would go about this like this:

There has to be a click handler on the items in the jQuery context menu. Use it to submit an AJAX request to the server when the "selection" term is clicked.
Make sure to give the user some feedback (a loader or spinner)
Put the results into an array server-side.
JSON encode the array and send it as the response (e.g. echo json_encode($output)
JSON.parse(response) on client-side and you now have a JS object with the results
Put those results in the context menu (again, how depends on the plugin you're using)

answered Jun 5, 2013 at 18:43

frankpinto

1667 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:19:47Z

1

AJAX is a great way to do what you want.

Here is a simple AJAX example. Note that in the 2nd .PHP file, that is where you put your database lookup etc.

Whatever you echo from the 2nd script is received by the calling javascript (first script again) and can be inserted into your context menu on-the-fly. Here is another example with a very detailed, step-by-step explanation of the process at the bottom of the answer.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jun 5, 2013 at 19:03

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

Comments

nkkollaw · Accepted Answer · 2013-06-05 18:48:55Z

0

I think you have to use Ajax to get JSON from a PHP file, which you would process on the actual page.

I you create a PHP file called test.php, with the following in it:

<?php
echo json_encode(array('time' => time(), 'hour', date('H')));
?>

Then the Javascript:

<script>
    $('#curr_menu_entry').click(function() {
       $.getJSON('test.php', function(data) {
           $.each(data, function(key, val) {
              $('#curr_menu_entry').append('<li id="' + key + '">' + val + '</li>');
           });
       });
    });
</script>

Would that work?

answered Jun 5, 2013 at 18:48

nkkollaw

2,0811 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery context menu filled with php content based on selection

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related