Is there a way to use wp_enqueue_script for adding JavaScript directly? - wordpress

Question

Is there a way of adding Javascript to a page directly but having Wordpress to wait for jQuery to load? Just as with using wp_enqueue_script?
In the custom page template I have the following code:
<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') : ?>
<script>
$(function() {
App.dialogs.afterPetitionCreate();
});
</script>
<?php endif; ?>
Wordpress barks that $ is undefined. Now I do not want to load a entire .js file just to call that function. So in that sense wp_enqueue_script isn't an option. I only want to fire some JavaScript directly on the page but I do want to wait for jQuery to load.
This is what I also tried, adding the JavaScript to the footer with Wordpress:
<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') :
add_action('wp_footer', 'my_footer_scripts');
function my_footer_scripts() { ?>
<script>
$(function () {
App.dialogs.afterPetitionCreate();
});
</script>
<?php } ?>
<?php endif; ?>
But unfortunately the same error appears $ is undefined.
So what would be the correct way to quickly load some Javascript on a custom Wordpress page template AND wait for jQuery to load?

Answer 1

I do not think this is a good practice.
It is better to change logic to something like this:
<?php if (isset($_GET['status']) && $_GET['status'] == 'newly_created') : ?>
<input type='hidden' id='status' name='status' value='newly_created'>
<?php endif; ?>
script.js:
$(function() {
if ( $('#status').val() === 'newly_created' ) {
App.dialogs.afterPetitionCreate()
}
});
and
wp_enqueue_script( 'afterPetitionCreate', '/path/to/script.js', array( 'jquery' ), '', true );
p.s. you can wrap wp_enqueue_script() into is_page_template( 'my-cool-page-teplate.php' ).

Answer 2

Have you tried running the script within the document ready event like the following code below?
<script>
jQuery(document).ready(function($){
$(function () {
App.dialogs.afterPetitionCreate();
});
});
</script>
The .ready event occurs when the object of the document or the DOM is loaded which makes it perfect to place all of your jquery events and other functions.

Answer 3

This is the code I ended up writing, and does exactly what I want. Like Submit Parkash mentioned, jQuery needs to be used instead of $.
/*
* Adds a single bit of Javascript to the page.
*/
function theme_embed_script($script) {
add_action('wp_footer', function ($script) {
echo '<script type="text/javascript">' . $script . '</script>';
}, 10);
do_action('wp_footer', $script);
}
Usage:
<?php theme_embed_script('jQuery(function () { alert("Hello"); });'); ?>
OR use Wordpress' wp_add_inline_script() script like David mentioned.