locked
auto complete is not working RRS feed

  • Question

  • User81789783 posted

    i have below code

    @{
        ViewBag.Title = "CreateTopic";
    }
    @*https://uigradients.com/#LightOrange*@
    
    
    
    <html>
    <head>
    
        <title>MyCSS - No Master Layout</title>
    
      
      
        @*</script>*@
    
      
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"/>
        <link id="myCss" href="~/Content/StyleSheet1.css" rel="stylesheet" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
       
       
        <script>
    
            var list = [];
            var count = 0;
            var listComments = [];
            var currentdate = new Date();
            $(document).ready(function () {
    
                $("#customer").autocomplete({
                    source: [list],
                    minLength: 2,
                    select: function (event, ui) {
                        event.preventDefault();
                        $("#customer").val(ui.item.label);
                    }
                });
    
                $("#Style").change(function(){
    
                   // alert($("#Style option:selected").text());
                   // alert($("#Style option:selected").val());
                   // var link = $("#myCss[rel=stylesheet]")[0].href;
                  //  alert("link "+ link)
                    $('#myCss').attr('href', $("#Style option:selected").val());
                  //  var css = link.substring(link.lastIndexOf('/') + 1, link.length)
                  //  alert("css  "  + css)
                    //$('#myCss[href="' + css + '"]').attr('href', $('#Style').val() + '.css');
                   // $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
    })
    
                $(document).on("click", "div.reply", function () {
                 //   $("#tableDiv2").append('<div>' + "dfsd" + '</div>')
    
                  //  alert("id is " + $(this).attr("id"))
                 //   if ($("#comment").hasClass("fadeout")) {
    
                        $("#commentdiv").slideDown("slow")
    
                  //  }
                  //  else
                    //    $("#comment").removeClass("fadein").addClass("fadeout");
    
                    $("#comment").css("display", "block")
    
                    $("#commentdiv").css("display", "block")
                    $("#Topictext").css("display", "block")
    
                  
    
    
                    //$("#Topictext").html($(this).attr("id"))
                   // alert("Substring " + $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1))
                    var index = $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1);
                   // alert (index)
                    $("#Topictext").html(list[index][0])
                    $("#Topictextid").html($(this).attr("id"))
                   // alert("my " + $("#Topictextid").html())
    
    
                 //   alert()
    
                })
    
    
                $("#btnAddComment").click(function () {
    
                    var textcoment = $("#txttopicComment").val();
                   // alert(textcoment)
                    if (textcoment != "") {
    
                        listComments.push([$("#Topictext").html(), textcoment,])
    
    
                        for (var i = 0; i < list.length; i++) {
    
                           // alert("topic is " + listComments[i][0] + " Cooment is " + listComments[i][1]);
    
                            if (list[i][0] == $("#Topictext").html()) {
    
                                $("<p class=commentcss style=word-wrap: break-all>" + "<span>" + textcoment + "        " + (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + "</span>").insertAfter($("#div_" + [i]));
                                $(".commentcss").css('background-color', "lightslategray");
    
                               // alert($("#div_" + [i]).attr("id"))
                                //$("div.reply").each(function (index, ele) {
                                 
                                //    console.log($(ele).attr("id") + ":" + $(ele).nextUntil("div.header").filter("p").length)
                                    
                                //    $($(ele).attr("id")).html($(ele).nextUntil("div.header").filter("p").length)
                                
                                //})
                                break;
    
    
                            }
    
                        }
    
    
    
    
                    }
    
                   // $("#commentdiv").slideUp("slow")
                })
                $("#btnAdd").click(function () {
    
                    // if()
                    var text = $("#txttopic").val();
    
                    if (text != "") {
                        //  list.push(text)
    
                        //check if already exist
    
    
                        var topicname = $('div.header').html();
                        var status = checkValue(text, list)
                    //    alert(status)
                        if (status == 'Not exist')
    
                         
                        {
                            list.push([text, (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds()]);
    
    
                            //*************************************Create Table Dynamillay *****************/
    
                            var number_of_rows = list.length;
                            var number_of_cols = 2;
                            var table_body = '<table border="1">';
                            table_body += '<th>Name</th>'
                            table_body += '<th>time</th>'
    
                            for (var i = 0; i < number_of_rows; i++) {
                                table_body += '<tr>';
                                for (var j = 0; j < number_of_cols; j++) {
                                    table_body += '<td>';
    
                                    //if (j == 1) {
    
    
                                    //    //table_body += (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
    
    
                                    //}
                                    //   else {
                                    table_body += list[i][j];
                                    // }
                                    table_body += '</td>';
                                }
                                table_body += '</tr>';
                            }
                            table_body += '</table>';
                            //$('#tableDiv').html(table_body);
    
    
                            //******************************************************************/
    
                            //*************************************Create Datalist Dynamillay *****************/
    
                            //var number_of_rows = list.length;
                            //var number_of_cols = 2;
                            //var table_body = '<table border="1">';
                            //table_body += '<th>Name</th>'
                            //table_body += '<th>time</th>'
    
                            $("#tableDiv2").css("display", "block")
    
    
    
                           // alert(number_of_rows)
                            for (var i = number_of_rows; i >= number_of_rows; i--) {
    
    
                                $("#tableDiv2").append('<div class="blogdata header">' + list[i - 1][0] + '</div>');
                                $("#tableDiv2").append('<div class="blogdata">' + list[i - 1][1] + '</div>');
                                idtopic = [i - 1][0]
                                $('#tableDiv2').append('<div class="blogdata reply"  id=' + "div_" + idtopic + '>' + "Reply" + '</div>')
                                $("#tableDiv2").append("<BR>"); //work fine
    
    
    
                            }
    
    
    
    
                            //******************************************************************/
    
    
                           }
                              
                        else 
                        {
                           // alert ()
                            alert("topic exist")
    
                        }
    
                        // alert(list);
    
    
                    }
                    else {
    
                        alert("Enter Topic")
                    }
    
    
                    for (var i = 0; i < list.length; i++)
                    {
                       // alert(list[i]);
    
                    }
    
    
                 
                })
    
            });
    
    
            function checkValue(value, arr) {
                var status = 'Not exist';
            //    alert("val is " + value)
                for (var i = 0; i < arr.length; i++) {
                    var name = arr[i][0];
                //    alert("arr[i]" + arr[i][0])
                    if (name == value) {
                        status = 'Exist';
                        break;
                    }
                }
    
                return status;
            }
        </script>
    </head>
    
    <body class="body-content">
        <select id="Style">
            <option value="0">Select</option>
    
            <option value="~/Content/StyleSheet1.css">Grey</option>
            <option value="~/Content/StyleSheet2.css">pink</option>
    
        </select>
        <div class="container">
            <div class="container-fluid main col-lg-6" style="padding-bottom:3rem">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-3"></div>
    
    
                    <div class="col-lg-10 topicdiv">
    
                        <h3>CreateTopic</h3>
                    </div>
    
    
                    <div class="col-lg-2">
                    </div>
    
                </div>
    
                <div class="row">
    
                    <div class="col-lg-3 lbltopic">
                        Topic Title
                    </div>
    
                    <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
                        <input type="text" value="" id="txttopic">
                    </div>
                    <div class="col-lg-3">
                    </div>
    
    
                </div>
    
                
    
                <div class="row">
    
                    <div class="col-lg-3">
    
                    </div>
                    <div class="col-lg-6">
                        <button id="btnAdd" value="Add">Add Topic</button>
                    </div>
    
                    <div class="col-lg-3">
    
                    </div>
    
    
    
                </div>
                <div class="row">
    
                    <div class="col-lg-3 lbltopic">
                        Search Blog
                    </div>
    
                    <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
                        
                        <input  type="text"  id="customer" />
                    </div>
                    <div class="col-lg-3">
                    </div>
    
    
                </div>
    
                <div class="row">
    
                    <div class="col-lg-1">
    
                    </div>
    
                    <div id="tableDiv2" class="col-lg-10" style="display: none">
                        <h2 class="topics">Topics</h2>
                        <h5>orem ipsum dolor sit amet, consectetuer adipisis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget</h5>
    
                    </div>
    
                    <div class="col-lg-1">
    
                    </div>
                </div>
    
    
    
            </div>
    
            <div id="commentdiv" class="container-fluid main col-lg-6" style="padding-bottom:53rem;display:none">
                <div class="row">
                    <div class="col-lg-1"></div>
    
    
    
                    <div class="col-lg-10 topicdiv">
    
                        <h3>Blog comments</h3>
                    </div>
    
    
                    <div class="col-lg-1">
                    </div>
    
                </div>
    
    
                <div class="row">
    
                    <div class="col-lg-1">
    
                    </div>
    
                    <div id="comment" class="col-lg-10" style="display: none;padding-top:2rem">
                        Comments
                        <br />
                        <div id="Topictext" style="display: none"></div>
                        <div id="Topictextid" style="display: none"></div>
                        <textarea rows="1" class="txtcomment" value="" id="txttopicComment"></textarea>
                        <br />
                        <button id="btnAddComment" value="Add">Add Comment</button>
                    </div>
    
                    <div class="col-lg-1">
    
                    </div>
                </div>
            </div>
    
    
        </div>
    
    
    </body>
    </html>
    

    and got below error

    CreateTopic:70 Uncaught TypeError: $(...).autocomplete is not a function
    at HTMLDocument.<anonymous> (CreateTopic:70)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

    Thursday, March 21, 2019 4:39 AM

All replies

  • User839733648 posted

    Hi erum,

    According to your description and code, I'm sorry that I could not reproduce your issue.

    I've used the official documentation's data to test the event. https://jqueryui.com/autocomplete/ 

            $(document).ready(function () {
               $("#customer").autocomplete({
                    source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"],
                });
            });
    
    <input type="text" id="customer" />

    result:

    You could see it works well and there is no error on the console tab.

    CreateTopic:70 Uncaught TypeError: $(...).autocomplete is not a function
    at HTMLDocument.<anonymous> (CreateTopic:70)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

    This error always occurs because you've included the duplicated references.

    I suggest that you could check if you have added another jquery.js on your master page(layout).

    Best Regards,

    Jenifer

    Thursday, March 21, 2019 8:39 AM
  • User-2054057000 posted

    You are using very old version of jQuery which is:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    Replace the above line with:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    Autocomplete tutorial - How to create jQuery Autocomplete Feature in Step by Step manner with codes to download

    Thursday, March 21, 2019 10:40 AM
  • User81789783 posted

    same issue ,i have updated code

    @{
        ViewBag.Title = "CreateTopic";
    }
    @*https://uigradients.com/#LightOrange*@
    
    
    
    <html>
    <head>
    
        <title>MyCSS - No Master Layout</title>
    
      
      
        @*</script>*@
    
      
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"/>
        <link id="myCss" href="~/Content/StyleSheet1.css" rel="stylesheet" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
       
       
        <script>
    
            var list = [];
            var count = 0;
            var listComments = [];
            var currentdate = new Date();
            $(document).ready(function () {
    
                $("#customer").autocomplete({
                    source: [list],
                    minLength: 2,
                    select: function (event, ui) {
                        event.preventDefault();
                        $("#customer").val(ui.item.label);
                    }
                });
    
                $("#topdivselect").click(function(){
                    $("#bottomdivselect").css("display", "block")
    
                })
                $("#Style").change(function(){
    
                   // alert($("#Style option:selected").text());
                   // alert($("#Style option:selected").val());
                   // var link = $("#myCss[rel=stylesheet]")[0].href;
                  //  alert("link "+ link)
                    $('#myCss').attr('href', $("#Style option:selected").val());
                  //  var css = link.substring(link.lastIndexOf('/') + 1, link.length)
                  //  alert("css  "  + css)
                    //$('#myCss[href="' + css + '"]').attr('href', $('#Style').val() + '.css');
                   // $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
    })
    
                $(document).on("click", "div.reply", function () {
                 //   $("#tableDiv2").append('<div>' + "dfsd" + '</div>')
    
                  //  alert("id is " + $(this).attr("id"))
                 //   if ($("#comment").hasClass("fadeout")) {
    
                        $("#commentdiv").slideDown("slow")
    
                  //  }
                  //  else
                    //    $("#comment").removeClass("fadein").addClass("fadeout");
    
                    $("#comment").css("display", "block")
    
                    $("#commentdiv").css("display", "block")
                    $("#Topictext").css("display", "block")
    
                  
    
    
                    //$("#Topictext").html($(this).attr("id"))
                   // alert("Substring " + $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1))
                    var index = $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1);
                   // alert (index)
                    $("#Topictext").html(list[index][0])
                    $("#Topictextid").html($(this).attr("id"))
                   // alert("my " + $("#Topictextid").html())
    
    
                 //   alert()
    
                })
    
    
                $("#btnAddComment").click(function () {
    
                    var textcoment = $("#txttopicComment").val();
                   // alert(textcoment)
                    if (textcoment != "") {
    
                        listComments.push([$("#Topictext").html(), textcoment,])
    
    
                        for (var i = 0; i < list.length; i++) {
    
                           // alert("topic is " + listComments[i][0] + " Cooment is " + listComments[i][1]);
    
                            if (list[i][0] == $("#Topictext").html()) {
    
                                $("<p class=commentcss style=word-wrap: break-all>" + "<span>" + textcoment + "        " + (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + "</span>").insertAfter($("#div_" + [i]));
                                $(".commentcss").css('background-color', "lightslategray");
    
                               // alert($("#div_" + [i]).attr("id"))
                                $("div.reply").each(function (index, ele) {
                                 
                                    console.log($(ele).attr("id") + ":" + $(ele).nextUntil("div.header").filter("p").length)
                                   // alert($(ele).nextUntil("div.header").filter("p").length)
                                    $(ele).find("span").remove();
                                    $(ele).append('<span>' +"   "+  $(ele).nextUntil("div.header").filter("p").length +'</span' )
    
                                    //$($(ele).attr("id")).html($(ele).nextUntil("div.header").filter("p").length)
                                
                                })
                               // break;
    
    
                            }
    
                        }
    
    
    
    
                    }
    
                   // $("#commentdiv").slideUp("slow")
                })
                $("#btnAdd").click(function () {
    
                    // if()
                    var text = $("#txttopic").val();
    
                    if (text != "") {
                        //  list.push(text)
    
                        //check if already exist
    
    
                        var topicname = $('div.header').html();
                        var status = checkValue(text, list)
                    //    alert(status)
                        if (status == 'Not exist')
    
                         
                        {
                            list.push([text, (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds()]);
    
    
                            //*************************************Create Table Dynamillay *****************/
    
                            var number_of_rows = list.length;
                            var number_of_cols = 2;
                            var table_body = '<table border="1">';
                            table_body += '<th>Name</th>'
                            table_body += '<th>time</th>'
    
                            for (var i = 0; i < number_of_rows; i++) {
                                table_body += '<tr>';
                                for (var j = 0; j < number_of_cols; j++) {
                                    table_body += '<td>';
    
                                    //if (j == 1) {
    
    
                                    //    //table_body += (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
    
    
                                    //}
                                    //   else {
                                    table_body += list[i][j];
                                    // }
                                    table_body += '</td>';
                                }
                                table_body += '</tr>';
                            }
                            table_body += '</table>';
                            //$('#tableDiv').html(table_body);
    
    
                            //******************************************************************/
    
                            //*************************************Create Datalist Dynamillay *****************/
    
                            //var number_of_rows = list.length;
                            //var number_of_cols = 2;
                            //var table_body = '<table border="1">';
                            //table_body += '<th>Name</th>'
                            //table_body += '<th>time</th>'
    
                            $("#tableDiv2").css("display", "block")
    
    
    
                           // alert(number_of_rows)
                            for (var i = number_of_rows; i >= number_of_rows; i--) {
    
    
                                $("#tableDiv2").append('<div class="blogdata header">' + list[i - 1][0] + '</div>');
                                $("#tableDiv2").append('<div class="blogdata">' + list[i - 1][1] + '</div>');
                                idtopic = [i - 1][0]
                                $('#tableDiv2').append('<div class="blogdata reply"  id=' + "div_" + idtopic + '>' + "Reply" + '</div>')
                                $("#tableDiv2").append("<BR>"); //work fine
    
    
    
                            }
    
    
    
    
                            //******************************************************************/
    
    
                           }
                              
                        else 
                        {
                           // alert ()
                            alert("topic exist")
    
                        }
    
                        // alert(list);
    
    
                    }
                    else {
    
                        alert("Enter Topic")
                    }
    
    
                    for (var i = 0; i < list.length; i++)
                    {
                       // alert(list[i]);
    
                    }
    
    
                 
                })
    
            });
    
    
            function checkValue(value, arr) {
                var status = 'Not exist';
            //    alert("val is " + value)
                for (var i = 0; i < arr.length; i++) {
                    var name = arr[i][0];
                //    alert("arr[i]" + arr[i][0])
                    if (name == value) {
                        status = 'Exist';
                        break;
                    }
                }
    
                return status;
            }
        </script>
    </head>
    
    <body class="body-content">
        <select id="Style">
            <option value="0">Select</option>
    
            <option value="~/Content/StyleSheet1.css">Grey</option>
            <option value="~/Content/StyleSheet2.css">pink</option>
    
        </select>
        <div class="container">
            <div class="container-fluid main col-lg-6" style="padding-bottom:3rem">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-3"></div>
    
    
                    <div class="col-lg-10 topicdiv">
    
                        <h3>CreateTopic</h3>
                    </div>
    
    
                    <div class="col-lg-2">
                    </div>
    
                </div>
                <div class="row">
    
                    <div class="col-lg-3 lbltopic">
                        Enter Category
                    </div>
    
                    <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
                       
                        <div id="mainddl">
                            <div id="topdivselect" style="background-color:#beb1b1;width: 20rem;padding-bottom: 0.3rem;">
                              <p>
                                <span  style="text-align:left;width:10rem"> Select Category</span>
                         <span style="text-align:right;width:8rem" class="glyphicon glyphicon-arrow-down"></span>
                              </p>
                            </div>
                      
                            <div  id="bottomdivselect" style="display:none;border-style: groove;width: 20rem">
    
                                <div class="header">one</div>
                                <div class="header">one</div>
                                <div class="header">one</div>
                            </div>
                        </div>
                      
                    </div>
                    <div class="col-lg-3">
                    </div>
            </div>
                   
    
    
               
    
                <div class="row">
    
                    <div class="col-lg-3 lbltopic">
                        Topic Title
                    </div>
    
                    <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
                        <input type="text" value="" id="txttopic">
                    </div>
                    <div class="col-lg-3">
                    </div>
    
    
                </div>
    
                
    
                <div class="row">
    
                    <div class="col-lg-3">
    
                    </div>
                    <div class="col-lg-6">
                        <button id="btnAdd" value="Add">Add Topic</button>
                    </div>
    
                    <div class="col-lg-3">
    
                    </div>
    
    
    
                </div>
                <div class="row">
    
                    <div class="col-lg-3 lbltopic">
                        Search Blog
                    </div>
    
                    <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
                        
                        <input  type="text"  id="customer" />
                    </div>
                    <div class="col-lg-3">
                    </div>
    
    
                </div>
    
                <div class="row">
    
                    <div class="col-lg-1">
    
                    </div>
    
                    <div id="tableDiv2" class="col-lg-10" style="display: none">
                        <h2 class="topics">Topics</h2>
                        <h5>orem ipsum dolor sit amet, consectetuer adipisis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget</h5>
    
                    </div>
    
                    <div class="col-lg-1">
    
                    </div>
                </div>
    
    
    
            </div>
    
            <div id="commentdiv" class="container-fluid main col-lg-6" style="padding-bottom:53rem;display:none">
                <div class="row">
                    <div class="col-lg-1"></div>
    
    
    
                    <div class="col-lg-10 topicdiv">
    
                        <h3>Blog comments</h3>
                    </div>
    
    
                    <div class="col-lg-1">
                    </div>
    
                </div>
    
    
                <div class="row">
    
                    <div class="col-lg-1">
    
                    </div>
    
                    <div id="comment" class="col-lg-10" style="display: none;padding-top:2rem">
                        Comments
                        <br />
                        <div id="Topictext" style="display: none"></div>
                        <div id="Topictextid" style="display: none"></div>
                        <textarea rows="1" class="txtcomment" value="" id="txttopicComment"></textarea>
                        <br />
                        <button id="btnAddComment" value="Add">Add Comment</button>
                    </div>
    
                    <div class="col-lg-1">
    
                    </div>
                </div>
            </div>
    
    
        </div>
    
    
    </body>
    </html>
    

    Uncaught TypeError: $(...).autocomplete is not a function

    Friday, March 22, 2019 3:56 AM
  • User839733648 posted

    Hi erum,

    I do suggest that you could replace the source: [list]  like below to check if it is the list's issue.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
            var list = [];
            var count = 0;
            var listComments = [];
            var currentdate = new Date();
            $(document).ready(function () {
                $("#customer").autocomplete({
                    source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"],
                    //minLength: 2,
                    //select: function (event, ui) {
                    //    event.preventDefault();
                    //    $("#customer").val(ui.item.label);
                    //}
                });
     </script>
    ....
    </body>
    </html>

    Best Regards,

    Jenifer

    Friday, March 22, 2019 9:50 AM
  • User81789783 posted

    list is an array ,creating at run time

    list.push([text, (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds()]);

    Sunday, March 24, 2019 11:52 AM
  • User61956409 posted

    Hi erum,

    Uncaught TypeError: $(...).autocomplete is not a function

    According to the error message, I suspect that the jQuery references issue causes the problem.

    To troubleshoot the issue, please use browser Network tool to check if all required js references are loaded well first.

    Besides, please try to set Layout = null to make no layout file be used, which would help check if the conflicts between other jQuery references in layout page with your view page cause the issue.

    @{
        ViewBag.Title = "CreateTopic";
        Layout = null;
    }

    With Regards,

    Fei Han

    Monday, March 25, 2019 6:00 AM
  • User839733648 posted

    Hi erum,

    I've tried your code and I think it is not the list's reason.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
            var list = [];
            var currentdate = new Date();
            $(document).ready(function () {
                list.push(["aaaaaa", (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds()]);
                console.log(list);
                $("#customer").autocomplete({
                    source: list,
                    minLength: 2,
                    select: function (event, ui) {
                        event.preventDefault();
                        $("#customer").val(ui.item.label);
                    }
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="customer" />
    </body>
    </html>

    result:

    I suggest that you could use ctrl+F5 to refresh the page to see that if it works again.

    Best Regards,

    Jenifer

    Monday, March 25, 2019 6:25 AM
  • User81789783 posted

    TypeError: $(...).autocomplete is not a function[Learn More]



      
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
        <link id="myCss" href="~/Content/StyleSheet1.css" rel="stylesheet" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>



    Tuesday, March 26, 2019 4:28 AM
  • User81789783 posted

    check also but not working same error

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Autocomplete - Default functionality</title>
        <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script>
            var list = [
                {value:"mary",label:"Mary"},
                {value:"mark",label:"Mark"},
                {value:"john",label:"John"},
            ];
            $(function(){
                $("#customer").autocomplete({
                    source: list,
                    minLength: 2,
                    select: function (event, ui) {
                        event.preventDefault();
                        $("#customer").val(ui.item.label);
                    }
                });
            })
        </script>
    </head>
    <body>
    
        <div class="ui-widget">
            <label for="customer">Tags: </label>
            <input id="customer">
        </div>
    
    
    </body>
    </html>

    Tuesday, March 26, 2019 6:00 AM
  • User839733648 posted

    Hi erum,

    The code works well on my side without loading any layout file or model page.

    Here is my running result.

    I still think that your page has contained some layout file or model page.

    Then the js file has conflict with the one in that file.

    I suggest that you could check the file you contained in the layout file or model page.

    Best Regards,

    Jenifer

    Tuesday, March 26, 2019 8:37 AM
  • User81789783 posted

    i just copied paste ur code and stil not

    Tuesday, March 26, 2019 9:23 AM
  • User839733648 posted

    Hi erum,

    I suggest that you could create a new page without any master page or layout references to see if it works.

    Or if possible, please provide complete codes(including some master page or layout references) which could reproduce your issue clearly so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    Wednesday, March 27, 2019 1:34 AM
  • User81789783 posted
    @{
        ViewBag.Title = "CreateTopic";
    }
    
    
    
    
    <html>
    <head>
    
        <title>MyCSS - No Master Layout</title>
    
      
      
        @*</script>*@
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
        <link id="myCss" href="~/Content/StyleSheet1.css" rel="stylesheet" />
      
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
       
       
        <script>
    
            var list = [];
            var count = 0;
            var listComments = [];
            var currentdate = new Date();
    
            $(document).mouseup(function (e) {
                var container = $("#bottomdivselect");
                // if the target of the click isn't the container nor a descendant of the container
                if (!container.is(e.target)) {
                    container.hide();
                }
            })
            $(document).ready(function () {
               
                $("#customer").autocomplete({
                    source: list,
                    minLength: 2,
                    select: function (event, ui) {
                        event.preventDefault();
                        $("#customer").val(ui.item.label);
                    }
                });
    
              
                $("#topdivselect").click(function(){
                    $("#bottomdivselect").css("display", "block")
    
                })
                $("#Style").change(function(){
    
                   // alert($("#Style option:selected").text());
                   // alert($("#Style option:selected").val());
                   // var link = $("#myCss[rel=stylesheet]")[0].href;
                  //  alert("link "+ link)
                    $('#myCss').attr('href', $("#Style option:selected").val());
                  //  var css = link.substring(link.lastIndexOf('/') + 1, link.length)
                  //  alert("css  "  + css)
                    //$('#myCss[href="' + css + '"]').attr('href', $('#Style').val() + '.css');
                   // $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
    })
    
                $(document).on("click", "div.reply", function () {
                 //   $("#tableDiv2").append('<div>' + "dfsd" + '</div>')
    
                  //  alert("id is " + $(this).attr("id"))
                 //   if ($("#comment").hasClass("fadeout")) {
    
                        $("#commentdiv").slideDown("slow")
    
                  //  }
                  //  else
                    //    $("#comment").removeClass("fadein").addClass("fadeout");
    
                    $("#comment").css("display", "block")
    
                    $("#commentdiv").css("display", "block")
                    $("#Topictext").css("display", "block")
    
                  
    
    
                    //$("#Topictext").html($(this).attr("id"))
                   // alert("Substring " + $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1))
                    var index = $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1);
                   // alert (index)
                    $("#Topictext").html(list[index][0])
                    $("#Topictextid").html($(this).attr("id"))
                   // alert("my " + $("#Topictextid").html())
    
    
                 //   alert()
    
                })
    
    
                $("#btnAddComment").click(function () {
    
                    var textcoment = $("#txttopicComment").val();
                   // alert(textcoment)
                    if (textcoment != "") {
    
                        listComments.push([$("#Topictext").html(), textcoment,])
    
    
                        for (var i = 0; i < list.length; i++) {
    
                           // alert("topic is " + listComments[i][0] + " Cooment is " + listComments[i][1]);
    
                            if (list[i][0] == $("#Topictext").html()) {
    
                                $("<p class=commentcss style=word-wrap: break-all>" + "<span>" + textcoment + "        " + (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + "</span>").insertAfter($("#div_" + [i]));
                                $(".commentcss").css('background-color', "lightslategray");
    
                               // alert($("#div_" + [i]).attr("id"))
                                $("div.reply").each(function (index, ele) {
                                 
                                    console.log($(ele).attr("id") + ":" + $(ele).nextUntil("div.header").filter("p").length)
                                   // alert($(ele).nextUntil("div.header").filter("p").length)
                                    $(ele).find("span").remove();
                                    $(ele).append('<span>' +"   "+  $(ele).nextUntil("div.header").filter("p").length +'</span' )
    
                                    //$($(ele).attr("id")).html($(ele).nextUntil("div.header").filter("p").length)
                                
                                })
                               // break;
    
    
                            }
    
                        }
    
    
    
    
                    }
    
                   // $("#commentdiv").slideUp("slow")
                })
                $("#btnAdd").click(function () {
    
                    // if()
                    var text = $("#txttopic").val();
                    var categorytext = $('span:first', "#topdivselect").text()
                //    alert(categorytext)
    
                    if (text != "" && categorytext != "Select Category") {
                        //  list.push(text)
    
                        $("#rcorners3").slideUp("slow")
                        $("#rcorners3").css("display", "none")
                        //check if already exist
    
    
    
                        var topicname = $('div.header').html();
                        var status = checkValue(text, list, categorytext)
                    //    alert(status)
                        if (status == 'Not exist')
    
                         
                        {
    
                            $("#rcorners2").slideUp("slow")
                            $("#rcorners2").css("display", "none")
    
                           
                            list.push([text, (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(), categorytext]);
                          //  alert($('span:first', "#topdivselect").text())
    
                            //*************************************Create Table Dynamillay *****************/
    
                            var number_of_rows = list.length;
                            var number_of_cols = 2;
                            var table_body = '<table border="1">';
                            table_body += '<th>Name</th>'
                            table_body += '<th>time</th>'
    
                            for (var i = 0; i < number_of_rows; i++) {
                                table_body += '<tr>';
                                for (var j = 0; j < number_of_cols; j++) {
                                    table_body += '<td>';
    
                                    //if (j == 1) {
    
    
                                    //    //table_body += (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
    
    
                                    //}
                                    //   else {
                                    table_body += list[i][j];
                                    // }
                                    table_body += '</td>';
                                }
                                table_body += '</tr>';
                            }
                            table_body += '</table>';
                            //$('#tableDiv').html(table_body);
    
    
                            //******************************************************************/
    
                            //*************************************Create Datalist Dynamillay *****************/
    
                            //var number_of_rows = list.length;
                            //var number_of_cols = 2;
                            //var table_body = '<table border="1">';
                            //table_body += '<th>Name</th>'
                            //table_body += '<th>time</th>'
    
                            $("#tableDiv2").css("display", "block")
    
    
    
                           // alert(number_of_rows)
                            for (var i = number_of_rows; i >= number_of_rows; i--) {
    
    
                                //$("#tableDiv2").append('<div class="blogdata header">' + list[i - 1][0] + '</div>');
                                $("#tableDiv2").append('<div class="blogdata header">' + $('span:first', "#topdivselect").text() + '<span style="top:4px;padding-left:0.3rem;padding-right: 1rem;" class="glyphicon glyphicon-arrow-right">' + '</span>' + list[i - 1][0] + '</div>');
                                $("#tableDiv2").append('<div class="blogdata">' + list[i - 1][1] + '</div>');
                                idtopic = [i - 1][0]
                                $('#tableDiv2').append('<div class="blogdata reply"  id=' + "div_" + idtopic + '>' + "Reply" + '</div>')
                                $("#tableDiv2").append("<BR>"); //work fine
    
    
    
                            }
    
    
    
    
                            //******************************************************************/
    
                            $("#rcorners4").slideDown("slow")
                            $("#rcorners4").css("display", "block")
    
                           // alert($("#bottomdivselect > div").length)
                            if ($("#bottomdivselect > div").length > 0) {
                                $("#treetopic").empty()
                                
    
                                $('#bottomdivselect').children().each(function () {
                                    var $currentElement = $(this);
                                    
                                   $('#treetopic').append('<div>' + $currentElement.html()+ '</div>'+'<br>');
                                });
                            }
                           
                           }
                              
                        else 
                        {
                           // alert ()
                          //  alert("topic exist")
                            $("#rcorners2").slideDown ("slow")
                            $("#rcorners2").css("display", "block")
    
                            $("#rcorners4").slideUp("slow")
                            $("#rcorners4").css("display", "none")
    
                        }
    
                        // alert(list);
    
    
                    }
                    else {
    
                        $("#rcorners2").slideUp("slow")
                        $("#rcorners2").css("display", "none")
                        $("#rcorners3").slideDown("slow")
                        $("#rcorners3").css("display", "block")
    
                        $("#rcorners4").slideUp("slow")
                        $("#rcorners4").css("display", "none")
                      //  alert("Enter Topic/Category")
                    }
    
    
                    for (var i = 0; i < list.length; i++)
                    {
                       // alert(list[i]);
    
                    }
    
    
                 
                })
    
                $(".ddlitemvalue").click(function (e) {
                  //  alert($(this).html())
    
                
                    $('span:first', "#topdivselect").text($(this).html())
                })
    
                
            });
    
    
            function checkValue(value, arr,category) {
                var status = 'Not exist';
                   // alert("category is " + category)
                for (var i = 0; i < arr.length; i++) {
                    var name = arr[i][0];
                    var categoryvalue = arr[i][2];
                //    alert("arr[i]" + arr[i][0])
                    if (name == value && categoryvalue == category ) {
                        status = 'Exist';
                        break;
                    }
                }
    
                return status;
            }
        </script>
    </head>
    
    <body class="body-content">
    
        <select id="Style">
            <option value="0">Select</option>
    
            <option value="~/Content/StyleSheet1.css">Grey</option>
            <option value="~/Content/StyleSheet2.css">pink</option>
    
        </select>
        <div class="container">
    
            <div class="container-fluid main col-lg-3" style="padding-bottom:3rem">
                
                <div class="row">
                    <div class="col-lg-1"></div>
                    <div  style="align-content:center" class="col-lg-10 topicdiv">
    
                        <h3 style="text-align:center">tree</h3>
                        <div id="treetopic"></div>
                    </div>
                    <div class="col-lg-1"></div>
                </div>
                </div>
                <div class="container-fluid main col-lg-6" style="padding-bottom:3rem">
                    <div class="row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-3"></div>
    
    
                        <div class="col-lg-10 topicdiv">
    
                            <h3>CreateTopic</h3>
                        </div>
    
    
                        <div class="col-lg-2">
                        </div>
    
                    </div>
                    <div class="row">
    
                        <div class="col-lg-3 lbltopic">
                            Enter Category
                        </div>
    
                        <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
    
                            <div id="mainddl">
                                <div id="topdivselect" style="background-color:#beb1b1;width: 20rem;;padding-bottom: 0.3rem;">
                                    <p>
                                        <span style="text-align:left;width:10rem;padding-left: 0.5rem">Select Category</span>
                                        <span style="text-align:right;width:8rem;;right:20px;" class="glyphicon glyphicon-arrow-down"></span>
                                    </p>
                                </div>
    
                                <div id="bottomdivselect" style="display:none;border-style: groove;width: 20rem">
    
                                    <div class="ddlitemvalue">one</div>
                                    <div class="ddlitemvalue">two</div>
                                    <div class="ddlitemvalue">three</div>
                                </div>
                            </div>
    
                        </div>
                        <div class="col-lg-3"></div>
                    </div>
    
    
    
    
    
                    <div class="row">
    
                        <div class="col-lg-3 lbltopic">
                            Topic Title
                        </div>
    
                        <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
                            <input type="text" value="" id="txttopic">
                        </div>
                        <div class="col-lg-3">
                        </div>
    
    
                    </div>
    
                    <div class="=row">
                        <div class="col-lg-12">
                            <div>
                                <p id="rcorners2" style="display:none;margin-top: 0.5rem;margin-bottom: 0.5rem" class="btn btn-warning">Topic already Exist in Same Category</p>
                                <p id="rcorners3" style="display:none;margin-top: 0.5rem;margin-bottom: 0.5rem" class="btn btn-danger">Enter Topic</p>
                                <p id="rcorners4" style="display:none;margin-top: 0.5rem;margin-bottom: 0.5rem" class="btn btn-success">Topic Added Sucessfully</p>
    
                            </div>
    
                        </div>
    
                    </div>
    
                    <div class="row">
    
                        <div class="col-lg-3">
    
                        </div>
                        <div class="col-lg-6">
                            <button id="btnAdd" value="Add">Add Topic</button>
                        </div>
    
                        <div class="col-lg-3">
    
                        </div>
    
    
    
                    </div>
                    <div class="row">
    
                        <div class="col-lg-3 lbltopic">
                            Search Blog
                        </div>
    
                        <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
    
                            <div class="ui-widget">
                                <label for="customer"> </label><input id="customer" />
                            </div>
                        </div>
                        <div class="col-lg-3">
                        </div>
    
    
                    </div>
    
                    <div class="row">
    
                        <div class="col-lg-1">
    
                        </div>
    
                        <div id="tableDiv2" class="col-lg-10" style="display: none">
                            <h2 class="topics">Topics</h2>
                            <h5>orem ipsum dolor sit amet, consectetuer adipisis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget</h5>
    
                        </div>
    
                        <div class="col-lg-1">
    
                        </div>
                    </div>
    
    
    
                </div>
    
                <div id="commentdiv" class="container-fluid main col-lg-3" style="padding-bottom:53rem;display:none">
                    <div class="row">
                        <div class="col-lg-1"></div>
    
    
    
                        <div class="col-lg-10 topicdiv">
    
                            <h3>Blog comments</h3>
                        </div>
    
    
                        <div class="col-lg-1">
                        </div>
    
                    </div>
    
    
                    <div class="row">
    
                        <div class="col-lg-1">
    
                        </div>
    
                        <div id="comment" class="col-lg-10" style="display: none;padding-top:2rem">
                            Comments
                            <br />
                            <div id="Topictext" style="display: none"></div>
                            <div id="Topictextid" style="display: none"></div>
                            <textarea rows="1" class="txtcomment" value="" id="txttopicComment"></textarea>
                            <br />
                            <button id="btnAddComment" value="Add">Add Comment</button>
                        </div>
    
                        <div class="col-lg-1">
    
                        </div>
                    </div>
                </div>
    
    
            </div>
    
    
    </body>
    </html>
    

    what else required

    Wednesday, March 27, 2019 3:50 AM
  • User839733648 posted

    Hi erum,

    As Fei Han has mentioned above, have you tried set layout=null?

    @{
        ViewBag.Title = "CreateTopic";
        Layout = null;
    }

    You seem to use MVC. When you set layout=null, therer will be no conflict with any reference in other page.

    I've tried on my side, there is no such error all the time.

    Best Regards,

    Jenifer

    Wednesday, March 27, 2019 6:04 AM
  • User81789783 posted

    i have updated code like this .. but still not working

    @{
        ViewBag.Title = "CreateTopic";
        Layout = null;
    }
    
    
    
    
    <html>
    <head>
    
        <title>MyCSS - No Master Layout</title>
    
      
      
        @*</script>*@
     
       
        <link id="myCss" href="~/Content/StyleSheet1.css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
    
            var list = [];
            var count = 0;
            var listComments = [];
            var currentdate = new Date();
            var count;
    
            $(document).mouseup(function (e) {
                var container = $("#bottomdivselect");
                // if the target of the click isn't the container nor a descendant of the container
                if (!container.is(e.target)) {
                    container.hide();
                }
            })
            $(document).ready(function () {
               
                $("#customer").autocomplete({
                    source: list,
                    minLength: 2,
                    select: function (event, ui) {
                        event.preventDefault();
                        $("#customer").val(ui.item.label);
                    }
                });
    
                if ($("#bottomdivselect > div").length > 0) {
                    //$("#treetopic").empty()
                    $('#bottomdivselect').children().each(function () {
                      
                        var $currentElement = $(this);
                       // alert($currentElement.attr("id"))
                        console.log("$currentElement  " + $currentElement.html())
                        $('#treetopic').append('<div  class="glyphicon glyphicon-plus topicstree rcorners2" id=' + "div_" + $currentElement.html() + '>' + $currentElement.html() + '</div>' + '<p>');
                        // $(this).children(':visible').length
    
                    
                    })
                    }
                    
                $(".glyphicon").click(function () {
                   
                    if ($(this).children(':visible').length != 0) {
                       // alert($(this).children(':visible').length)
                      
                        $(this).children().hide();             
                        var selectedID = $(this).attr('id')
                   
                        //$(this).toggleClass('glyphicon-minus');
                        $(this).removeClass('glyphicon glyphicon-plus');
                        $(this).addClass('glyphicon glyphicon-minus');
    
    
                   }
                   else 
                    {
    
                        //  alert()
                        $(this).removeClass('glyphicon glyphicon-minus');
                        $(this).addClass('glyphicon glyphicon-plus');
    
                        $(this).children('.treetopicheader').show();
                      
                   }
    
                   
    
                 
                
                  
    
                  
                })
                $("#topdivselect").click(function(){
                    $("#bottomdivselect").css("display", "block")
    
                })
                $("#Style").change(function(){
    
                   
                    $('#myCss').attr('href', $("#Style option:selected").val());
                
    })
    
                $(document).on("click", "div.reply", function () {
                 //   $("#tableDiv2").append('<div>' + "dfsd" + '</div>')
    
                  //  alert("id is " + $(this).attr("id"))
                 //   if ($("#comment").hasClass("fadeout")) {
    
                        $("#commentdiv").slideDown("slow")
    
                  //  }
                  //  else
                    //    $("#comment").removeClass("fadein").addClass("fadeout");
    
                    $("#comment").css("display", "block")
    
                    $("#commentdiv").css("display", "block")
                    $("#Topictext").css("display", "block")
    
                  
    
    
                    //$("#Topictext").html($(this).attr("id"))
                   // alert("Substring " + $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1))
                    var index = $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1);
                   // alert (index)
                    $("#Topictext").html(list[index][0])
                    $("#Topictextid").html($(this).attr("id"))
                   // alert("my " + $("#Topictextid").html())
    
    
                 //   alert()
    
                })
    
    
                $("#btnAddComment").click(function () {
    
                    var textcoment = $("#txttopicComment").val();
                   
                    if (textcoment != "") {
    
                        listComments.push([$("#Topictext").html(), textcoment,])
    
    
                        for (var i = 0; i < list.length; i++) {
    
                         
    
                            if (list[i][0] == $("#Topictext").html()) {
    
                                $("<p class=commentcss style=word-wrap: break-all>" + "<span>" + textcoment + "        " + (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + "</span>").insertAfter($("#div_" + [i]));
                                $(".commentcss").css('background-color', "lightslategray");
    
                             
                                $("div.reply").each(function (index, ele) {
                                 
                                    console.log($(ele).attr("id") + ":" + $(ele).nextUntil("div.header").filter("p").length)
                                  
                                    $(ele).find("span").remove(); //remove for count of reply
                                    $(ele).append('<span>' +"   "+  $(ele).nextUntil("div.header").filter("p").length +'</span' )
    
                                
                                
                                })
                               // break;
    
    
                            }
    
                        }
    
    
    
    
                    }
    
                   // $("#commentdiv").slideUp("slow")
                })
                $("#btnAdd").click(function () {
    
                    // if()
                    var text = $("#txttopic").val();
                    var categorytext = $('span:first', "#topdivselect").text()
                //    alert(categorytext)
    
                    if (text != "" && categorytext != "Select Category") {
                        //  list.push(text)
    
                        $("#rcorners3").slideUp("slow")
                        $("#rcorners3").css("display", "none")
                        //check if already exist
    
    
    
                        var topicname = $('div.header').html();
                        var status = checkValue(text, list, categorytext)
                    //    alert(status)
                        if (status == 'Not exist')
    
                         
                        {
    
                            $("#rcorners2").slideUp("slow")
                            $("#rcorners2").css("display", "none")
    
                           
                            list.push([text, (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(), categorytext]);
                        
    
                            //*************************************Create Table Dynamillay *****************/
    
                            var number_of_rows = list.length;
                            var number_of_cols = 2;
                            var table_body = '<table border="1">';
                            table_body += '<th>Name</th>'
                            table_body += '<th>time</th>'
    
                            for (var i = 0; i < number_of_rows; i++) {
                                table_body += '<tr>';
                                for (var j = 0; j < number_of_cols; j++) {
                                    table_body += '<td>';
    
                                    if (j == 1) {
    
    
                                        table_body += (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
    
    
                                    }
                                       else {
                                    table_body += list[i][j];
                                     }
                                    table_body += '</td>';
                                }
                                table_body += '</tr>';
                            }
                            table_body += '</table>';
                            $('#tableDiv').html(table_body);
    
    
                            //******************************************************************/
    
                            //*************************************Create Datalist Dynamillay *****************/
    
                            //var number_of_rows = list.length;
                            //var number_of_cols = 2;
                            //var table_body = '<table border="1">';
                            //table_body += '<th>Name</th>'
                            //table_body += '<th>time</th>'
    
                            $("#tableDiv2").css("display", "block")
    
    
    
                           // alert(number_of_rows)
                            for (var i = number_of_rows; i >= number_of_rows; i--) {
    
    
                               
                                // $("#tableDiv2").append('<div class="blogdata header">' + $('span:first', "#topdivselect").text() + '<span style="top:4px;padding-left:0.3rem;padding-right: 1rem;" class="glyphicon glyphicon-arrow-right">' + '</span>' + list[i - 1][0] + '</div>');
                                $("#tableDiv2").append('<div class="blogdata header">' + '<span>'+ categorytext +'</span>'   + '<span style="top:4px;padding-left:0.3rem;padding-right: 1rem;" class="glyphicon glyphicon-arrow-right">' + '</span>' + '<span>' + list[i - 1][0] +'</span>' + '</div>');
    
                                $("#tableDiv2").append('<div class="blogdata">' + list[i - 1][1] + '</div>');
                                idtopic = [i - 1][0]
                                $('#tableDiv2').append('<div class="blogdata reply"  id=' + "div_" + idtopic + '>' + "Reply" + '</div>')
                                $("#tableDiv2").append("<BR>"); //work fine
    
    
    
                            }
    
    
    
    
                            //******************************************************************/
    
                            $("#rcorners4").slideDown("slow")
                            $("#rcorners4").css("display", "block")
    
                           // alert($("#bottomdivselect > div").length)
                          
                                
    
                                $('#bottomdivselect').children().each(function () {
                                    var $currentElement = $(this);
                                 //   alert ($(this).html())
                                   // cons
                                  //  console.log("$currentElement  " + $currentElement.html())
                                  //  $('#treetopic').append('<div id=' + "div_" + $currentElement.html() + '>' + $currentElement.html() + '</div>' + '<br>');
                                  ////  $(".header span:first-child").each(function (index, ele) {
                                        //console.log("#id_0"+ )
                                        if (categorytext == $currentElement.html()) {
                                            console.log("Add at " + $currentElement.html() + "   " + text)
                                           
                                            $("#div_" + $currentElement.html()).append("<div   class=treetopicheader   id=" + "div_" + $currentElement.html() + text + ">" + "<span>" + text + "</span>" + "</div>")
                                            //$(this).children(':visible').length
    
                                         //  count = $("#div_" + $currentElement.html()).children(':visible').length
                                          //  alert(count)
                                            //  $("<div   class=treetopicheader   id=" + "div_one_" + text + ">" + "<span>" + text + "</span>" + "</div>").insertAfter($("#div_" + $currentElement.html()));
                                         //   $("#div_" + $currentElement.html()).append('<span>' + count + '</span>')
                                          
    
                                            //$("#div_" + $currentElement.html()).append('<span class=blogdata>' + count + '</span>')
                                         
                                     
                                    }
                                
                                  //  })
                                });
                          //  }
    
    
                           
                           }
                              
                        else 
                        {
                           // alert ()
                          //  alert("topic exist")
                            $("#rcorners2").slideDown ("slow")
                            $("#rcorners2").css("display", "block")
    
                            $("#rcorners4").slideUp("slow")
                            $("#rcorners4").css("display", "none")
    
                        }
    
                        // alert(list);
    
    
                    }
                    else {
    
                        $("#rcorners2").slideUp("slow")
                        $("#rcorners2").css("display", "none")
                        $("#rcorners3").slideDown("slow")
                        $("#rcorners3").css("display", "block")
    
                        $("#rcorners4").slideUp("slow")
                        $("#rcorners4").css("display", "none")
                      //  alert("Enter Topic/Category")
                    }
    
    
                    for (var i = 0; i < list.length; i++)
                    {
                       // alert(list[i]);
    
                    }
    
    
                 
                })
    
                $(".ddlitemvalue").click(function (e) {
                  //  alert($(this).html())
    
                
                    $('span:first', "#topdivselect").text($(this).html())
                })
    
                
            });
    
    
            function checkValue(value, arr,category) {
                var status = 'Not exist';
                   // alert("category is " + category)
                for (var i = 0; i < arr.length; i++) {
                    var name = arr[i][0];
                    var categoryvalue = arr[i][2];
                //    alert("arr[i]" + arr[i][0])
                    if (name == value && categoryvalue == category ) {
                        status = 'Exist';
                        break;
                    }
                }
    
                return status;
            }
        </script>
    </head>
    
    <body class="body-content">
    
        <select id="Style">
            <option value="0">Select</option>
    
            <option value="~/Content/StyleSheet1.css">Grey</option>
            <option value="~/Content/StyleSheet2.css">pink</option>
    
        </select>
        <div class="container">
    
            <div class="container-fluid main col-lg-3" style="padding-bottom:3rem">
                
                <div class="row">
                    <div class="col-lg-1"></div>
                    <div  style="align-content:center" class="col-lg-10 topicdiv">
    
                        <h3 style="text-align:center">tree</h3>
                      
                    </div>
                    <div  id="treetopic"></div>
                    <div class="col-lg-1"></div>
                </div>
                </div>
                <div class="container-fluid main col-lg-6" style="padding-bottom:3rem">
                    <div class="row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-3"></div>
    
    
                        <div class="col-lg-10 topicdiv">
    
                            <h3>CreateTopic</h3>
                        </div>
    
    
                        <div class="col-lg-2">
                        </div>
    
                    </div>
                    <div class="row">
    
                        <div class="col-lg-3 lbltopic">
                            Enter Category
                        </div>
    
                        <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
    
                            <div id="mainddl">
                                <div id="topdivselect" style="background-color:#beb1b1;width: 20rem;;padding-bottom: 0.3rem;">
                                    <p>
                                        <span style="text-align:left;width:10rem;padding-left: 0.5rem">Select Category</span>
                                        <span style="text-align:right;width:8rem;;right:20px;" class="glyphicon glyphicon-arrow-down"></span>
                                    </p>
                                </div>
    
                                <div id="bottomdivselect" style="display:none;border-style: groove;width: 20rem">
    
                                    <div class="ddlitemvalue">one</div>
                                    <div class="ddlitemvalue">two</div>
                                    <div class="ddlitemvalue">three</div>
                                </div>
                            </div>
    
                        </div>
                        <div class="col-lg-3"></div>
                    </div>
    
    
    
    
    
                    <div class="row">
    
                        <div class="col-lg-3 lbltopic">
                            Topic Title
                        </div>
    
                        <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
                            <input type="text" value="" id="txttopic">
                        </div>
                        <div class="col-lg-3">
                        </div>
    
    
                    </div>
    
                    <div class="=row">
                        <div class="col-lg-12">
                            <div>
                                <p id="rcorners2" style="display:none;margin-top: 0.5rem;margin-bottom: 0.5rem" class="btn btn-warning">Topic already Exist in Same Category</p>
                                <p id="rcorners3" style="display:none;margin-top: 0.5rem;margin-bottom: 0.5rem" class="btn btn-danger">Enter Topic</p>
                                <p id="rcorners4" style="display:none;margin-top: 0.5rem;margin-bottom: 0.5rem" class="btn btn-success">Topic Added Sucessfully</p>
    
                            </div>
    
                        </div>
    
                    </div>
    
                    <div class="row">
    
                        <div class="col-lg-3">
    
                        </div>
                        <div class="col-lg-6">
                            <button id="btnAdd" value="Add">Add Topic</button>
                        </div>
    
                        <div class="col-lg-3">
    
                        </div>
    
    
    
                    </div>
                    <div class="row">
    
                        <div class="col-lg-3 lbltopic">
                            Search Blog
                        </div>
    
                        <div class="col-lg-6" style="padding-top: 4rem;padding-left: 10px;">
    
                            <div class="ui-widget">
                                <label for="customer"> </label><input id="customer" />
                            </div>
                        </div>
                        <div class="col-lg-3">
                        </div>
    
    
                    </div>
    
                    <div class="row">
    
                        <div class="col-lg-1">
    
                        </div>
    
                        <div id="tableDiv2" class="col-lg-10" style="display: none">
                            <h2 class="topics">Topics</h2>
                            <h5>orem ipsum dolor sit amet, consectetuer adipisis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget</h5>
    
                        </div>
    
                        <div class="col-lg-1">
    
                        </div>
                    </div>
    
    
    
                </div>
    
                <div id="commentdiv" class="container-fluid main col-lg-3" style="padding-bottom:53rem;display:none">
                    <div class="row">
                        <div class="col-lg-1"></div>
    
    
    
                        <div class="col-lg-10 topicdiv">
    
                            <h3>Blog comments</h3>
                        </div>
    
    
                        <div class="col-lg-1">
                        </div>
    
                    </div>
    
    
                    <div class="row">
    
                        <div class="col-lg-1">
    
                        </div>
    
                        <div id="comment" class="col-lg-10" style="display: none;padding-top:2rem">
                            Comments
                            <br />
                            <div id="Topictext" style="display: none"></div>
                            <div id="Topictextid" style="display: none"></div>
                            <textarea rows="1" class="txtcomment" value="" id="txttopicComment"></textarea>
                            <br />
                            <button id="btnAddComment" value="Add">Add Comment</button>
                        </div>
    
                        <div class="col-lg-1">
    
                        </div>
                    </div>
                </div>
    
    
            </div>
    
    
    </body>
    </html>
    

    Wednesday, April 3, 2019 4:33 AM
  • User81789783 posted

    Jenifer,

    I tried ur code that u posted on 3/25/2019 but it showing empty list when i type 'aa' ..any help

    @{
        ViewBag.Title = "CreateTopic";
        Layout = null;
    }
    
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <script>
            var list = [];
            var currentdate = new Date();
            $(document).ready(function () {
                list.push(["aaaaaa", (currentdate.getMonth() + 1) + '/' + currentdate.getDate() + '/' + currentdate.getFullYear() + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds()]);
                console.log(list);
                $("#customer").autocomplete({
                    source: list,
                    minLength: 2,
                    select: function (event, ui) {
                        event.preventDefault();
                        $("#customer").val(ui.item.label);
                    }
                });
            });
        </script>
    </head>
    <body>
        <input type="text" id="customer" />
    </body>
    </html>

    Wednesday, April 3, 2019 5:26 AM
  • User81789783 posted

    any one can help

    Saturday, April 6, 2019 7:00 AM
  • User283528319 posted
    $(document).ready(function TumIllerListesi() {
        $.get('/NK/TumIllerListesi', function (result) {
            var mylist = result;
    
        }).then(function (mylist) {
            $("#Il").autocomplete({
                source: mylist,
                autoFocus: true,
                minLength: 0,
                change: function () {
    
                    var value = this.value;
                    var valueLowerCase = value.toLowerCase();
                    var valid = false;
                    //Otomatik doldurma liste değerleri ile girilen value'yu karşılaştır, listeden bir değer değilse sil
                    for (var i = 0; i < mylist.length; i++) {
                        if (mylist[i].toLowerCase() == valueLowerCase) {
                            valid = true;
                            i = mylist.length;
                        }
                        $(this.parentNode).removeClass("form-has-error");
                    }
                    if (valid == false) {
    
                        $(this.parentNode).addClass("form-has-error");
                        this.value = "";
                    }
                }
            }).on("focus", function () {
                $(this).autocomplete("search", '');
            });
        });
    })

    This is <g class="gr_ gr_26 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-del replaceWithoutSep" id="26" data-gr-id="26">a working</g> code from https://jqueryui.com/autocomplete/ it is a great plugin with lots of functionality. I <g class="gr_ gr_185 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="185" data-gr-id="185">custimized</g> and downloaded my <g class="gr_ gr_232 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="232" data-gr-id="232">ui</g> script (just needed autocomplete and drag) 

    It has 0 length search (immediate drop down)

    It has <g class="gr_ gr_9 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="9" data-gr-id="9">check-validate</g> function on close action

    and <g class="gr_ gr_8 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="8" data-gr-id="8">onfocus</g> drop down too. btw it gets the dropdown list from a controller

    Saturday, April 6, 2019 10:42 AM