the full height nexus icon
 red n black circle yellow n black circle green n black circle 

[ Useful Internet Links ]

** Primary Note, ..
[ Read more ]

Note: if you see a (*) against a menu option, means that the article has a download link associated with it.


WordPress developer, ..
(( search box )) located here.

WPBeginer, gotta say here: that this website has some really cool stuff on it, and it ain’t just for beginners neither, but it does has a Noob approach to searching for stuff. It also has a very heavy emphasis on the over-use of paid Plugins in my opinion.

StackOverFlow, not a Noob in sight: except for some of the unresearched questions being asked, here be the questionable search box in, ..
(( question ))

The Mozilla support site is a right royal bitch to navigate, but it does have some real neat stuff on it to peruse. Downside, you do really need to know what you want to find — before even looking for it. The place is not Noob friendly at all, that said, it’s got shed loads of brilliant examples.

But above all, there’s the king ‘n’ queen of all searches, ..
Google itself.

** Remember, this stuff discussed here can kill your website stone dead, so only proceed with a current backup under your belt.

This page title is, ..

[ Ajax Form Submit – Additional ]

Google traps:-
De-Registered the jQuery migrate . How to Use jQuery in WordPress . How to fix WordPress “Uncaught TypeError: $ is not a functions. $( document ).ready() . >})( jQuery ) . Uncaught ReferenceError: is not defined . Using jQuery inside a vanilla JS file $ . $ jQuery inside a JS file . jQuery inside a JavaScript file $

Little old me has had a few fraught days of scratching my head over a tiddly tiny little jQuery problem, and of course; doing a lot of tiddly tiny piddling cursing (n) cussing at the same time.

I’ve even thrown the kitchen sink at it, .. (poxy thing bounced back.)

My primary issue, .. was loading a second copy of jQuery inside a plugin tutorial that I found on u-Tube.

** Yes, it was that Joshua Herbison’s Form Submit (thing) Using Ajax. 

Seems that it (was is) a performance problem, that was rather quickly picked up by several of the website speed-testers that I tried out.

** Now, to give credit where its due, and this is in no way a criticism, but Joshua does actually say in his tutorial: that he’s taken jQuery off of his own website, and he also states that you might *not* need to add it as he did, (but no mention as to how to go about *not* including it), and *not* adding it again has cause me no end of grief.

Loading jQuery, twice (isn’t a good idea), especially with load speeds being what they are. jQuery ain’t little, and that’s even with the minimized version coming in at 88mg. True, not a lot in the grand-scheme of things, but it all takes its toll on load speeds.

This shouldn’t be said, but it’s also bad programming practice to load several different libraries, (as they can), and do interfere with each others function calls.

Moving the pointer ever on:-

The original contact form code looked like this, ..

<?php
function writeOn_my_plugin_scripts() 
{
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://b92.co.uk/wp-content/plugins/writeOn-contact-form-ajax/js/writeOn.js"></script> 
<?php 
}
add_action( 'wp_footer', 'writeOn_my_plugin_scripts' );

What this actually does, is load the raw <scripts> in the footer with the wp-footer statement.

Warning, kitchen sink ahead.

Removing the ‘jquery.min.js’ library, then threw up $ (undefined errors.)

