Light, custom CMS for a site

Question

I'm working on a light, custom CMS for my site and I am trying to use Ajax calls for most of the server-side interaction. I am still pretty new to web development, so if I am breaking any conventions please let me know. I'm building it within Codeigniter (PHP framework).

Right now I have all of my Ajax functions in one file. In my opinion, the code looks really sloppy, but I don't really know what I need to do in order to make it better. I am referencing elements and their sub-elements by unique ids that I am assigning and I'm sure I could be doing it better.

function removeA(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}

function editPost(id, title){
    $('#mainOptions_' +id).hide();

    var title = $('#post_' + id + ' h3').html();
    $('#post_' + id + ' h3').html("<label for='titleInput_"+id+"'>Title</label><input id='titleInput_"+id+"' type='text' value='"+title+"'>");

    var date = $.datepicker.formatDate( "mm/dd/yy", new Date($('#unix_date_' + id).val()*1000) );
    $('#post_' + id + ' h4').html("<label for='datepicker_"+id+"'>Date</label><input id='datepicker_"+id+"' type='text' value='"+date+"'>");
    $('#datepicker_' +id).datepicker();
    $('#datepicker_'+id).datepicker("setDate", date);

    var content = $('#content_' + id).html();
    $('#content_' + id).hide();
    $('#post_' + id).append("<div id='contentEditCon_"+id+"'><label for='contentInput_"+id+"'>Content</label><textarea class='contentField' id='contentInput_"+id+"'>"+content+"</textarea></div>");

    $('#post_' + id).append("<div id='editOptions_"+id+"'><div class='row'><div class='small-6 columns'><a href='#' onclick='submitEditPost("+id+"); return false;'><button class='small success button' onclick>Submit Edits</button></a></div><div class='small-6 columns'><a href='#' onclick='cancelPost("+id+", &quot;"+title+"&quot;); return false;'><button class='small alert button' onclick>Cancel Edits</button></a></div></div></div>");   
}

function cancelPost(id, title){
    if(id=="new"){  
        $("#post_new").hide();

        $("#contentInput_new").removeAttr("value");

        $('#contentEditCon_new').removeAttr("value");

        $('#datepicker_new').removeAttr("value");
        $('#datepicker_new').datepicker( "destroy" );
        return; 
    }

    $('#mainOptions_'+ id).show();
    $('#post_' + id + ' h3').html(title);

    $("datepicker_" + id).datepicker( "destroy" );
    var date = $.datepicker.formatDate( "D M dd, yy", new Date($('#unix_date_' + id).val()*1000) );
    $('#post_' + id + ' h4').html(date);

    $('#contentEditCon_' + id).remove();
    $('#content_' + id).show();

    $('#editOptions_'+ id).remove();
}

function addNewPost(){

    $("#post_new").show();
    var date = $.datepicker.formatDate( "mm/dd/yy", new Date());
    $('#datepicker_new').datepicker();
    $('#datepicker_new').datepicker("setDate", date);
}
function submitEditPost(id){

    var title = $('#titleInput_' + id).val();

    var date = $('#datepicker_' + id).val();
    var dateString = date + " 00:00:00";
    var unix_date = Date.parse(dateString)/1000;

    var content = $('#contentInput_' + id).val();

    var time_edited =  Math.round(new Date().getTime()/1000);

    var future;
    if(unix_date>time_edited){future=1;}
    else{future=0;}

    if(title==""){alert("This post has a blank title."); return;}
    else if(content==""){alert("This post has no content."); return;}

    var formData = new FormData();
    formData.append('title', title);
    formData.append('date', unix_date);
    formData.append('content', content);
    formData.append('time_edited', time_edited);
    formData.append('future', future);

    $.ajax({
            url: '/admin/editPost/' + id,
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data, textStatus, jqXHR) {                                     
                console.log("response: " + data + " || status: " + textStatus);
                contents= $("#post_"+id).html();
                $("#post_"+id).html(data);
                $('#post_'+id).animate({opacity: 0}, 3000, function(){
                    $('#post_'+id).css("opacity", 1);
                    $("#post_"+id).html(contents);

                    $('#editPostButton_'+ id).show();
                    $('#post_' + id + ' h3').html(title);

                    $("datepicker_" + id).datepicker( "destroy" );
                    $('#post_' + id + ' h4').html(date);

                    $('#contentEditCon_' + id).remove();
                    $('#content_' + id).html(content);
                    $('#content_' + id).show();

                    $('#editOptions_'+ id).remove();
                });                
            },
            error: function(jqXHR, textStatus, errorThrown) {
                    console.log("error: " + errorThrown + " || status: " + textStatus );
                    alert("There was a problem editing that post, please try again later.");
            }

    });
}

