Javascript displays code instead of executing

Question

I have an existing MVC - C# application that creates several "popup" screens that display or input needed information. I wanted to reuse the methodology in the application to pop up a version history display (listing the Versions with the changes that were made to them.

When ever I click on the link that should bring up the list, the javascript function that is called displays the function's code rather than executing the code.

I have this defined in my .css file. (This style under different names is used throughout the application)

#VersionHistoryList
{
 position: fixed;
 width: 50%;
 height: 70%;
 top: 15%;
 left: 25%;
 padding: 1%;
 background-color: white;
 border: 1px solid #444;
 border-radius: 5px;
 z-index: 100;
 box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
 color: #f5f1ef;
 background-image: url('../images/bg.jpg');
}

In my view, I have added the following code (Originally this view only displayed the current version number statically)

<div style="float: left; width: auto;">
 <span ><a style="color:White" href="javascript:toggleHistory">JPortal, version @ViewContext.Controller.GetType().Assembly.GetName().Version</a></span>
 <div id="VersionHistoryList" style="display: none;">
 <span style="font-size: larger;">Version History</span>
 <div style="height: calc(100% - 100px); overflow: auto;">
 <div class="SearchResults">
 @foreach (JudicialPortal.Models.VersionHistory.V sr in @JudicialPortal.Models.VersionHistory.HistoryList)
 {
 <span style="display: block; font-weight: bold;">
 Version @sr.Number
 </span>
 <span style="float: left; width: 10%;"> @sr.Date </span>
 <span style="float: right; text-align: left; width: 90%;">@sr.Description</span>
 }
 </div>
 </div>
 <button type="button" class="m-btn red-stripe" onclick="$('#VersionHistoryList').hide(0);" style="float: left;">
 Cancel<i class="icon-remove"></i></button>
 </div>
</div>

I added this .cs files to my model files (partial display here

namespace <applicationname..Models
{
 public class VersionHistory
 {
 public class V
 {
 public string Title { get; set; }
 public string Number { get; set; }
 public string Description { get; set; }
 public DateTime Date { get; set; }
 }
 public static List<V> HistoryList
 {
 get
 {
 var data = new List<V>();
 data.Add(new V() { Number = "1.0.1", Title = "Registration Setup", Date = new DateTime(2014, 7, 11), Description = "Setup For Registration." });
 data.Add(new V() { Number = "1.0.2", Title = ...

I should note that I took the above concept for the code from an ASPX application that displays the history of its application.

The javascript function that is called by the link in the in the tag is:

 toggleHistory = function () {
 $('#VersionHistoryList').toggle();
 $('#VersionHistoryList').focus();
 }

When the JavaScript is called instead of displaying the 'popup', it displays the code of the javacript function.

Image of screen displaying code

Any help would be most appreciated.

• amura.cxg: Where is your JavaScript function on the page? It seems like a tag may be missing somewhere causing the JavaScript to render as text

Answer 1

You should be striving to make your javascript as unobtrusive as possible.

Add a class to your links:

<span ><a style="color:White" class="toggleMe" href="#">JPortal, version @ViewContext.Controller.GetType().Assembly.GetName().Version</a></span>

Bind on the click action via class and disable the default a href action on doc ready:

$(document).ready(function(){
 $('.toggleMe').click(function(){
 $('#VersionHistoryList').toggle();
 $('#VersionHistoryList').focus();
 return false;
 });
});

• crmauch: That worked! Thank you! I'm not sure why that works and mine didn't, but it got me past my sticking point. Much appreciated.