Hello this is going to be a long post so thanks in advance for just reading it. I think it will help many users.
I want to store additional data and to add new rows to a table. I know about mysql and php but i am not familiar with JSON and javascript.

i want to add more html code to store audio/video files as well as photos but i dont know how to use the JSON /JAVASCRIPT code that calls the api/updateNewsFeed php code and eventually store them to the table which i have to add more rows

Here is the HTML that stores a photo or a webcam snap or a location into a table.

<!-- Photo Upload --> <div class="padding10 blockControl displaynone" id="photoContainer"> <form id="imageform" method="post" enctype="multipart/form-data" action="<?php echo API_BASE_URL ?>api/feedImageUpload"> <div id="preview" class="marginbottom10"> </div> <div id="imageloadstatus" class="displaynone marginbottom10"> <img src="<?php echo BASE_URL; ?>wall_icons/ajaxloader.gif" class="icon"> Uploading please wait ....
            </div> <div id="imageloadbutton"> <span id="addphoto">Add Photos:</span> <input type="file" name="photos[]" id="photoimg" multiple="true"> </div> <input type="hidden" id="uploadvalues"> <input type="hidden" id="upload_uid"  value="<?php echo $sessionUid;?>" name="update_uid"> <input type="hidden" id="upload_token"   value="<?php echo $sessionToken;?>" name="update_token"> <input type="hidden" id="group_id" value="<?php echo $groupID; ?>" name="group_id"> </form>
            you can change the medias photo in the media profile page
        </div> <!-- End of Photo Upload --> <!-- Location Upload --> <div class=" blockControl displaynone" id="geoContainer"> <input type='hidden' id='latitude' value=''/><input type='hidden' id='longitude' value=''/> <div id="geoContainerDiv"></div> </div> <!-- End of Location Upload --> <!-- Webcam Upload --> <div class="padding10 blockControl displaynone" id="webcamContainer"> <div> <div id="webcam"> </div> <div id="webcam_preview"></div> </div> <div id='webcam_status' style="clear:both" ></div> <div id='webcam_takesnap'> <input type="button" value=" Take Snap " id="takeSnap" class="camclick  wallbutton"/> <input type="hidden" id="webcam_count" /> </div> </div> <!-- End of Webcam Upload --> <span id="updateButton" class="update_button wallbutton update_box"> <i class="fa fa-paper-plane"></i> <span class="buttonUpdate">Share This</span> </span>

the javascript code is this

/* Upload Button */
    $("body").on('click','#updateButton',function()
    {
        var update = $("#statusText").val();
        var lat=$("#latitude").val();
        var lang=$("#longitude").val();
        var up=$("#uploadvalues").val();
        if(up)
        {
            var uploadvalues=$("#uploadvalues").val();
        }
        else
        {
            var uploadvalues=$(".preview:last").attr('id');
        }

        var X=$('.preview').attr('id');
        var Y=$('.webcam_preview').attr('id');

        if(X)
        {
        var Z= X+','+uploadvalues;
        }
        else if(Y)
        {
        var Z= uploadvalues;
        }
        else
        {
        var Z=0;
        }

        if($.trim(update).length > 0)
        {
            /* Update News Feed */
            updateNewsFeed(uid, update,Z,groupID,token,pic,lat,lang,baseUrl,apiBaseUrl);
            $("#statusText").val('').focus().css("height", "20px");
            $("#latitude").val('');
            $("#longitude").val('');
            $("#geoContainer").slideUp();
            $('#uploadvalues').val('');
            $('#preview').html('');
            $("#webcamContainer").slideUp();
            $('#webcam').html('');
            $('#webcam_preview').html('');
            $('#photoContainer').slideUp('fast');
        }
        else
        {
            $.alert({
            title: '',
            content: 'Please write something.',
            confirm: function(){
            $("#statusText").val('').focus();
            }
            });
        }
    });

and then it uses another javascript script with JSON TO store the data.

