Can't get FormFactory.js to work

[khenzar]

Hi,
I have created a new sample ASP.NET 4.7 Web Application project with MVC.
Installed packages FormFactory, FormFactory.AspMvc and EmbeddedResourceVirtualPathProvider.
Added the asset tags to the in .\Views\Shared\_Layout.cshtml

<link href="/Content/FormFactory/FormFactory.css" rel="stylesheet" type="text/css"/>
<script src="/Scripts/FormFactory/FormFactory.js" type="text/javascript"></script>

Then I have added a model class EditableCollectionsExample same as in your example.

using FormFactory.Attributes;
...
public class EditableCollectionsExample
{
        public EditableCollectionsExample()
        {
            TopMovies = new List<Movie>()
            {
                new Movie() {Title = "Fight Club"},
                new Movie() {Title = "The Silent Partner" },
                new Movie() {Title = "Bambi"},
            };
        }
        [Description("Writable ICollections get rendered as re-orderable lists")]
        public ICollection<Movie> TopMovies { get; set; }
}

public class Movie
{
        [Required]
        [StringLength(64, MinimumLength = 2)]
        public string Title { get; set; }
}

Added this to the Home\Index.cshtml view:

@using FormFactory
@using FormFactory.AspMvc;
...
<form>
  @{           
    var me = new EditableCollectionsExample();
    @(FF.PropertiesFor(me).Render(Html))
  }
  <input type="submit" value="submit" />
</form>

Then page renders the collection form as expected, however, none of the Add, Remove, MoveUp or MoveDown buttons hit their JavaScript actions.
In the console I see this error in FormFactory.js:
https://imgur.com/a/4AnMo
That's this line:

$(document).on("focus", ".ff-behaviour", function () {
    var behaviour = $(this).data("ff-behaviour");
    if (ff.behaviours[behaviour]) {
        ff.behaviours[behaviour](this);
    }
});

I have tried adding some of the other example model classes and none of their JavaScript actions worked.
Any idea what I could be doing wrong?

I admit I'm not a pro front-end developer, that's why I wanted to use your awesome framework... to avoid the hassle of writing all the client-side scripts just for the little more complex data-entry UI we are working on.

Thanks a lot,
Ondrej

[mcintyre321]

Hi! Have you got jQuery and the other scripts that are referenced in the example site in your project?

…

On Sun, 15 Apr 2018, 16:03 Berstuk, ***@***.***> wrote: Hi, I have created a new sample ASP.NET 4.7 Web Application project with MVC. Installed packages FormFactory, FormFactory.AspMvc and EmbeddedResourceVirtualPathProvider. Added the asset tags to the in .\Views\Shared\_Layout.cshtml <link href="/Content/FormFactory/FormFactory.css" rel="stylesheet" type="text/css"/> <script src="/Scripts/FormFactory/FormFactory.js" type="text/javascript"></script> Then I have added a model class EditableCollectionsExample same as in your example. using FormFactory.Attributes; ... public class EditableCollectionsExample { public EditableCollectionsExample() { TopMovies = new List<Movie>() { new Movie() {Title = "Fight Club"}, new Movie() {Title = "The Silent Partner" }, new Movie() {Title = "Bambi"}, }; } [Description("Writable ICollections get rendered as re-orderable lists")] public ICollection<Movie> TopMovies { get; set; } } public class Movie { [Required] [StringLength(64, MinimumLength = 2)] public string Title { get; set; } } Added this to the Home\Index.cshtml view: @using FormFactory @using FormFactory.AspMvc; ... <form> @{ var me = new EditableCollectionsExample(); @(FF.PropertiesFor(me).Render(Html)) } <input type="submit" value="submit" /> </form> Then page renders the collection form as expected, however, none of the Add, Remove, MoveUp or MoveDown buttons hit their JavaScript actions. In the console I see this error in FormFactory.js: https://imgur.com/a/4AnMo That's this line: $(document).on("focus", ".ff-behaviour", function () { var behaviour = $(this).data("ff-behaviour"); if (ff.behaviours[behaviour]) { ff.behaviours[behaviour](this); } }); I have tried adding some of the other example model classes and none of their JavaScript actions worked. Any idea what I could be doing wrong? I admit I'm not a pro front-end developer, that's why I wanted to use your awesome framework... to avoid the hassle of writing all the client-side scripts just for the little more complex data-entry UI we are working on. Thanks a lot, Ondrej — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#61>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQ0-tEwl3d6XaT2O9EWSKSfFVJHLyzjks5to2EjgaJpZM4TVgoY> .

