'Codemirror Closing tags not styling

I am trying to get a code editor that shows the result on clicking a button. I've adapted How to output result of codemirror in iframe? but I am having issues with the closing tags on the example code not being styled.

See screenshot and code below.

I would be very appreciative if someone can take a look and point me in the right direction (I am not very good with JS).

<!DOCTYPE html>
<html>

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"/> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/theme/neo.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.js"></script>   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>  
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/fold/indent-fold.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/edit/matchbrackets.min.js"></script>
   
  <style>
  body {
    background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
  </head>

  <body>  
      <div id="codeeditor"></div>
      <iframe>Example</iframe>
      <button>RUN</button>
    <script>
       var editor = CodeMirror(document.getElementById("codeeditor"), {
    value: "<html>\n<body class=\"fdf\">\n<h1>Hello world</h1>\n<button type=\"button\" disabled>Click Me!</button>\n</body>\n</html>",
    theme: "neo",
    lineNumbers: true,
    matchBrackets: true
});

$("button").click(function(){     
  $("iframe").contents().find("body").html(editor.getValue());
})
    </script>
  </body>

</html>

Solution 1:^[1]

You Can Try that Code:-

   <!doctype html>
    <html>
      <head>
    <title>CodeMirror</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
    <script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
    <link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
    <script src="https://CodeMirror.net/lib/codemirror.js"></script>
    <script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
    <script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
     <script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
    <script src="https://CodeMirror.net/mode/meta.js"></script>
    <script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
    <script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
    <script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
    <script src="https://CodeMirror.net/mode/xml/xml.js"></script>
    <script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
    <script src="https://CodeMirror.net/mode/css/css.js"></script>
    <script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="https://CodeMirror.net/addon/dialog/dialog.js"></script> 
    <script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
    <script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script> 
    <script src="https://CodeMirror.net/addon/search/search.js"></script> 
    <script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script> 
    <script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
    </head>
    <body>
    <div id="editor"></div>
<button onclick="CloseTag()">Close Tag</button>
    <script>
        function CloseTag() {
            
            myCodeMirror.execCommand("closeTag");
        }
    </script>
    <script>
       var myCodeMirror = CodeMirror(
       document.getElementById('editor'), {
          lineNumbers: true,
       });
    </script>
    </body>
    </html>

Solution 2:^[2]

Sounds like autocomplete is being called before the library that defines it is actually loaded - if that makes sense?

If your script is inline, rather than referenced, move it to the bottom of the page. Or (my preferred option) place the script in an external .js file and then reference it:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="yourNewJSFile"></script>

Edit: if you externalise your script, ensure it is referenced AFTER any JQuery libraries it relies on :)

Solution 3:^[3]

This is embarrassing but it held me up for a while so I figured I would post it here.

I did not have jQuery UI installed, only classic jQuery, which does not include autocomplete (apparently). Adding the following tags enabled autocomplete via jQuery UI.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

and

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Of note, the HTML value autocomplete="off" for either the form or form block will prevent the brower from performing the method .autocomplete(), but will not block the jQuery UI function.

Solution 4:^[4]

For my case, my another team member included another version of jquery.js when he add in bootstrap.min.js. After remove the extra jquery.js, the problem is solved

Solution 5:^[5]

Possibly multiple jquery.js file are added in , and the conflict appeared.

Solution 6:^[6]

You are calling the function before the page loads jQuery. It is always advisable to use jQuery inside

$(document).ready(function(){ //Your code here });

In your case:

$(document).ready(function(){
   $(function(){
      $( "#searcharea" ).autocomplete({
         source: "suggestions.php"
      });
      $( "#searchcat" ).autocomplete({
         source: "suggestions1.php"
      });
   });
});

Solution 7:^[7]

Note that if you're not using the full jquery UI library, this can be triggered if you're missing Widget, Menu, Position, or Core. There might be different dependencies depending on your version of jQuery UI

Solution 8:^[8]

My issue ended up being visual studio catching an unhandled exception and preventing the script from running any further. Because I was running in the IDE, it looked like there was an issue when there wasn't. Autocomplete was working just fine. I added a try/catch block and that made the IDE happy.

 $.ajax({
            url: "/MyController/MyAction",
            type: "POST",
            dataType: "json",
            data: { prefix: request.term },
            success: function (data) {
                try {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.Name };
                    }))
                } catch (err) { }

            }
        })