function submitNewPost(){

    var copy = '<div class="panel" id="post_new" style="display: none;">'  + $('#post_new').html() + '</div>';

    var title = $('#titleInput_new').val();

    var date = $('#datepicker_new').val();
    var dateString = date + " 00:00:00";
    var unix_date = Date.parse(dateString)/1000;

    var content = $('#contentInput_new').val();

    var time_edited =  Math.round(new Date().getTime()/1000);

    var future;
    if(unix_date>time_edited){future=1;}
    else{future=0;}

    console.log(title + ", " + typeof(title));
    console.log(content + ", " + typeof(content));
    if(title==""){alert("This post has a blank title."); return;}
    else if(content==""){alert("This post has no content."); return;}

    var formData = new FormData();
    formData.append('title', title);
    formData.append('date', unix_date);
    formData.append('content', content);
    formData.append('time_edited', time_edited);
    formData.append('future', future);
    formData.append('time_added', time_edited);

    $.ajax({
        url: '/admin/newPost/',
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data, textStatus, jqXHR) {
            console.log("response: " + data + " || status: " + textStatus);
            $("#post_new").html(data);
            $('#post_new').animate({opacity: 0}, 3000, function(){
                $("#post_new").hide();

                $("#contentInput_new").removeAttr("value");

                $('#contentEditCon_new').removeAttr("value");

                $('#datepicker_new').removeAttr("value");
                $('#datepicker_new').datepicker( "destroy" );
            });

        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("error: " + errorThrown + " || status: " + textStatus );
            alert("There was a problem uploading the post, please try again later.");
        } 

    });
}

function deletePost(id){
    $.ajax({
        url: '/admin/deletePost/' + id,
        processData: false,
        contentType: false,
        type: 'GET',
        success: function(data, textStatus, jqXHR) {
            console.log("response: " + data + " || status: " + textStatus);
            $("#post_" + id).html(data);
            $('#post_' + id).animate({opacity: 0}, 3000, function(){
                $("#post_" + id).remove();
            });

        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("error: " + errorThrown + " || status: " + textStatus );
            alert("There was a problem deleting the post, please try again later.");
        } 

    }); 
}

/*** Event ***/
function addNewEvent(){

    $("#event_new").show();
    var date = $.datepicker.formatDate( "mm/dd/yy", new Date());
    $('#datepickerEvent_new').on("click", function() {
        $('#datepickerEvent_new').datepicker();
        $('#datepickerEvent_new').datepicker("setDate", date);
    });
}

function cancelEvent(id, title){
    if(id=="new"){  
        $("#event_new").hide();

        $("#aboutInput_new").removeAttr("value");

        $('#aboutEditCon_new').removeAttr("value");

        $('#datepickerEvent_new').removeAttr("value");
        $('#datepickerEvent_new').datepicker( "destroy" );
        return; 
    }

    $('#mainOptionsEvent_'+ id).show();
    $('#event_' + id + ' h3').html(title);

    $("datepickerEvent_" + id).datepicker( "destroy" );
    var date = $.datepicker.formatDate( "D M dd, yy", new Date($('#unix_date_event_' + id).val()*1000) );
    $('#event_date_' + id).html("Date: "+date);

    $('#aboutEditCon_' + id).remove();
    $('#about_' + id).show();

    $('#editOptionsEvent_'+ id).remove();

    $('#capacity_' + id).show();

    $('#location_' +id).show();

    $('#guests_' + id).show();

    $('#guestsEditCon_'+id).remove();

    $('#photoEdit_' +id).remove();
    $('#photoDisplay_' +id).show();

    $("label[for='capacityInput_"+id+"']").remove();
    $("#capacityInput_"+ id).remove();

    $("label[for='locationInput_"+id+"']").remove();
    $("#locationInput_"+ id).remove();
}

