CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvc
user6239546
user6239546

Reputation:

jQuery function is not working in my MVC Application

In my MVC application onclick function is not working. 

@section Scripts{
    <script src="~/Scripts/plugins/toastr/toastr.min.js"></script>
    <script>
        $(document).ready(function () {

            var page = 0;
            var type = "Category";

            function Count(param) {
                if (param === 1) {
                    page++;
                }
                else if (param === -1) {
                    if (count === 0) {
                        return;
                    }
                    page--;
                }

            }

            function Search() {
                var query = $("#searchquery").val();

            }

            function ListResult(param) {

                if (param === "Category") {
                    type = param;
                    page = 0;
                    $(".category_type").css({ "color": "green" });
                } else if (param === "Product") {
                    type = param;
                    page = 0;
                    $(".product_type").css({ "color": "green" });
                }

            }
        });
    </script>
}

In the Code above, there is a script tag of my code, and code below is the html part. I don't understand why it is not working . I wrote alert to test if tag is working. It is working but problem is function is not defined

 <a class="btn btn-lg btn-primary" type="button" onclick="Search()">
                            @Resources.Resource.btn_Search
                        </a> 
 <a class="btn btn-white btn-sm" onclick="Count(1)"><i class="fa fa-arrow-left"></i></a>
                <a class="btn btn-white btn-sm" onclick="Count(-1)"><i class="fa fa-arrow-right"></i></a>

  <li><a href="#" onclick="ListResult('Category')" class="category_type type"style="color: green"><i class="fa fa-folder category_type type"style="color: green"></i> @Resources.Resource.Categories</a></li>
                            <li><a href="#" onclick="ListResult('Product')"class="product_type type"><i class="fa fa-folder product_type type"></i> @Resources.Resource.Products</a></li>

DaysOffer:193 Uncaught ReferenceError: Search is not defined at HTMLAnchorElement.onclick (DaysOffer:193)

How can I resolve it.

Thanks in advance.

Upvotes: 3

Views: 1383

Answers (3)

Govind Samrow
Govind Samrow

Reputation: 10179

Define function outside ready function:

var page = 0;
var type = "Category";

function Count(param) {
  if (param === 1) {
    page++;
  } else if (param === -1) {
    if (count === 0) {
      return;
    }
    page--;
  }

}

function Search() {
   alert("Search function triggered")
  var query = $("#searchquery").val();

}

function ListResult(param) {

  if (param === "Category") {
    type = param;
    page = 0;
    $(".category_type").css({
      "color": "green"
    });
  } else if (param === "Product") {
    type = param;
    page = 0;
    $(".product_type").css({
      "color": "green"
    });
  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a class="btn btn-lg btn-primary" type="button" onclick="Search()">
                            @Resources.Resource.btn_Search
                        </a>
<a class="btn btn-white btn-sm" onclick="Count(1)"><i class="fa fa-arrow-left"></i></a>
<a class="btn btn-white btn-sm" onclick="Count(-1)"><i class="fa fa-arrow-right"></i></a>

<li><a href="#" onclick="ListResult('Category')" class="category_type type" style="color: green"><i class="fa fa-folder category_type type"style="color: green"></i> @Resources.Resource.Categories</a></li>
<li><a href="#" onclick="ListResult('Product')" class="product_type type"><i class="fa fa-folder product_type type"></i> @Resources.Resource.Products</a></li>

Upvotes: 0

ADyson
ADyson

Reputation: 61784

Move your functions outside document.ready(). There's no need for them to be there, because they wouldn't execute immediately anyway. You're having a scoping problem - your inline event handlers can't see the functions inside document.ready because it expects them to be in the global window context, and they're not.

Or, use unobtrusive event handlers instead of inline ones in your HTML, which will generally make your code clearer and easier to maintain.

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337550

You've defined the Search() function within the document.ready handler, so it's not in scope of the window as it needs to be when you call the function from an on* event attribute. The same is also true of your Count() and ListResult() functions.

To fix this, either move the function definition to the correct scope (ie. outside $(document).ready()), or use an unobtrusive event handler to attach the events in your JS code. The latter is by far the better approach.

Upvotes: 6

Related Questions