Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
In PHP, echo out a data attribute on an element with the value that you want to convey. Then in JavaScript, grab that data attribute and in turn grab the value.
Can you share or correct my code please? I’m not sure of how the syntax should work on that.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The concept is to keep PHP and JavaScript separate.
As I see, you’re using a plugin to insert PHP. Great.
Now use a plugin to insert JavaScript.
What specifically aren’t you sure how to do?
Thanks for jumping in here.
I have some php code this is getting a session ID and token. Then I need those ID’s and tokens in Javascript to call some .js code. (I’m working on getting TokBox to work from my wordpress sites).
But I’m just doing a test with the code above – as once I come out of the php code – I don’t know how to access any of the variables that I created and populated in the php code.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
So does it make sense if you were to do something like this in PHP:
echo '<i data-cookie="' . $testVar . '" />';
Then this in jQuery:
var cookieData = jQuery('[data-cookie]');
cookieData = cookieData.attr('data-cookie');
Yes – very helpful!
On the “echo ‘<i …. line – what is the i for? integer?
And I would need to make sure that I have the jQuery jar included?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The “<i” is for an element in HTML known as the ‘<i>’ element. People sometimes say that this is for italic text, but it is not. It’s used for text in general, but that’s not important. I recommend you use this element because it is the least significant element. Putting an empty “<i>” tag into your page won’t affect your page.
And I would need to make sure that I have the jQuery jar included?
I think you mean the jQuery library? Yes, you can make sure that the jQuery library is included using your functions.php file:
function enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts );
Ok – thank you!
So, I have code like this…
<head></head>
<body>
[insert_php]
$testVar = "Hello";
echo '<i testVar="$testVar" />';
[/insert_php]
<script type="text/javascript">
document.write('In Script...');
var testVar = jQuery('[testVar]');
testVar = testVar.attr('testVar');
document.write(testVar);
</script>
</body>
My output is
In Script…$testVar
Why isn’t my output
In Script…Hello
?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try this instead:
echo '<i data-cookie="' . $testVar . '" />';
Then update your JavaScript to reflect that.
But the first thing I would do is check if jQuery (library) is being loaded.
No – I didn’t have my jquery loaded.
I’ve got it loaded now. Although – I’m not sure where to put the
add_action( ‘wp_enqueue_scripts’, ‘enqueue_scripts );
line? The function – I just added to the end of the functions.php file – but if I put the add_action at the end – I get an error re-loading my WordPress (makes sense) But I’m not sure where it needs to go.
So – data-cookie – is that a name you just made up – or is that a standard object?
And – even with out putting in the enqueue scripts – I’m getting what I would expect on my test (woo-hoo). So, now this code….
<head></head>
<body>
[insert_php]
$testVar = "Hello";
echo '<i data-cookie="' . $testVar . '" />';
[/insert_php]
<script type="text/javascript">
document.write('In Script...');
var cookieData = jQuery('[data-cookie]');
cookieData = cookieData.attr('data-cookie');
document.write(cookieData);
</script>
</body>
Produces this…
In Script…Hello
Again – Thanks for your help on this. It’s starting to make more sense now.
Not sure where to put the add_action – but other than that it’s working. I’ll mark this as resolved.