/* update News Feed */
function updateNewsFeed(uid, update,uploads,group_id,token,pic,lat,lang,baseUrl,apiBaseUrl)
{
    $("#newsFeed").fadeIn();
    var embed='';
    var encodedata=JSON.stringify({"uid": uid,"update": update,"group_id": group_id,"uploads": uploads,"token": token,"lat": lat,"lang": lang});
    var url=apiBaseUrl+'**api/updateNewsFeed**'; 

    ajaxPost(url,encodedata, function(data) 
    {
        if(data.NewsFeedResult.length)
        {

            var Unshare="UnSuggest";
            var Share="Suuggest";
            var Like="Believe";
            var Unlike="DisBelieve";
            var Comment="Review";
            var placeComment="Make a Review..."

            if($.labelData)
            {
                Unshare=$.labelData.feedUnshare;
                Share=$.labelData.feedShare;
                Like=$.labelData.feedLike;
                Unlike=$.labelData.feedUnLike;
                Comment=$.labelData.feedComment;
                placeComment=$.labelData.placeComment;

            }

            $.each(data.NewsFeedResult, function(i,data)
            {

                var shareHTML='';
                var geoView=1;
                /* Expanding URL Data*/
                if(data.embed)
                {
                    embed=data.embed;
                    geoView=0;
                }
                /*GEO MAP */
                var geoHTML='';
                var geoIMG ='';
                if(lat && lang && geoView>0)
                {
                    geoIMG ="http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=570x300&scale=2&maptype=roadmap&markers=color:red%7Clabel:S%7C"+ lat +","+ lang;
                    geoHTML="<div class='geoDivBlock'><img src='"+geoIMG+"' style='width:100%'/></div>";
                }
                /* Share HTML */
                if(data.uid_fk!=uid){
                    shareHTML='<a href="#" class="sharebutton  icontext share'+data.msg_id+data.created+'" c="'+data.created+'" id="share'+data.msg_id+'" title="Suggest" rel="Share" data="0"><i class="fa fa-suggest"></i>'+Share+'</a>';
                }

                /* Upload Images */
                var uploadImageHTMLTitle='<div class="img_container slider-wrapper"><div class="slider" id="slider'+data.msg_id+'">';
                var uploadImageHTMLFooter='</div><div class="slider-direction-nav" id="slider_direction_'+data.msg_id+'"></div><div class="slider-control-nav" id="slider_control_'+data.msg_id+'"></div></div>';
                var uploadImageHTML='';
                var C='';
                if(data.uploadPaths.length)
                {
                    if(data.uploadPaths.length > 1)  
                    {
                        uploadImageHTML+=uploadImageHTMLTitle;
                        for(var i=0; i<data.uploadPaths.length; i++)
                        {
                            C='<div class="slide'+i+'"><a href="'+data.uploadPaths[i]+'" data-lightbox="lightbox'+data.msg_id+'"><img src="'+data.uploadPaths[i]+'" class="imgpreview" id="'+data.msg_id+'" rel="'+data.msg_id+'"/></a></div>';
                            uploadImageHTML += C;
                        }
                        uploadImageHTML+=uploadImageHTMLFooter;
                        sliderLoad(data.msg_id);
                    }
                    else
                    {
                        uploadImageHTML='<div><a href="'+data.uploadPaths[0]+'" data-lightbox="lightbox'+data.msg_id+'"><img src="'+data.uploadPaths[0]+'" class="imgpreview" id="'+data.msg_id+'" rel="'+data.msg_id+'"/></a></div>';
                    }
                }

                var html='<div class="newsFeed-block timeline-block item newsFeed'+data.msg_id+data.created+'" id="newsFeed'+data.msg_id+'"  rel="'+data.created+'" >'+
                '<div class="panel panel-default">'+
                '<div class="panel-heading">'+
                '<div class="media">'+
                    '<a href="'+baseUrl+data.username+'" class="pull-left">'+
                        '<img src="'+data.profile_pic+'" class="media-object smallFace">'+
                    '</a>'+
                    '<div class="media-body">'+
                        '<a class="feedDelete commonDelete" c="'+data.created+'" href="#" id="deleteFeed'+data.msg_id+'" rel="" title="Delete Media"></a>'+ 
                        '<a href="'+baseUrl+data.username+'" class="feed-author">'+data.name+'</a>'+
                        '<a href="'+baseUrl+'status/'+data.msg_id+'" class="timeago" title="'+data.timeAgo+'"></a>'+
                    '</div>'+
                '</div>'+
          '</div>'+
          '<div class="panel-body">'+
            '<p class="feedContent">'+data.message+'</p>'+
          '</div><div>'+embed+'</div>'+uploadImageHTML+geoHTML+
            '<div id="likeUserDiv'+data.msg_id+'" class="likeUserDiv'+data.msg_id+data.created+'">'+
            '</div>'+
            '<div class="st_like_share">'+
                '<a href="#" class="reaction like  icontext like'+data.msg_id+data.created+'" c="'+data.created+'" id="like'+data.msg_id+'" title="Like" rel="Like" data="0"><i class="fa fa-heart"></i>'+Like+'</a>'+
                '<a href="#" class="commentopen  icontext " id="commentopen'+data.msg_id+'" rel="'+data.msg_id+'" c="'+data.created+'" title="Review"><i class="fa-review"></i>'+Comment+' </a>'+
          shareHTML+
            '</div>'+   
            '<ul class="comments comments'+data.msg_id+data.created+'" id="comments'+data.msg_id+'">'+
          '</ul>'+
          '<ul class="comments displaynone commentBox commentBox'+data.msg_id+data.created+'" id="commentBox'+data.msg_id+'">'+
            '<li class="comment-form " >'+
          '<div class="input-group">'+
            '<input type="text" class="form-control placeComment commentText'+data.msg_id+data.created+'" placeholder="'+placeComment+'" id="commentText'+data.msg_id+'"/>'+
            '<span class="input-group-addon">'+
            '<a href="#" id="commentCamara'+data.msg_id+'" class="commentCamera" title="Upload Image"><i class="fa fa-camera commentCamIcon"></i></a>'+
            '</span>'+
          '</div>'+
          '<div class="margintop10" >'+
          '<a href="#" class="wallbutton commentButton" id="commentButton'+data.msg_id+'" c="'+data.created+'">'+Comment+'</a></div>'+
          ''+
          '</ul>'+
          '</div>'+
          '</div>';
                $("#newsFeed").gridalicious('prepend', loadGrid(html));

                if(up)
                {
                    var uploadvalues=$("#uploadValues").val();
                }
                else
                {
                    var uploadvalues=$(".preview:last").attr('id');
                }
            });  
        }

    });    
}

