JQuery: 2011

Friday, November 4, 2011

Draw table body function

Tuesday, October 11, 2011

Date Picker

use Script file
---------------
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
*********
   $(document).ready(function () {
           $("#txtSample").datepicker({
                changeMonth: true,
                changeYear: true
            });
    });

Drag and Drop

ASPX PAGE
-------------
use the script file
-----------------
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
**************************
apply style to div
-----------------
<style type="text/css">
    #divUsers
    {
        margin-top: 10px;
    }
    #divUsers input
    {
        float: left;
        margin-left: 10px;
    }
    #divAllUsers
    {
        float: left;
        width: 330px;
        height: 310px;
        border: groove gray;
    }
    #divTeamMembers
    {
        float: left;
        width: 330px; /* margin-left: 190px; */
        margin-left: 150px;
        height: 310px;
        border: groove gray;
    }
    #divUsers ul
    {
        list-style-type: none;
        padding: 0px;
    }
    #divUsers div
    {
        overflow-y: auto;
        overflow-x: hidden;
    }
    #divUsers ul li
    {
        padding: 5px;
        margin: 0px;
        width: 319px;
        border: 1px solid gray;
        cursor: move;
        z-index: 1000;
    }
    .draghover
    {
        background: #DEDEDE;
    }
</style>
************************************
use jquery functons
---------------------

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        GetAllList();

        $("#btnSave").click(function () {
            insertTest();
        });
    });

    function insertTest() {

        var userids = "[";
        var itemcount = 0;
        var textid=$("#txtID").val();
        $("#divTeamMembers li input:hidden").each(function () {
            userids += "{'userid':'" + $(this).val() + "'},";
            itemcount++;
        });
        if (itemcount == 0) {
            alert('Please select an item');
            return;
        }

        userids += "]";
        userids = userids.replace(",]", "]");

        $.ajax({
            type: "POST",
            url: "DragDropSample.aspx/InsertTest",
            data: "{'TextID':'" + textid + "','UserIds':" + userids + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () {
                alert("Saved Successfully");
            }
        });
    }

    //to get all places
    function GetAllList() {

        $.ajax({
            type: "POST",
            url: "DragDropSample.aspx/GetAllSelList",
            dataType: "json",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            success: function (xmldata) {
                fillListItems(xmldata.d, 0);

            }

        });
    }


    function fillListItems(xmldata, userorteam) {

        if (userorteam) {
            $("#divTeamMembers ul").empty();
        }
        else {
            $("#divAllUsers ul").empty();
        }
        $(xmldata).find("row").each(function () {
            var listitem = document.createElement("li");
            var lblname = document.createElement("span");
            var txtid = document.createElement("input");
            txtid.type = "hidden";
            $(txtid).val($(this).find("column").eq(0).text());
            $(lblname).html($(this).find("column").eq(1).text());
            $(listitem).append(txtid);
            $(listitem).append(lblname);
            if (userorteam) {

                $("#divTeamMembers ul").append(listitem);
                $(listitem).addClass("privilegeduser");
            }
            else {

                $("#divAllUsers ul").append(listitem);
                $(listitem).addClass("user");

            }
            enableDragAndDrop();
        });
    }

    function enableDragAndDrop() {
        $("#divUsers li").draggable({
            containment: 'document',
            scroll: 'false',
            helper: 'clone',
            revert: 'invalid'
        });
        $("#divTeamMembers").droppable({
            hoverClass: "draghover",
            accept: '.user',
            drop: function (event, ui) {
                $("<li></li>").html(ui.draggable.html()).appendTo($(this).find("ul").eq(0)).addClass("privilegeduser").draggable({
                    containment: 'document',
                    scroll: 'false',
                    helper: 'clone',
                    revert: 'invalid'
                });
                ui.draggable.remove();

            }
        });

        $("#divAllUsers").droppable({
            hoverClass: "draghover",
            accept: '.privilegeduser',
            drop: function (event, ui) {
                $("<li></li>").html(ui.draggable.html()).appendTo($(this).find("ul").eq(0)).addClass("user").draggable({
                    containment: 'document',
                    scroll: 'false',
                    helper: 'clone',
                    revert: 'invalid'
                }); ;
                ui.draggable.remove();
            }
        });
    }

