locked
how to call external custom made javascript file from mvc partial/view page RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User897704645 posted

    I've a simple user input validator javascript file, and I want to save it in a separate file and call it from multiple view page in my mvc project. When I try to do so, it is not working but when i write the javascript coad inside the same view page, it works. What do you think is the wrong I am doing.

    Here is my javascript code written in a separate .js file and saved under Scripts folder of my MVC project.

    input_validator.js

    function isInputNumber(evt)
    {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
    return true;
    }

    Here is my partial view page where I want to call this javascript code


    @{
    Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <head>
    @section     scripts
{
<script type="text\javascript" src="~/Views/Shared/input_validation.js"></script>
    <script type="text\javascript">isInputNumber(event)</script>
    }

</head>
    
    <div class="container">
@using (Html.BeginForm("MyController", "Home", FormMethod.Post))
{
    <table>
        <tr>
            <td>
                <label>Please enter Amount:</label>
            </td>
            <td>
                <input id="amount" name="id" maxlength="10" onkeypress="return isNumberKey(event)" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="Save"/>
            </td>
        </tr>
    </table>
}

    How do I call the function isNumberKey??

    function isInputNumber(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; }

    Tuesday, September 24, 2019 7:56 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi medwe,

    According to your description, I found that when you add the js reference, the type is written type="text\javascript" .

    Actually, you misplaced the symbol, it should be written like this : 

    type="text/javascript"

    And that's the reason why it shows undefined error message.

    After changed this , you also need to delete this reference to avoid triggering js function when page load:

        @section scripts
{
       <script type="text/javascript" src="~/Views/Shared/input_validation.js"></script>
        @*<script type="text/javascript">isNumberKey(event)</script>*@
    }

    About the type attribute of script tag , you can refer to this : HTML Script Tag Tutorial with Examples

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 26, 2019 1:43 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi medwe,

    After testing your code, I find that the reason you can't trigger the JS method is not where you put it, but because your js method name is inconsistent.

    function isInputNumber(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
     <input id="amount" name="id" maxlength="10" onkeypress="return isNumberKey(event)" />

    You should change your input tag like below:

     <input id="amount" name="id" maxlength="10" onkeypress="return isInputNumber(event)" />

    Then you will enter the isInputNumber method when you trigger the onkeypress event.

    Best Regards,

    YongQing.

    Wednesday, September 25, 2019 9:26 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User897704645 posted

    Hi Yongqing Yu;

    Thank you for your reply, 

    The js function name is consistent in my actual code, I did this mistake while copying my code to this forum. Sorry about that.

    When I right click on isInputNumber and go to definition, it is navigationg to the function name inside the js file, which is correct, but when running my program, it says undefined,  

    Let me know if you have any other suggestions

    Thank you

    Wednesday, September 25, 2019 1:11 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi medwe,

    According to your description, I found that when you add the js reference, the type is written type="text\javascript" .

    Actually, you misplaced the symbol, it should be written like this : 

    type="text/javascript"

    And that's the reason why it shows undefined error message.

    After changed this , you also need to delete this reference to avoid triggering js function when page load:

        @section scripts
{
       <script type="text/javascript" src="~/Views/Shared/input_validation.js"></script>
        @*<script type="text/javascript">isNumberKey(event)</script>*@
    }

    About the type attribute of script tag , you can refer to this : HTML Script Tag Tutorial with Examples

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 26, 2019 1:43 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User897704645 posted

    Hi Yongqing

    Thanks a lot for your support, that was definitly an issue

    I am not refereing my js file 

    @section scripts
    {
    <script src="@Url.Content("~/Views/Shared/input_validation.js")"></script>
    }

    and working as expected.

    Thanks a lot, appreciate your support.

    Thursday, September 26, 2019 1:19 PM