and this is tha php code that is being called in javascript (api/updateNewsFeed) and stores the data into the table

/* Update NewsFeed */
function updateNewsFeed()
{
$request = \Slim\Slim::getInstance()->request();
$data = json_decode($request->getBody());
$uid=$data->uid;
$update=$data->update;
$uploads=$data->uploads;
$group_id=$data->group_id;
$lat=$data->lat;
$lang=$data->lang;

try {
    $key=md5(SITE_KEY.$uid);
    if($key==$data->token && $uid > 0)
    {
        $time=time();
        $ip=$_SERVER['REMOTE_ADDR'];
        $db = getDB();

        if(empty($group_id))
        {
            $sql = "SELECT msg_id,message,created FROM `messages` WHERE uid_fk=:uid ORDER BY msg_id DESC LIMIT 1";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("uid", $uid, PDO::PARAM_INT);
            $stmt->execute();
            $NewsFeed = $stmt->fetchAll(PDO::FETCH_OBJ);
        }
        else
        {
            $sql = "SELECT msg_id,message,created FROM `messages` WHERE uid_fk=:uid and group_id_fk=:group_id ORDER BY msg_id DESC LIMIT 1";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("uid", $uid, PDO::PARAM_INT);
            $stmt->bindParam("group_id", $group_id, PDO::PARAM_INT);
            $stmt->execute();
            $NewsFeed = $stmt->fetchAll(PDO::FETCH_OBJ);
        }

        if ($update!=$NewsFeed[0]->message && $time!=$NewsFeed[0]->created)
        {
            $uploads_array=explode(',',$uploads);
            $uploads=implode(',',array_unique($uploads_array));
            if(empty($uploads))
            {
            $uploads='';    
            }

            if(empty($group_id) && $uid>0)
            {
            $s1="INSERT INTO `messages` (message, uid_fk, ip,created,uploads,lat,lang) VALUES (:feedUpdate, :uid, :ip,:time,:uploads,:lat,:lang)";
            $stmt1 = $db->prepare($s1);
            $stmt1->bindParam("feedUpdate", $update, PDO::PARAM_STR);
            $stmt1->bindParam("uid", $uid, PDO::PARAM_INT);
            $stmt1->bindParam("ip", $ip);
            $stmt1->bindParam("time", $time);
            $stmt1->bindParam("uploads", $uploads, PDO::PARAM_STR);
            $stmt1->bindParam("lat", $lat, PDO::PARAM_STR);
            $stmt1->bindParam("lang", $lang, PDO::PARAM_STR);
            $stmt1->execute();

            $s2="UPDATE `users` SET updates_count=updates_count+1 WHERE uid=:uid";
            $stmt2 = $db->prepare($s2);
            $stmt2->bindParam("uid", $uid, PDO::PARAM_INT);
            $stmt2->execute();

            $s3="SELECT M.group_id_fk,M.msg_id, M.uid_fk, M.message, M.created,M.uploads,M.like_count,M.comment_count,M.share_count, U.username,U.name,U.profile_pic FROM messages M, users U WHERE M.uid_fk=U.uid and M.uid_fk=:uid ORDER BY M.msg_id DESC LIMIT 1";
            $stmt3= $db->prepare($s3);
            $stmt3->bindParam("uid", $uid, PDO::PARAM_INT);
            $stmt3->execute();
            $NewsFeedResult = $stmt3->fetchAll(PDO::FETCH_OBJ);

        }
        else
        {
            if(internalGroupCheck($uid,$group_id))
            {
            $s1="INSERT INTO `messages` (message, uid_fk, ip,created,uploads,lat,lang,group_id_fk) VALUES (:feedUpdate, :uid, :ip,:time,:uploads,:lat,:lang,:group_id)";
            $stmt1 = $db->prepare($s1);
            $stmt1->bindParam("feedUpdate", $update);
            $stmt1->bindParam("uid", $uid, PDO::PARAM_INT);
            $stmt1->bindParam("ip", $ip);
            $stmt1->bindParam("time", $time);
            $stmt1->bindParam("uploads", $uploads, PDO::PARAM_STR);
            $stmt1->bindParam("group_id", $group_id, PDO::PARAM_INT);
            $stmt1->bindParam("lat", $lat, PDO::PARAM_STR);
            $stmt1->bindParam("lang", $lang, PDO::PARAM_STR);
            $stmt1->execute();

            $s2="UPDATE `groups` SET group_updates=group_count+1 WHERE group_id=:group_id";
            $stmt2 = $db->prepare($s2);
            $stmt2->bindParam("group_id", $group_id, PDO::PARAM_STR);
            $stmt2->execute();

            $s3="SELECT M.group_id_fk,M.msg_id, M.uid_fk, M.message, M.created,M.uploads,M.like_count,M.comment_count,M.share_count, U.username,U.name,U.profile_pic FROM messages M, users U WHERE M.uid_fk=U.uid and M.uid_fk=:uid ORDER BY M.msg_id DESC LIMIT 1 ";
            $stmt3 = $db->prepare($s3);
            $stmt3->bindParam("uid", $uid, PDO::PARAM_INT);
            $stmt3->execute();
            $NewsFeedResult = $stmt3->fetchAll(PDO::FETCH_OBJ);
          }

        }   

        if($NewsFeedResult)
        {
        $n_time=$NewsFeedResult[0]->created;
        $NewsFeedResult[0]->timeAgo=date("c", $n_time);

        /* Start End */
        $originalMessage=$NewsFeedResult[0]->message;
        $NewsFeedResult[0]->message=htmlCode($NewsFeedResult[0]->message);

        if($NewsFeedResult[0]->name)
        {
        $name=$NewsFeedResult[0]->name; 
        }
        else
        {
        $name=$NewsFeedResult[0]->username;
        }

        $NewsFeedResult[0]->name = $name;
        /* Profile Pic Modifiaction */

        $NewsFeedResult[0]->profile_pic = profilePic($NewsFeedResult[0]->profile_pic);

        }

        if(textlink($originalMessage))
        {
        $link =textLink($originalMessage);
        $em = new wallExpand($link);
        $site = $em->get_site();
        if($site != "")
        {

        $code = $em->get_iframe();
        if($code == "")
        {
        $code = $em->get_embed();
        if($code == "")
        {
        $codesrc=$em->get_thumb("medium");
        }
        }
        if($codesrc)
        {
        $NewsFeedResult[0]->embed='<a href="'.$codesrc.'" data-lightbox="lightbox'.$NewsFeedResult[0]->msg_id.'"><img src="'.$codesrc.'" class="imgpreview" /></a>';
        }
        else if($code)
        {
        $NewsFeedResult[0]->embed = $code;
        }
        }
        }
        else
        $NewsFeedResult[0]->embed = "";

        /*Upload Image */
        $uploadPaths=array();

        if($NewsFeedResult[0]->uploads)
        {
            $s = explode(",", $NewsFeedResult[0]->uploads);
            $NewsFeedResult[0]->uploadCount=count($s);

            /* Upload Paths */
            foreach($s as $a)
            {
            array_push($uploadPaths,internalGetImagePath($a));
            }

            $NewsFeedResult[0]->uploadPaths=$uploadPaths;   

        }
        else
        {
            $NewsFeedResult[0]->uploadCount='';
            $NewsFeedResult[0]->uploadPaths='';     
        }

        $codesrc='';
        $code='';
        /* End */

        $db = null;
        echo '{"NewsFeedResult": ' . json_encode($NewsFeedResult) . '}';
    }

}
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}

There are a lot of issues in your code and I wouldn't know were to start from (some of them may really be some others may have to do with the way you write code). Try to separate issues and find out were you really have problem. For example in Chrome there are developer tools and in the network tab under XHR you can see what exactly you are posting from an AJAX call (there other browser debugging tools also). If you post what you expect then the problem lies in PHP if not it lies in JS.

I know. There is nothing wrong with the code. I just dont know Javasctript and the way it uses JSON to send tha variables to the php script to store the data. For example how is the uploads variable initiated? Where does it get its value? From where in the html?

Any help?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.