</script>

*************************************************
use design like
---------------
<input type="text" id="txtID"/>
    <br />
    <div id="divUsers">
        <div id="divAllUsers">
            <ul>
            </ul>
        </div>
        <div id="divTeamMembers">
            <ul>
            </ul>
        </div>
    </div>
    <input type="button" id="btnSave" value="Save"/>
**********************************************

ASPX.CS PAGE
-------------------

[WebMethod]
        public static void InsertTest(int TextID, object UserIds)
        {
            //string query = "";
            GridDL oGridDL = new GridDL();
            List<object> lstItems = new JavaScriptSerializer().ConvertToType<List<object>>(UserIds);
            ArrayList arrList = new ArrayList();
            foreach(IDictionary item in lstItems)
            {
                arrList.Add(item["userid"].ToString());
            }
            foreach (string id in arrList)
            {
               // query = "INSERT INTO TBL_DragDrop VALUES((SELECT MAX(ID) FROM TBL_DragDrop)+1,'" + id + "','" + TextID + "')";
                oGridDL.DataConnection("INSERT INTO TBL_DragDrop VALUES((SELECT MAX(ID) FROM TBL_DragDrop)+1,'" + id + "','" + TextID + "')", 1);
            }
            //oGridDL.DataConnection(query,1);
        }

********

Tabs

Dialog box

$("#imgDialog").click(function () {
            $("#divTest").dialog("open");
        });

        $("#divTest").dialog({
            autoOpen: false,
            height: 200,
            width: 300,
            modal: true,
            title: "Test",
            buttons: {
                "Save": function () {
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
                    }
        });

Animate Popup(faq)

use script file
---------
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

********
use style for cntrls
---------
<style type="text/css">
    #divFAQ
     {
         position:fixed;
         width:50px;
         height:50px;
         text-align:left;
         border:1px solid gray;
         right:0;
         bottom:0;
         background-color:White;
     }
       #divFAQ img
        {
            float: left;
        }
     .divQn
        {
            float: left;
            width: 280px;
            padding: 10px;
            border: 1px solid gray;
            margin: 5px 0;
            cursor: pointer;
        }
</style>

*********
use jquery
-----

<script type="text/javascript" language="javascript">
    jQuery.fn.isChildOf = function (b) {
        return (this.parents(b).length > 0);
    };

    $(document).ready(function () {

        $("#divFAQ img").click(function () {

            if ($("#divFAQ").width() > 100) {
                $("#divFAQ").animate({
                    width: "50px",
                    height: "50px"
                });
                $("#divFAQ .divQn,textarea").remove();
                return;
            }
            $(document).click(function (event) {
                if (!$(event.target).isChildOf("#divFAQ")) {
                    $("#divFAQ").animate({
                        width: "50px",
                        height: "50px"
                    });
                    $("#divFAQ .divQn,textarea").remove();
                    $(document).unbind("click");
                }
            });
            onload = true;
            $("#divFAQ").animate({
                width: "300px",
                height: "70px"
            }, function () {
                var txtQn = document.createElement("textarea");
                txtQn.id = "txtQn";
                $(txtQn).insertAfter($("#imgFAQ"));
                $(txtQn).keyup(function () {
                    getQuestions($(this).val());
                });
                $(txtQn).width("230px");
                $(txtQn).height("50px");

                $(txtQn).css({
                    float: "left",
                    marginLeft: "10px"
                });
            });
            getQuestions("");
        });
    });

    //Get faq question
    function getQuestions(val) {
        $.ajax({
            type: "POST",
            url: "FAQTest.aspx/GetQuestion",
            datatype: "JSON",
            data: "{'Questn':'" + val + "'}",
            contentType: "application/json; charset=utf-8",
            success: function (xmldata) {
                // alert(xmldata.d);
                showQuestions(xmldata.d);
            }
        });
    }
    //Get faq answer
    function getAnswer(val, divQn) {
        $.ajax({
            type: "POST",
            url: "FAQTest.aspx/GetAnswer",
            datatype: "JSON",
            data: "{'ID':'"+ val +"'}",
            contentType: "application/json; charset=utf-8",
            success: function (xmldata) {
                // alert(xmldata.d);
                showAnswer(xmldata.d, divQn);
            }
        });
    }

    var pheight = 0;
    // Show Answer in faq
    function showAnswer(xmldata, divQn) {
        var paraans = document.createElement("p");
        paraans.className = "panswer";
        $(paraans).html($(xmldata).find("column").eq(0).text());
        $("#divFAQ .divQn .panswer").remove();
        $(divQn).append(paraans);
        if (pheight > 0)
            $("#divFAQ").animate({
                height: "-=" + pheight
            }, 1);
        pheight = $(paraans).height();
        $("#divFAQ").animate({
            height: "+=" + pheight
        });
    }

    var onload = true;
    // Show question In faq
    function showQuestions(xmldata) {
        $("#divFAQ .divQn").remove();
        var found = false;
        $(xmldata).find("row").each(function () {
            found = true;
            var divQn = document.createElement("div");
            divQn.className = "divQn";
            $(divQn).click(function () {
                getAnswer($(this).find(".qnid").eq(0).val(), this);
            });

            var qnid = document.createElement("input");
            qnid.type = "hidden";
            qnid.className = "qnid";
            $(qnid).val($(this).find("column").eq(0).text());

            var paraqn = document.createElement("p");
            $(paraqn).html("Qn: " + $(this).find("column").eq(1).text());

            $(divQn).append(qnid);
            $(divQn).append(paraqn);

            $("#divFAQ").append(divQn);
            var divheight = $(divQn).height();
            divheight += 30;
            if (onload) {
                $("#divFAQ").animate({
                    height: "+=" + divheight
                });
            }
        });
        if (!found) {
            $("#imgSaveQn").remove();
            var imgSave = document.createElement("img");
            imgSave.id = "imgSaveQn";
            imgSave.src = "../Images/save_btn1.jpg";
            $(imgSave).css({
                width: "70px",
                marginLeft: "60px",
                cursor: "pointer"
            });

            $(imgSave).insertAfter("#txtQn");
            $(imgSave).click(function () {
                saveQuestion();
                getQuestions("");
            });
        }
        else {
            $("#imgSaveQn").remove();
        }
        if (onload)
            onload = false;
    }

        // Save the question In faq
        function saveQuestion() {
            var qn = $("#txtQn").val();

            $.ajax({
                type: "POST",
                url: "FAQTest.aspx/SaveQuestion",
                data: "{'questn':'" + qn + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    alert("Saved successfully!");
                    $("#txtQn").val('');

                }
            })
        }

