server not running js routine on return from server

Daniel Rogers 134 posts 712 karma points

Nov 19, 2023 @ 14:37

Using Umbraco And Getting Started

Umbraco 9

using umbraco 12.3.3

I have a server reoutine that retirns a js script to call a routine to run with a couple of variables,

so it starts from an form

<form asp-action="SubmitForm" asp-controller="ExypnosCartSurface"
            data-ajax="true" data-ajax-method="POST"
            data-ajax-loading="#[email protected]">

This call the form fine

[HttpPost]
        public async Task<IActionResult> SubmitForm(ExypnosCartForm Model)
        {
............. 

return (IActionResult)new JavaScriptResult(HttpUtility.JavaScriptStringEncode(string.Format("toggleCartProcessStep({0},{1});", prevIndex.ToString(), Model.StepIndex.ToString())));
}

so the toggla process of js is this

function toggleCartProcessStep(prevStep, nextStep) {
    document.getElementById('cart-page-step-' + prevStep).classList.toggle('hidden');
    document.getElementById('StepIndex').value = nextStep;
    document.getElementById('cart-page-step-' + nextStep).classList.toggle('hidden');
}

The server side is call an runs fine on a local machine but when I run this on a live site my page is cleared and I left with "toggleCartProcessStep(0,0);"

Little more infomation if I change the code to

[HttpPost]
            public async Task<JavaScriptResult> SubmitForm(ExypnosCartForm Model)
            {
    ............. 

    return new JavaScriptResult(string.format("document.getElementById('cart-page-step-{0}').classList.toggle('hidden'); document.getElementById('StepIndex').value = '{1}'; document.getElementById('cart-page-step-{1}').classList.toggle('hidden');
", prevIndex.ToString(), Model.StepIndex.ToString())));
    }

I get the same issue

if I add this to the end of the document then I get the desired result.

<script>
document.getElementById('cart-page-step-0').classList.toggle('hidden'); document.getElementById('StepIndex').value = '1'; document.getElementById('cart-page-step-1').classList.toggle('hidden');
</script>

Copy Link

Huw Reddick 1752 posts 6117 karma points MVP c-trib

Nov 20, 2023 @ 14:04

This is really not the way to do this, however try something like

return new JavaScriptResult("<script>" + string.format("document.getElementById('cart-page-step-{0}').classList.toggle('hidden'); document.getElementById('StepIndex').value = '{1}'; document.getElementById('cart-page-step-{1}').classList.toggle('hidden');
", prevIndex.ToString(), Model.StepIndex.ToString())) + "</script>");

when returning javascript you must include script tags

Copy Link

Daniel Rogers 134 posts 712 karma points

Nov 20, 2023 @ 15:17

Thanks Huw for the suggestion but it didn't work. the result was

On a live site:

<script>document.getElementById('cart-page-step-0').classList.toggle('hidden'); document.getElementById('StepIndex').value = 1; document.getElementById('cart-page-step-1').classList.toggle('hidden');</script>

On a local site:

VM371:1 Uncaught SyntaxError: Unexpected token '<'
    at b (jquery.min.js?d=1:2:866)
    at Function.globalEval (jquery.min.js?d=1:2:2905)
    at text script (jquery.min.js?d=1:2:83080)
    at jquery.min.js?d=1:2:79470
    at l (jquery.min.js?d=1:2:79587)
    at XMLHttpRequest.<anonymous> (jquery.min.js?d=1:2:82355)

Note my original method works fine locally.

You mentioned its note the way to do this.

What I have a section of the page does a ajax call a service and returns to a block of html rendered on the server based on the input from the user.

The next step is a submit button that then on completion hides a div section and displays another. (The section that is not working on a live site)

before submitting twice more through the different steps.

So given that info how would you suggest doing it

Copy Link

Huw Reddick 1752 posts 6117 karma points MVP c-trib

Nov 20, 2023 @ 17:41

You should declare a data-ajax-success function and return an object from the controller, you can then parse this object in your success function and call your toggle function from there

Copy Link

Daniel Rogers 134 posts 712 karma points

Nov 21, 2023 @ 03:26

Hi Hew

So I think I've done this right. once again it works on a local machine but not live site.

created model on the server

public class _responce { public int Step { get; set; } public string JS { get; set; } public string Gateway { get; set; } public string View { get; set; } public int CartId { get; set; } public string ThemeFolder { get; set; } public string PaymentError { get; set; } public string UniqueID { get; set; } public string ApiId { get; set; } public string LocId { get; set; } }

modified surface controller

public async Task<_responce> SubmitForm(ExypnosCartForm Model)
        {
            _responce responce = new()
            {
                UniqueID = Model.UniqueID,
                Step = Model.StepIndex++,
                JS = string.Empty,
                Gateway = string.Empty,
                View = string.Empty,
                CartId = Model.CartId,
                ThemeFolder = Model.ThemeFolder,
                PaymentError = string.Empty
            };

.......................
return responce
}

added to

data-ajax-success="cart_ajax_Success"

add made a js routine

cart_ajax_Success = function (responce) {
    document.getElementById('StepIndex').value = responce.step;
    switch (responce.step) {
        case 1:
            document.getElementById('cart-page-step-0').classList.toggle('hidden');
            document.getElementById('cart-page-step-1').classList.toggle('hidden');
            break;
        case 2: 
            ..................................
            break;
        case 3:
            document.getElementById('cart-payment-overlay').classList.remove('show');
            ...........................................
            break;

    }
}

but sill returns a screen of text with {"step":1,"js":"","gateway":"square","view":"","cartId":193,"themeFolder":"qpfb","paymentError":"","uniqueID":"a1ed91da-706e-4d12-b2ee-e172007ccf95","apiId":null,"locId":null}

Copy Link

Huw Reddick 1752 posts 6117 karma points MVP c-trib

Nov 21, 2023 @ 06:52

Try using an API controller not a surface controller.

Although if it works locally it should work. Are you getting any errors in the browser debug console?

Copy Link

Daniel Rogers 134 posts 712 karma points

Nov 21, 2023 @ 07:56

Thanks for your help Huw.

Had a slight left of brain thought where maybe it had something to do with unobtrusive ajax with is the last js in the smidge generation. moved it ahead of my code routines and all is working fine.

So it seems that the unobtrusive ajax was not being loaded.

Copy Link

is working on a reply...

Flag this post as spam?

Server not running js routine on return from server