So being a clever fucker, and figuring that it was because the JS file wasn’t formatted for jQuery: I encapsulated the entire JS contact file inside a $(document).ready(function() { thing, resulting in my bloody Contact Form not pigging-well working!

Looking at the Browser Inspector Console, F12, or left click and select Inspect. I could see that the functions were *not* being found, but opening up the page-source, told me that they were loading fine. So I hit Google, and soon discovered that it wasn’t that easy.

I rather quickly found out (rather haltingly, and in a rather sniffy tone), that-that format used below, was only for use in the header code. (Ho! – Ho! for getting it soooo wrong — NEWB!). Some of these programming help forums really piss me off somewhat. Anyway! – Here’s how it’s officially done.

// top of file.
$(document).ready(function() { // header statement.
// your ( $ ) code
});  // jQuery header usage.

The code brace below is for the official footer layout.

// top of file.
(function($) { // footer statement.
// your ( $ ) code
})( jQuery ); // jQuery footer usage.

** Annotation 1: footer and header means that you want WordPress to put the script in either the head or the foot of the html document page.

Putting it in the footer of the website, means a quicker load time, but some functions need to be used as the HTML body is being loaded.

Old Programming Nags for old Programming Naggy courses.

But of course NEWB! – Now, run along (Boy!) – Whilst us professionals disdainfully downgrade your ridiculously stupid question.

Help Forums wise, you should see some of the fractious arguments erupt amongst them highly proficient professionals, cat-a-wailing bitches don’t even come close.

All tutting piffle (Wallahs) in my considered opinion, but no matter what rather professional cat-calling-format that I used, (nor where I put them), it always resulted in the normal JS functions *not* being found, with the constant nasty Undefined Function Errors appearing in the Browsers Developer Consul.

New Google syncs and taps fitted, ..

Lots of rather sniffy (de_enqueue_scripts), and (wp_enqueue_scripts) soon followed, with me even putting the script on the backend by using do_action( ‘admin_enqueue_scripts’, etc .. but it all did no good.

The nasty thing that follows, (I happily discovered on one jolly old forum), but that monstrosity didn’t work either, ..

<script src="<%= Page.ResolveUrl("~/JS/jQuery.js") %>"></script>

Which in itself, threw up all sorts of weird and wonderful redirection errors.

Nor did putting the enque_script directly inside the header.php file do anything to the Undefined Function Errors.

And nor did the rather sniffy, and rather official proclamation of enqueuing the lot do any good either, as in:-

function writeOn_my_plugin_scripts() 
{
wp_enqueue_script( 'my-contact-script', 'https://b92.co.uk/wp-content/plugins/writeOn-contact-form-ajax/js/writeOn.js', array('jquery'), '1.7.0', true );
}
add_action( 'wp_enqueue_scripts', 'writeOn_my_plugin_scripts' );

** Annotation 2: this adds the JS script to the website pages, (all of them!)

But still that Undefined Function issue remained, and yet I knew for a fact that the JS file was bloody well being loaded, (proved by inspecting the page source), and there were NO SPELLING ERRORS in the PHP or JS files either!

Which in itself, was another jolly old bone of contention with all of those professional programming snobs, who all snickered and joked amongst themselves over the bloody Newb’s wasting their time, by asking dumb arse spelling questions like this.

There are some real professional jerks out there, but that said: there are also some real genuine gents as well. I suppose that it all just depends on who’s delicate toes you accidently step on, when asking how to spell-out the WordPress spell, ..


As I say – the Google kitchen sink, (via stackoverflow and the GIT repositories), literally got thrown at the problem, but all to no avail.


Logic Prevailed.

Basically, (upon reflection now), my problem is that the ( $ ) stuff was actually used inside normal JS functions.

What I eventually logically discovered, (wasn’t simplicity itself), but it was bloody obvious when you stopped and thought it through.

JS functions are available in JS files, but they aren’t viewable (by vanilla JavaScript), held inside the $(document).ready(function() surrounding thing.

But my normal JS functions, actually used the ( $ ) thing inside them: meaning, that I simply couldn’t split them up.

The surrounding $(document).ready(function() thing — actually allowed the professional programmers, using the ( $ ) shortcut; to work normally, but it also unprofessionally hid all of the normal JS vanilla functions.


Solution number one:-

Simply use the tag ( jQuery ) instead of the ( $ ) in all of the vanilla JS file, as in:-

start of JS file ..

fd.append( 'name' , $( "#your_c_name" ).val() );

// now, simply reedit the line to.

fd.append( 'name' , jQuery( "#your_c_name" ).val() );

end of JS file.

Now there is no need for the $(document).ready(function() thing to be used at all.


A more complex take on simply using the ( jQuery ) tag.
Put in where you need to use the really cool and easy to use library stuff.

** Annotation 3: being as WordPress has already loaded jQuery by default: then the rather sniffy, and rather petulant professional argument of *not* loading it, and using it, .. is rather moot.


Note: the code below also shows you how to check if the <textarea> itself, actually has any user text entered in it. This is the actual JS PHP code that I use as part of my (contact-form) user input test.

/* Professionally, this rather sniffy code would normally be written out as .. */

var comment = $.trim( $( "#your_c_comments" ).val() );
if( comment === "" || comment == null )
{
var errString3 = "Error - No commented input has been detected.";
var errName3 = document.getElementById( "your_c_comments" );
conMessages.push( set_form_error( errName3, errString3 ) );
} 
/* getting the value of a <textarea> shouldn't be this hard. */
if ( conMessages.length > 0 )
{ 
return; // error of [ no text ] in the <textarea> has been detected.
}
else { submit_main_contact_form() }

/* Unprofessionally, I now write it out as .. */

var comment = jQuery.trim( jQuery( "#your_c_comments" ).val() );
if( comment === "" || comment == null )
{
var errString3 = "Error - No commented input has been detected.";
var errName3 = document.getElementById( "your_c_comments" );
conMessages.push( set_form_error( errName3, errString3 ) );
} 
/* getting the value of a <textarea> shouldn't be this hard. */
if ( conMessages.length > 0 )
{ 
return; // error of [ no text ] in the <textarea> has been detected.
}
else { submit_main_contact_form() }

/* One little word makes all the difference. */

** Annotation 4: Sidereal programming. In the above example, I’ve used a let conMessages = [] array variable. That then gets filled with conMessages.push = “Your text here!” feature.

So! — If it’s got a value at the end of the ladder of the many if  tests, then a user input error occurred.

#Justsayin.


Conclusion.

The fancy $(document).ready(function() ) thing, just allows the rather lazy sniffy professional programmers to use that ( $ ) shortcut, instead of typing out ( jQuery ) where the library based jQuery code is used. All done btw, because other programming languages also use the ( $ ) shortcut thing.

After a quick search and replace, I was finally ready to tackle that PHP JavaScript inclusion file.

Now we’re cooking on gas, and by simply enqueuing the new PHP function to look like this, ..

function writeOn_my_plugin_scripts() 
{ 
$my_site_url = get_site_url();
$my_js_path = $my_site_url . '/wp-content/plugins/writeOn-contact-form-ajax/js/writeOn.js';

wp_enqueue_script( 'my-contact-script', ''. $my_js_path.'', array('jquery'), '1.7.0', true );
}
add_action( 'wp_enqueue_scripts', 'writeOn_my_plugin_scripts' );

I’ve now made the plugin site specific: meaning, it’ll now work on your site as well.

Here’s a link to the entire thing .. complete with my messy comments as well. Remember – the top secret password to download the file is 1 2 3 4 5, just those numbers on their own.

C – Pointers Explained.

After re-loading the ( contact-form-page ) on my writeOn website, ( CTRL-F5 ) The wretched thing finally works, and all without that second copy of the jQuery library being loaded on top.

The website page source shows it sitting in the ( footer ), as dictated by the ( true ) statement in the enqueuing code, .. with the PHP function ( writeOn_my_plugin_scripts ) being gainfully employed above.


Solution number two:-

Here’s the official solution that I eventually stumbled across, (that I also easily found), but only after I knew what I was looking for, and all by using a simple Google search string. “calling a JS function from inside a jQuery file.” It alone led me to [ How to call JavaScript function inside jQuery ] on stackoverflow, but you need to dig down into the responses to find it explained factually.

Shown below, is a standard jQuery block of stuff, ..
Freely using the ubiquitous ( $ ) as an identifier, that also uses normal JavaScript functions: functions that are hidden when surrounded with the ( $  ) braces { }.

As I say, its Logical Captain!

start of vanilla JS file ..

$(document).ready(function()
{
$("#Submit1").click(function() {
$("#id1").hide();
// You can call the normal JS function here should you so wish.
the_normal_js_function();
});

$("#Raise").click(function()
{
$("#id1").show();
} );
} );
// Take note: the beloved ( $ ) thing is closed [ off ] here ..

// below is the ordinary normal vanilla JS code.
function the_normal_js_function()
{
var value1;
alert("hi");
value1 = document.getElementById("amount").value;
alert(value1);
alert("done");
}

end of vanilla JS file ..

Epilogue.

Three funking days that’s taken me, with even seeing me laying in bed wide awake, whilst blearily reading my phone-screen, and all this at two in the morning; unable to switch off, but I’m finally switched on now.

 

Thanks for reading, Jessica: Praise be the ORI.

 

Information.

email icon This is my email address.



Your message may get put into the spam folder if my internet provided thinks it a bit phishy. So as an alternative — you can also use shopper@b92.co.uk if you so wish.

** This particular email address declared above, has positively and absolutely no spam filters on it, (at all), which means that positively and absolutely *everything* gets through.

Thanks for seeking me out, Jessica:
Praise be the ORI.

Information.

Disclaimer:-
The stuff found here in the Nexus is for amusement purposes only, and I guarantee that none of it is fit for purpose.

SO! – With that Pop-up popped up and properly put to bed, then the legal garbage is outta’ of the way.

Thanks for reading the trash, Jessica:
Praise be the ORI.

WARNING!

To view this website, you must be considered as an ADULT (with legal consent) in your current location to proceed any further.

Failure to comply, could result in a criminal prosecution (within the local domicile) that you physically reside.

This book site isn't for children, nor any childish attitudes towards sexual ambivalence. It is for -- ADULTS ONLY!

Pressing [ No! ] - Will take you away, to another type of less salubrious activity that's more suited to your young tender age (and/or) delicate disposition.

Only press [ YES! ] - If you understand these legally binding terms and conditions. Whereby, a one year cookie will be set on your browser: thusly declaring you to be an adult, (a constitutional time-Warrior), with all of your timely facilities intact.

It's a big decision that you're about to undertake coder, choose wisely: because you can never go back.