title: mvc3 razor - url.action javascript error onClick event
body: <p>I am having a problem with my url.action and my javascript onClick event call. What I am trying to do is pass my controller and actionresult method as a parameter for my javascript but I keep getting an error of:</p>
  
  <p>Microsoft JScript runtime error: Syntax error, unrecognized expression: /UserManager/filterGrid</p>
  
  <p>for this code:</p>
  
  <pre><code>&lt;div class="webgrid-filter"&gt;
  
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("filterGrid", "UserManager")')" id="chkboxGridFilter" /&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>view</strong></p>
  
  <pre><code>@model IEnumerable&lt;UserManager.Models.vw_UserManager_Model&gt;
  
  
  @*@model UserManager.Models.vw_UserManager_Model
  *@
  @{
      ViewBag.Title = "User Manager Dashboard";
  }
  
      @Html.ActionLink("Create New User", "CreateUser")
  
  
  &lt;div class="webgrid-filter"&gt;
  
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("filterGrid", "UserManager")')" id="chkboxGridFilter" /&gt;
  
  &lt;/div&gt;
  
  
  &lt;div class="webgrid-wrapper"&gt;
  
  
  
  @{
      ViewBag.Title = "Jobs";
      WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");
  
  }
  
      @grid.GetHtml(
      fillEmptyRows: true,
          tableStyle: "webgrid",
                  alternatingRowStyle: "webgrid-alternating-row",
                  headerStyle: "webgrid-header",
                  footerStyle: "webgrid-footer",
                  selectedRowStyle: "webgrid-selected-row",
              rowStyle: "webgrid-row-style",
          mode: WebGridPagerModes.All,
  columns: new[] {
      grid.Column("UserName"),
      grid.Column("salutation"),
      grid.Column("FirstName"),
      grid.Column("LastName"),
      grid.Column("Password"),
      //grid.Column("isactive"),
      //grid.Column(header: "Is logged in?", format: (model) =&gt; @Html.Raw("&lt;input type='checkbox' checked='" + ((model.isactive) ? "checked" : "unchecked") + "' /&gt;")),  
      grid.Column(header: "User logged in", format: @&lt;text&gt;&lt;input name="User logged in" 
        type="checkbox"  @(item.isactive == true ? "Checked" : null) onclick="logUserOff('@Url.Action("LogUserOff", "UserManager", new {userid = item.userid} )')" id="chkboxIsActive" /&gt;&lt;/text&gt;),
      grid.Column("isApproved"),  
      grid.Column("MaxConcurrentUsers"),
      grid.Column("email"),
      grid.Column("group_name"),
     grid.Column("module_name"), 
  
  
       grid.Column(header:"Edit", format:@&lt;text&gt;&lt;div id="btnEditSelectedRow"&gt;
           "@Html.ActionLink("Edit record", "EditUser", "UserManager", new {
           userid = item.userid,
           salutation = item.salutation,
           firstname = item.FirstName, 
           lastname = item.LastName, 
           password = item.Password, 
           isactive = item.isactive,
           isapproved = item.IsApproved,
           maxconcurrentusers = item.MaxConcurrentUsers,
           email = item.email, 
           module = item.module_name, 
           group = item.group_name }, null)&lt;/div&gt;&lt;/text&gt;),
  
      grid.Column(header:"Delete", format:@&lt;text&gt;&lt;div id="btnDelSelectedRow"&gt;
          "@Html.ActionLink("Delete record", "DeleteUser", "UserManager", new {
           userid = item.userid,
           username = item.UserName,
           salutation = item.salutation,
           firstname = item.FirstName, 
           lastname = item.LastName, 
           password = item.Password, 
           isactive = item.isactive, 
           email = item.email, 
           module = item.module_name, 
           group = item.group_name }, null)&lt;/div&gt;&lt;/text&gt;)
  
  
  })
  &lt;/div&gt;&lt;br /&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          // Disable checkboxs where a user is not active.
          $(".webgrid-wrapper input:not(:checked)").attr("disabled", "disabled");
  
          // Style tables.
          function jQueryUIStyling() {
              $('input:button, input:submit').button();
  
              $('.webgrid-wrapper').addClass('ui-grid ui-widget ui-widget-content ui-corner-all');
              $('.webgrid-title').addClass('ui-grid-header ui-widget-header ui-corner-top');
              jQueryTableStyling();
          } // end of jQueryUIStyling
  
          function jQueryTableStyling() {
              $('.webgrid').addClass('ui-grid-content ui-widget-content');
              $('.webgrid-header').addClass('ui-state-default');
              $('.webgrid-footer').addClass('ui-grid-footer ui-widget-header ui-corner-bottom ui-helper-clearfix');
          } // end of jQueryTableStyling
      });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function logUserOff(url) {
          var answer = confirm('Are you sure you want to save this data?')
          if (answer) {
  //            alert(url + ": " + value);
  
              $.ajax({
                  url: url,
                  type: "POST"
  //                data: value
              }).done(function () {
                  $(this).addClass("done");
              });
  
  
              return true;
          }
          else {
              return false;
          }
      };
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function filterGrid(url) {
          alert($(url).val());
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      function filterGrid(url) {
          alert($(url).val());
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Error originates from jquery-1.5.1:</p>
  
  <pre><code>throw"Syntax error, unrecognized expression: "+a
  </code></pre>
  
  <p>Anyone know what I am doing wrong? Thanks!</p>