CODEWITHSUNDEEP
javascriptc#htmlasp.net
Hameed
Hameed

Reputation: 51

Javascript file not loading in aspx ? ASP.NET C#

I want this type of functionality in my project.

Here is the JS Bin link.

There are 3 files stylesheet.css, javascript.js and a html file.

I'm trying in Visual Studio 2010 ASP.NET C# but it is not working: the Javascript file is not loaded.

ASPX code:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="StyleSheet.css" type="text/css" />
        <script type="text/javascript" src="JScript.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="editor" contenteditable="true"></div>
        </form>
    </body>
</html>

StyleSheet.css:

body {
}

#editor {
    width: 400px;
    height: 100px;
    padding: 10px;
    background-color: #444;
    color: white;
    font-size: 14px;
    font-family: monospace;
    display:block;
}

.statement {
    color: orange;
}

JScript.js:

$("#editor").on("keydown keyup", function (e) {
if (e.keyCode == 32) {
    var text = $(this).text().replace(/[\s]+/g, " ").trim();
    var word = text.split(" ");
    var newHTML = "";

    $.each(word, function (index, value) {
        switch (value.toUpperCase()) {
            case "SELECT":
            case "FROM":
            case "WHERE":
            case "LIKE":
            case "BETWEEN":
            case "NOT LIKE":
            case "FALSE":
            case "NULL":
            case "FROM":
            case "TRUE":
            case "NOT IN":
                newHTML += "<span class='statement'>" + value + "&nbsp;</span>";
                break;
            default:
                newHTML += "<span class='other'>" + value + "&nbsp;</span>";
        }
    });
    $(this).html(newHTML);

    //// Set cursor postion to end of text
    var child = $(this).children();
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(child[child.length - 1], 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    $(this)[0].focus();
}
});

JScript.js file is not working. Keyword color not changing but i provided the link its working fine.

How can i resolve this issue?

Upvotes: 2

Views: 8813

Answers (1)

emerson.marini
emerson.marini

Reputation: 9348

Like I suggested in the comments, you would benefit from some tutorials on how to work not just with jQuery, but also with HTML, CSS and Javascript. You're lacking some very basic knowledge to be able to work with the stack. I'm answering your question just to give you a headstart:

<head>
    <link rel="stylesheet" href="StyleSheet.css" type="text/css" />
    <!-- Loading the jQuery library before everything else. 
        Getting it from Google CDN, but you can have it locally. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Loading your own Javascript file. -->
    <script type="text/javascript" src="JScript.js"></script>
</head>

Your Javascript code should be wrapped within a document ready event handler:

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

From what I understood from your code, you're trying to highlight some words when typing SQL script in the box. It's working just fine: Demo

More info:

jQuery Learning Center

Google Hosted Libraries

Upvotes: 1

Related Questions