</script>

**************
use inside body (and after form) of which page you want or in the master page
---------
<div id="divFAQ">
        <img src="../Images/faq.png" alt="" id="imgFAQ" style="cursor: pointer;"/>
    </div>

Monday, October 10, 2011

Converting a dataset to an xmldata format

public static string ConvertToXML(DataSet ds)
        {
            int rows = ds.Tables[0].Rows.Count;
            int columns = ds.Tables[0].Columns.Count;
            int i = 0;
            string result = "";
            result = "<Rows>";
            for (i = 0; i < rows; i++)
            {
                result = result + "<Row>";
                for (int j = 0; j < columns; j++)
                {
                    result = result + "<Column>" + ds.Tables[0].Rows[i][j].ToString() + "</Column>";
                }
                result = result + "</Row>";
            }
            result = result + "</Rows>";
            return result;
        }

Display Message (alert)

put this on master page

function DisplayMessage(msg, loading, loadingstart) {
            var width = $(window).width();
            var divwidth = $("#divStatusMsg").width();
            $("#divStatusMsg").css({
                marginLeft: (width / 2) - (divwidth / 2)
            });
            if (typeof (loading) == 'undefined') {
                $("#divmsg").html(msg);
                $("#divStatusMsg").fadeIn(300).delay(2000).fadeOut(300);
            }
        }

--------------------
<div id="divStatusMsg">
        <div class="bl">
            <div class="br">
                <div class="tl">
                    <div id="divmsg" class="tr">
                    </div>
                </div>
            </div>
        </div>
    </div>