function editEvent(id, title){
    $('#mainOptionsEvent_' +id).hide();

    var title = $('#event_' + id + ' h3').html();
    $('#event_' + id + ' h3').html("<label for='titleEventInput_"+id+"'>Title</label><input id='titleEventInput_"+id+"' type='text' value='"+title+"'>");

    var date = $.datepicker.formatDate( "mm/dd/yy", new Date($('#unix_date_event_' + id).val()*1000) );
    $('#event_date_' + id).html("<label for='datepickerEvent_"+id+"'>Date</label><input id='datepickerEvent_"+id+"' type='text' value='"+date+"'>");
    $('#datepickerEvent_'+id).on("click", function() {
        $('#datepickerEvent_'+id).datepicker();
        $('#datepickerEvent_'+id).datepicker("setDate", date);
    });

    var capacity = $('#capacity_' + id).attr("value");
    $('#capacity_' + id).hide();
    $('#capacity_' + id).after("<label for='capacityInput_"+id+"'>Capcity</label><input id='capacityInput_"+id+"' type='text' value='"+capacity+"'>");

    var location = $('#location_' + id).attr("value");
    $('#location_' + id).hide();
    $('#location_' + id).after("<label for='locationInput_"+id+"'>Location</label><input id='locationInput_"+id+"' type='text' value='"+location+"'>");

    var content = $('#about_' + id).html();
    $('#about_' + id).hide();
    $('#about_' + id).after("<div id='aboutEditCon_"+id+"'><label for='aboutInput_"+id+"'>Content</label><textarea class='contentField' id='aboutInput_"+id+"'>"+content+"</textarea></div>");

    $('#photoDisplay_' +id).hide();
    $('#photoDisplay_' +id).after("<a id='photoEdit_" +id+"' href='#' onclick='pickEventPhoto(&quot;" + id + "&quot;); return false;'><button class='small secondary button firstEl'>Upload a new Picture</button></a>");

    $('#guests_' + id).hide();

    $('#guestsEditCon_' + id).after("<div id='editOptionsEvent_"+id+"'><div class='row'><div class='small-6 columns'><a href='#' onclick='submitEditEvent("+id+"); return false;'><button class='small success button' onclick>Submit Edits</button></a></div><div class='small-6 columns'><a href='#' onclick='cancelEvent("+id+", &quot;"+title+"&quot;); return false;'><button class='small alert button' onclick>Cancel Edits</button></a></div></div></div>");    
}

function deleteGuest(name, id, eventid){
    var guest_list = $('#guest_list_' + eventid).val().split(",");
    $('#guest_list_' + eventid).val(removeA(guest_list, name));
    $.ajax({
        url: "/event/deleteGuest/" + id + "/" + eventid,
        processData: false,
        contentType: false,
        type: 'GET',
        statusCode: {
           500: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.responseText);
           }
       },
       success: function(data, textStatus, jqXHR) {
           console.log("data: " + data +  " jqXHR: " + jqXHR);
       }
    });
    $( '#' + eventid +'_'+ id ).parent("tr:first").remove()

}

