I'm about 1 day old in using jquery, and is currently having a nightmare with it. I alreadt spent half of my day trying to get rid of this error. I did some reading after “googling” the error (sorry, Bing!) and discovered that most of these errors result from the jquery file not being properly loaded. Okay…that started to point me in the right direction but I still couldn’t figure out why it wasn’t pathing properly. I mean, I was doing as people said – I would drag the .js file into my designer and it would print out the proper path, but still the error shows.

Here's my exact code in my editor template (with the error):

@model bool
@{
    string status = "Active";
    string buttonValue = "Deactivate";
    string hiddenValue = "true";
    if (!ViewData.Model)
    {
       status = "Inactive";
       buttonValue = "Activate";
       hiddenValue = "false";
    }
}

<div style="width:100px; float:left;"> 
<img id = "AD_Img" src = "/Content/themes/base/images/icon_@(status).png" alt = @(status) />
<label for = "AD_Img" id = "AD_Label" >@(status)</label>
</div>
<div style="width:100px; float:left;"> 
<input type="button" id = "AD_Button" value = @(buttonValue) style = "width:100px" onclick = "ChangeStatus()" />
<input id = "AcntStatus" type = "hidden" name = "AcntStatus" value = @(hiddenValue) />
</div>

and in the same cshtml file, the script goes this way:

<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js">

function ChangeStatus()             
{
    var ButtonVal = $("#AD_Button").val();
    alert(ButtonVal);

        if (ButtonVal == "Deactivate")
        {
            var stat = "Inactive";
            var buttonVal = "Activate";
            var HiddenValue = "false";
        }

        else if (ButtonVal == "Activate")
        {
            stat = "Active";
            buttonVal = "Deactivate";
            HiddenValue = "true";
        }
            $("#AD_Img").attr({src: "/Content/themes/base/images/icon_"+stat+".png", alt: stat});
            $("#AD_Label").html(stat);
            $("#AD_Button").val(buttonVal);
            $("#AcntStatus").val(HiddenValue);    
}
 </script>

The debugger stops on the ChangeStatus function of the input element on the following line:

    <input type="button" id = "AD_Button" value = @(buttonValue) style = "width:100px" onclick = "ChangeStatus()" />

i tried to debug it by using this in my function code:

    function ChangeStatus()             
    {
       var ButtonVal = document.getElementById("AD_Button").value;
       alert(ButtonVal);
    }

And it works properly, it returns the exact string that I'm looking for without that error, but why? What's wrong with my codes? Please help me figure this out.

I'm about 1 day old in using jquery, and is currently having a nightmare with it. I alreadt spent half of my day trying to get rid of this error. I did some reading after “googling” the error (sorry, Bing!) and discovered that most of these errors result from the jquery file not being properly loaded. Okay…that started to point me in the right direction but I still couldn’t figure out why it wasn’t pathing properly. I mean, I was doing as people said – I would drag the .js file into my designer and it would print out the proper path, but still the error shows.

Here's my exact code in my editor template (with the error):

@model bool
@{
    string status = "Active";
    string buttonValue = "Deactivate";
    string hiddenValue = "true";
    if (!ViewData.Model)
    {
       status = "Inactive";
       buttonValue = "Activate";
       hiddenValue = "false";
    }
}

<div style="width:100px; float:left;"> 
<img id = "AD_Img" src = "/Content/themes/base/images/icon_@(status).png" alt = @(status) />
<label for = "AD_Img" id = "AD_Label" >@(status)</label>
</div>
<div style="width:100px; float:left;"> 
<input type="button" id = "AD_Button" value = @(buttonValue) style = "width:100px" onclick = "ChangeStatus()" />
<input id = "AcntStatus" type = "hidden" name = "AcntStatus" value = @(hiddenValue) />
</div>

and in the same cshtml file, the script goes this way:

<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js">

function ChangeStatus()             
{
    var ButtonVal = $("#AD_Button").val();
    alert(ButtonVal);

        if (ButtonVal == "Deactivate")
        {
            var stat = "Inactive";
            var buttonVal = "Activate";
            var HiddenValue = "false";
        }

        else if (ButtonVal == "Activate")
        {
            stat = "Active";
            buttonVal = "Deactivate";
            HiddenValue = "true";
        }
            $("#AD_Img").attr({src: "/Content/themes/base/images/icon_"+stat+".png", alt: stat});
            $("#AD_Label").html(stat);
            $("#AD_Button").val(buttonVal);
            $("#AcntStatus").val(HiddenValue);    
}
 </script>

The debugger stops on the ChangeStatus function of the input element on the following line:

    <input type="button" id = "AD_Button" value = @(buttonValue) style = "width:100px" onclick = "ChangeStatus()" />

i tried to debug it by using this in my function code:

    function ChangeStatus()             
    {
       var ButtonVal = document.getElementById("AD_Button").value;
       alert(ButtonVal);
    }

And it works properly, it returns the exact string that I'm looking for without that error, but why? What's wrong with my codes? Please help me figure this out.

• javascript
• jquery
• asp-mvc-3

Share Improve this question Follow edited Jan 27, 2012 at 5:14 ideAvi asked Jan 27, 2012 at 4:08 ideAviideAvi 13922 gold badges33 silver badges1313 bronze badges 4

• 2 Whenever I see ../ in javascript src tags, it's a big red flag. – Joel Coehoorn Commented Jan 27, 2012 at 4:28
• Why are you creating True and False variables? Just use the true and false literals there is no need for the vars and your code will run faster using the literals. Since you are new to jQuery, I'm assuming it is not an attempt at savings via variable renaming in minification. If that were the reason it's not necessary since you should also be gzipping your code and the difference after gzipping would be negligible and not worth the performance hit. – Useless Code Commented Jan 27, 2012 at 4:36
• @JoelCoehoorn: i see. then I should just use src="/Content/themes/base/images/icon_@(status).png" and src="/Scripts/jquery-1.5.1.min.js" instead. thanks for the tip. :) – ideAvi Commented Jan 27, 2012 at 5:03
• @UselessCode: I've created them for the purpose of assigning the value of the "@ViewBag.Model" and/or "@Model" into them (I used it before jquery's $ ) but using jquery makes it useless. Thanks for that ment too. :) – ideAvi Commented Jan 27, 2012 at 5:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This:

$("#AD_Img").attr(src: "../../../Content/themes/base/images/icon_"+stat+".png", alt: stat);

forces an Syntax-error. It has to be:

$("#AD_Img").attr({src: "../../../Content/themes/base/images/icon_"+stat+".png", alt: stat});

---

Edit:

Also take a look at your <script>, you can't mix external JS and internal JS.

This:

<script type="text/javascript" src="../../../Scripts/jquery-1.5.1.min.js">
//your code
</script>

Has to be splitted into

<script type="text/javascript" src="../../../Scripts/jquery-1.5.1.min.js"></script>

<script type="text/javascript">
//your code
</script>