Javascript Archives - Freelance Full Stack Developer in London, UK

Dec 01

Javascript – How to monitor a Change Event in Chrome

Today I needed to see what javascript was triggered on a change event (when a checkbox was clicked), my go to for seeing what event is triggered is Chrome (Event Listener Breakpoints).

I selected mouse click ( as the change was on the click of a checkbox), nothing nada.

I added this to the console to give me some info about the change event:

monitorEvents(window [“change”])

Maybe there’s a better way, if anyone reads this and has a better way it would be great to know !

Reference

https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel

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.

Jun 12

Laravel ajax calls failing with response code 419

By louie171 | Ajax, Laravel, PHP | No Comments

Recently I was working on a Laravel application with some ajax, and I was getting a 419 error after firing an Ajax call to a Laravel controller.

Laravel requires a token to be sent on some types of requests (POST being one of them), this is to prevent Cross site request forgery ( e.g. a form being submitted from somewhere it was intended by the developer to be submitted from ).

In php files its very easy to add this with the function call csrf_field().

But in js files, we need to essentially pull in this you store the token somewhere on the page and use js to pull it in.

            $.ajax({
                url: "/letutools/property/imagedelete",
                type: 'post',
                data: {
                    '_token': $('meta[name="csrf-token"]').attr('content'),                    
                    'name': 'name' /* other data */
                    
                    
                }
            });

$.ajax({

url: "/letutools/property/imagedelete",

type: 'post',

data: {

'_token': $('meta[name="csrf-token"]').attr('content'),

'name': 'name' /* other data */

}

});

you can pop the token in the page somewhere like this:

<meta name="csrf-token" content="{{ csrf_token() }}">

1	<meta name="csrf-token" content="{{ csrf_token() }}">

for reference: https://laravel.com/docs/5.5/csrf

May 27

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

By louie171 | 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.

jQuery( document ).ready(function() {
    // Handler for .ready() called.
    
    
    //
    jQuery(function(){
        jQuery("#green_form").submit(function(event){
            event.preventDefault();
            
            var formOk = true;
            
            // do js validation 
   
            jQuery.ajax({
                url:ajax_object.ajax_url,
                type:'POST',
                data: jQuery(this).serialize() + "&action=green_do_something",
                success:function(response){
                    
                        
                    if(response=="true")
                    {
                       // do something
                    }
                    else{
                        
                        alert('doh something went wrong'); 
                    }
                       

                }

            });
        });
    });


});