function submitEditEvent(id){

    var title = $('#titleEventInput_' + id).val();

    var date = $('#datepickerEvent_' + id).val();
    var dateString = date + " 00:00:00";
    var unix_date = Date.parse(dateString)/1000;

    var about = $('#aboutInput_' + id).val();

    var location = $('#locationInput_' + id).val();

    var capacity = $('#capacityInput_' + id).val();

    var time_edited =  Math.round(new Date().getTime()/1000);

    var photo = $('#photo_' + id).val();

    var future;
    if(unix_date>time_edited){future=1;}
    else{future=0;}

    if(title==""){alert("This post has a blank title."); return;}
    else if(about==""){alert("This post has no about."); return;}
    else if(capacity==""){alert("The capacity was not valid."); return;}
    else if(location==""){alert("There was location."); return;}
    else if(date==""){alert("The date was invalid"); return;}

    var formData = new FormData();
    formData.append('title', title);
    formData.append('date', unix_date);
    formData.append('about', about);
    formData.append('future', future);
    formData.append('location', location);
    formData.append('capacity', capacity);
    formData.append('photo', photo);

    $.ajax({
            url: '/admin/editEvent/' + id,
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data, textStatus, jqXHR) {                                     
                console.log("response: " + data + " || status: " + textStatus);
                contents= $("#event_"+id).html();
                $("#event_"+id).html(data);
                $('#event_'+id).animate({opacity: 0}, 3000, function(){
                    $('#event_'+id).css("opacity", 1);
                    $("#event_"+id).html(contents);

                    $('#mainOptionsEvent_'+ id).show();
                    $('#event_' + id + ' h3').html(title);

                    $("datepickerEvent_" + id).datepicker( "destroy" );
                    var date = $.datepicker.formatDate( "D M dd, yy", new Date($('#unix_date_event_' + id).val()*1000) );
                    $('#event_date_' + id).html("Date: "+date);

                    $('#aboutEditCon_' + id).remove();
                    $('#about_' + id).html(about);
                    $('#about_' + id).show();

                    $('#editOptionsEvent_'+ id).remove();

                    $('#capacity_' + id).html("Capacity: " + capacity);
                    $('#capacity_' + id).show();

                    $('#location_' +id).html("Location: " + location);
                    $('#location_' +id).attr("value", location);
                    $('#location_' +id).show();

                    $('#guests_' + id).show();

                    $('#guestsEditCon_'+id).remove();

                    $("label[for='capacityInput_"+id+"']").remove();
                    $("#capacityInput_"+ id).remove();

                    $("label[for='locationInput_"+id+"']").remove();
                    $("#locationInput_"+ id).remove();
                });                
            },
            error: function(jqXHR, textStatus, errorThrown) {
                    console.log("error: " + errorThrown + " || status: " + textStatus );
                    alert("There was a problem editing that event, please try again later.");
            }

    });
}

function submitNewEvent(){

    var copy = $('#event_new').html();

    var title = $('#titleEventInput_new').val();

    var date = $('#datepickerEvent_new').val();
    var dateString = date + " 00:00:00";
    var unix_date = Date.parse(dateString)/1000;

    var about = $('#aboutInput_new').val();

    var location = $('#locationInput_new').val();

    var capacity = $('#capacityInput_new').val();

    var time_edited =  Math.round(new Date().getTime()/1000);

    var photo = $('#photo_new').val();

    var future;
    if(unix_date>time_edited){future=1;}
    else{future=0;}

    if(title==""){alert("This post has a blank title."); return;}
    else if(about==""){alert("This post has no about."); return;}
    else if(capacity==""){alert("The capacity was not valid."); return;}
    else if(location==""){alert("There was location."); return;}
    else if(date==""){alert("The date was invalid"); return;}

    var formData = new FormData();
    formData.append('title', title);
    formData.append('date', unix_date);
    formData.append('about', about);
    formData.append('future', future);
    formData.append('location', location);
    formData.append('capacity', capacity);
    formData.append('photo', photo);

    $.ajax({
        url: '/event/newEvenet/',
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data, textStatus, jqXHR) {
            console.log("response: " + data + " || status: " + textStatus);
            $("#event_new").html(data);
            $('#event_new').animate({opacity: 0}, 3000, function(){
                $("#event_new").hide();

                $("#aboutInput_new").removeAttr("value");

                $('#aboutEditCon_new').removeAttr("value");

                $('#datepickerEvent_new').removeAttr("value");
                $('#datepickerEvent_new').datepicker( "destroy" );
            });

        }       
    });
}

