Search jQuery

jQuery Forum

Passing Variables from PHP/MySQL - jQuery Best Practices

in Getting Started • 6 years ago

On our WordPress site, I have created a page to:

(a) search our extensive database (via a mysql query in php) for particular strings ($search and $search2) using two search boxes with and/or radio buttons,
(b) return a two-column table (columns: DATE and EVENT) where one and/or another of the strings is found in the EVENT column,
(c) paginate the results when they exceed 100 rows, with one-click navigation to the additional pages, and
(d) highlight the found strings in yellow using the mark.js jQuery plugin.

The mark.js plug-in works properly when I hard code $search and $search2 (e.g., var keywords = ["disease", "epidemic"];, but I need pass these variables to the mark.js plug-in on the first returned page with a table and any additional pages of tables so it know what strings to hghlight. Note that after they are input to php via the forms, I don't currently have the values of $search and $search2 displayed on the returned pages (other than where they appear in the table), but I could if needed to pass them to jQuery.

As I am new to jQuery (and everything else above), my question is: what is the best practice in jQuery to obtain these variables? I have explored this forum and "stack", but am confused. Should I be creating an html element or a hidden field to hold them? Or is it better to take these variables directly from the php code?

Many thanks to anyone who replies. If I should have posted code above, please let me know. I didn't because I don't mind trying to work these things out myself after being pointed in the right direction.

Replies(16)

jakecigar

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

You can simply generate a line in your script or a new <script> that has…

var keywords = ["disease", "epidemic"];

JΛ̊KE

Alan1

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

Thanks for the super-fast response.

The words "disease" an/or "epidemic" are only examples. As I described above, the actual strings "$search" and "$search2" are input by the user and then used in a mysql query within php. But I also need to use those two variables in the mark.js jQuery plug-in so it knows what words to highlight in the tables that are generated after the query. My question is how best to get the two variables into the plug-in on all of the pages with tables. Thanks.

jakecigar

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

Not literally that. You would have to generate it based on what you have in your PHP.

Maybe you want

var keywords = ["$search", "$search2"];

But that’s your PHP code.

As far as this plugin, I don’t know it. Where did you find it? Is there documentation?

JΛ̊KE

Alan1

Re: Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

Thanks again Jake. You are fast! Plugin is here: https://markjs.io/

jakecigar

Re: Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

Seems like a reasonable plugin, you just call it like they do in that document. Something like…

$(function(){
var keywords = ["$search", "$search2"];
$("body").mark(keywords);
})

I picked body, but you could pick a better selector for your page.

JΛ̊KE

Alan1

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

Thanks again Jake. I'll try and report back.
Alan

Alan1

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

I checked my notes, and I had tried that already (though I did try it again just now).

Specifically, this code works and returns tables with the strings "cancer" and "infection" highlighted in all of the tables :

<script>
var keywords = ["cancer", "infection"];
jQuery(document).ready(function($){
jQuery(".main-content").mark(keywords);
});
</script>

However, when I replace line 2 above with the following to try to :

var keywords = ["$search", "$search2"];

it does not work (with or without quotation marks).

I assumed that the problem is that jQuery is not recognizing $search and $search2 which are in the php code and not currently repeated in the html for the pages.

Thanks again for your help.

jakecigar

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

This sounds like a PHP problem.

In PHP there are many ways to get a PHP variable to the resultant page. You may need to find a PHP forum, but another way is…

var keywords = ["<?php echo $search; ?>", "<?php echo $search2; ?>"];

JΛ̊KE

Alan1

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

The above didn't work, but thanks.

Would an easy solution be either to (a) display the strings in the html of the page (by echoing them out of php) and then picking them up in JQuery or (b) by using hidden fields and picking them up?

jakecigar

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

There are an unlimited way of doing it. The best way is the first way that works.

JΛ̊KE

watusiware

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

You need a PHP forum for your PHP questions.

I don't use or know PHP. But I have often needed to pass some data into a page. So, I can offer some general suggestions.

1. It is bad practice to embed JS in the page. I always try to keep my JS in .js files. But sometimes it is necessary to put a little bit of JS in a page - for example, when you want to include some data that JS will use, and maybe it is inconvenient to have your server language make substitutions in the JS file.

2. I don't recommend embedding text (and hiding it?) or using hidden inputs. There's no good reason to do it (other than in some cases within forms that will later be submitted), and only complicates retrieving the values in your JS code.

3. When it is just a single value, I write a <script> block, and only set the variable. Following good practice, the JS code that reads the variable will be in some .js file.

Like I said, I don't know PHP. I use Ruby, and a template language called ERB. So, in ERB, I would write, simply:

<script>
var myJavascriptVariable = <%= my_ruby_variable %>;
</script>

(Note if it is a string value, you will need to add the quotes around the template substitution.)

4. When it is multiple variables, or some complex data structure, I use a JSON library on the server to create a Javascript object declaration. This is very convenient, because JSON (Javascript Object Notation) was designed specifically to be usable as Javascript object declarations.

So, if I have some Ruby structure, say, a list of objects, I can quite simple create a javascript object declaration:

<script>
var myJavascriptObject = <%= my_ruby_object.to_json %>;
</script>

JSON handles simple variables as well. And it will quote string variables. So, you don't have to worry about adding quotes yourself should your "object" be a simple string variable.

The HARD WAY to do this would be something like:

<script>
var myJavascriptObject = [
{
foo: <%= myRubyObject[0].foo,
bar: <%= myRubyOjbject[0].bar
},
{
foo: <%= myRubyObject[1].foo,
bar: <%= myRubyObject[1].bar
}
// ... etc.
]
</script>

Or, worse - making a zillion discrete variables.

I like doing things the easy way!

It may be worth your while to learn how to use JSON in PHP.

Another way, without writing a <script> block at all, is to use a data- attribute on some element, perhaps the <html> element or some other fairly top-level element.

jQuery makes it very easy to retrieve data set in a data- attribute, and... conveniently understands JSON, and will make a JS object if it finds JSON in a data- attribute.

So, you could write (again, in Ruby/ERB, because I do not know PHP...)

<html data-myJavascriptObject='<%= my_ruby_object.to_json %>'>

Note you should use single-quotes, because the JSON might contain double quotes. The JSON library will deal with encoded quotes-within-quotes though.

Then, to read it in your JS code:

var myJavascriptObject=$(html).data("myJavascriptObject");

If you are a purist about not mixing JS code into an HTML page, you can use data- attributes. I'm not that extreme a purist, so I use the first method. I do use data- attributes - and quite a bit - but only when I want to associate some data with specific HTML nodes in the page.

Alan1

Re: Passing Variables from PHP/MySQL - jQuery Best Practices

6 years ago

Very kind of you to respond in such detail. Thanks. Would you agree with this approach:

I edited to display the two variables in html inside <div id = "s1"> </div> and <div id = "s2"> </div> tags. This seemed like any easy way to get out of php and I don't mind displaying the search words on each page. Now I have to get the value of the strings into the following code instead of the hard-coded test strings in line 2: