Javascript not running in MVC Razor view

Question

I'm new to javascript and cannot figure out why this is not setting the visibility of the image to normal when IsImportant is true. I can see by inspecting the page that the if statement is being populated with true or false, but it doesn't affect the visibility.

Any help appreciated, thanks

@using DomainLayer.DTOs
@model MessageDto

<script type="text/javascript">
    function setImportantFlag()
    {
        if (@Json.Encode(Model.IsImportant))
        {
            document.getElementById('importantFlag').style.display = 'normal';
        }
    }
</script>

<img id="importantFlag" src="~/Images/important.png" style="display:none; height:100px; width:100px" />
@Html.Encode(Model.Title)<br />
@Html.Encode(Model.Author), @Html.Encode(Model.PublishDate)<br />
@Html.Encode(Model.Body) <br />
<br />

http://stackoverflow.com/questions/ask#

Edit:

The page looks like this

<script type="text/javascript">
    function setImportantFlag()
    {
        if (false)
        {
            document.getElementById('importantFlag').style.display = 'normal';
        }
    }

    setImportantFlag();
</script>

<img id="importantFlag" src="/Images/important.png" style="display:none; height:100px; width:100px" />
Big ol deibufouebwf<br />
, 01/01/0001 00:00:00<br />
 <br />
<br /><script type="text/javascript">
    function setImportantFlag()
    {
        if (true)
        {
            document.getElementById('importantFlag').style.display = 'normal';
        }
    }

    setImportantFlag();
</script>

<img id="importantFlag" src="/Images/important.png" style="display:none; height:100px; width:100px" />
News article one<br />
Author One, 13/06/2016 21:49:04<br />
Well if it isn&amp;#39;t body one! <br />
<br />

Your browser may be executing the script as soon as it renders the ending script tag and before your identified element has been rendered. That's why scripts should go at the bottom of the page and why jQuery has a ready() function: so the script isn't executed until the elements exist. — Suncat2000
– Suncat2000, Commented Nov 3, 2020 at 20:45

Rion Williams · Accepted Answer · 2016-06-14 22:21:47Z

1

I don't see where you are actually calling the function that you defined.

Try calling after it's declaration as follows :

<script type="text/javascript">
    // Declare the function
    function setImportantFlag(){
        if (@Json.Encode(Model.IsImportant)){
            document.getElementById('importantFlag').style.display = 'normal';
        }
    }
    // Actually call the function
    setImportantFlag();
</script>

UPDATE

After getting a look at your rendered markup, there are a few things that are likely causing this issue :

Duplicate id Attributes - The id attribute is unique by definition, so when you attempt to target it using the document.getElementById() function, it can cause some bizarre behavior.
Duplicate Function Definitions - Since you are also creating the function in the partial view, you'll have multiple of the same definition, which will continue to override one another.

Since all you are doing is setting if an element should be hidden or not, you could consider either explicitly not rendering the element based on your boolean property, you could use a ternary statement to render the appropriate style based on your Model :

<!-- Use a class to avoid duplicate id attributes -->
<img class="importantFlag" src="~/Images/important.png" style="display:@(Model.IsImportant ? "normal" : "none"); height:100px; width:100px" />

This would handle displaying the element if it was important and hiding it otherwise. It would also avoid any issues with duplicate id attributes and completely remove any Javascript functions.

edited Jun 14, 2016 at 22:21

answered Jun 14, 2016 at 20:43

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rion Williams Over a year ago

Do you have any errors that are present within the Developer Tools (F12) in your browser? Try checking the Console to see if anything is there. You might also want to try posting what your rendered function looks like as well.

Chris Over a year ago

My only errors in the console are about synchronous XMLHttpRequests being depreciated. jquery-1.10.2.js is also present under sources. I will add the rendered function to the question

Rion Williams Over a year ago

One of the issues is that you have multiple elements with the same id attribute being rendered, which is going to constitute invalid HTML. Consider adding something to make each of your ids unique and then using the function to trigger each one independently. You can actually probably avoid using Javascript entirely. I'll provide an example.

Chris Over a year ago

I appreciate I could have done it without Javascript, but I'm trying to learn it so wanted to understand what I was doing wrong. Duplicate id's and definitions were definitely problems that I've fixed, but also that I was trying to set the style to "normal", which despite being an option that works in razor when I set it explicitly, doesn't exist for reasons I don't understand. So I changed that to "inline" and it works now, thanks for your help!

Collectives™ on Stack Overflow

Javascript not running in MVC Razor view

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related