[khenzar]

Yes, I have also tried updating to different versions.
Might have been the same issue as #36

Maybe you can try to create a very simple reference project yourself and see if you can reproduce the issue.

Actually, I think it might have to do with the fact that jQuery bundle in recent ASP.NET 4.7 MVC templates get referenced using

@section Scripts {
  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
}

Which means that they will be processed after the HTML is loaded. But if you include your scripts using:
<script src="/Scripts/FormFactory/FormFactory.js" type="text/javascript"></script>
.. that will happen before the jQuery bundle is loaded.

I got it to work by referencing it in _Layout.cshtml like this:

<body>
...
@Scripts.Render("~/Scripts/jquery-3.3.1.js")    
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/FormFactory/FormFactory.js")
</body>

As you can see I had to use specific jQuery version, which is also what @Budsy mentions in issue #36 .

[mcintyre321]

I reference them like that (unbundled) so it's easier for people to see the dependencies for the page. Are you saying that you had to use JQuery version 3.1.1 (as in #36) ? I see 3.3.1 is the newest, and the one you referenced below. version of jquery

…

On 16 April 2018 at 13:12, Berstuk ***@***.***> wrote: Yes, I have also tried updating to different versions. Might have been the same issue as #36 <#36> Maybe you can try to create a very simple reference project yourself and see if you can reproduce the issue. Actually, I think it might have to do with the fact that jQuery bundle in recent ASP.NET 4.7 MVC templates get referenced using @section Scripts { @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") } Which means that they will be processed after the HTML is loaded. But if you include your scripts using: <script src="/Scripts/FormFactory/FormFactory.js" type="text/javascript"></script> .. that will happen before the jQuery bundle is loaded. I got it to work by referencing it in _Layout.cshtml like this: <body> ... @Scripts.Render("~/Scripts/jquery-3.3.1.js") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/Scripts/FormFactory/FormFactory.js") </body> As you can see I had to use specific jQuery version, which is also what @Budsy <https://github.com/Budsy> mentions in issue #36 <#36> . — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#61 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQ0-jS7aHoKMjrokcDvHGuA5SUp_1ECks5tpIqhgaJpZM4TVgoY> .

[khenzar]

Sorry for mystification, I didn't mean I had to use 3.1.1, only that I had to specify the version instead of using the bundle (which is the default for new ASP.NET MVC projects).
So this is just to let you know that it might be worth mentioning it in the documentation.

Having a very simple "real-world" example project in the demo could also be useful.
By "real-world" I mean using it in a view with an actual model instance coming from an actual controller action.
In your example you are iterating over a type enumeration from some NestedFormsExample class, which is far from what people would normally do.

[mcintyre321]

That's a great suggestion. I'd love to improve the docs, but unfortunately don't have the time any more. Contributions very welcome 😉 (and very quickly reviewed/accepted/deployed!).

…

On Mon, 16 Apr 2018, 13:40 Berstuk, ***@***.***> wrote: Sorry for mystification, I didn't mean I had to use 3.1.1, only that I had to specify the version instead of using the bundle (which is the default for new ASP.NET MVC projects). So this is just to let you know that it might be worth mentioning it in the documentation. Having a very simple "real-world" example project in the demo could also be useful. By "real-world" I mean using it in a view with an actual model instance coming from an actual controller action. In your example you are iterating over a type enumeration from some NestedFormsExample class, which is far from what people would normally do. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#61 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQ0-k3BxUOUX0vVBofHCQvChqqWREX4ks5tpJFZgaJpZM4TVgoY> .