Testing Template

<?php
/**
 * The template for displaying all pages
 * Template Name: testing
 */

get_header(); ?>
<span class='successMessage'>Success</span><br/>
<span class='errorMessage'>Error</span><br/>
<span class='processing'>Processing .. Please Wait ... </span><br/>

<div class="container" style='margin-top:100px'>

  <!--div class="VailuLine">THE COMPLETION OF THIS COURSE <span>0%</span></div-->
  <div class="CollapseBox">
    <div class="row">

        <!----------------- Show all categories --------------------------->
        <div class='' id='allCategories'>

        <?php
            $user_id = get_current_user_id();
            $meta_key_val = get_user_meta($user_id, 'cats');
            if(is_array($meta_key_val)){ p($meta_key_val);
                foreach($meta_key_val[0] as $catId){
                    //p($catId);
                    //global $catId;
                    get_template_part( 'content', 'new-category' );
                }
            }
        ?>

        </div>
        <!----------------- Add new category ------------------------------>
        <form name='categories_create' id='categories_create' method='post'>

            <input name='addCatText' id='addCatText' class='hide' >
            <span class='errorMsg'></span><br/>

            <a class="addCat" id='addCat' href="javascript:void(0)">ADD new category</a>

        </form>


        <script>

            jQuery().ready(function($){

            // Fire Messages
                function flash(msg,mType){
                    if(typeof mType !='undefined' && mType == 'success'){
                        $('.successMessage').html(msg).slideDown();
                        setTimeout(function(){ $('.successMessage').slideUp(); },3000);
                    }
                    else if(typeof mType !='undefined' && mType == 'error'){
                        $('.errorMessage').html(msg).slideDown();
                        setTimeout(function(){ $('.errorMessage').slideUp(); },3000);
                    }
                }

                // Add New Category
                    $('#addCat').click(function(){
                        if($('#addCatText').is(':visible')){
                            $('#categories_create').submit();
                        }else{
                            $('#addCatText').slideDown().removeClass('hide');
                        }
                    });
                    // Submit category form
                    $('#categories_create').submit(function(){


                            if($('#addCatText').val()==''){
                                $('#addCatText').next('span.errorMsg').html('Please fill category name.');
                                flash('Please fill category name.','error');
                            }else{
                                $('#addCatText').next('span.errorMsg').html('');
                                var addCatText = $("#addCatText").val();
                                $.ajax({
                                    type: 'POST',   // Adding Post method
                                    url: my_js_data.ajaxurl, // Including ajax file
                                    data: {"action": my_js_data.action, "addCatText":addCatText}, // Sending data dname to post_word_count function.
                                    beforeSend: function(){
                                        $('.processing').show();
                                    },
                                    success: function(data){ // Show returned data using the function.
                                        $('.processing').fadeOut();
                                        console.log(data);
                                        var allData = $.parseJSON(data);
                                        flash(allData.msg,allData.result);
                                        //newlyAddedCategory(allData.newCategoryId,allData.newCategoryName)

                                    }
                                });
                            }

                        return false;
                    });



            });
        </script>

        </div>
    </div>
</div>
<style>
.hide{ display:none; }
.errorMsg{ color:red; }
.successMessage {background: #fdc73b none repeat scroll 0 0;color: #000;font-size: 25px;height: 60px;opacity: 0.95;padding-top: 10px;position: fixed;text-align: center;top: 0;width: 100%;z-index: 999999; display:none}
.errorMessage {background: #ff1125 none repeat scroll 0 0;color: #fff;font-size: 25px;height: 60px;opacity: 0.95;padding-top: 10px;position: fixed;text-align: center;top: 0;width: 100%;z-index: 999999; display:none}
.processing {background: #a6a3b1 none repeat scroll 0 0;color: #fff;font-size: 25px;height: 60px;opacity: 0.95;padding-top: 10px;position: fixed;text-align: center;top: 0;width: 100%;z-index: 999999; display:none}
</style>
<?php
get_footer();