Adding inline editing with jeditable - jquery

Question

I am following a tutorial to have inline editing. The tutorial i am following is as follows;

@model MyPro.Models.MyMod


@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery.jeditable.js" type="text/javascript"></script>

 $(".display-label").editable("/Contr/TestMethod");

@using (Html.BeginForm())
{


    <div class="field">
        <div class="display-label" id="lblHi">Hi</div>
    </div>

...

Now, when i double-click the label, it is not getting editable. Why is this ? Have i added the script tag correctly ?

Answer 1

I am not working with C# but just want to share couple suggestions:

1) try to add scrip open/close tag:

<script type="text/javascript">
$(".display-label").editable("/Contr/TestMethod");
</script>

2) add script to $.ready section

<script type="text/javascript">
  $(document).ready(function() {
    $(".display-label").editable("/Contr/TestMethod");
  })
</script>

3) make sure you have loaded jQuery itself. This is jQuery plugin so jQuery is a requirement in this case.