Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Daniel Rogers 134 posts 712 karma points
    Nov 19, 2023 @ 14:37
    Daniel Rogers
    0

    Server not running js routine on return from server

    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>
  • Huw Reddick 1870 posts 6395 karma points MVP 2x c-trib
    Nov 20, 2023 @ 14:04
    Huw Reddick
    0

    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

  • Daniel Rogers 134 posts 712 karma points
    Nov 20, 2023 @ 15:17
    Daniel Rogers
    0

    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

  • Huw Reddick 1870 posts 6395 karma points MVP 2x c-trib
    Nov 20, 2023 @ 17:41
    Huw Reddick
    0

    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

  • Daniel Rogers 134 posts 712 karma points
    Nov 21, 2023 @ 03:26
    Daniel Rogers
    0

    Hi Hew

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

    1. 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}

  • Huw Reddick 1870 posts 6395 karma points MVP 2x c-trib
    Nov 21, 2023 @ 06:52
    Huw Reddick
    0

    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?

  • Daniel Rogers 134 posts 712 karma points
    Nov 21, 2023 @ 07:56
    Daniel Rogers
    100

    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.

Please Sign in or register to post replies

Write your reply to:

Draft