Category Archives: JQuery

How to post Data using JQuery..


I have Implemented JQuery’s “$.post” method so thought this can be helpful for someone..


This is how our application look like. Once we put our comments in box and press Quick Comments button it will call JQuery $.post method to post User entered data to Server and will save it in DB table.

So here are the steps to make a comment posting code :

First we need to include JQuery files (Update Script file path according to your directory structure):

<script src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>
<script src=”Scripts/jquery-1.4.1-vsdoc.js” type=”text/javascript”></script>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>

Following is the HTML code which will give you above output (Ofcourse this is not full code with css and all)

                        <%   1: # DataBinder.Eval(Container.DataItem, "Postcontent")
                        <br />
                        <div align="left">
                            <a href="#" class="comment_button" accessid='<%# DataBinder.Eval(Container.DataItem, "Postid") %>'
                                id='btnComment_<%# DataBinder.Eval(Container.DataItem, "Postid") %>'>Quick comment</a>
                        <div class='panel' id='slidepanel<%# DataBinder.Eval(Container.DataItem, "Postid") %>'>
                            <textarea cols="50" rows="2" id='txtComment_<%# DataBinder.Eval(Container.DataItem, "Postid") %>'></textarea><br />
                            <input type="button" value=" Quick comment " accessid='<%# DataBinder.Eval(Container.DataItem, "Postid") %>'
                                id='btnCommentSubmit_<%# DataBinder.Eval(Container.DataItem, "Postid") %>' class="comment_submit" />
                        <div id='postedComment_<%# DataBinder.Eval(Container.DataItem, "Postid") %>'>


Now time to write some code on Quick Comment button which actually saves the data into database. So following is the JQuery code which will do this task for us.
        $(function () {
            $('.comment_submit').click(function () {
                if (isUserLoggedIn == "True" || isUserLoggedIn == "true") {

                    var element = $(this);
                    var id = element.attr("accessid");
                    var commentText = $('#txtComment_' + id).val();
                    if (commentText == "") {
                            message: "Please put some comments to post.",
                            type: "error",
                            autoClose: true,
                            duration: 3
                     return false; }
                    { mode: "comment", comment: commentText, Commentpostid: id },
                    function (data) {
                        var retVal1 = $('#lblMessage', data).html();
                        var retVal2 = $('#lblReturnValue', data).html();
                        var $readcmnt = $('#btnViewComment_' + id);
                        if (retVal1 == "1") {
                            //$('#postedComment_' + id).addClass("success");
                            //$('#postedComment_' + id).html("Comment posted successfully. You can see more comments by clicking on <b>Read comments</b> link.").show();
                            /*$('.dvUserAlerts').slideDown('slow', function(){
                                $('.dvUserAlerts').html("Comment posted successfully. You can see more comments by clicking on <b>Read comments</b> link.");

                            message: "Comment posted successfully. You can see more comments by clicking on <b>Read comments</b> link.",
                            type: "success",
                            autoClose: true,
                            duration: 3

                            $readcmnt.css("background-color", "red");
                            $readcmnt.css("color", "white");*/
                        } else {

                            message: "Some problem in posting your comments please try after some time.",
                            type: "error",
                            autoClose: true,
                            duration: 3

                            /*$('#postedComment_' + id).addClass("error");
                            $('#postedComment_' + id).html("Some problem in posting your comments please try after some time.").show();*/

                        $("#slidepanel" + id).slideUp(300);
                        /*$('#postedComment_' + id).delay(10000).slideUp(1400);*/
                        $('#txtComment_' + id).val("");
                    //$('#postedComment_' + id).load('global/popup.aspx');
                } else {

                    ShowModalPopup('dvComments'); return false;


You will notice in above code there is one function I have called with name “showNotification” this is one my custom made JS function which shows the alert messages, although you can also use simple Javascript alert for the same.

Sorry : I have not actually removed some commented code.. 🙂

In above code main part is call to another aspx page which actually contains the code logic of saving this comment. Along with this “post” request we are also passing some parameters named as mode, comment, commentText, Commentpostid which will carry respective values.

          { mode: "comment", comment: commentText, Commentpostid: id },


The above used “AjaxRequestData.aspx’” page will contain some normal conditions as shown in below code, as we have send our parameters through POST method we need to catch these parameters with “Request” Object also shown in below code. Here your actual saving code logic will come which will save your data..

This “AjaxRequestData.aspx’” page will also contains some HTML code which contains some elements used to actually catch the response from server.

            <asp:Label ID="lblMessage" runat="server" Style="display: none"></asp:Label>
            <asp:Label ID="lblReturnValue" runat="server" Style="display: none" EnableViewState="false"
if (Request["mode"] != null && Request["mode"] == "comment")
    string Commenttext = Request["comment"].ToString();

    lblMessage.Text = "Your Save Function will come here return some values (0 or 1)"
    lblReturnValue.Text = lblMessage.Text;



So Guys this was all code through which you can make a comment posting control using JQuery.

Hope this will help you out 🙂

Please do let me know If you need any clarification on this code.