Here is the corresponding HTML/PHP:

<div class="tabs-content vertical">
  <div class="content active" id="workshops">
    <div class="row">
        <div class="small-12 columns">
            <div class="small-6 columns">
                <h2 >Upcoming Workshops</h2>
                <a id="addNewPost" href='#' onclick="addNewPost(); return false;"><button class="small buttton">Add New</button></a>
                <div class="panel" id="post_new" style="display: none;">
                    <h3><label for='titleInput_new'>Title</label><input id='titleInput_new' type='text' value=''></h3>
                    <a href='#' id='editPostButton_new' onclick='editPost(new, 'testingTest'); return false;' style="display: none;"><button class="small secondary button">Edit this post</button></a>
                    <h4><label for="datepicker_new">Date</label><input id="datepicker_new" type="text" value=""></h4>
                    <div id="content_new" style="display: none;"></div>
                    <div id="contentEditCon_new"><label for="contentInput_new">Content</label><textarea class="contentField" id="contentInput_new"></textarea></div>
                    <div id="editOptions_new">
                        <div class="row">
                        <div class="small-6 columns">
                            <a href="#" onclick="submitNewPost(); return false;"><button class="small success button" >Submit</button></a>
                        </div>
                        <div class="small-6 columns">
                            <a href="#" onclick="cancelPost('new', 'NULL'); return false;"><button class="small alert button" onclick="">Cancel</button></a>
                        </div>
                    </div>
                </div>
                </div>
                <?php if(isset($postsFut)): foreach ($postsFut as $post): ?>
                <div class="panel" id="post_<?php echo $post['id']?>">
                    <h3><?php echo $post['title'] ?></h3>
                    <div id='mainOptions_<?php echo $post['id']?>'>
                        <div class='row'>
                            <div class='small-6 columns'>
                                <a href="#" id="editPostButton_<?php echo $post['id']?>" onclick="editPost(<?php echo $post['id'].", "."'".$post['title']."'"?>); return false;"><button class="small secondary button">Edit this post</button></a>
                            </div>
                            <div class='small-6 columns'>
                                <a href='#' onclick="deletePost(<?php echo $post['id']?>); return false;"><button class='small alert button' onclick>Delete this post</button></a>
                            </div>
                        </div>
                    </div>
                    <h4><?php echo $post['dateReal'] ?></h4>
                    <input type="hidden" id="unix_date_<?php echo $post['id']?>" value="<?php echo $post['date'] ?>">
                    <div id="content_<?php echo $post['id']?>"><?php echo $post['content'] ?></div>
                </div>
                <?php endforeach; endif;?>
            </div>
            <div class="small-6 columns">
                <h2>Past Workshops</h2>
                <?php if(isset($postsPast)): foreach ($postsPast as $post): ?>
                <div class="panel" id="post_<?php echo $post['id']?>">
                    <h3><?php echo $post['title'] ?></h3>
                    <div id='mainOptions_<?php echo $post['id']?>'>
                        <div class='row'>
                            <div class='small-6 columns'>
                                <a href="#" id="editPostButton_<?php echo $post['id']?>" onclick="editPost(<?php echo $post['id'].", "."'".$post['title']."'"?>); return false;"><button class="small secondary button">Edit this post</button></a>
                            </div>
                            <div class='small-6 columns'>
                                <a href='#' onclick="deletePost(<?php echo $post['id']?>); return false;"><button class='small alert button' onclick>Delete this post</button></a>
                            </div>
                        </div>
                    </div>                  <h4><?php echo $post['dateReal'] ?></h4>
                    <input type="hidden" id="unix_date_<?php echo $post['id']?>" value="<?php echo $post['date'] ?>">
                    <div id="content_<?php echo $post['id']?>"><?php echo $post['content'] ?></div>
                </div>
                <?php endforeach; endif;?>
            </div>
        </div>
    </div>
  </div>

