load content without pageload

MB 273 posts 936 karma points

May 19, 2016 @ 19:53

Cheers everyone,

I've been working with Umbraco for a couple of days now. I'm working on a little project for myself to learn Umbraco.

But I just hit a wall and I hope you guys can help me out. My site so far can be seen here: www.sp34k.dk.

If you enter the site and choose "Gallery overview" you'll see some categories, Choose VUE.

Now, if you hover over an image and click on the title or "view page" you'll see an error, just ignore that.

What I wish to accomplish is to open the image in lightbox but on the right side of your screen I want the description to be displayed WITHOUT pageload.

I have simple RICH EDITOR which I'd like to display when you click on an image.

I think this requires some ajax call but I'm not familiar with how that works. Do any of you guys have suggestions? :o)

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

May 19, 2016 @ 21:19

You can use jQuery to do an AJAX post to a controller that then renders a CSHTML view and returns it as a string in a JSON response using this function: https://github.com/rhythmagency/rhythm.umbraco.extensions/blob/56a328f8c84d4f155d7201494be62ecfb0aaf32e/trunk/Rhythm.Extensions/Rhythm.Extensions/ExtensionMethods/ControllerExtensionMethods.cs#L28

I have done that in the past to, for example, render the "thank you" message for a contact form using an AJAX submission. That looks something like this:

// AJAX request.
$.ajax({
    url: "/someController/someActionMethod",
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    cache: false,
    timeout: 15000,
    data: JSON.stringify(submissionData),
    success: function (data, textStatus) {

        // Replace content.
        var newContent = $.parseHTML(data.contents, null, true);
        $wrapper.replaceWith(newContent);

        // Make the validator aware of the new DOM elements.
        $.validator.unobtrusive.parse(newContent);

    },
    error: function () {
        $submit.removeAttr("disabled");
        alert("Unknown error.");
    }
});

EDIT: I updated the code snippet (had some extra cruft in it and indenting was wrong).

Copy Link

MB 273 posts 936 karma points

May 20, 2016 @ 07:54

Hallo Nicolas and thank you for your reply!

I am however on deep water here since I've never worked with an ajax call before.

So far I've added a class in my App_Code containing the function mentioned above.

I then added a click function on my gallery page like this, which is a copy of your code and the url is pointing towards the function:

    $(".portfolioItem a").on("click", function () {
    // AJAX request.
    $.ajax({
        url: "../App_Code/galleryController",
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        cache: false,
        timeout: 15000,
        data: JSON.stringify(submissionData),
        success: function (data, textStatus) {

            // Replace content.
            var newContent = $.parseHTML(data.contents, null, true);
            $wrapper.replaceWith(newContent);

            // Make the validator aware of the new DOM elements.
            $.validator.unobtrusive.parse(newContent);

        },
        error: function () {
            $submit.removeAttr("disabled");
            alert("Unknown error.");
        }
    });
});

Now, I don't get any errors YET but what I'm wondering about is where you catch the properties from the page?

Copy Link

MB 273 posts 936 karma points

May 23, 2016 @ 13:20

I hope it's okay to "bump" a post here on the forum.

I have no experience in this particularly task working with ajax. I would be really happy if someone could direct me to a guide or maybe show me a real example of how you use the class above to parse/generate the content of a nodes property.

From what I understand, I need to fetch the pages properties content and run them through the class above and then use the ajax call to show the content on the page, correct?

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

May 23, 2016 @ 16:33

Here's an example of some submissionData:

var submissionData = {
    myModel: {
        FirstName: $("#FirstName").val(),
        LastName: $("#LastName").val(),
    }
};

Some further notes:

The URL is not a file URL (as you appear to be attempting to do). It is a URL created by mapping a route. In ASP.NET MVC, you must configure a route (i.e., URL) for your controller/action method. If you don't want to configure a route, Umbraco has some special controller types that create routes for you. In particular, you may want to look into surface controllers. You can read about the various controller types here: https://github.com/kgiszewski/LearnUmbraco7/tree/master/Chapter%2006%20-%20Surface%2C%20WebAPI%20and%20RenderMVC%20Controllers
Surface controllers give you an Umbraco context, which you may need in order to work with content nodes (i.e., it would probably be best to use a surface controller rather than a plain controller).
I would also recommend not putting the code in App_Code. I tend to put all my controllers in a different project (a class library).

Here are some screenshots of an article I wrote for my company's knowledge base that describes more or less what you want to do:

Note that you don't have to quite do it this way. You can calling BeingUmbracoForm as Umbraco will create a URL for the surface controller, which means you won't need the ufprt field generated by BeginUmbracoForm. That is explained in more detail in the above Learn Umbraco 7 link.

Copy Link

MB 273 posts 936 karma points

May 30, 2016 @ 12:45

Thank you for your detailed response Nicholas! A friend and I sat down and found a solution. It might not be the best solution (please feel free to commend on the code).

Here's how we did it:

We created a folder entitled Controller
We created a class entitled PortfolioSurfaceController
We added this code:

namespace Sp34k.Controllers { public class GalleryItem { public string Description { get; set; } }

public class PortfolioSurfaceController : SurfaceController { public ActionResult GetCategoryDetails(int id) { GalleryItem gItem = new GalleryItem(); var node = Umbraco.TypedContent(id);
```
    gItem.Description = node["mainContent"].ToString();


return Json(gItem, JsonRequestBehavior.AllowGet);


}
```
} }

4) We added the following on our page:

 $("li.portfolioItem").on("click", function () {
        $(this).toggleClass("active");
        $(divs).addClass("toggled");
        var id = $(this).attr("data-Id");
        $.ajax({
            url: "/umbraco/Surface/PortfolioSurface/GetCategoryDetails/" + id,
            success: function (data) {
                $("#desc").html(data.Description);
            }
        });

What really confused me about the guide on Github was the default URL because it doesn't work if you add the exact class name. You have to leave "controller" out of the name.

So instead of:

/umbraco/Surface/PortfolioSurfaceController/GetCategoryDetails/

You have to leave out "Controller like so:

/umbraco/Surface/PortfolioSurface/GetCategoryDetails/

But we figured it out and it works like a charm :)

Copy Link

is working on a reply...

Flag this post as spam?

Load content without pageload