Asked by:
auto complete is not working
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 functionAccording 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
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