<div class="content" id="events">
    <div class="row">

        <div class="small-12 columns">

            <ul class="tabs" data-tab>
                <li class="tab-title active" id="upcomingTab"><a href="#upcoming">Upcoming Events</a></li>
                <li class="tab-title" id="allTab"><a href="#all">All Events</a></li>
            </ul>

            <div class="tabs-content">
              <section role="tabpanel" aria-hidden="false" class="content active" id="upcoming">
                <h2> Upcoming Events </h2>

                <a id="addNewEvent" href='#' onclick="addNewEvent(); return false;"><button class="small buttton">Add New</button></a>

                <div class="panel" id="event_new" style="display: none;">
                    <h3><label for='eventTitle_new'>Title</label><input id='eventTitle_new' type='text' value=''></h3>
                    <a href='#' id='editEventButton_new' onclick='editEvent(new, 'testingTest'); return false;' style="display: none;"><button class="small secondary button">Edit this event</button></a>
                    <h4><label for="datepickerEvent_new">Date</label><input id="datepickerEvent_new" type="text" value=""></h4>
                    <h4><label for="location_new">Location:</label><input id="location_new" type="text" value=""></h4>
                    <h4><label for="capacity_new">Capacity:</label><input id="capacity_new" type="text" value=""></h4>
                    <a id="photoEdit_new" href="#" onclick="pickEventPhoto('new'); return false;"><button class="small secondary button firstEl">Upload a new Picture</button></a><input id="photo_new" type="hidden" value="/public/img/mainBackGood.JPG">
                    <div id="about_new" style="display: none;"></div>
                    <div id="aboutEditCon_new"><label for="aboutInput_new">Content</label><textarea class="aboutField" id="aboutInput_new"></textarea></div>
                    <div id="editOptionsEvent_new">
                        <div class="row">
                        <div class="small-6 columns">
                            <a href="#" onclick="submitNewEvent(); return false;"><button class="small success button" >Submit</button></a>
                        </div>
                        <div class="small-6 columns">
                            <a href="#" onclick="cancelEvent('new', 'NULL'); return false;"><button class="small alert button" onclick="">Cancel</button></a>
                        </div>
                    </div>
                </div>
                </div>
                <?php if(isset($eventsFut)) :
                    foreach ($eventsFut as $event) : ?>
                    <div class="panel" id="event_<?php echo $event['id']?>">
                        <h3><?php echo $event['title'] ?></h3>
                        <div id='mainOptionsEvent_<?php echo $event['id']?>'>
                            <div class='row'>
                                <div class='small-6 columns'>
                                    <a href="#" id="editPostButton_<?php echo $event['id']?>" onclick="editEvent(<?php echo $event['id'].", "."'".$event['title']."'"?>); return false;"><button class="small secondary button">Edit this event</button></a>
                                </div>
                                <div class='small-6 columns'>
                                    <a href='#' onclick="deleteEvent(<?php echo $event['id']?>); return false;"><button class='small alert button' onclick>Delete this event</button></a>
                                </div>
                            </div>
                        </div>
                        <h4 id="event_date_<?php echo $event['id']?>">Date: <?php echo $event['dateReal'] ?></h4>
                        <h4 id="location_<?php echo $event['id']?>" value="<?php echo $event['location'] ?>">Location: <?php echo $event['location'] ?></h4><br>
                        <h4 id="capacity_<?php echo $event['id'] ?>" value="<?php echo $event['capacity'] ?>">Capacity: <?php echo $event['capacity'] ?></h4>
                        <input type="hidden" id="unix_date_event_<?php echo $event['id']?>" value="<?php echo $event['date'] ?>">
                        <div id="about_<?php echo $event['id']?>"><?php echo $event['about'] ?></div>
                        <img id="photoDisplay_<?php echo $event['id']?>" style="padding: 20px 0px 20px 0px;" src="<?php echo $event['photo'] ?>" alt="There was a problem with your photo" height="300" width="300" /><input id="photo_<?php echo $event['id'] ?>" type="hidden" value="<?php echo $event['photo']?>">
                        <div id="guests_<?php echo $event['id']?>">
                            <h4>Guest List: </h4>
                            <table>
                                <thead><th>First Name</th><th>Last Name</th><th>Delete</th></thead>
                                <tbody id="guest_<?php echo $event['id'] ?>">
                                    <?php $str="";
                                    if(gettype($event['guests']) != "string"){
                                        foreach ($event['guests'] as $key => $value) {
                                            $str = $str.$value.", ";
                                            list($first, $last) = preg_split('/ /', $value);
                                            echo "<tr>";
                                            echo "<td>".$first."</td>";
                                            echo "<td>".$last."</td>";
                                            echo "<td id='".$event['id']."_".$key."'><a href='#' onclick='deleteGuest(\"".$first." ".$last."\",".$key.", ".$event['id']."); return false;'><button class='small alert button' onclick>Delete Guest</button></a></td>";
                                            echo "</tr>";
                                        }
                                    }
                                    else {
                                        $str = $str.$event['guests'].", ";
                                        list($first, $last) = preg_split('/ /', substr($str, 0, -2));
                                        echo "<tr>";
                                        echo "<td>".$first."</td>";
                                        echo "<td>".$last."</td>";
                                        echo "</tr>";
                                    }
                                    $guest_list = substr($str, 0, -2);
                                    ?>
                                </tbody>
                            </table>
                        </div>
                        <input type="hidden" id="guest_list_<?php echo $event['id']?>" value="<?php echo $guest_list ?>">
                    </div>
                <?php endforeach; endif; ?>
              </section>
              <section role="tabpanel" aria-hidden="false" class="content" id="all">
                <?php if(isset($eventsPast)) :
                    foreach ($eventsPast as $event) : ?>
                    <div class="panel" id="event_<?php echo $event['id']?>">
                        <h3><?php echo $event['title'] ?></h3>
                        <div id='mainOptionsEvent_<?php echo $event['id']?>'>
                            <div class='row'>
                                <div class='small-6 columns'>
                                    <a href="#" id="editPostButton_<?php echo $event['id']?>" onclick="editEvent(<?php echo $event['id'].", "."'".$event['title']."'"?>); return false;"><button class="small secondary button">Edit this event</button></a>
                                </div>
                                <div class='small-6 columns'>
                                    <a href='#' onclick="deleteEvent(<?php echo $event['id']?>); return false;"><button class='small alert button' onclick>Delete this event</button></a>
                                </div>
                            </div>
                        </div>
                        <h4 id="event_date_<?php echo $event['id']?>">Date: <?php echo $event['dateReal'] ?></h4>
                        <h4 id="location_<?php echo $event['id']?>" value="<?php echo $event['location'] ?>">Location: <?php echo $event['location'] ?></h4><br>
                        <h4 id="capacity_<?php echo $event['id'] ?>" value="<?php echo $event['capacity'] ?>">Capacity: <?php echo $event['capacity'] ?></h4>
                        <input type="hidden" id="unix_date_event_<?php echo $event['id']?>" value="<?php echo $event['date'] ?>">
                        <div id="about_<?php echo $event['id']?>"><?php echo $event['about'] ?></div>
                        <img id="photoDisplay_<?php echo $event['id']?>" style="padding: 20px 0px 20px 0px;" src="<?php echo $event['photo'] ?>" alt="There was a problem with your photo" height="300" width="300" /><input id="photo_<?php echo $event['id'] ?>" type="hidden" value="<?php echo $event['photo']?>">
                        <div id="guests_<?php echo $event['id']?>">
                            <h4>Guest List: </h4>
                            <table>
                                <thead><th>First Name</th><th>Last Name</th><th>Delete</th></thead>
                                <tbody id="guest_<?php echo $event['id'] ?>">
                                    <?php $str="";
                                    if(gettype($event['guests']) != "string"){
                                        foreach ($event['guests'] as $key => $value) {
                                            $str = $str.$value.", ";
                                            list($first, $last) = preg_split('/ /', $value);
                                            echo "<tr>";
                                            echo "<td>".$first."</td>";
                                            echo "<td>".$last."</td>";
                                            echo "<td id='".$event['id']."_".$key."'><a href='#' onclick='deleteGuest(\"".$first." ".$last."\",".$key.", ".$event['id']."); return false;'><button class='small alert button' onclick>Delete Guest</button></a></td>";
                                            echo "</tr>";
                                        }
                                    }
                                    else {
                                        $str = $str.$event['guests'].", ";
                                        list($first, $last) = preg_split('/ /', substr($str, 0, -2));
                                        echo "<tr>";
                                        echo "<td>".$first."</td>";
                                        echo "<td>".$last."</td>";
                                        echo "</tr>";
                                    }
                                    $guest_list = substr($str, 0, -2);
                                    ?>
                                </tbody>
                            </table>
                        </div>
                        <input type="hidden" id="guest_list_<?php echo $event['id']?>" value="<?php echo $guest_list ?>">
                    </div>
                <?php endforeach; endif; ?>
              </section>            
            </div>
        </div>
    </div>
  </div>

