JQuery function not working in my MVC app
The function doesn't work in my MVC
application onclick
.
@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>
}
The above code has script
my code tag and below is the html code. I don't understand why it doesn't work. I wrote a warning to check if the tag is working. It works, but the problem isfunction 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: no search defined in HTMLAnchorElement.onclick (DaysOffer: 193)
How can I solve it.
Thanks in advance.
You have defined a function Search()
in your handler document.ready
, so it is not in scope window
as it should be when you call the function from an event attribute on*
. The same applies to your functions Count()
and ListResult()
.
To fix this, either move the function definition to the desired scope (i.e. outside $(document).ready()
), or use an unobtrusive event handler to attach events in your JS code. The latter is by far the best approach.
source to share
Move your functions outside document.ready()
. There is no need for them to be there, because in any case they will not be executed immediately. You have a scoping problem - your inline event handlers cannot see functions inside document.ready because they expect them to be in the global window context, which they don't.
Or, use unobtrusive event handlers instead of inline in your HTML, which will generally make your code easier to understand and maintain.
source to share
Define a function outside of a finished 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>
source to share