Dotnetnuke Call ajax from a module

Question

I am now trying to build a dnn module using ajax calls. But there is a jquery error stating

SyntaxError: Unexpected token <

I have tried to work around with ajax "url: " and tried to create a new ascx at the root folder but still showing error 404.

My ajax call is as below

$.ajax({
       url: "NewsManagement.ascx/Add",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       method: "POST",
       beforeSend: function () {
       },
       cache: false,
       data: {
            title : $('#txt_Title').val(),
            news_content : $('#txt_Content').val(),
            image : $('#file_Image').val(),
            chapter_id : $('#sel_Chapter').val(),
            is_draft : $('#chk_Draft').val(),
            posted_date : $('#dp_PostDate').val(),
            created_by : "",
            lastupdate_by : ""
       },
       success: function (data) {
            console.log(data);
            if (data == "success") {
                console.log(data);
            }
            else {
                initMdlError("SERVER : " + data);
            }
        },
        error: function (data, textStatus, error) {
           // ERROR IS BEING CALLED FROM HERE
             console.log("JQUERY JAVASCRIPT : " + error);
             initMdlError(error);
        },
        complete: function () {
             console.log('complete');
        }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Is there any way to solve the issues?

Answer 1

The problem you're running into is that DNN isn't handling the requested URL properly that you are calling. If you want to call a service URL in DNN you're going to want to setup routes to handle the calls.

namespace Christoc.Com.Modules.SlidePresentation.services
{
    public class SlidePresentationRouteMapper : IServiceRouteMapper
    {
        public void RegisterRoutes(IMapRoute mapRouteManager)
        {
            mapRouteManager.MapRoute("SlidePresentation", "{controller}.ashx/{action}",
               new[] {"Christoc.Com.Modules.SlidePresentation.services"});
        }
    }
}

In the Controller you can define the methods available

[DnnAuthorize(AllowAnonymous = true)]
public ActionResult ListOfSlides()
{
    try
    {   
        var slides = Slide.GetSlides(ActiveModule.TabID, ActiveModule.ModuleID);
        return Json(slides, JsonRequestBehavior.AllowGet);
     }
     catch (Exception exc)
     {
         DnnLog.Error(exc);
         return Json(null, JsonRequestBehavior.AllowGet);
     }
}

https://slidepresentation.codeplex.com/SourceControl/latest#DesktopModules/SlidePresentation/services/SlidePresentationController.cs

sample Javascript

 //get slides on initialization
    this.init = function(element) {
        //var data = {}; //removed because we don't need this
        //data.moduleId = moduleId; //removed because we don't need this when calling setModuleHeaders
        //data.tabId = tabId; //removed because we don't need this
        //serviceFramework.getAntiForgeryProperty(); //removed because we don't need this
        $.ajax({
            type: "POST",
            cache: false,
            url: baseServicePath + 'ListOfSlides',
            //data: data,
            //dataType:"json",
            beforeSend: serviceFramework.setModuleHeaders
        }).done(function(data) {
            viewModel.slides = ko.utils.arrayMap(data, function(s) {
                return new slide(s);
            });
            ko.applyBindings(viewModel);
            $(element).jmpress();
        }).fail(function () {
            Console.Log('Sorry failed to load Slides');
        });
    };

Here's an example module that does this

https://slidepresentation.codeplex.com/

And a user group video I did years ago on this module. https://www.youtube.com/watch?v=hBqn5TsLUxA