Search This Blog

Sunday, March 22, 2015

SharePoint Custom List with jQuery UI Autocomplete

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script type="text/javascript">

        //We need to run our function only after sp.js file loads
        ExecuteOrDelayUntilScriptLoaded(ViewItem, "sp.js");
        function ViewItem() {


            var context = new SP.ClientContext.get_current();
            var web = context.get_web();
            var list = web.get_lists().getByTitle('City');

            //It will fetch all the items from the list
            var myquery = new SP.CamlQuery.createAllItemsQuery();
            myItems = list.getItems(myquery);
            context.load(myItems);

            //If the items load correctly then success function will be called
            context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
        }

        function success() {
            var text = [];

            var ListEnumerator = this.myItems.getEnumerator();
            while (ListEnumerator.moveNext()) {

                //Will get the current row from the SP List
                var currentItem = ListEnumerator.get_current();
                text.push(currentItem.get_item('Title'));
            }

            $("#tags").autocomplete({
                source: text
            });

        }

        function failed(sender, args) {
            alert("failed. Message:" + args.get_message());
        }
   
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="tags">
            Tags:
        </label>
        <input id="tags">
    </div>
</body>

</html>

Wednesday, March 11, 2015

Sample Code for Operations in click and onchange function using Jquery


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Operations</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {

            /* Button Arithmetic Operation */
            $('#AddBtn').on("click", function () {

                arithmeticOperation("+");
            });

            $('#SubBtn').on("click", function () {
                arithmeticOperation("-");
            });

            $('#MulBtn').on("click", function () {
                arithmeticOperation("*");
            });
            /* Button Arithmetic Operation */

            /* Select Dropdown Arithmetic Operation */
            $('#selectDropDown').change(function () {
                //alert('Change Event called');
                if ($("#selectDropDown").val() == 'Add') {
                    arithmeticOperation("+");
                }
                if ($("#selectDropDown").val() == 'Subtract') {
                    arithmeticOperation("-");
                }
                if ($("#selectDropDown").val() == 'Multiply') {
                    arithmeticOperation("*");
                }
            });
            /* Select Dropdown Arithmetic Operation */
            var value1 = 0;
            var value2 = 0;
            var value3 = 0;
            //attach keypress to input
            $('input[type="number"]').keydown(function (event) {
                // Allow special chars + arrows
                $(".ErrorInfo").css({ "display": "none" });
                if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9
                    || event.keyCode == 27 || event.keyCode == 13
                    || (event.keyCode == 65 && event.ctrlKey === true)
                    || (event.keyCode >= 35 && event.keyCode <= 39)) {
                    return;
                    alert('Entered valid input');
                } else {
                    // If it's not a number stop the keypress


                    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                        event.preventDefault();
                        alert('please enter valid input, Enter only Numbers');
                        $(this).val('');
                        $(".ErrorInfo").text("Enter the valid input");
                    }

                }
            });

            /* Arithmetic Operation Function */
            function arithmeticOperation(operator) {


                if ($.isNumeric($('#Value1').val())) {
                    value1 = parseInt($('#Value1').val());
                }
                else {

                    DialogBox(1);

                    //$('#Value1').focus();
                }

                if ($.isNumeric($('#Value2').val())) {
                    value2 = parseInt($('#Value2').val());
                }
                else {

                    DialogBox(2);

                }

                if ($.isNumeric($('#Value3').val())) {
                    value3 = parseInt($('#Value3').val());
                }
                else {

                    DialogBox(3);

                }

                var result = eval(value1 + operator + value2 + operator + value3);

                $("#AppendValue").text("Sum of all textboxes is : " + result);

            }
            /* Arithmetic Operation Function */

            /* Overlay window */
            function DialogBox(focus) {
                $(".clsDialogContainer").css({ "background": "#000", "height": "100%", "opacity": "0.7", "top": "0", "position": "absolute", "width": "100%" });

                $(".ErrorInfo").text("Enter the valid input");

                $(".clsDialogBox").show()
                                  .css({ "left": "50%", "margin-left": "-160px", "margin-bottom": "-40px", "position": "absolute", "width": "320px", "background": "#fff", "padding": "10px" });

                $(".clsDialogBox").animate({ bottom: '50%' }, "slow");

                $("#DiaLogContainer").show();

                $(".clsDialogButton").hide();
            }

            $(".clsCloseBtn").on("click", function () {

                $("#DiaLogContainer").hide();

                $(".clsDialogButton").show();

                if ($('#Value1').val() == "") {
                    $('#Value1').focus();
                    $('#Value1').val("");
                }
                if ($('#Value2').val() == "") {
                    $('#Value2').focus();
                    $('#Value2').val("");
                }
                if ($('#Value3').val() == "") {
                    $('#Value3').focus();
                    $('#Value3').val("");
                }


            });

            $(".clsSlideDownBtn").on("click", function () {
                $(".clsDialogBox").animate({ bottom: '0%' }, "slow", function () {
                    $(this).hide();
                    $("#DiaLogContainer").hide();
                    $(".clsDialogButton").show();
                });
                $(".clsDialogBox").css({ "margin-bottom": "0px" });

                $(".clsDialogButton").hide();
            });

            $(".clsDialogButton").show();

            /* Overlay window */

        });
    </script>
    <style>
        html, body, iframe {
            height: 100%;
            width: 100%;
            -webkit-text-size-adjust: 100%;
            overflow: hidden;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .clsInputValues {
            margin: 10px 5px;
        }

            .clsInputValues label {
                font: normal 11px arial;
                line-height: 15px;
                color: #000;
                padding: 0px 5px;
            }

            .clsInputValues input[type='number'] {
            }

        .clsInputButtons input[type='button'] {
            background: #07569e;
            border: 1px solid #078;
            color: #fff;
            padding: 5px;
            margin: 10px 5px;
        }

        .clsCloseBtn {
            background: url("images/closeBtn.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
            border: medium none;
            width: 22px;
            height: 22px;
            position: absolute;
            right: 5px;
            text-indent: -9999px;
            top: 5px;
            cursor: pointer;
            outline: none;
        }

        .clsSlideDownBtn {
            background: url("images/SlideDownBtn.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
            border: medium none;
            width: 12px;
            height: 12px;
            position: absolute;
            right: 28px;
            text-indent: -9999px;
            top: 9px;
            cursor: pointer;
            outline: none;
        }
    </style>
</head>
<body>
    <form>
        <div class="clsInputValues">
            <label>Value 1:</label>
            <input type="number" id="Value1" class="clsValue" />
            <span class="ErrorInfo" style="display: none"></span>
            <label>Value 2:</label>
            <input type="number" id="Value2" class="clsValue" />
            <span class="ErrorInfo" style="display: none"></span>
            <label>Value 3:</label>
            <input type="number" id="Value3" class="clsValue" />
            <span class="ErrorInfo" style="display: none"></span>
        </div>
        <div class="clsInputButtons">
            <input type="button" value="Add" id="AddBtn" />
            <input type="button" value="Subtract" id="SubBtn" />
            <input type="button" value="Multiply" id="MulBtn" />

            <div id="AppendValue"></div>

            <select id="selectDropDown">
                <option value="" selected="selected">Select</option>
                <option value="Add">Add</option>
                <option value="Subtract">Subtract</option>
                <option value="Multiply">Multiply</option>
            </select>

        </div>

    </form>
    <div id="DiaLogContainer" style="display: none">
        <div id="dialog" class="clsDialogContainer"></div>

        <div class="clsDialogBox">
            <!--<div class="ErrorInfo"></div>-->
            <input class="clsSlideDownBtn" type="button" value="SlideDown" />
            <input class="clsCloseBtn" type="button" value="close" />

        </div>
    </div>
    <!--<input type="button" class="clsDialogButton" value="Dialog" />-->
</body>

</html>