How to call a Javascript function inside a Jade/Pug file-CodePudding

I have a node.js project with frontend written in Pug. On the pug side I have written a Javascript function that is making an Ajax call and returning a string, I am trying to call this function inside that same pug file but it gives me a function not defined error. Can anyone please help with this?

header(class="global-header")
    p Current Status: #{getCurrentAvail()}

script.
    function getCurrentAvail(){
        $.ajax({
                url: "/admin/account/accountAvailability",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                async: false,
                success: function(data){
                    console.log("===1")
                    currentAvail = data.message
                    console.log(currentAvail)
                    return data.message
                },
                error: function(data){
                    console.log("Error function avail");
                }
            });
    }```

CodePudding user response：

It appears you have some piece of external data and you want that data to show in a rendered web page. You have two basic choices here:

1. Server-side fetching and rendering of the data. You can have your server get the data before rendering the page and pass that data to your template engine so your template engine can insert the data into the page at the appropriate place.

2. Client-side fetching and insertion of the data. You can call the getCurrentAvail() function from within a <script> tag in the web page. This will send the rendered web page to the browser. As it loads, the browser will then execute your script, fetch the data from your server and then you would use DOM APIs in the browser to insert the result of that ajax call into the web page to make it visible to the user in the page.

Also, please note that your function getCurrentAvail() has no return value at all. You aren't returning anything from the outer function. Your return data.message is inside the asynchronous success callback so that just go back to nowhere. If you're going to go with the client-side option #2, then you can just put the DOM manipulation code right into the success callback function.

Your current code is attempting to do 1/2 server and 1/2 client and that is not something that will work.

CodePudding user response：

At all times, have total clarity on what is in the server and what is in the client. Ajax methods run in the browser. A #{variable} construct exists only in Pug, and the substitution occurs on the server.

I think this is what you need:

header(class="global-header")
  p Current Status: 
    span#status

script.
  function getCurrentAvail(){
    $.ajax({
            url: "/admin/account/accountAvailability",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            async: false,
            success: function(data) {
                      document.getElementById("status").innerText = data.message
                     },
            error: function(data){
                     console.log("Error function avail");
                    }
           });
    }

  getCurrentAvail();