WrenchBoardDocker/application/views/users/view_yourpage.php

<!-- Main content -->
<div class="content-wrapper">
    <?php include('common/userstrip.php'); ?>
    <!-- Marketing campaigns -->
    <div class="row">
        <div class="col-md-9">            
            <div class="panel panel-flat">
                <div class="panel-heading"> 

                    <form method="POST" action="/member/yourpage" name='updatedescription'>
                        <div class="form-group"> <b>Describe Yourself :</b></div>
                        <div class="form-group">
                            <textarea rows="3" cols="5" class="form-control" name='description' placeholder="Your best professional description" onkeydown="textCounter(this, this.form.remLen, 500);" onkeyup="textCounter(this, this.form.remLen, 500);"><?php echo $description; ?></textarea>                              
                        </div>

                        <div class="form-group"> 
                            <div class="text-left">
                                Characters left <input type="text" name="remLen" id="remLen" value="<?php echo 500 - strlen($description) ?>" style="border:none">
                            </div>
                            <div class="text-right">
                              <?=$update_message?>  <button type="submit" name='your_description' value='your_description' class="btn btn-primary btn-xs">Update </button>
                            </div>                         

                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-3">            
            <div class="panel panel-flat" style="text-align: center;">
               <img src="<? echo $_SESSION['profile_picture']; ?>" class="img-circle img-responsive" alt="">
                <br><hr size="1">
                <a href="/member/picture" class="btn btn-outline-info btn-xs" >Change  Picture</a>

            </div>
        </div>
    </div>


    

    <div class="row"> 
        <div class="panel panel-flat">
            <div class="panel-body">   
                <div class="form-group">
                    <b>your Online Gallery or Resume[Complete URL] </b>
                </div>        

                <form method="POST" action="#" id="galleryform" name='galleryform'>

                    <div class="form-group"> 
                        <div class="col-lg-2">
                            []
                        </div>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name='gallery' maxlength="150" value=''> 
                        </div>
                        <div class="col-lg-2">
                            <div id="galmsg"></div> <button type="submit" id='gal' onclick="saveGallery('ADD',0);" class="btn btn-info btn-xs">Add </button>
                        </div>
                    </div>
                </form>          

           

            </div>
            
            
                        <div class="panel-body">   
              
                <div class="form-group">
                   <?=$galery_list?>
                </div>

            </div>
            
        </div>
    </div>



    <div class="panel panel-flat" style="height: 510px;">
        <div class="panel-body">   


            <div class="col-md-5 col-md-offset-1" >
                <form id="skillform" name="skillform" action="">

                    <div class="form-group">     
                        <b>Skills :</b>                     
                        <table style="width: 100%;" class="table-responsive" >
                            <tr>
                                <td><?php echo $skill_combo; ?></td>
                                <td><?php echo $skill_types; ?></td>
                                <td style="width: 50px;"><button id="add_skill" class="btn btn-info btn-xs">Add</button></td>
                            </tr>
                        </table>  


                    </div>

                </form>
                <b>Your Selection(s)[Max 6]:</b>
                <div id="save_skill_result" class="form-group"><?= $member_skills ?></div>  
            </div>        

            <div class="col-md-5 col-md-offset-1">


            </div>
        </div>
    </div>
</div>
<!-- /main content -->
<script type="text/javascript">
<!--
    var skill_categories = {};
<? foreach ($skill_types_data as $skill_category => $skill_types) { ?>
        skill_categories[<?= $skill_category ?>] = {
    <?
    $i = 0;
    foreach ($skill_types as $id => $skill) {
        ?>
        <?= $i > 0 ? ',' : '' ?>'<?= $id ?>': '<?= str_replace("'", "\\'", stripslashes($skill)) ?>'
        <?
        $i++;
    }
    ?>};
<? } ?>

    $(document).ready(function () {
        $("#skillform select[name=skill_combo]").change(function () {
            var val = $(this).val();
            if (val < 1) {
                return false;
            }
            var skills = skill_categories[val];
            var skill_type = $("#skillform select[name=skill_type_combo]");
            skill_type.html("");
            $.each(skills, function (index, value) {
                skill_type.append($("<option>", {value: index, html: value}));
            });
        });
        $("#add_skill").click(function () {
            $(this).prop('disabled', true);
            var skill_combo = $("#skillform select[name=skill_combo]").val();
            var skill_type = $("#skillform select[name=skill_type_combo]").val();
            $.ajax({
                url: "/member/saveuserskill?skill_combo=" + skill_combo + "&skill_type_combo=" + skill_type
            }).done(function (data) {
                $('#save_skill_result').html(data);
                $('#add_skill').prop('disabled', false);
            });
            return false;
        });
    });
// -->
</script>


<script type="text/javascript">
<!--

    function saveGallery(proc, galleryid) {

           if (confirm("Are you sure you want to add this gallery to your profile ?")) {
         // do something
         } else {
         return false;
         }
        
        var gallery = document.galleryform.gallery.value;

        //alert( gallery );

        $('#gal').prop('disabled', true);
        $.ajax({
            url: "/member/addgallery?proc=" + proc + "&gallery=" + gallery + "&galleryid=" + galleryid
        }).done(function (data) {
            $('#galmsg').html(data);
            $('#gal').prop('disabled', false);
        });
        return false;
    }

    function delAccountSkill(interest_id) {

        if (confirm("Are you sure you want to remove this skillfrom your profile ?")) {
// do something
        } else {
            return false;
        }

        //$('#req_completion').html('Processing...');
        //$('#req_completion_submit').prop('disabled', true);
        $('#del_acc' + interest_id).prop('disabled', true);
        $.ajax({
            url: "/member/deleteskill?proc=ACCEPT&savedskill_id=" + interest_id
        }).done(function (data) {
            $('#deldiv' + interest_id).html(data);
            $('#del_acc' + interest_id).prop('disabled', false);
        });
        return false;
    }

    function textCounter(field, countfield, maxlimit) {
        if (field.value.length > maxlimit) // if too long...trim it!
            field.value = field.value.substring(0, maxlimit);
        // otherwise, update 'characters left' counter
        else
            countfield.value = maxlimit - field.value.length;
    }
// -->
</script>