Call   0208 3131682   Mon-Fri 9am-6pm
Category

Javascript

Use anonymous functions sparingly

By | Javascript, Programming Tips and Best Practices | No Comments

This is the first of a bunch of posts I’m going to write on programming tips and best practices.

This one is about Anonymous functions ( a sometimes useful technique if your going to use in one place and throw away ). 

And thats all well and good, however these make code more difficult to understand ( especially large code bases you need to maintain ).

For example imagine some code you need to maintain, lets say it starts off with a long file you need to read through and get a high level understanding of. If its littered with anonymous functions it’s makes it hard to understand (quickly, quickly being the operative word, we’re busy people after all with lots of a new features the boss wants to add).

Is this easier to understand (approach 1)

 

Than this

 

It’s quicker and easier to read and understand the 2nd code ( we don’t even need to read the function ‘toggleDisplayOfControls’ because from its name it’s obvious what it does).

To take this one step further we can nicely comment the function (toggleDisplayOfControls) at the top ( as is standard ) if needed (in my experience anonymous functions are rarely commented).

 

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Adding javascript functions to Laravel Mix ( and why you get error Uncaught ReferenceError: function is not defined )

By | Javascript, Laravel, Programming | No Comments

This one had me pulling my hair out the other day. I was using Laravel,  adding a javascript function to the app.js file ( also tried using require in app.js and pulling in my function ). Laravel uses Laravel Mix which is a wrapper for webpack.

Yet with either approach I was getting the javascript error:

Uncaught ReferenceError: testing_helloworld is not defined

It seemed to be working ( had npm run watch , compiling it and doing a view source I could see the function in my javascript app.js file ).

My function source code looked like this:

It seems webpack wraps this in IIFE (see details on mozilla site )

This has the effect of wrapping it in its own scope ( and not in the global scope ).

So to put it in the global scope, so you can call it anywhere, you need to pop the function onto a global such as Window as below:

thanks stack overflow ! 

I’d have read through my app.js file , but it was massive and would have taken me awhile to find this I think ! Hope this helps someone else with Laravel Mix, Webpack and adding your own javascript functions.

 

 

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

How to add a form to a shortcode in WordPress (using PHP and Ajax)

By | Ajax, HTML, Javascript, online forms, Wordpress | No Comments

Recently I needed to develop a Shortcode that would display a form, this blog post details what I did. I used Ajax ( which seems the best way to add forms to shortcodes, but I’d welcome any input from other developers on your approach).

So without further ado lets get on with adding a form to a shortcode in WordPress.

We need javascript to handle submission of the form via ajax (this presumes you have jquery available), and handle the response from the server. green_form is the form id.

 

Next we need the php to handle everything else, you could put this in functions.php (or include from functions.php) or put it into a plugin. The shortcode to include the form in our page or post is [shortcode_with_form] 

The code handles:

  • the output of the shortcode
  • the server side processing of the form (I’ve just created a stub in this example ( function do_something_serverside )
  • and the including of javascript file required ( if you’d like to know abit depth on ajax forms in WordPress see my post on that )
 

Hope you find this interesting if you’re looking to add a form to a shortcode.

 

 

 

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

How to do Ajax in WordPress

By | Ajax, Javascript, Web Design, Wordpress | No Comments

updated 10th Jan 2018

Write a javascript function to trigger the ajax call

Put js above in my_js_file.js (see later in this post).

Wrap in code below for nice loading:

jQuery( document ).ready(function() {    put above code here     });

To see how to send a form via ajax see here.

 

Write a php function to handle the ajax call (you could put this in functions.php)

 

There is one final piece, you might notice the ajax_object.ajax_url in the Javascript function above. We need to make this available in the js file that this function is in. This needs to be done in php.

Include ajax_url like this (below)

 

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.