Solution 9:^[9]

I've got this error working in ASP.net. When I run the application from visual studio it worked all fine, but when I published the project and tested it , I've got that error "Autocomplete is not a function" in chrom Inspect debugger. I found out that the deferences between two environments were caused by a definition in web.config. in compilation tag. if assign debug="false" then all bundel definitions are executed and compilation is done as a release. if debug = true" then compilation is for a debug stage that not include bundeling and minifyning js library. Therefore the deferences between environments.

<system.web>
    <compilation debug="false" targetFramework="4.5.1"/>
    <httpRuntime targetFramework="4.5.1"/>
</system.web>

In addition, examining those two environments I saw that for debug environment everywhere (_Layout.cshtml) @Scripts.Render("~/bundles/jquery") was in the code, where (under APP_Start) BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Static/js/lib/jquery-{version}.js", "~/Static/js/lib/jquery-ui.js"));

it rended as:

<script src="/Static/js/lib/jquery-1.12.4.js"></script>
<script src="/Static/js/lib/jquery-ui.js"></script>

and the other environment (debug = false)

<script src="/bundles/jquery?v=YOLEkbKJYtNeDq0o56xjzXWKoYzrF5Vkqgyc9Cb0YgI1"></script>

In debug mode it works and the other one got the problem.

Aspecting the js lib I saw two files of jquery-ui:

jquery-ui.js jquery-ui.min.js

it turns out that both of them come as default from the template of new mvc project. When jquery-ui.min.js was deleted from the library the problem resolved.

I belive that even though jquery-ui.js was defined in BundleConfig.cs, actually jquery-ui.min.js was taken.

By the way, jquery-ui.min.js didn't include autocomple function apposed to jquery-ui.js that included it.

cheers.

Solution 10:^[10]

If your page has a section for Scripts such as the following, then ensure you refer to your Jquery library from inside this section.

@section Scripts 
{ 
   <script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
}

Solution 11:^[11]

when you see this problem always put your autocomplete function in keyup function and ensure you have added the libraries

$( "#searcharea" ).keyup(function(){
   $( "#searcharea" ).autocomplete({
      source: "suggestions.php"
   });
});

Solution 12:^[12]

I faced the same problem and try to solve, but unfortunately it wouldn't work anymore ! If you are facing the same problem and can't find the solution, it may help you.

If you configure jquery/jquery-ui globally in webpack, you need to import autocomplete like this

import { autocomplete } from 'webpack-jquery-ui';

And you must include jquery-ui.css in the head section of html, i don't understand why its not working without it!

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Hope your problem will be solved.

And make sure you include/install the following three

jquery-ui-css
jquery-ui
jquery

Solution 13:^[13]

Check the Sources-> Scripts in browser Inspect tool. Sometimes multiple jQuery files can be referring. In ASP.NET MVC, this usually happens when the layout page already has a jQuery reference.

Solution 14:^[14]

Loading jQuery library before Angularjs library helped me.

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

Solution 15:^[15]

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Zezo Android
Solution 2
Solution 3	Saud Khan
Solution 4	sky91
Solution 5
Solution 6	Saud Khan
Solution 7	Lotus
Solution 8	Sue
Solution 9	Zohar Chiprut
Solution 10	bobcatBisto
Solution 11	Naveen Roy
Solution 12
Solution 13	marc_s
Solution 14	Mano Aravindhan
Solution 15	Caffein

'Codemirror Closing tags not styling

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]