Monthly Archives: November 2011

How to post Data using JQuery..

Guys,

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

putcomments1

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)

<div>
                        <%   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>
                        <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>
                        <div id='postedComment_<%# DataBinder.Eval(Container.DataItem, "Postid") %>'>
                        </div>
                    </div>

 

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.
$(document).ready(function(){
        $(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 == "") {
                        showNotification({
                            message: "Please put some comments to post.",
                            type: "error",
                            autoClose: true,
                            duration: 3
                            });
                     return false; }
                    $.post(
                    'Global/AjaxRequestData.aspx',
                    { 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.");
                            });*/

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

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

                        showNotification({
                            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 {

                    $('#dvReadComments').load('global/popup.aspx?mode=login');
                    ShowModalPopup('dvComments'); return false;
                        //showLogin();
                }
            });
        });
        });

 

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.

$.post(
          'Global/AjaxRequestData.aspx',
          { 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.

<pre>
            <asp:Label ID="lblMessage" runat="server" Style="display: none"></asp:Label>
            <asp:Label ID="lblReturnValue" runat="server" Style="display: none" EnableViewState="false"
                Text=""></asp:Label>
 </pre>
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.

Finally I have installed Windows Live Writer

This is really good to have Windows Live Writer and now I can post more frequently …

Installation Steps

  • For installation of Live Writer make sure you have the following system requirements. More important that it requires a .Net Framework.
  • Download the Live Tools Installer. This installer is not the Live Writer Installer. Instead it is general purpose installer and lets you select more products to install if needed.
  • Start the installation from WLinstaller.exe
  • Accept the agreement policy.
  • Uncheck all the check boxes. They are optional utilities.
  • The installer then downloads the Live Writer installation. Please be patient as it takes quite a lot of time if you have slow connection.
  • You don’t have to do check anything. The installation would immediately after the download is complete.
  • Follow the further steps which include putting the login credentials, blog URL.
  • Allow the installation to detect the blog layout settings and post a temporary post to verify. It won’t affect your blog since no test post is published.
  • Start the Writer and blast away with your writing. Enjoy!

Live Writer makes you feel as if you are working in the WordPress environment itself. Blogging with it will surely enthral you. Try it out and you will see the difference for yourself.

live1_thumb

live2_thumb

live3_thumb

And finally you are ready to post 🙂

 

WLR