Joseph · Accepted Answer · 2014-11-15 13:36:54Z

2

For the first part, I'd suggest you use a framework or something that would resemble like MVC. The primary problem you'll face is when you start to grow.

On the JS side, DOM elements change, selectors change, endpoints change. There's a lot of frameworks out there, so I suggest you try some first and see what you feel is right for you. Suggesting Agility.JS. It's small enough to get you acquainted with the MVC feel.

On the PHP side, I suggest the same. I know not of any small frameworks for PHP. I still feel CodeIgniter (the lightest one I know) to be too much for this small task. I suggest you craft one yourself. The way I see this code is being more of an SPA (single-paged app) which only needs the back-end for persistence. The back-end can just host a bunch of REST-compliant endpoints and let the front-end do all the talking.

You can start from there, and everything else (like being structureless, excessive dependence to jQuery, directly handling DOM) should go away.

edited Nov 15, 2014 at 13:36

answered Nov 15, 2014 at 12:29

Joseph

25.2k2 gold badges25 silver badges37 bronze badges

\$\begingroup\$ For the record, this is just one aspect of the site. There is is substantially more structure to it and I feel Codeigniter is the right size for the job. I am using MVC structure for the back-end, but I wouldn't quite know how to implement it on the front-end. \$\endgroup\$
– Wold
Commented Nov 15, 2014 at 18:10
\$\begingroup\$ @Wold I wouldn't quite know how to implement it on the front-end. Joseph has already pointed out Agility.JS as one potential front-end MVC framework candidate. I would also like to suggest Angularjs as well. Both provide extensive documentation with examples of use. \$\endgroup\$
– psaxton
Commented Nov 15, 2014 at 20:50
\$\begingroup\$ @psaxton alright, thanks. I'm just hesitant to introduce a whole other framework into my site. I was aiming for more of an efficient way of accomplishing the same tasks that I do in my code, but within the current parameters. I'll check out the frameworks though. \$\endgroup\$
– Wold
Commented Nov 16, 2014 at 8:05

Add a comment |

Stack Exchange Network

Light, custom CMS for a site

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
php
jquery
ajax
codeigniter
or ask your own question.

Hot Network Questions

Light, custom CMS for a site

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascriptphpjqueryajaxcodeigniter or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
php
jquery
ajax
codeigniter
or ask your own question.