Search code examples
javascriptjqueryajaxjqgrid

calling ajax function show error tUncaught TypeError: $ is not a function using jquery

Hello I am using jqgrid and other function call using ajax when I use these two scripts then one script is working and one is not working. and show this error in the browser console.

Screen shot

screen shot

I try a lot of to remove this error but still, I am not able to remove to this error. kindly any expert tells me what is the problem and how can I resolved this error.

<script type="text/javascript" src="~/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/assets/jqgrid/js/jquery.jqgrid.min.js"></script>
<link href="~/assets/jqgrid/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/assets/jqgrid/jquery-ui-1.12.1.custom/jquery-ui.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>


 <script type="text/javascript">
        $.noConflict();
        var rowsToColor = [];
        jQuery(document).ready(function ($) {
            var $grid = $("#jqGrid");
            $grid.jqGrid({
                url: '@Url.Action("Ownsership")',
                datatype: 'json',
                postData: { Membership_ID: function () { return $("#mID").val(); } },
                jsonReader: {},
                colModel: [
                           { name: 'FileID', index: 'FileID', label: 'FILE ID', width: 3 },
                           { name: 'UnitNo', index: 'UnitNo', label: 'UNIT NO', width: 7 },
                           { name: 'TransDate', index: 'TransDate', label: 'TRANS DATE', width: 8 },
                           { name: 'Category', index: 'Category', label: 'FILE CATEGORY', width: 10 },
                           { name: 'Project', index: 'Project', label: 'PROJECT', width: 20 }
                ],
                additionalProperties: [],
                loadonce: true,
                navOptions: {
                    reloadGridOptions: { fromServer: true }
                },
                formEditing: {

                    closeOnEscape: true,
                    closeAfterEdit: true,
                    savekey: [true, 13],
                    reloadGridOptions: {

                        fromServer: true
                    }
                },
                viewrecords: true,
                height: 'auto',
                autowidth: true,
                rowNum: 100,
                rowList: [10, 20, 30, 50, 100, 500],

                rownumbers: true,

                sortname: "Name",
                sortorder: "desc"
            });
        });
    </script>
<script type="text/javascript">
    $(document).ready(function () {
        TotalFilesM();
        $("#Projectlist").change(function () {
            TotalFilesM();
        });

    });

    function TotalFilesM() {
       $.ajax({
            type: 'GET',
            url: '@Url.Action("mTotalFilesMember")',
            dataType: 'json',
            data: { PhaseID: $("#Projectlist").val() },
            success: function (mTotalMemberFiles) {
                $('#TotalFilesMember').html(mTotalMemberFiles);

            },
            error: function (ex) {
                var r = jQuery.parseJSON(response.responseText);
                alert("Message: " + r.Message);
            }
        });
        return false;
    }
</script>
Solution

  • You're using $.noConflict(), which removes the definition of $. After that, you need to use jQuery() instead of $().

    You can still use $ inside jQuery(document).ready(function($) { ... }). But your second <script> tag doesn't do it this way, it tries to use $(document).ready() at top-level.