jQuery( document ).ready(function() {

// Handler for .ready() called.

jQuery(function(){

jQuery("#green_form").submit(function(event){

event.preventDefault();

var formOk = true;

// do js validation

jQuery.ajax({

url:ajax_object.ajax_url,

type:'POST',

data: jQuery(this).serialize() + "&action=green_do_something",

success:function(response){

if(response=="true")

{

// do something

}

else{

alert('doh something went wrong');

}

});

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 )

$greenShortyExample = new GreenShortyExample(); 

class GreenShortyExample {


    public function __construct() {

        $this->attach_actions();

        $this->attach_shortcodes();
    }

    function attach_actions() {



        add_action('wp_ajax_nopriv_green_do_something', array($this, 'do_something_serverside'));
        add_action('wp_ajax_green_do_something', array($this, 'do_something_serverside')); /* notice green_do_something appended to action name of wp_ajax_ */


        add_action('wp_enqueue_scripts', array($this, 'theme_enqueue_styles'), 99999);
    }

    function theme_enqueue_styles() {

        /*
         * include the js
         */

        wp_enqueue_script('green-script', plugin_dir_url(__FILE__) . '../js/ajax_call_to_handle_form_submit.js', array('jquery'));

        // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
        wp_localize_script('green-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234));
    }

    function do_something_serverside() {
        
        echo "true";  // output to ajax call        
        die();
       
    }


    function attach_shortcodes() {


        add_shortcode('shortcode_with_form', array($this, 'shortcode_with_form_code'));
    }

    function shortcode_with_form_code($atts, $content = null) {

        if ($this->formOk()) {
            return " <div>thanks your form has been submitted</div>";
        } else {
            return $this->show_form();
        }
    }

    function show_form() {

        $form = '
            
       
        <form id="green_form" action="">
        

          
          field1:<br>
          
          <input type="text" name="field1" value="">
          <br>
          
          field2:<br>
          
          <input type="text" name="field2" value="">
          <br>
          
          <br>
          <input type="submit" value="Submit" >
          
        </form> 
        
      


';

        return $form;
    }

    
    function formOk(){
        
        
        return true; // use session or something to check
        
    }
}

$greenShortyExample = new GreenShortyExample();

class GreenShortyExample {

public function __construct() {

$this->attach_actions();

$this->attach_shortcodes();

}

function attach_actions() {

add_action('wp_ajax_nopriv_green_do_something', array($this, 'do_something_serverside'));

add_action('wp_ajax_green_do_something', array($this, 'do_something_serverside')); /* notice green_do_something appended to action name of wp_ajax_ */

add_action('wp_enqueue_scripts', array($this, 'theme_enqueue_styles'), 99999);

}

function theme_enqueue_styles() {

* include the js

wp_enqueue_script('green-script', plugin_dir_url(__FILE__) . '../js/ajax_call_to_handle_form_submit.js', array('jquery'));

// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value

wp_localize_script('green-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234));

}

function do_something_serverside() {

echo "true"; // output to ajax call

die();

}

function attach_shortcodes() {

add_shortcode('shortcode_with_form', array($this, 'shortcode_with_form_code'));

}

function shortcode_with_form_code($atts, $content = null) {

if ($this->formOk()) {

return " <div>thanks your form has been submitted</div>";

} else {

return $this->show_form();

}

function show_form() {

$form = '

field1:<br>

<br>

field2:<br>

<br>

</form>

return $form;

}

function formOk(){

return true; // use session or something to check

}

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

Oct 19

How to do Ajax in WordPress

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

updated 10th Jan 2018

Write a javascript function to trigger the ajax call

    jQuery('#button_or_something').on("click", function() {
            
     
        jQuery.ajax({
            url: ajax_object.ajax_url,
            data: {
                action: 'like_or_not',  /* this is appended to add_action on server side */
                id: '99'
            },
            type: 'GET',
            success:function(response){
                //alert('back from ajaxe '+response);
                
                /* if you want to update something based on the response text */                        
                jQuery('#gb_div_to_update').html(response);        
            
                       

            }




        });
            
		
    });

jQuery('#button_or_something').on("click", function() {

jQuery.ajax({

url: ajax_object.ajax_url,

data: {

action: 'like_or_not', /* this is appended to add_action on server side */

id: '99'

type: 'GET',

success:function(response){

//alert('back from ajaxe '+response);

/* if you want to update something based on the response text */

jQuery('#gb_div_to_update').html(response);

}

});

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)

add_action('wp_ajax_nopriv_like_or_not', 'green_like_or_unlike');   
add_action('wp_ajax_like_or_not', 'green_like_or_unlike'); /* notice like_or_unlike appended to action name of wp_ajax_ */


function green_like_or_unlike() {

    
   echo "hitting the php function ok";
   die(); // gets rid of the 0 at the end of ajax response
    
    
}

add_action('wp_ajax_nopriv_like_or_not', 'green_like_or_unlike');

add_action('wp_ajax_like_or_not', 'green_like_or_unlike'); /* notice like_or_unlike appended to action name of wp_ajax_ */

function green_like_or_unlike() {

echo "hitting the php function ok";

die(); // gets rid of the 0 at the end of ajax response

}

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.

wp_localize_script( 'green-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

1 2	wp_localize_script( 'green-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

Include ajax_url like this (below)

function theme_enqueue_styles() {

    /*
     * include the js
     */

    wp_enqueue_script('green-script', get_stylesheet_directory_uri() . '/my_js_file.js', array('jquery'));

        
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
	wp_localize_script( 'green-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    
    
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

function theme_enqueue_styles() {

* include the js

wp_enqueue_script('green-script', get_stylesheet_directory_uri() . '/my_js_file.js', array('jquery'));

// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value

wp_localize_script( 'green-script', 'ajax_object',

array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Javascript Archives - Freelance Full Stack Developer in London, UK

Javascript – How to monitor a Change Event in Chrome

Laravel ajax calls failing with response code 419

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

How to do Ajax in WordPress

Write a javascript function to trigger the ajax call

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

Include ajax_url like this (below)

Archives

Find it here

Fresh from the blog

Recent Comments

Javascript Archives - Freelance Full Stack Developer in London, UK

Javascript – How to monitor a Change Event in Chrome

Laravel ajax calls failing with response code 419

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

How to do Ajax in WordPress

Write a javascript function to trigger the ajax call

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

Include ajax_url like this (below)

Archives

Tags

Find it here

Tag Cloud

Fresh from the blog

Recent Comments

Tags